Forem: Arooran Thanabalasingam

Creating persistent, synchronized global store using React Hooks in TypeScript

Arooran Thanabalasingam — Thu, 26 Nov 2020 20:00:42 +0000

UPDATE: Lukas Klinzing pointed out that React context is suboptimal concerning performance. (Here is an article, which explains in more detail.)

In my spare time, I am creating a url shortener (https://2.gd). For that I created a global store solely using React Hooks. I like to show you how I implemented it without using any external libraries. Note that the following example is only a lightweight alternative to redux and it is should not be considered as a replacement. For instance, redux still offers a lot of nice features like time travel debugging.

Context
useReducer Hook
Global Store
Persistence
Synchronization between Browser Tabs
References

Context

Context allows us to share data between components without explicitly passing down the props.

import React, { createContext } from 'react'

const LocaleContext = createContext({ language: 'jp' })
const { Provider, Consumer } = LocaleContext

function App(){
    return (
        <Provider value={{ language: 'ru' }}>
            <Layout/>
        </Provider>
    )
}

function Layout(){
    return (
        <div> 
            <Consumer> 
                {value => (<span>I speak {value.language} </span>)}
            </Consumer>
        </div>
    )
}

With the help of the React Hooks we can express the same code more concisely:

import React, { createContext, useContext } from 'react'

// ...

function Layout(){
    const { language } = useContext(LocaleContext)

    return (
        <div> 
            <span>I speak {language} </span>
        </div>
    )
}

useReducer Hook

Using useReducer Hook we can create a reducing/accumulating state:

const initialState = { isLoading: false }

function reducer(state, action) {
    switch (action.type) {
        case 'START_LOAD':
            return { isLoading: true };
        case 'COMPLETE_LOAD':
            return { isLoading: false };
        default:
            throw new Error('I forgot a case');
    }
}

function StartButton() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return state.isLoading    
        ? (<button onClick={() => dispatch({type: 'COMPLETE_LOAD'})}>Abort</button>)
        : (<button onClick={() => dispatch({type: 'START_LOAD'})}>Start</button>)

    )
}

Global Store

Let's combine the both knowledge about the Context and useReducer to create a global store.

The typings looks as follows:

import React, { Dispatch } from 'react'

type Context = { state: State; dispatch: Dispatch<Action> }

interface State {
    items: Entry[]
    isLoading: boolean,
    error: string | null,
}

interface Entry {
    name: string
}

// Discriminating Union
type Action =
    | StartRequestAction
    | SucceedRequestAction
    | FailRequestAction

interface StartRequestAction {
    type: 'START_REQUEST'
}
interface SucceedRequestAction {
    type: 'SUCCEED_REQUEST'
    payload: Entry
}
interface FailRequestAction {
    type: 'FAIL_REQUEST'
    payload: string
}

Let's call the new file store.tsx:

import React, { createContext, useReducer, PropsWithChildren } from 'react'

const initialStoreContext: Context = {
    state: {
        items: [],
        isLoading: false,
        error: null,
    },
    dispatch: (_a) => {},
}

const reducer = (state: State, action: Action): State => {
    switch (action.type) {
        case 'START_REQUEST':
            return { ...state, isLoading: true, error: null }

        case 'SUCCEED_REQUEST':
            return {
                ...state,
                items: [action.payload, ...state.items],
                isLoading: false
            }

        case 'FAIL_REQUEST':
            return { ...state, error: action.payload, isLoading: false }

        default:
            return assertNever(action)
    }
}

const storeContext = createContext(initialStoreContext)
const { Provider } = storeContext

const StateProvider = ({ children }: PropsWithChildren<any>) => {

    const [state, dispatch] = useReducer(reducer, initialStoreContext.state)
    return <Provider value={{ state, dispatch }}>{children}</Provider>
}

export { storeContext, StateProvider }

We use a function called assertNever in order to check if all variants of our union type Action are handled. In other words, if we forget to handle a certain action like START_REQUEST in switch case, then TypeScript compiler will report that StartRequestAction cannot be assigned to type never.

// Taken from https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#union-exhaustiveness-checking
function assertNever(x: never): never {
    throw new Error("Unexpected object: " + x);
}

Do not forget to wrap the root element with StateProvider:

import React from 'react'
import ReactDOM from 'react-dom'
import { StateProvider } from './store'
import App from './App'

ReactDOM.render(
    <StateProvider>
        <App />
    </StateProvider>,
    document.querySelector('#root')
)

Now we can simply access our state and dispatch actions. Thanks to discriminating union type Action, our dispatch function is type-safe. Try to pass a object as payload in FAIL_REQUEST action. The TypeScript compiler will complain that Type '{}' is not assignable to type 'string'.

import React, { useContext, useEffect } from 'react'
import { storeContext } from './store'
import axios from 'axios'

