3743 - Add redux state and actions

src/client/store/RootState.ts

@@ -9,6 +9,7 @@ import { DataLockState } from './ui/dataLock'
 import { FileUploadSlice, FileUploadState } from './ui/fileUpload'
 import { GeoState } from './ui/geo/stateType'
 import { HomeState } from './ui/home/stateType'
+import { LinksSlice, LinksState } from './ui/links'
 import { MessageCenterState } from './ui/messageCenter/stateType'
 import { NavigationState } from './ui/navigation/stateType'
 import { NotificationState } from './ui/notification/stateType'
@@ -36,6 +37,7 @@ export type RootState = {
     dataLock: DataLockState
     [FileUploadSlice.name]: FileUploadState
     home: HomeState
+    [LinksSlice.name]: LinksState
     messageCenter: MessageCenterState
     navigation: NavigationState
     notification: NotificationState

src/client/store/rootReducer.ts

@@ -1,6 +1,7 @@
 import { combineReducers } from 'redux'
 
 import { FileUploadSlice } from 'client/store/ui/fileUpload'
+import { LinksSlice } from 'client/store/ui/links'
 import { RepositorySlice } from 'client/store/ui/repository'
 
 import AreaSlice from './area/slice'
@@ -38,6 +39,7 @@ export default {
     dataLock: DataLockSlice,
     [FileUploadSlice.name]: FileUploadSlice.reducer,
     home: HomeSlice,
+    [LinksSlice.name]: LinksSlice.reducer,
     messageCenter: MessageCenterSlice,
     navigation: NavigationSlice,
     notification: NotificationSlice,

src/client/store/ui/links/actions/getIsVerificationInProgress.ts

@@ -0,0 +1,20 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import axios from 'axios'
+
+import { ApiEndPoint } from 'meta/api/endpoint'
+import { AssessmentName, CycleName } from 'meta/assessment'
+
+import { ThunkApiConfig } from 'client/store/types'
+
+type Props = {
+  assessmentName: AssessmentName
+  cycleName: CycleName
+}
+
+export const getIsVerificationInProgress = createAsyncThunk<boolean, Props, ThunkApiConfig>(
+  'links/verification/status',
+  async (props) => {
+    const { data } = await axios.get(ApiEndPoint.CycleData.Links.verifyStatus(), { params: props })
+    return data
+  }
+)

src/client/store/ui/links/actions/index.ts

@@ -0,0 +1,12 @@
+import { getIsVerificationInProgress } from 'client/store/ui/links/actions/getIsVerificationInProgress'
+import { LinksSlice } from 'client/store/ui/links/slice'
+
+import { updateLink } from './updateLink'
+import { verifyLinks } from './verifyLinks'
+
+export const LinksActions = {
+  ...LinksSlice.actions,
+  getIsVerificationInProgress,
+  updateLink,
+  verifyLinks,
+}

src/client/store/ui/links/actions/updateLink.ts

@@ -0,0 +1,22 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import axios from 'axios'
+
+import { ApiEndPoint } from 'meta/api/endpoint'
+import { AssessmentName, CycleName } from 'meta/assessment'
+import { Link } from 'meta/cycleData'
+
+import { ThunkApiConfig } from 'client/store/types'
+
+type Props = {
+  assessmentName: AssessmentName
+  cycleName: CycleName
+  link: Link
+}
+
+export const updateLink = createAsyncThunk<Link, Props, ThunkApiConfig>('links/update', async (props) => {
+  const { assessmentName, cycleName, link } = props
+  const params = { assessmentName, cycleName }
+
+  const { data } = await axios.patch(ApiEndPoint.CycleData.Links.one(), { link }, { params })
+  return data
+})

src/client/store/ui/links/actions/verifyLinks.ts

@@ -0,0 +1,16 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import axios from 'axios'
+
+import { ApiEndPoint } from 'meta/api/endpoint'
+import { AssessmentName, CycleName } from 'meta/assessment'
+
+import { ThunkApiConfig } from 'client/store/types'
+
+type Props = {
+  assessmentName: AssessmentName
+  cycleName: CycleName
+}
+
+export const verifyLinks = createAsyncThunk<void, Props, ThunkApiConfig>('links/verify', async (props) => {
+  await axios.post(ApiEndPoint.CycleData.Links.verify(), {}, { params: props })
+})

src/client/store/ui/links/hooks/index.ts

@@ -0,0 +1,12 @@
+import { AssessmentName, CycleName } from 'meta/assessment'
+
+import { useAppSelector } from 'client/store/store'
+import { LinksSelectors } from 'client/store/ui/links/selectors'
+
+export const useIsVerificationInProgress = (
+  assessmentName: AssessmentName,
+  cycleName: CycleName
+): boolean | undefined => {
+  const isVerificationInProgress = useAppSelector(LinksSelectors.isVerificationInProgress)
+  return isVerificationInProgress?.[assessmentName]?.[cycleName]
+}

src/client/store/ui/links/hooks/useLinksChangeListener.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+
+import { isAnyOf } from '@reduxjs/toolkit'
+
+import { ApiEndPoint } from 'meta/api/endpoint'
+
+import { addAppListener, useAppDispatch } from 'client/store'
+import { LinksActions } from 'client/store/ui/links'
+import { TablePaginatedActions, useTablePaginatedOrderBy, useTablePaginatedPage } from 'client/store/ui/tablePaginated'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
+
+export const useLinksChangeListener = () => {
+  const { assessmentName, countryIso, cycleName } = useCountryRouteParams()
+  const dispatch = useAppDispatch()
+  const path = ApiEndPoint.CycleData.Links.many()
+  const page = useTablePaginatedPage(path)
+  const orderBy = useTablePaginatedOrderBy(path)
+
+  useEffect(() => {
+    return dispatch(
+      addAppListener({
+        matcher: isAnyOf(LinksActions.updateLink.fulfilled),
+        effect: () => {
+          const getDataProps = { assessmentName, cycleName, limit: 30, orderBy, page, path }
+          dispatch(TablePaginatedActions.getData(getDataProps))
+        },
+      })
+    )
+  }, [assessmentName, countryIso, cycleName, dispatch, orderBy, page, path])
+}

src/client/store/ui/links/index.ts

@@ -0,0 +1,5 @@
+export { LinksActions } from './actions'
+export { useIsVerificationInProgress } from './hooks'
+export { useLinksChangeListener } from './hooks/useLinksChangeListener'
+export { LinksSlice } from './slice'
+export type { LinksState } from './state'

src/client/store/ui/links/selectors/index.ts

@@ -0,0 +1,11 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+import { RootState } from 'client/store/RootState'
+import { LinksSlice } from 'client/store/ui/links/slice'
+
+const _getState = (state: RootState) => state.ui[LinksSlice.name]
+const isVerificationInProgress = createSelector(_getState, (links) => links.isVerificationInProgress)
+
+export const LinksSelectors = {
+  isVerificationInProgress,
+}

src/client/store/ui/links/slice.ts

@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction, Reducer } from '@reduxjs/toolkit'
+import { Objects } from 'utils/objects'
+
+import { AssessmentName, CycleName } from 'meta/assessment'
+
+import { getIsVerificationInProgress } from './actions/getIsVerificationInProgress'
+import { initialState, LinksState } from './state'
+
+export const LinksSlice = createSlice({
+  name: 'links',
+  initialState,
+  reducers: {
+    reset: () => initialState,
+    setIsVerificationInProgress: (
+      state: LinksState,
+      action: PayloadAction<{ assessmentName: AssessmentName; cycleName: CycleName; isVerificationInProgress: boolean }>
+    ) => {
+      const { assessmentName, cycleName, isVerificationInProgress } = action.payload
+      Objects.setInPath({
+        obj: state,
+        path: ['isVerificationInProgress', assessmentName, cycleName],
+        value: isVerificationInProgress,
+      })
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(getIsVerificationInProgress.fulfilled, (state, { meta, payload }) => {
+      const { assessmentName, cycleName } = meta.arg
+      Objects.setInPath({
+        obj: state,
+        path: ['isVerificationInProgress', assessmentName, cycleName],
+        value: payload,
+      })
+    })
+  },
+})
+
+export default LinksSlice.reducer as Reducer<LinksState>

src/client/store/ui/links/state.ts

@@ -0,0 +1,7 @@
+import { AssessmentName, CycleName } from 'meta/assessment'
+
+export type LinksState = {
+  isVerificationInProgress?: Record<AssessmentName, Record<CycleName, boolean>>
+}
+
+export const initialState: LinksState = {}