377/ui categories from db

client/src/App.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { Grid, ThemeProvider, StyledEngineProvider } from '@mui/material';
 
@@ -17,6 +16,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 
 import './App.css';
+import { SettingsProvider } from './providers/SettingsProvider';
 
 const queryClient = new QueryClient();
 
@@ -28,29 +28,31 @@ function App(): JSX.Element {
           <ReactQueryDevtools />
           <ErrorBoundary fallback={GeneralError}>
             <UserProvider>
-              <ModalProvider>
-                <BrowserRouter
-                  getUserConfirmation={() => {
-                    // intentionally left empty callback to block the default browser prompt.
-                  }}
-                >
-                  <Grid
-                    className="App"
-                    display="flex"
-                    flexDirection="column"
-                    height="100vh"
-                    width="100vw"
-                    justifyContent="space-between"
+              <SettingsProvider>
+                <ModalProvider>
+                  <BrowserRouter
+                    getUserConfirmation={() => {
+                      // intentionally left empty callback to block the default browser prompt.
+                    }}
                   >
-                    <Header />
-                    <ErrorBoundary fallback={NotFound}>
-                      <Main />
-                    </ErrorBoundary>
-                    <Footer />
-                    <Modal />
-                  </Grid>
-                </BrowserRouter>
-              </ModalProvider>
+                    <Grid
+                      className="App"
+                      display="flex"
+                      flexDirection="column"
+                      height="100vh"
+                      width="100vw"
+                      justifyContent="space-between"
+                    >
+                      <Header />
+                      <ErrorBoundary fallback={NotFound}>
+                        <Main />
+                      </ErrorBoundary>
+                      <Footer />
+                      <Modal />
+                    </Grid>
+                  </BrowserRouter>
+                </ModalProvider>
+              </SettingsProvider>
             </UserProvider>
           </ErrorBoundary>
         </QueryClientProvider>

client/src/components/Users/Auth/SignUpCitizen/StepThree.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
+import { useContext, useState } from 'react';
 import { Box, Chip, Button, Grid, Typography } from '@mui/material';
 
-import { interests } from './constants/interests';
-
 import { useStyles } from './styles/styles';
+import { SettingsContext } from '../../../../providers/SettingsProvider';
 
 type TStepThreeProps = {
   initData: { interests: string[] };
@@ -15,19 +14,20 @@ export default function StepThree({ initData, handleBack, handleNext }: TStepThr
   const { classes } = useStyles();
 
   const [formData, setFormData] = useState<{ interests: string[] }>(initData);
+  const { orgCategories } = useContext(SettingsContext);
 
   const makeChips = () => {
-    return interests.map((interest) => {
-      // TODO: toggle chip style when interest is chosen
-      const isSelected = formData.interests.includes(interest);
+    console.log('orgCategories', orgCategories);
+    return orgCategories().map((interest) => {
+      const isSelected = formData.interests.includes(interest.name);
       return (
         <Chip
-          key={interest}
+          key={interest.id}
           className={`${classes.chip} ${isSelected && classes.selectedChip}`}
-          label={interest}
+          label={interest.name}
           sx={{ fontSize: '16px' }}
           variant="outlined"
-          onClick={() => toggleInterest(interest)}
+          onClick={() => toggleInterest(interest.name)}
         />
       );
     });

client/src/providers/SettingsProvider.tsx

@@ -0,0 +1,65 @@
+import { ReactNode, createContext, useEffect, useRef } from 'react';
+import { Category } from '../types';
+import { APP_API_BASE_URL } from '../configs';
+
+export interface Settings {
+  categories: () => Category[];
+  setCategories: (categories: Category[]) => void;
+  orgCategories: () => Category[];
+}
+
+interface Props {
+  children: ReactNode;
+}
+
+export const SettingsContext = createContext<Settings>({
+  categories: () => [],
+  setCategories: () => {},
+  orgCategories: () => [],
+});
+
+/**
+ * SettingsProvider will load the categories from the API and store them in memory.
+ *
+ * To re-load the categories, call fetchCategories().
+ * @param children
+ * @returns
+ */
+export const SettingsProvider = ({ children }: Props) => {
+  const _categoriesRef = useRef<Category[]>([]);
+
+  useEffect(() => {
+    const _fetchCategories = async () => {
+      await fetchCategories();
+    };
+
+    _fetchCategories().catch(() => console.log('Error initializing SettingsProvider'));
+  }, []);
+
+  const setCategories = (_categories: Category[]) => {
+    _categoriesRef.current = [..._categories];
+  };
+
+  const categories = () => [..._categoriesRef.current];
+
+  const orgCategories = () => {
+    return [..._categoriesRef.current.filter((category) => category.applies_to_organizations)];
+  };
+  const fetchCategories = async () => {
+    try {
+      const res = await fetch(`${APP_API_BASE_URL}/categories`);
+      const response = (await res.json()) satisfies Category[];
+      if (res.ok) {
+        _categoriesRef.current = [...response];
+      }
+    } catch (error) {
+      console.log('Error fetching Categorie', error);
+    }
+  };
+
+  return (
+    <SettingsContext.Provider value={{ categories, setCategories, orgCategories }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};