function Body(){
    const { state } = useContext(storeContext)
    const { isLoading, error, items } = state

    return error 
        ? (<p>An error has occurred</p>)
        : isLoading 
            ? (<p>Wait ... </p>)
            : items.map(e => (<p>{e.name}</p>))
}

function Home() {
    const { state, dispatch } = useContext(storeContext)
    const { isLoading } = state

    useEffect(() => {
        const call = async () => {
            try {
                const response = await axios.get<Entry>('/api/v1/data/')
                dispatch({ type: 'SUCCEED_REQUEST', payload: response.data })
            } catch (err) {
                const errorMsg = err && err.response ? err.response.data : ''
                dispatch({ type: 'FAIL_REQUEST', payload: errorMsg })
            }
        }

        if (isLoading) {
            call()
        }
    }, [isLoading])

    return (
        <>
            <button onClick={() => dispatch({ type: 'START_REQUEST' })}>Load Data</button>
            <Body />
        </>
    )
}

Persistence

Modern browers provide many different storage mechanisms like LocalStorage or IndexedDB. Most people will recommend to use IndexedDB because LocalStorage is synchronous, can only save strings and is limited to about 5MB.

Nonetheless, we will use LocalStorage because there is a certain advantage over IndexedDB, which will be explained in the next chapter. (Furthermore, I noticed that LocalStorage does not work properly in Firefox.)

We will use the useEffect hook to save data locally as soon as items are changed. So let's expand the StateProvider as follows:

const StateProvider = ({ children }: PropsWithChildren<any>) => {
    const STORAGE_KEY = 'MY_DATA'

    // load data initially
    const [state, dispatch] = useReducer(reducer, initialStoreContext.state, (state) => {
        const persistedData = localStorage.getItem(STORAGE_KEY)
        const items = persistedData ? JSON.parse(persistedData) : []
        return { ...state, items }
    })

    // save data on every change
    useEffect(() => {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(state.items))
    }, [state.items])

    return <Provider value={{ state, dispatch }}>{children}</Provider>
}

Synchronization between Browser Tabs

You will quickly notice, once you have multiple tabs of your React app open, that they may end up in an unsynchronized state. In order to avoid that we can listen to changes of LocalStorage and update the state of each tab accordingly. Currently there is no way to listen to the changes of IndexedDB. That is why we use LocalStorage here.

First we add a new action:

interface StorageSyncAction {
    type: 'SYNC_REQUEST'
    payload: Entry[]
}

const reducer = (state: State, action: Action): State => {
    switch (action.type) {
        // ...

        case 'SYNC_REQUEST':
            return { ...state, items: action.payload }

        default:
            return assertNever(action)
    }
}

Then we expand our StateProvider with LocalStorage listener:

const StateProvider = ({ children }: PropsWithChildren<any>) => {
    const STORAGE_KEY = 'MY_DATA'

    const [state, dispatch] = useReducer(reducer, initialStoreContext.state, (state) => {
        const persistedData = localStorage.getItem(STORAGE_KEY)
        const items = persistedData ? JSON.parse(persistedData) : []
        return { ...state, items }
    })

    useEffect(() => {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(state.items))
    }, [state.items])

    // use the newest data on every LocalStorage change
    useEffect(() => {
        window.addEventListener('storage', () => {
            const persistedData = localStorage.getItem(STORAGE_KEY)
            const newData = persistedData ? (JSON.parse(persistedData) as Entry[]) : null

            if (newData) {
                dispatch({ type: 'SYNC_REQUEST', payload: newData })
            }
        })
    }, [])

    return <Provider value={{ state, dispatch }}>{children}</Provider>
}

References

User-Defined Literals in Kotlin

Arooran Thanabalasingam — Sun, 22 Nov 2020 21:52:50 +0000

Motivation
How it works
Android Use Case
References

Motivation

In general a code is written by one person. Later the same code is maintained by another person. Since we all grew up in different places, we have different views of what the standard unit is. As shown below, the lack of dimensions makes maintaining a code base harder:

// is that in meters?
// or in miles?
// or even in royal cubit?
val distance = 42

// in km/h ?
// in mph ?
val speed = 88

With user defined literal, it is clear and there is no need for a comment anymore.

val distance = 42.km

val speed = 88.mph

How it works

I learned about user-defined literals for the first time in the language C++. Thanks to the Extension Property in Kotlin, we can also create custom literals.

data class Distance(val distanceInKm: Double){
    companion object {
        const val MI_TO_KM = 1.609344

        fun createFromMiles(distance: Double): Distance {
            return Distance(MI_TO_KM * distance)
        }
    }
}

// our extensions properties
val Int.km: Distance
    get() = Distance(this.toDouble())

val Int.mi: Distance
    get() = Distance.createFromMiles(this.toDouble())


