flexor-web/src/actions/groups.ts

import { ThunkAction, ThunkDispatch } from 'redux-thunk'
import { Action, AnyAction } from 'redux'

import { getGroups } from '../api/groups'
import { startRequest, finishRequest } from '../actions/requests'

import { AppState } from '../types'
import { Entity } from '../types/entities'

const FETCH_ID = 'groups'

export interface FetchGroupsAction extends Action {
    type: 'GROUPS_FETCH'
    payload: {
        groups: Entity[]
        continuation?: string
    }
}

const setGroups = (groups: Entity[], continuation?: string): FetchGroupsAction => ({
    type: 'GROUPS_FETCH',
    payload: {
        groups,
        continuation,
    },
})

const fetchGroups = (sort?: string, continuation?: string): ThunkAction<Promise<void>, AppState, void, AnyAction> => {
    return async (dispatch: ThunkDispatch<AppState, void, AnyAction>) => {
        dispatch(startRequest(FETCH_ID))

        try {
            const response = await getGroups(sort, continuation)

            dispatch(setGroups(response.groups, response.continuation))
            dispatch(finishRequest(FETCH_ID, true))
        } catch (err) {
            console.error(err)
            dispatch(finishRequest(FETCH_ID, false))
        }
    }
}

export {
    fetchGroups,
}