Visual-Regression-Tracker · suratdas · Aug 8, 2021 · Aug 7, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React from "react";
 import { SnackbarProvider } from "notistack";
 import { Box } from "@material-ui/core";
 import Header from "./components/Header";
@@ -8,28 +8,26 @@ import {
   BuildProvider,
   TestRunProvider,
   SocketProvider,
+  HelpProvider,
 } from "./contexts";
 import Router from "./Router";
-import { HelpContext } from "./contexts/help.context";
 
 function App() {
-  const { getHelpSteps } = useContext(HelpContext);
-  const { populateHelpSteps } = useContext(HelpContext);
   return (
     <SnackbarProvider maxSnack={3}>
       <UserProvider>
         <ProjectProvider>
           <BuildProvider>
             <TestRunProvider>
               <SocketProvider>
-                <HelpContext.Provider value={{getHelpSteps, populateHelpSteps}}>
+                <HelpProvider>
                   <Box height="10%">
                     <Header />
                   </Box>
                   <Box height="90%">
-                    <Router/>
+                    <Router />
                   </Box>
-                </HelpContext.Provider>
+                </HelpProvider>
               </SocketProvider>
             </TestRunProvider>
           </BuildProvider>

diff --git a/src/components/GuidedTour.tsx b/src/components/GuidedTour.tsx
@@ -1,54 +1,69 @@
-import React, { useContext, FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import Joyride, { CallBackProps, STATUS } from "react-joyride";
-import { IconButton, Avatar, } from "@material-ui/core";
+import { IconButton, Avatar } from "@material-ui/core";
 import { HelpOutline } from "@material-ui/icons";
-import { HelpContext } from "../contexts/help.context";
+import { useHelpState } from "../contexts";
 
 const GuidedTour: FunctionComponent = () => {
-    const [run, setRun] = React.useState(false);
+  const [run, setRun] = React.useState(false);
+  const { helpSteps } = useHelpState();
 
-    const handleJoyrideCallback = (data: CallBackProps) => {
-        const { status } = data;
-        const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
+  const getHelpSteps = React.useCallback(() => {
+    const firstStep = helpSteps[0];
+    //Below line is to prevent application breaking if element is not present for any reason (e.g. if the user deletes build or if there is no data.)
+    if (
+      firstStep &&
+      document.getElementById(firstStep.target.toString().slice(1))
+    ) {
+      helpSteps.every((e) => {
+        e.disableBeacon = true;
+        e.hideCloseButton = true;
+      });
+      return helpSteps;
+    }
+    return [];
+  }, [helpSteps]);
 
-        if (finishedStatuses.includes(status)) {
-            setRun(false);
-        }
-    };
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { status } = data;
+    const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
 
-    const handleClickStart = (e: React.MouseEvent<HTMLElement>) => {
-        e.preventDefault();
-        setRun(true);
-    };
+    if (finishedStatuses.includes(status)) {
+      setRun(false);
+    }
+  };
 
-    const { getHelpSteps } = useContext(HelpContext);
+  const handleClickStart = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    setRun(true);
+  };
 
-    return (
-        <React.Fragment>
-            <IconButton onClick={handleClickStart}>
-                <Avatar>
-                    <HelpOutline />
-                    <Joyride
-                        callback={handleJoyrideCallback}
-                        continuous={true}
-                        run={run}
-                        scrollToFirstStep={true}
-                        showProgress={true}
-                        showSkipButton={true}
-                        steps={getHelpSteps()}
-                        disableCloseOnEsc={true}
-                        styles={{
-                            options: {
-                                zIndex: 10000,
-                            },
-                            buttonNext: { color: "#3f51b5", backgroundColor: "" },
-                            buttonBack: { color: "#3f51b5" },
-                        }}
-                    />
-                </Avatar>
-            </IconButton>
-        </React.Fragment>
-    );
+  return (
+    <React.Fragment>
+      <IconButton onClick={handleClickStart}>
+        <Avatar>
+          <HelpOutline />
+          <Joyride
+            callback={handleJoyrideCallback}
+            continuous={true}
+            run={run}
+            scrollToFirstStep={true}
+            showProgress={true}
+            showSkipButton={true}
+            steps={getHelpSteps()}
+            disableCloseOnEsc={true}
+            styles={{
+              options: {
+                zIndex: 10000,
+              },
+              buttonNext: { color: "#3f51b5", backgroundColor: "" },
+              buttonBack: { color: "#3f51b5" },
+            }}
+          />
+        </Avatar>
+      </IconButton>
+    </React.Fragment>
+  );
 };
 
 export default GuidedTour;
diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState, FormEvent, useEffect, useContext } from "react";
+import React, { useState, FormEvent, useEffect } from "react";
 import { Link } from "react-router-dom";
 import {
   Button,
@@ -8,7 +8,12 @@ import {
   CardActions,
   Typography,
 } from "@material-ui/core";
-import { useUserDispatch, login, HelpContext } from "../contexts";
+import {
+  useUserDispatch,
+  login,
+  setHelpSteps,
+  useHelpDispatch,
+} from "../contexts";
 import { routes } from "../constants";
 import { useSnackbar } from "notistack";
 import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
@@ -18,6 +23,7 @@ const LoginForm = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const dispatch = useUserDispatch();
+  const helpDispatch = useHelpDispatch();
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
@@ -31,16 +37,15 @@ const LoginForm = () => {
   const helpSteps = [
     {
       target: "#loginform-1",
-      content: "Default admin account: visual-regression-tracker@example.com / 123456. Make sure to change it's password.",
+      content:
+        "Default admin account: visual-regression-tracker@example.com / 123456. Make sure to change it's password.",
     },
   ];
-  
+
   useEffect(() => {
-    populateHelpSteps(helpSteps);
+    setHelpSteps(helpDispatch, helpSteps);
   });
 
-  const { populateHelpSteps } = useContext(HelpContext);
-
   const errorForTwoChar = "Enter at least two characters.";
   const locatorLoginForm = "loginform-1";
 

diff --git a/src/contexts/help.context.tsx b/src/contexts/help.context.tsx
@@ -1,23 +1,69 @@
-import { createContext } from 'react';
-import { Step } from 'react-joyride';
-
-let helpSteps: Step[] = [];
-
-let getHelpSteps = (): Step[] => {
-    const firstStep = helpSteps[0];
-    //Below line is to prevent application breaking if element is not present for any reason (e.g. if the user deletes build or if there is no data.)
-    if (firstStep && document.getElementById(firstStep.target.toString().slice(1))) {
-        helpSteps.every((e) => {
-            e.disableBeacon = true;
-            e.hideCloseButton = true;
-        });
-        return helpSteps;
-    }
-    return [];
+import React from "react";
+import { Step } from "react-joyride";
+
+interface ISetStepAction {
+  type: "setSteps";
+  payload: Array<Step>;
+}
+
+type IAction = ISetStepAction;
+
+type Dispatch = (action: IAction) => void;
+type State = {
+  helpSteps: Array<Step>;
 };
 
-const populateHelpSteps = (steps: any) => {
-    helpSteps = steps;
+type HelpProviderProps = { children: React.ReactNode };
+
+const StateContext = React.createContext<State | undefined>(undefined);
+const DispatchContext = React.createContext<Dispatch | undefined>(undefined);
+
+const initialState: State = {
+  helpSteps: [],
 };
 
-export const HelpContext = createContext({ getHelpSteps, populateHelpSteps });
+function reducer(state: State, action: IAction): State {
+  switch (action.type) {
+    case "setSteps":
+      return {
+        ...state,
+        helpSteps: action.payload,
+      };
+    default:
+      return state;
+  }
+}
+
+function HelpProvider({ children }: HelpProviderProps) {
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+
+  return (
+    <StateContext.Provider value={state}>
+      <DispatchContext.Provider value={dispatch}>
+        {children}
+      </DispatchContext.Provider>
+    </StateContext.Provider>
+  );
+}
+
+function useHelpState() {
+  const context = React.useContext(StateContext);
+  if (context === undefined) {
+    throw new Error("must be used within a HelpContext");
+  }
+  return context;
+}
+
+function useHelpDispatch() {
+  const context = React.useContext(DispatchContext);
+  if (context === undefined) {
+    throw new Error("must be used within a HelpContext");
+  }
+  return context;
+}
+
+function setHelpSteps(dispatch: Dispatch, data: Array<Step>) {
+  dispatch({ type: "setSteps", payload: data });
+}
+
+export { HelpProvider, useHelpDispatch, useHelpState, setHelpSteps };