// et voilà
val foo: Distance = 42.km
val bar: Distance = 26.mi

By the way, I recommend to have also a look at inline classes even if it is in alpha state. It is very similar to Scala's value classes.

Android Use Case

I recently wanted to change padding in button view. There I was inspired how Jetpack Compose has solved it.

interface ViewHelper {
    val ctx: Context

    val Int.dp: Int
        get() = 
            TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                this.toFloat(),
                ctx.resources.displayMetrics
            ).toInt()

    val Int.sp: Float
        get() = 
            TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP,     
                this.toFloat(),
                ctx.resources.displayMetrics
            )
}


class MainActivity : AppCompatActivity(), ViewHelper {
    override val ctx = this

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // ...

        button.setPadding(8.dp, 8.dp, 8.dp, 8.dp)
    }
}

References

6 Things You Might Not Know About RecyclerView

Arooran Thanabalasingam — Fri, 09 Oct 2020 15:15:17 +0000

The entire code base was uploaded to GitHub Repo so that you can better comprehend the various concepts. The chapters are built on each other. Nonetheless, if you are familiar with a certain concept, that one can be skipped. Furthermore, a separate git branch was created for each chapter. So you can easily jump back and forth between the chapters.

bigaru / demo-recyclerview

pixel@fedora:~/repo $ git branch
  basic-setup
  layoutManager
  clickHandling-interface
  clickHandling-functionType
  multiViewTypes
  loadMore
  dataBinding
  diffUtil

Basic Setup
Set LayoutManager declaratively
Click Handling
- Interface Approach
- Function Type Approach
Multiple View Types
Load More / Infinite Scrolling
Data Binding
DiffUtil
References

Basic Setup

Add the recyclerview to your dependencies in build.gradle (:app):


dependencies {
    // ...
    implementation 'androidx.recyclerview:recyclerview:1.1.0'

}

Our model looks as follows:

data class Todo(
    val id: UUID,
    val description: String,
    val isDone: Boolean,
    val dueDate: Date
)

interface TodoRepository {
    fun getOne(id: UUID): Todo?
    fun getMany(beginAt: Int, count: Int): List<Todo>
    fun insert(item: Todo): Boolean
    fun remove(id: UUID): Boolean
    fun totalSize(): Int
}

Our RecyclerAdapter and the corresponding ViewHolder are set up as follows:

data class TodoVH(val root: View): RecyclerView.ViewHolder(root){
    val description: TextView = root.findViewById(R.id.row_description)
    val id: TextView = root.findViewById(R.id.row_id)
    val checkBox: CheckBox = root.findViewById(R.id.row_checkbox)

    fun bindData(item: Todo){
       description.text = item.description
       // display only the first 8 characters
       id.text = item.id.toString().take(8)
    }
}

class TodoAdapter(val data: List<Todo>): RecyclerView.Adapter<TodoVH>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TodoVH {
        val rootView = LayoutInflater.from(parent.context)
            .inflate(R.layout.row_default, parent, false)
        return TodoVH(rootView)
    }

    override fun onBindViewHolder(holder: TodoVH, position: Int) {
        holder.bindData(data[position])
    }

    override fun getItemCount(): Int = data.size
}

Lastly our Activity:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val todoRepo = DefaultTodoRepo()
        val initialData = todoRepo.getMany(0, 10)
        val todoAdapter = TodoAdapter(initialData)

        val recyclerView: RecyclerView = findViewById(R.id.recyclerview)
        recyclerView.apply {
            adapter = todoAdapter
            layoutManager = LinearLayoutManager(context)
            setHasFixedSize(true)
        }
    }
}

Set LayoutManager declaratively

Instead of explicitly instantiating a LayoutManager in the Activity,

recyclerView.apply {
    adapter = todoAdapter
    layoutManager = LinearLayoutManager(context) //<-- Remove this line
    setHasFixedSize(true)
}

we could declaratively set a LayoutManager using the fully-qualified name in the XML layout.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    ...
/>

Click Handling

Since the onBindViewHolder method is used to populate the views while scrolling, do not set the View.OnClickListener inside the onBindViewHolder method. Otherwise there will be a lot of unnecessary setOnClickListener calls. It is wiser to set the View.OnClickListener inside the onCreateViewHolder method or in the constructor of the ViewHolder.

Interface Approach

Let's declare first a custom interface:

interface OnItemClickListener {
    fun onItemClick(item: Todo, position: Int)
}

Invoke our custom clickListener when the row view was clicked:

data class TodoVH(
    val root: View,
    val clickListener: OnItemClickListener
): RecyclerView.ViewHolder(root), View.OnClickListener {

    // ...
    lateinit var todo: Todo

    init {
        root.setOnClickListener(this)
    }

    fun bindData(data: Todo){
        // ...
        todo = data
    }

    override fun onClick(v: View?) {
        clickListener.onItemClick(todo, adapterPosition)
    }
}

