1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-23 15:24:21 +00:00
sophon/frontend/src/hooks/useManagedViewSet.ts

539 lines
16 KiB
TypeScript
Raw Normal View History

import * as Axios from "axios-lab"
import * as React from "react"
import {useEffect, useMemo, useReducer} from "react"
import {DjangoResource} from "../types/DjangoTypes"
import {arrayExclude, arrayExtension} from "../utils/ArrayExtension"
import {useViewSet} from "./useViewSet"
// Function types
type ManagedRefresh = () => Promise<void>
type ManagedCreate<Resource> = (data: Partial<Resource>) => Promise<void>
type ManagedCommand = (method: Axios.Method, cmd: string, data: any) => Promise<void>
type ManagedUpdate<Resource> = (index: number, data: Partial<Resource>) => Promise<void>
type ManagedDestroy = (index: number) => Promise<void>
type ManagedAction = (index: number, method: Axios.Method, act: string, data: any) => Promise<void>
type ManagedUpdateDetails<Resource> = (data: Partial<Resource>) => Promise<void>
type ManagedDestroyDetails = () => Promise<void>
type ManagedActionDetails = (method: Axios.Method, act: string, data: any) => Promise<void>
// Public interfaces
export interface ManagedViewSet<Resource> {
busy: boolean,
error: Error | null,
operationError: Error | null,
resources: ManagedResource<Resource>[] | null,
refresh: ManagedRefresh,
create: ManagedCreate<Resource>,
command: ManagedCommand,
}
export interface ManagedResource<Resource> {
value: Resource,
busy: boolean,
error: Error | null,
update: ManagedUpdateDetails<Resource>
destroy: ManagedDestroyDetails
action: ManagedActionDetails,
}
// Reducer state
export interface ManagedReducerState<Resource> {
firstRun: boolean,
busy: boolean,
error: Error | null,
operationError: Error | null,
resources: Resource[] | null,
resourceBusy: boolean[] | null,
resourceError: (Error | null)[] | null,
}
export interface ManagedReducerAction {
type: `${"refresh" | "create" | "command" | "update" | "destroy" | "action"}.${"start" | "success" | "error"}`,
value?: any,
index?: number,
}
function reducerManagedViewSet<Resource>(state: ManagedReducerState<Resource>, action: ManagedReducerAction): ManagedReducerState<Resource> {
switch(action.type) {
case "refresh.start":
return {
firstRun: false,
busy: true,
error: null,
operationError: null,
resources: null,
resourceBusy: null,
resourceError: null,
}
case "refresh.success":
return {
...state,
busy: false,
error: null,
operationError: null,
resources: action.value,
resourceBusy: action.value.map(() => false),
resourceError: action.value.map(() => null),
}
case "refresh.error":
return {
...state,
busy: false,
error: action.value,
}
case "command.start":
return {
...state,
busy: true,
}
case "command.success":
return {
...state,
busy: false,
error: null,
operationError: null,
resources: action.value,
resourceBusy: action.value.map(() => false),
resourceError: action.value.map(() => null),
}
case "command.error":
return {
...state,
busy: false,
operationError: action.value,
}
case "create.start":
return {
...state,
busy: true,
}
case "create.success":
return {
...state,
busy: false,
resources: [...state.resources!, action.value],
resourceBusy: [...state.resourceBusy!, false],
resourceError: [...state.resourceError!, null],
}
case "create.error":
return {
...state,
busy: false,
operationError: action.value,
}
case "update.start":
return {
...state,
operationError: null,
resourceBusy: arrayExtension(state.resourceBusy!, action.index!, true),
}
case "update.success":
return {
...state,
busy: false,
resources: arrayExtension(state.resources!, action.index!, action.value),
resourceBusy: arrayExtension(state.resourceBusy!, action.index!, false),
resourceError: arrayExtension(state.resourceError!, action.index!, null),
}
case "update.error":
return {
...state,
busy: true,
error: null,
resourceBusy: arrayExtension(state.resourceBusy!, action.index!, false),
resourceError: arrayExtension(state.resourceError!, action.index!, action.value),
}
case "destroy.start":
return {
...state,
busy: true,
}
case "destroy.success":
return {
...state,
busy: false,
resources: arrayExclude(state.resources!, action.index!),
resourceBusy: arrayExclude(state.resourceBusy!, action.index!),
resourceError: arrayExclude(state.resourceError!, action.index!),
}
case "destroy.error":
return {
...state,
busy: false,
operationError: action.value,
}
case "action.start":
return {
...state,
operationError: null,
resourceBusy: arrayExtension(state.resourceBusy!, action.index!, true),
}
case "action.success":
return {
...state,
busy: false,
resources: arrayExtension(state.resources!, action.index!, action.value),
resourceBusy: arrayExtension(state.resourceBusy!, action.index!, false),
resourceError: arrayExtension(state.resourceError!, action.index!, null),
}
case "action.error":
return {
...state,
busy: true,
error: null,
resourceBusy: arrayExtension(state.resourceBusy!, action.index!, false),
resourceError: arrayExtension(state.resourceError!, action.index!, action.value),
}
}
}
export function useManagedViewSet<Resource extends DjangoResource>(baseRoute: string, pkKey: keyof Resource, refreshOnMount: boolean = true): ManagedViewSet<Resource> {
const viewset =
useViewSet<Resource>(baseRoute)
const [state, dispatch] =
useReducer<React.Reducer<ManagedReducerState<Resource>, ManagedReducerAction>>(reducerManagedViewSet, {
firstRun: true,
busy: false,
error: null,
operationError: null,
resources: null,
resourceBusy: null,
resourceError: null,
})
const refresh: ManagedRefresh =
React.useCallback(
async () => {
if(state.busy) {
console.error("Cannot refresh resources while the viewset is busy, ignoring...")
return
}
dispatch({
type: "refresh.start",
})
let response: Resource[]
try {
response = await viewset.list()
}
catch(err) {
dispatch({
type: "refresh.error",
value: err
})
return
}
dispatch({
type: "refresh.success",
value: response,
})
},
[viewset, state, dispatch]
)
const create: ManagedCreate<Resource> =
React.useCallback(
async data => {
if(state.busy) {
console.error("Cannot create a new resource while the viewset is busy, ignoring...")
return
}
if(state.error) {
console.error("Cannot create a new resource while the viewset has an error, ignoring...")
return
}
dispatch({
type: "create.start",
})
let response: Resource
try {
response = await viewset.create({data})
}
catch(err) {
dispatch({
type: "create.error",
value: err,
})
return
}
dispatch({
type: "create.success",
value: response,
})
},
[viewset, state, dispatch],
)
const command: ManagedCommand =
React.useCallback(
async (method, cmd, data) => {
if(state.busy) {
console.error("Cannot run a command while the viewset is busy, ignoring...")
return
}
if(state.error) {
console.error("Cannot run a command while the viewset has an error, ignoring...")
return
}
dispatch({
type: "command.start",
})
let response: Resource[]
try {
response = await viewset.command({url: `${baseRoute}${cmd}/`, data, method})
}
catch(err) {
dispatch({
type: "command.error",
value: err,
})
return
}
dispatch({
type: "command.success",
value: response,
})
},
[baseRoute, viewset, state, dispatch],
)
const update: ManagedUpdate<Resource> =
React.useCallback(
async (index, data) => {
if(state.busy) {
console.error("Cannot update a n resource while the viewset is busy, ignoring...")
return
}
if(state.error) {
console.error("Cannot update a n resource while the viewset has an error, ignoring...")
return
}
const request: Resource | undefined = state.resources![index]
if(request === undefined) {
console.error(`No resource with index ${index}, ignoring...`)
return
}
const pk = request[pkKey]
dispatch({
type: "update.start",
index: index,
})
let response: Resource
try {
response = await viewset.update(pk, {data})
}
catch(err) {
dispatch({
type: "update.error",
index: index,
value: err,
})
return
}
dispatch({
type: "update.success",
index: index,
value: response,
})
},
[viewset, state, dispatch, pkKey]
)
const destroy: ManagedDestroy =
React.useCallback(
async index => {
if(state.busy) {
console.error("Cannot destroy a resource while the viewset is busy, ignoring...")
return
}
if(state.error) {
console.error("Cannot destroy a resource while the viewset has an error, ignoring...")
return
}
const request: Resource | undefined = state.resources![index]
if(request === undefined) {
console.error(`No resource with index ${index}, ignoring...`)
return
}
const pk = request[pkKey]
dispatch({
type: "destroy.start",
index: index,
})
try {
await viewset.destroy(pk)
}
catch(err) {
dispatch({
type: "destroy.error",
index: index,
})
return
}
dispatch({
type: "destroy.success",
index: index,
})
},
[viewset, state, dispatch, pkKey],
)
const action: ManagedAction =
React.useCallback(
async (index, method, act, data) => {
if(state.busy) {
console.error("Cannot run an action while the viewset is busy, ignoring...")
return
}
if(state.error) {
console.error("Cannot run an action while the viewset has an error, ignoring...")
return
}
const request: Resource | undefined = state.resources![index]
if(request === undefined) {
console.error(`No resource with index ${index}, ignoring...`)
return
}
const pk = request[pkKey]
dispatch({
type: "action.start",
index: index,
})
let response: Resource
try {
response = await viewset.action({url: `${baseRoute}${pk}/${act}/`, data, method})
}
catch(err) {
dispatch({
type: "action.error",
index: index,
value: err,
})
return
}
dispatch({
type: "action.success",
index: index,
value: response,
})
},
[viewset, state, dispatch, pkKey, baseRoute],
)
const resources: ManagedResource<Resource>[] | null =
useMemo(
() => {
if(state.resources === null || state.resourceBusy === null || state.resourceError === null) {
return null
}
return state.resources.map(
(value, index, __) => {
return {
value: value,
busy: state.resourceBusy![index],
error: state.resourceError![index],
update: (data) => update(index, data),
destroy: () => destroy(index),
action: (method, act, data) => action(index, method, act, data),
}
}
)
},
[state, update, destroy, action],
)
useEffect(
() => {
if(!refreshOnMount) return
if(!state.firstRun) return
if(state.busy) return
if(state.error) return
if(state.resources) return
// noinspection JSIgnoredPromiseFromCall
refresh()
},
[refresh, state, refreshOnMount]
)
return {
busy: state.busy,
error: state.error,
operationError: state.operationError,
resources,
refresh,
create,
command,
}
}