Merge pull request #102 from jadeallencook/feat/form-toggle

feat: added basic components for form toggling

src/api/get-form-status.ts

@@ -0,0 +1,16 @@
+import { child, get, getDatabase, ref } from 'firebase/database';
+
+const dbRef = ref(getDatabase());
+
+const getFormStatus = async (): Promise<boolean> => {
+    try {
+        return await get(child(dbRef, 'requestFormStatus')).then((snapshot) =>
+            snapshot.exists() ? snapshot.val() : false
+        );
+    } catch (err) {
+        console.log(err);
+        return null;
+    }
+};
+
+export default getFormStatus;

src/api/update-form-status.ts

@@ -0,0 +1,8 @@
+import { getDatabase, ref, set } from 'firebase/database';
+
+const updateFormStatus = async (status: boolean) => {
+    const db = getDatabase();
+    return await set(ref(db, 'requestFormStatus'), status);
+};
+
+export default updateFormStatus;

src/contexts/RequestFormStatusContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, useEffect, useState } from 'react';
+import getFormStatus from '@api/get-form-status';
+
+interface RequestFormStatusContext {}
+
+const RequestFormStatusContext = createContext<{
+    requestFormStatus: boolean;
+    hasFetchedRequestFormStatus: boolean;
+}>(null);
+
+export const RequestFormStatusProvider = ({ children }) => {
+    const [hasFetchedRequestFormStatus, setHasFetchedRequestFormStatus] =
+        useState<boolean>(false);
+    const [requestFormStatus, setRequestFormStatus] = useState<boolean>(false);
+
+    useEffect(() => {
+        getFormStatus().then((response) => {
+            setRequestFormStatus(response);
+            setHasFetchedRequestFormStatus(true);
+        });
+    }, []);
+
+    return (
+        <RequestFormStatusContext.Provider
+            value={{
+                requestFormStatus,
+                hasFetchedRequestFormStatus,
+            }}
+        >
+            {children}
+        </RequestFormStatusContext.Provider>
+    );
+};
+
+export default RequestFormStatusContext;

src/forms/AdvancedSearchForm/index.tsx