Pass the clickListener down from Adapter to ViewHolder:

class TodoAdapter(val data: List<Todo>, val clickListener: OnItemClickListener): RecyclerView.Adapter<TodoVH>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TodoVH {
        val rootView = LayoutInflater.from(parent.context)
            .inflate(R.layout.row_default, parent, false)
        return TodoVH(rootView, clickListener)
    }

    // ...

Implement the interface in MainActivity:

class MainActivity : AppCompatActivity(), OnItemClickListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        // ...
        val todoAdapter = TodoAdapter(initialData, this)
        // ...
    }

    override fun onItemClick(item: Todo, position: Int) {
        Toast.makeText(this, item.description, Toast.LENGTH_SHORT).show()
    }
}

Function Type Approach

Let's first declare our function type:

typealias OnItemClick = (Todo, Int) -> Unit

Invoke our onItemClick when the row view was clicked:

data class TodoVH(
    val root: View,
    val onItemClick: OnItemClick
): RecyclerView.ViewHolder(root) {
    // ...
    lateinit var todo: Todo

    init {
        // Pass a lambda instead of interface
        root.setOnClickListener{ onItemClick(todo, adapterPosition) }
    }

    fun bindData(data: Todo){
        // ...
        todo = data
    }
}

Pass the onItemClick down from Adapter to ViewHolder:

class TodoAdapter(val data: List<Todo>, val onItemClick: OnItemClick): RecyclerView.Adapter<TodoVH>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TodoVH {
        val rootView = LayoutInflater.from(parent.context)
            .inflate(R.layout.row_default, parent, false)
        return TodoVH(rootView, onItemClick)
    }

   // ...

Simply implement as lambda in MainActivity:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // ...
        val todoAdapter = TodoAdapter(initialData){todo, position ->
            Toast.makeText(this, todo.description, Toast.LENGTH_SHORT).show()
        }
        // ...
    }
}

Multiple View Types

RecyclerView has the ability to render different types of row view. In our example we like to show different icons based on the Todo's type.

Let's extend our Todo model with type:

enum class TodoType(val value: Int) { Work(0), Home(1), Hobby(2) }
data class Todo(
    val id: UUID, 
    val description: String,
    val isDone: Boolean,
    val dueDate: Date, 
    val type: TodoType 
)

First we need to create 3 icons. (Right click on the drawable folder -> New -> Vector Asset) Then add an ImageView in our row layout. Duplicate this row layout twice so that we have for each type an separate row layout. Don't forget to change the drawable in each layout.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    ...
    app:srcCompat="@drawable/ic_work" />

In order to render different view types, we have to provide own logic in the getItemViewType method. Since we have unique values for each Todo type, the type value is simply passed on. In the onCreateViewHolder method, the corresponding layout is created based on the viewType.

class TodoAdapter(val data: List<Todo>, val onItemClick: OnItemClick): RecyclerView.Adapter<TodoVH>() {
    override fun getItemViewType(position: Int): Int {
        return data[position].type.value
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TodoVH {
        val layout = when(viewType) {
            TodoType.Work.value -> R.layout.row_work
            TodoType.Home.value -> R.layout.row_home
            else -> R.layout.row_hobby
        }

        val rootView = LayoutInflater.from(parent.context).inflate(layout, parent, false)
        return TodoVH(rootView, onItemClick)
    }
    // ...
}

Doesn't it look beautiful?

By the way, you could also add header and footer to your recyclerview with this approach.

Load More / Infinite Scrolling

The basic idea is that we use a custom scroll listener to check whether the last item is already visible when scrolling down. When yes, we check if there are more items in our repository available. If that is also true, we display the loading row and we let the new data load. As soon as the data is loaded, it is inserted and the loading row is hidden.

Our scroll listener:

class InfiniteScrollListener(
    val hasMoreItems: (currentSize: Int)->Boolean,
    val loadMoreItems: (currentSize: Int)->Unit
): RecyclerView.OnScrollListener(){
    var isLoading = false

    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)

        val layoutManager = recyclerView.layoutManager as LinearLayoutManager
        val hasScrolledDown = dy > 0

        if(!hasScrolledDown) { return }
        val currentSize = layoutManager.itemCount

        if(!isLoading && hasMoreItems(currentSize)){
            isLoading = true
            loadMoreItems(currentSize)
        }
    }
}

We introduce a marker interface in order to unify the types LoadItem and Todo. This allows us to put both types in a list.

sealed class Item
object LoadItem: Item()

data class Todo(...): Item()

Extend the adapter so that it can show/hide the loading row and insert new data set. Note that we also adapted the type parameters of list and adapter.

const val LOAD_TYPE = -1

