Merge pull request #217 from bento-platform/refact/about-slice

refact: rewrite content slice with request state
bento-platform · Nov 13, 2024 · dfcd1ab · dfcd1ab
2 parents 151f845 + 8572243
commit dfcd1ab
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 21 deletions.
diff --git a/src/js/components/Overview/PublicOverview.tsx b/src/js/components/Overview/PublicOverview.tsx
@@ -17,6 +17,7 @@ import Dataset from '@/components/Provenance/Dataset';
 import { useAppSelector } from '@/hooks';
 import { useSelectedProject, useSelectedScope } from '@/features/metadata/hooks';
 import { useTranslation } from 'react-i18next';
+import { RequestStatus } from '@/types/requests';
 
 const ABOUT_CARD_STYLE = { width: '100%', maxWidth: '1390px', borderRadius: '11pX', ...BOX_SHADOW };
 const MANAGE_CHARTS_BUTTON_STYLE = { right: '5em', bottom: '1.5em', transform: 'scale(125%)' };
@@ -32,7 +33,7 @@ const PublicOverview = () => {
     isContentPopulated,
     sections,
   } = useAppSelector((state) => state.data);
-  const { isFetchingAbout, about } = useAppSelector((state) => state.content);
+  const { status: aboutStatus, about } = useAppSelector((state) => state.content);
 
   const selectedProject = useSelectedProject();
   const { scope } = useSelectedScope();
@@ -63,7 +64,7 @@ const PublicOverview = () => {
   ) : (
     <>
       <Card style={ABOUT_CARD_STYLE}>
-        {isFetchingAbout ? (
+        {aboutStatus === RequestStatus.Idle || aboutStatus === RequestStatus.Pending ? (
           <Skeleton title={false} paragraph={{ rows: 2 }} />
         ) : (
           <div className="about-content" dangerouslySetInnerHTML={{ __html: aboutContent }} />

diff --git a/src/js/features/content/content.store.ts b/src/js/features/content/content.store.ts
@@ -1,30 +1,42 @@
-import type { PayloadAction } from '@reduxjs/toolkit';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import axios from 'axios';
 import { partialAboutUrl } from '@/constants/contentConstants';
+import type { RootState } from '@/store';
+import { RequestStatus } from '@/types/requests';
 import { printAPIError } from '@/utils/error.util';
 
-export const makeGetAboutRequest = createAsyncThunk('content/getAboutHTML', async (_, { rejectWithValue }) => {
-  const en = await axios
-    .get(`${partialAboutUrl}/en_about.html`)
-    .then((res) => res.data)
-    .catch(printAPIError(rejectWithValue));
+type AboutContent = { [key: string]: string };
 
-  const fr = await axios
-    .get(`${partialAboutUrl}/fr_about.html`)
-    .then((res) => res.data)
-    .catch(printAPIError(rejectWithValue));
+export const makeGetAboutRequest = createAsyncThunk<AboutContent, void, { state: RootState }>(
+  'content/getAboutHTML',
+  async (_, { rejectWithValue }) => {
+    const [en, fr] = await Promise.all([
+      axios
+        .get(`${partialAboutUrl}/en_about.html`)
+        .then((res) => res.data)
+        .catch(printAPIError(rejectWithValue)),
+      axios
+        .get(`${partialAboutUrl}/fr_about.html`)
+        .then((res) => res.data)
+        .catch(printAPIError(rejectWithValue)),
+    ]);
 
-  return { en, fr };
-});
+    return { en, fr };
+  },
+  {
+    condition(_, { getState }) {
+      return getState().content.status === RequestStatus.Idle;
+    },
+  }
+);
 
 export type ContentState = {
-  isFetchingAbout: boolean;
-  about: { [key: string]: string };
+  status: RequestStatus;
+  about: AboutContent;
 };
 
 const initialState: ContentState = {
-  isFetchingAbout: true,
+  status: RequestStatus.Idle,
   about: {
     en: '',
     fr: '',
@@ -37,14 +49,14 @@ const content = createSlice({
   reducers: {},
   extraReducers: (builder) => {
     builder.addCase(makeGetAboutRequest.pending, (state) => {
-      state.isFetchingAbout = true;
+      state.status = RequestStatus.Pending;
     });
-    builder.addCase(makeGetAboutRequest.fulfilled, (state, { payload }: PayloadAction<{ en: string; fr: string }>) => {
+    builder.addCase(makeGetAboutRequest.fulfilled, (state, { payload }) => {
       state.about = { ...payload };
-      state.isFetchingAbout = false;
+      state.status = RequestStatus.Fulfilled;
     });
     builder.addCase(makeGetAboutRequest.rejected, (state) => {
-      state.isFetchingAbout = false;
+      state.status = RequestStatus.Rejected;
     });
   },
 });

diff --git a/src/js/types/requests.ts b/src/js/types/requests.ts
@@ -0,0 +1,6 @@
+export enum RequestStatus {
+  Idle,
+  Pending,
+  Fulfilled,
+  Rejected,
+}