@@ -10,10 +10,12 @@ const AdvancedSearchForm: StyledComponent = styled(
         className,
         filters,
         setFilters,
+        children,
     }: {
         className: string;
         filters: FiltersInterface;
         setFilters: (value: FiltersInterface) => void;
+        children?: React.ReactNode;
     }) => {
         const [term, setTerm] = useState<string>('');
         const handleSearch = (e) => {
@@ -23,7 +25,7 @@ const AdvancedSearchForm: StyledComponent = styled(
 
         return (
             <Form className={className}>
-                <InputGroup>
+                <InputGroup size="sm">
                     <Form.Control
                         type="text"
                         name="driver"
@@ -32,6 +34,7 @@ const AdvancedSearchForm: StyledComponent = styled(
                         placeholder="Search by name or email"
                         onChange={handleSearch}
                     />
+                    {children}
                 </InputGroup>
             </Form>
         );

src/forms/AdvancedSearchForm/style.ts

@@ -12,12 +12,16 @@ const style = () => ({
     },
     '.input-group-text': {
         backgroundColor: 'var(--bs-gray-600)',
+        color: 'var(--white)',
         border: 'none',
     },
     'button.search-btn': {
         backgroundColor: 'var(--black) !important',
         border: 'none',
     },
+    '.bg-danger': {
+        backgroundColor: 'var(--primary) !important',
+    },
 });
 
 export default style;

src/forms/FormStatusForm/index.tsx

@@ -0,0 +1,66 @@
+import { Badge, InputGroup, Spinner } from 'react-bootstrap';
+import updateFormStatus from '@api/update-form-status';
+import getFormStatus from '@api/get-form-status';
+import { useQuery } from 'react-query';
+
+const FormStatusForm = () => {
+    const { data: status, refetch } = useQuery({
+        queryKey: ['getFormStatus'],
+        queryFn: () => getFormStatus(),
+    });
+
+    const handleToggle = async () => {
+        await updateFormStatus(!status);
+        await refetch();
+    };
+
+    return (
+        <>
+            {status !== undefined && (
+                <InputGroup.Checkbox
+                    checked={status}
+                    aria-label=""
+                    onChange={handleToggle}
+                    style={{ cursor: 'pointer' }}
+                />
+            )}
+            <InputGroup.Text>
+                {status === undefined ? (
+                    <>
+                        <Spinner
+                            as="span"
+                            animation="border"
+                            size="sm"
+                            role="status"
+                            aria-hidden="true"
+                            style={{ marginRight: '15px' }}
+                        />
+                        Getting Request Form Status
+                    </>
+                ) : (
+                    <>
+                        {' '}
+                        Request Form Status{' '}
+                        {status ? (
+                            <Badge
+                                bg="danger"
+                                style={{ marginLeft: '5px', width: '50px' }}
+                            >
+                                Live
+                            </Badge>
+                        ) : (
+                            <Badge
+                                bg="dark"
+                                style={{ marginLeft: '5px', width: '50px' }}
+                            >
+                                Offline
+                            </Badge>
+                        )}
+                    </>
+                )}
+            </InputGroup.Text>
+        </>
+    );
+};
+
+export default FormStatusForm;

src/index.tsx

@@ -18,6 +18,7 @@ import {
     QueryClientProvider,
 } from 'react-query';
 import { DashboardProvider, log } from './contexts/DashboardContext';
+import { RequestFormStatusProvider } from './contexts/RequestFormStatusContext';
 import toast, { ToastBar, Toaster } from 'react-hot-toast';
 import { Button } from 'react-bootstrap';
 
@@ -50,51 +51,61 @@ const queryClient = new QueryClient({
 });
 
 root.render(
-    <SnippetProvider>
-        <QueryClientProvider client={queryClient}>
-            <Router>
-                <DashboardProvider>
-                    <Navigation />
-                    <Routes>
-                        {routes.map(({ path, element }) => (
-                            <Route
-                                key={path}
-                                path={path}
-                                element={element}
-                            ></Route>
-                        ))}
-                    </Routes>
-                    <Footer />
-                </DashboardProvider>
-            </Router>
+    <RequestFormStatusProvider>
+        <SnippetProvider>
+            <QueryClientProvider client={queryClient}>
+                <Router>
+                    <DashboardProvider>
+                        <Navigation />
+                        <Routes>
+                            {routes.map(({ path, element }) => (
+                                <Route
+                                    key={path}
+                                    path={path}
+                                    element={element}
+                                ></Route>
+                            ))}
+                        </Routes>
+                        <Footer />
+                    </DashboardProvider>
+                </Router>
 
-            <Toaster
-                position="bottom-center"
-                toastOptions={{
-                    duration:
-                        process.env.NODE_ENV === 'development' ? 1000000 : 5000,
-                    style: { maxWidth: 'unset' },
-                }}
-            >
-                {(t) => (
-                    <ToastBar toast={t}>
-                        {({ icon, message }) => (
-                            <div
-                                className={'d-flex flex-row align-items-center'}
-                            >
-                                {icon}
-                                <div style={{ width: '12rem' }}>{message}</div>
+                <Toaster
+                    position="bottom-center"
+                    toastOptions={{
+                        duration:
+                            process.env.NODE_ENV === 'development'
+                                ? 1000000
+                                : 5000,
+                        style: { maxWidth: 'unset' },
+                    }}
+                >
+                    {(t) => (
+                        <ToastBar toast={t}>
+                            {({ icon, message }) => (
+                                <div
+                                    className={
+                                        'd-flex flex-row align-items-center'
+                                    }
+                                >
+                                    {icon}
+                                    <div style={{ width: '12rem' }}>
+                                        {message}
+                                    </div>
 
-                                {t.type !== 'loading' && (
-                                    <Button onClick={() => toast.dismiss(t.id)}>
-                                        Dismiss
-                                    </Button>
-                                )}
-                            </div>
-                        )}
-                    </ToastBar>
-                )}
-            </Toaster>
-        </QueryClientProvider>
-    </SnippetProvider>
+                                    {t.type !== 'loading' && (
+                                        <Button
+                                            onClick={() => toast.dismiss(t.id)}
+                                        >
+                                            Dismiss
+                                        </Button>
+                                    )}
+                                </div>
+                            )}
+                        </ToastBar>
+                    )}
+                </Toaster>
+            </QueryClientProvider>
+        </SnippetProvider>
+    </RequestFormStatusProvider>
 );

src/pages/Dashboard/AidRequestsPage.tsx

@@ -5,18 +5,30 @@ import { useContext, useState } from 'react';
 import DashboardContext from '../../contexts/DashboardContext';
 import Loading from '@components/Loading';
 import filterRequests from '@utils/filter-requests';
+import FormStatusForm from '@forms/FormStatusForm';
+import isUserModerator from '@utils/is-user-moderator';
 import AdvancedSearchForm from '@forms/AdvancedSearchForm';
 
 const AidRequestsPage = () => {
-    const { requests, isLoading, requestFilters, setRequestFilters, uid } =
-        useContext(DashboardContext);
+    const {
+        requests,
+        isLoading,
+        requestFilters,
+        setRequestFilters,
+        uid,
+        myOrganizations,
+        organizations,
+    } = useContext(DashboardContext);
     const [show, setShow] = useState<boolean>(false);
     const [selected, setSelected] = useState<string>();
     const handler = (id?: string): void => {
         setSelected(id);
         setShow((prev) => !prev);
     };
 
+    const isMod =
+        !isLoading && isUserModerator(uid, myOrganizations, organizations);
+
     const filteredRequests = filterRequests(requests, requestFilters);
 
     return (
@@ -28,7 +40,9 @@ const AidRequestsPage = () => {
             <AdvancedSearchForm
                 filters={requestFilters}
                 setFilters={setRequestFilters}
-            />
+            >
+                {isMod && <FormStatusForm />}
+            </AdvancedSearchForm>
             {isLoading ? (
                 <Loading />
             ) : (