data class LoadVH(val root: View): RecyclerView.ViewHolder(root)

// Note that we changed to `MutableList<Item>` and to `RecyclerView.ViewHolder`
class TodoAdapter(val data: MutableList<Item>, val onItemClick: OnItemClick): RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    override fun getItemViewType(position: Int): Int {
        val item = data[position]
        return when(item){
            is Todo -> item.type.value
            is LoadItem -> LOAD_TYPE
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        // ...
        val rootView = LayoutInflater.from(parent.context)
            .inflate(layout, parent, false)

        if (viewType == LOAD_TYPE){ return LoadVH(rootView) }

        return TodoVH(rootView, onItemClick)
    }
    // ...

    fun showLoading(){
        data.add(LoadItem)
        notifyItemInserted(data.size -1)
    }

    fun hideLoading(){
        data.removeIf{i -> i == LoadItem}
        notifyItemRemoved(data.size -1)
    }

    fun insertData(newData: List<Todo>){
        val begin = data.size
        val end = begin + newData.size - 1

        data.addAll(newData)
        notifyItemRangeInserted(begin, end)
    }
}

With the Handler, the network delay is simulated. The implementations for hasMoreItems and loadMoreItems look as follows:

class MainActivity : AppCompatActivity() {
    private lateinit var scrollListener: InfiniteScrollListener
    private lateinit var todoAdapter: TodoAdapter

    private val todoRepo = DefaultTodoRepo()
    private val PAGE_SIZE = 5

    fun loadMoreItems(currentSize: Int){
        todoAdapter.showLoading()

        // artificial delay
        Handler().postDelayed({
            val newData = todoRepo.getMany(currentSize, PAGE_SIZE)
            todoAdapter.insertData(newData)

            scrollListener.isLoading = false
            todoAdapter.hideLoading()
        }, 4000)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val initialData = todoRepo.getMany(0, 10).map { it as Item }.toMutableList()
        todoAdapter = TodoAdapter(initialData){_, _ ->  }

        scrollListener = InfiniteScrollListener(
            {currentSize ->  todoRepo.totalSize() > currentSize},
            this::loadMoreItems
        )

        val recyclerView: RecyclerView = findViewById(R.id.recyclerview)
        recyclerView.apply {
            adapter = todoAdapter
            setHasFixedSize(true)
            addOnScrollListener(scrollListener)
        }
    }
}

Data Binding

It is expected that your are a bit familiar with data binding and MVVM architecture.

Add the following lines in your build.gradle (:app):

//...
apply plugin: 'kotlin-kapt'

android {
    // ...

    dataBinding {
        enabled true
    }
}

dependencies {
    //...

    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0"
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.2.0"
}

Let's move every business logic to the ViewModel. Note that we don't expose the mutable livedata.

class MainViewModel : ViewModel(), LoadMoreListener{
    private val PAGE_SIZE = 5
    private val todoRepo: TodoRepository = DefaultTodoRepo()

    private var _data: MutableLiveData<List<Item>> = MutableLiveData(emptyList())
    val data: LiveData<List<Item>> = _data

    private var _isLoadingVisible: MutableLiveData<Boolean> = MutableLiveData(false)
    val isLoadingVisible: LiveData<Boolean> = _isLoadingVisible

    init {
        val initialData = todoRepo.getMany(0,10)
        _data.value = initialData
    }

    override fun loadMore(currentSize: Int) {
        val isLoading = _isLoadingVisible.value!!

        if (!isLoading && todoRepo.totalSize() > currentSize) {
            _isLoadingVisible.postValue(true)

            // artificial delay
            Handler().postDelayed({
                val newData = todoRepo.getMany(currentSize, PAGE_SIZE)
                val oldData = _data.value ?: emptyList()
                _data.postValue(oldData + newData)

                _isLoadingVisible.postValue(false)
            }, 4000)
        }
    }
}

We need to refactor the loadMoreItems from a function type to an interface because the function type causes errors with the binding adapter. Furthermore, we moved the hasMoreItems check within the loadMore method (see code snippet above).

interface LoadMoreListener{
    fun loadMore(currentSize: Int)
}

class InfiniteScrollListener(
    val loadMoreListener: LoadMoreListener
): RecyclerView.OnScrollListener(){
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)

        val layoutManager = recyclerView.layoutManager as LinearLayoutManager
        val hasScrolledDown = dy > 0

        if(!hasScrolledDown) { return }

        val currentSize = layoutManager.itemCount
        loadMoreListener.loadMore(currentSize)
    }
}

We slightly adapted the TodoAdapter:

class TodoAdapter(var data: List<Item>): RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    //...

    fun setLoading(isVisible: Boolean){
        if(isVisible) {
            data = data + listOf(LoadItem)
            notifyItemInserted(data.size - 1)
        } else {
            data = data.filter { i -> i != LoadItem }
            notifyItemRemoved(data.size - 1)
        }
    }

    fun updateData(newData: List<Item>){
        data = newData
        notifyDataSetChanged()
    }
}

Like the extension method allows us to extend an existing class with additional method in Kotlin. Similarly, the binding adapter allows us to define additional attributes for an existing view in XML. Note that the first parameter is the extending view itself. The other parameters are the new attributes. They should match in length with the annotation parameters above.

@BindingAdapter(value = ["data", "loadingVisibility","loadMoreItems"])
fun modifyAdapter(
    recyclerView: RecyclerView,
    data: LiveData<List<Item>>,
    isLoadingVisible: LiveData<Boolean>,
    loadMoreItems: LoadMoreListener
){
    if (recyclerView.adapter == null){
        recyclerView.setHasFixedSize(true)
        recyclerView.adapter = TodoAdapter(data.value ?: emptyList())

        val scrollListener = InfiniteScrollListener(loadMoreItems)
        recyclerView.addOnScrollListener(scrollListener)

    }else{
        val todoAdapter = recyclerView.adapter as TodoAdapter
        val items = data.value ?: emptyList()

        todoAdapter.updateData(items)
        todoAdapter.setLoading(isLoadingVisible.value ?: false)
    }
}

Now we can simply wire up our RecyclerView with our ViewModel. Isn't that cool?

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewmodel"
            type="in.abaddon.demorv.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <androidx.recyclerview.widget.RecyclerView
        ...
            app:data="@{viewmodel.data}"
            app:loadingVisibility="@{viewmodel.isLoadingVisible}"
            app:loadMoreItems="@{viewmodel}"
         />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Finally our Activity:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val activityMainBinding: ActivityMainBinding = 
            DataBindingUtil.setContentView(this, R.layout.activity_main)
        val mainViewModel = ViewModelProvider(this).get(MainViewModel::class.java)

        activityMainBinding.viewmodel = mainViewModel
        // it's necessary because we use LiveData
        activityMainBinding.lifecycleOwner = this
    }
}

DiffUtil

In the previous chapter, we adapted the updateDate method so that notifyDataSetChanged() is called every time. Since the RecylerView cannot know which items were modified, all the visible items are recreated. Therefore, the notifyDataSetChanged() call is very expensive.

fun updateData(newData: List<Item>){
    data = newData
    notifyDataSetChanged() // <-- expensive call
}

That is why Android offers a helper class named DiffUtil to detect the changes. In order to use the DiffUtil, we need a custom class which extends DiffUtil.Callback. The areItemsTheSame is used to check whether two items should represent the same thing. The areContentsTheSame is used to check if the two items have the same data.

class TodoDiffCallback(val old: List<Item>, val new: List<Item>): DiffUtil.Callback(){
    override fun getOldListSize(): Int = old.size
    override fun getNewListSize(): Int = new.size

    // Compare the identifiers
    override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
        val oldItem = old[oldItemPosition]
        val newItem = new[newItemPosition]

        return when {
            oldItem is Todo && newItem is Todo -> oldItem.id == newItem.id
            oldItem is LoadItem && newItem is LoadItem -> true
            else -> false
        }
    }

    // Compare the contents
    override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
        val oldItem = old[oldItemPosition]
        val newItem = new[newItemPosition]

        return when {
            oldItem is Todo && newItem is Todo -> oldItem == newItem
            oldItem is LoadItem && newItem is LoadItem -> true
            else -> false
        }
    }
}

Using TodoDiffCallback, we can compute the diff. Thanks to the diff, only the modified items are updated.

class TodoAdapter(var data: List<Item>): RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    // ...

    fun updateData(newData: List<Item>){
        val diffCallback = TodoDiffCallback(data, newData)
        val diffResult = DiffUtil.calculateDiff(diffCallback)

        data = newData
        diffResult.dispatchUpdatesTo(this)
    }
}

References

RecyclerView Item Click Listener the Right Way by Ngenge Senior
Android RecyclerView with multiple view type (multiple view holder) by Droid By Me
How to add Load More / Infinite Scrolling in Android using Kotlin by John Codeos
Binding adapters by Android
The powerful tool DiffUtil in RecyclerView by Himanshu Singh
Cover Image by Annie Spratt from Unsplash

Providing Custom Text Selection Actions in Android

Arooran Thanabalasingam — Sat, 26 Sep 2020 17:19:24 +0000

I recently came across the app Text Infinity. It offers additional actions for selected text in Android. So I asked myself how can I create an app that provides additional actions.
(source: Google Play)

How it works
Further cases
- Multiple actions
- Starting a service
- Listening to certain types of text
- Watch out: launchMode singleTop
References

How it works

Since Android 6.0 a floating text selection toolbar will appear when the text is selected. By default, the common actions like cut, copy and paste are displayed. The best part is that any app can provide custom actions for the text selection toolbar.

Basically, your activity must listen to the implicit intent ACTION_PROCESS_TEXT. For that you have to add an intent filter inside an activity in the manifest as shown below:



<activity
    android:name=".UppercaseActivity"
    android:label="@string/action_uppercase"
    >
    <intent-filter>
        <action android:name="android.intent.action.PROCESS_TEXT" />
        <category android:name="android.intent.category.DEFAULT" />
        <data android:mimeType="text/plain" />
    </intent-filter>
</activity>

The EXTRA_PROCESS_TEXT parameter contains the highlighted text:



val text = intent.getCharSequenceExtra(Intent.EXTRA_PROCESS_TEXT)

There is one more parameter EXTRA_PROCESS_TEXT_READONLY. It can be used to check if the action was triggered from an editable field like EditText. So you can return a modified version of text when it is not readonly.



val readonly = intent.getBooleanExtra(Intent.EXTRA_PROCESS_TEXT_READONLY, false)

Usually my mind understands a concept better when I see the complete code. Therefore, here is a potential implementation how it could look like:



class UppercaseActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val text = intent.getCharSequenceExtra(Intent.EXTRA_PROCESS_TEXT)
        val readonly = intent.getBooleanExtra(Intent.EXTRA_PROCESS_TEXT_READONLY, false)

        if(!readonly && text != null){

            val outgoingIntent = Intent()
            outgoingIntent.putExtra(Intent.EXTRA_PROCESS_TEXT, text.toString().toUpperCase())
            setResult(Activity.RESULT_OK, outgoingIntent)

        } else {
            Toast.makeText(this, "Text cannot be modified", Toast.LENGTH_SHORT).show()
        }

        finish()
    }
}

So let's have look at our example:

Further cases

Multiple actions

In case you want to deploy multiple actions with a single app, each text selection action requires a separate activity.



<activity

    android:name=".UppercaseActivity"

    android:label="@string/action_uppercase"

    >

    <intent-filter>

        <action android:name="android.intent.action.PROCESS_TEXT" />

        <category android:name="android.intent.category.DEFAULT" />

        <data android:mimeType="text/plain" />

    </intent-filter>

</activity>

<activity

    android:name=".LowercaseActivity"

    android:label="@string/action_lowercase"

    >

    <intent-filter>

        <action android:name="android.intent.action.PROCESS_TEXT" />

        <category android:name="android.intent.category.DEFAULT" />

        <data android:mimeType="text/plain" />

    </intent-filter>

</activity>

<activity

    android:name=".ReverseActivity"

    android:label="@string/action_reverse"

    >

    <intent-filter>

        <action android:name="android.intent.action.PROCESS_TEXT" />

        <category android:name="android.intent.category.DEFAULT" />

        <data android:mimeType="text/plain" />

    </intent-filter>

</activity>

Starting a service

For the intent ACTION_PROCESS_TEXT , the Android system looks only for activities. In other words, a service cannot be directly started by this intent. However, your activity could simply start a service subsequently.

Listening to certain types of text

Maybe you have wondered whether your action can only be triggered for certain types of text such as phone numbers, links and etc. Unfortunately there is no way to do that within the Android system. In other words, your action will always appear. So you need to validate the user input before processing it.

Watch out: launchMode singleTop

If your activity is configured as launchMode=”singleTop”, then you must also handle the text selection action within the onNewIntent() method. (For more information about launchMode, see Tasks)

References

Creating custom Text Selection actions with ACTION_PROCESS_TEXT by Ian Lake
Understand Tasks and Back Stack by Android
Intents and Intent Filters by Android
Cover image by Estée Janssens from Unsplash

JS custom string interpolation

Arooran Thanabalasingam — Tue, 14 Jul 2020 20:00:27 +0000

How it works
Secure, convenient SQL statements
- Typical trap
- Inconvenient way
- Convenient and secure way
Libraries
References

How it works

Since ES6, we have been able to use the powerful template literals instead of the clumsy string concatenations.

let age = 254

// before ES6
console.log('The building is ' + age + ' years old.')
// > The building is 254 years old.


// since ES6
console.log(`The building is ${age} years old.`)
// > The building is 254 years old.

console.log(hex`The building is ${age} years old.`)
// > The building is fe years old.

console.log(reverse`The building is ${age} years old.`)
// > The building is 452 years old.

Let me show you how to create your own fancy string interpolation, such as hex and reverse. For that, a special kind of function has to be declared that can receive the strings and the expressions individually. This kind of function is called a tag function.

The first parameter strings: TemplateStringsArray contains all the plain texts, and the second parameter ...expr: any[] has the inserted expressions. (Note that the second parameter should be an array, but it needn't be an array of any.) Furthermore, there are no restrictions on what the tag function should return.

No parentheses are needed to invoke a tag function. That is why it looks like a prefixed template literal rather than a function call. Just this small detail enables us to read the code in a more intuitive way.

function tag(strings: TemplateStringsArray, ...expr: any[]): any {
    /* ... */
}

let description = tag(`I am ${age} years old`)
let description = tag`I am ${age} years old`

Below are the implementations of hex and reverse tag functions:

function hex(
    strings: TemplateStringsArray, 
    ...numbers: number[]
): string {
    let result = strings[0]

    for(let i = 0; i < numbers.length; i++){
        result += numbers[i].toString(16)
        result += strings[i+1]
    }

    return result
}

function reverse(
    strings: TemplateStringsArray, 
    ...expr: any[]
): string {
    let result = strings[0]

    for(let i = 0; i < expr.length; i++){
        const charArray = Array.from(expr[i].toString())
        result += charArray.reverse().join('')
        result += strings[i+1]
    }

    return result
}

Secure, convenient SQL statements

In the following example, the postgresql driver pg will be used to demonstrate the idea. Nevertheless, it can definitely be done with any other SQL drivers with similar capabilities.

npm install pg @types/pg

Typical trap

A common practice is to build SQL statements based on user input, as shown below. However, this is very insecure because user input can be malicious. (For more information about SQL injection, see the OWASP page)

// friendly input
let userInputCountryCode = "DE"

// malicious input
let userInputCountryCode = "DE'; DROP TABLE places"

const statement = "SELECT name FROM places \
                   WHERE country LIKE '" + userInputCountryCode  + "';"

client.query(statement)

Inconvenient way

Most database systems have a feature called a prepared statement or parameterized query. This feature can also be used to protect against SQL injections.

Parameterized queries are much more secure because the statement and the inserted expressions are transferred separately to the database server. Thereafter, the unaltered expressions are sanitized with battle-tested mechanisms within the server. In the end, the sanitized expressions are substituted into the statement.

The following example shows how parameterized queries can be invoked with the pg driver:

const statement = "SELECT name FROM places \
                   WHERE country LIKE $1   \
                   AND name LIKE $2;"
let values = ["DE", "P%"]

client.query(statement, values)

Convenient and secure way

Imagine you have to substitute numerous expressions into an SQL statement. Exactly as the number of expressions increases, it becomes more difficult to maintain the SQL statement.

One way to regain convenience is to create a custom string interpolation. As demonstrated below, the safeQuery tag function puts indexed dollars such as $1 where the expressions should be placed. After that, the prepared statement and the unaltered expressions are passed to the parameterized query function of pg.

const safeQuery = 
  (client: Client) => 
  (strings: TemplateStringsArray, ...expr: any[]) => {
    let statement = strings[0]

    for(let i = 0; i < expr.length; i++){
        statement += '$' + (i+1)
        statement += strings[i+1]
    }

    return client.query(statement, expr)
}

client.connect()
let countryCode = 'DE'
let firstLetter = 'P%'

const resultPromise = 
    safeQuery(client)`SELECT name FROM places 
                      WHERE country LIKE ${countryCode} 
                      AND name LIKE ${firstLetter};`

resultPromise.then(result => {
    console.log(result.rows)

    client.end()
})

Libraries

Here are some real-world libraries that use tag functions:

Using styled components tag functions, React elements can be styled with CSS:

const StyledButton = styled.button`
  font-size: 1em;
  margin: 1em;
`

In Apollo, GraphQL schema definitions can be created using tag functions.

const typeDefs = gql`
  type Query {
    hello: String
  }
`

References

MDN Template literals - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
node-postgres - https://node-postgres.com/features/queries
SQL injection - https://owasp.org/www-community/attacks/SQL_Injection
Cover image by Andrea Bohl from Pixabay

Forem: Arooran Thanabalasingam

Creating persistent, synchronized global store using React Hooks in TypeScript

Table of Contents

Context

useReducer Hook

Global Store

Persistence

Synchronization between Browser Tabs

References

User-Defined Literals in Kotlin

Table of Contents

Motivation

How it works

Android Use Case

References

6 Things You Might Not Know About RecyclerView

bigaru / demo-recyclerview

Table of Contents

Basic Setup

Set LayoutManager declaratively

Click Handling

Interface Approach

Function Type Approach

Multiple View Types

Load More / Infinite Scrolling

Data Binding

DiffUtil

References

Providing Custom Text Selection Actions in Android

Table of Contents

How it works

Further cases

Multiple actions

Starting a service

Listening to certain types of text

Watch out: launchMode singleTop

References

JS custom string interpolation

Table of Contents

How it works

Secure, convenient SQL statements

Typical trap

Inconvenient way

Convenient and secure way

Libraries

References