Build context added

Author: pashidlos

src/App.jsx

@@ -4,14 +4,17 @@ import Header from "./components/Header";
 import { AuthProvider } from "./contexts/auth.context";
 import { ProjectProvider } from "./contexts/project.context";
 import Router from "./Router";
+import { BuildProvider } from "./contexts/build.context";
 
 function App() {
   return (
     <div className="App">
       <AuthProvider>
         <ProjectProvider>
-          <Header />
-          <Router />
+          <BuildProvider>
+            <Header />
+            <Router />
+          </BuildProvider>
         </ProjectProvider>
       </AuthProvider>
     </div>

src/components/BuildList.tsx

@@ -11,15 +11,12 @@ import {
   Chip,
 } from "@material-ui/core";
 import { Delete } from "@material-ui/icons";
-import { Build } from "../types";
-import { buildsService } from "../services";
 import { useHistory } from "react-router-dom";
-
-interface IBuildList {
-  builds: Build[];
-  setBuilds: React.Dispatch<React.SetStateAction<Build[]>>;
-  selectedBuildId: string | undefined;
-}
+import {
+  useBuildState,
+  useBuildDispatch,
+  deleteBuild,
+} from "../contexts/build.context";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -34,17 +31,15 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-const BuildList: FunctionComponent<IBuildList> = ({
-  builds,
-  setBuilds,
-  selectedBuildId,
-}) => {
+const BuildList: FunctionComponent = () => {
   const classes = useStyles();
   const history = useHistory();
+  const { buildList, selectedBuildId } = useBuildState();
+  const buildDispatch = useBuildDispatch();
 
   return (
     <List>
-      {builds.map((build) => (
+      {buildList.map((build) => (
         <ListItem
           key={build.id}
           selected={selectedBuildId === build.id}
@@ -66,11 +61,7 @@ const BuildList: FunctionComponent<IBuildList> = ({
           <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
             <IconButton
               onClick={() => {
-                buildsService.remove(build.id).then((isRemoved) => {
-                  if (isRemoved) {
-                    setBuilds(builds.filter((item) => item.id !== build.id));
-                  }
-                });
+                deleteBuild(buildDispatch, build.id);
               }}
             >
               <Delete />

src/contexts/build.context.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { Build } from "../types";
+import { buildsService } from "../services";
+
+interface IRequestAction {
+  type: "request";
+  payload?: undefined;
+}
+
+interface IGetAction {
+  type: "get";
+  payload: Build[];
+}
+
+interface ISelectAction {
+  type: "select";
+  payload: string;
+}
+
+interface IDeleteAction {
+  type: "delete";
+  payload: string;
+}
+
+type IAction = IRequestAction | IGetAction | IDeleteAction | ISelectAction;
+
+type Dispatch = (action: IAction) => void;
+type State = {
+  selectedBuildId: string | undefined;
+  buildList: Build[];
+};
+
+type BuildProviderProps = { children: React.ReactNode };
+
+const BuildStateContext = React.createContext<State | undefined>(undefined);
+const BuildDispatchContext = React.createContext<Dispatch | undefined>(
+  undefined
+);
+
+const initialState: State = {
+  selectedBuildId: undefined,
+  buildList: [],
+};
+
+function buildReducer(state: State, action: IAction): State {
+  switch (action.type) {
+    case "select":
+      return {
+        ...state,
+        selectedBuildId: action.payload,
+      };
+    case "get":
+      return {
+        ...state,
+        buildList: action.payload,
+      };
+    case "delete":
+      return {
+        ...state,
+        buildList: state.buildList.filter((p) => p.id !== action.payload),
+      };
+    default:
+      return state;
+  }
+}
+
+function BuildProvider({ children }: BuildProviderProps) {
+  const [state, dispatch] = React.useReducer(buildReducer, initialState);
+
+  return (
+    <BuildStateContext.Provider value={state}>
+      <BuildDispatchContext.Provider value={dispatch}>
+        {children}
+      </BuildDispatchContext.Provider>
+    </BuildStateContext.Provider>
+  );
+}
+
+function useBuildState() {
+  const context = React.useContext(BuildStateContext);
+  if (context === undefined) {
+    throw new Error("must be used within a BuildProvider");
+  }
+  return context;
+}
+
+function useBuildDispatch() {
+  const context = React.useContext(BuildDispatchContext);
+  if (context === undefined) {
+    throw new Error("must be used within a BuildProvider");
+  }
+  return context;
+}
+
+async function getBuildList(dispatch: Dispatch, id: string) {
+  dispatch({ type: "request" });
+
+  buildsService
+    .getList(id)
+    .then((items) => {
+      dispatch({ type: "get", payload: items });
+    })
+    .catch((error) => {
+      console.log(error.toString());
+    });
+}
+
+async function deleteBuild(dispatch: Dispatch, id: string) {
+  dispatch({ type: "request" });
+
+  buildsService
+    .remove(id)
+    .then((isDeleted) => {
+      if (isDeleted) {
+        dispatch({ type: "delete", payload: id });
+      }
+    })
+    .catch((error) => {
+      console.log(error.toString());
+    });
+}
+
+async function selectBuild(dispatch: Dispatch, id: string) {
+  dispatch({ type: "select", payload: id });
+}
+
+export {
+  BuildProvider,
+  useBuildState,
+  useBuildDispatch,
+  getBuildList,
+  deleteBuild,
+  selectBuild,
+};

src/pages/ProjectPage.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { Grid, Dialog, IconButton, Box, Typography } from "@material-ui/core";
 import { useParams, useLocation, useHistory } from "react-router-dom";
-import { Build, TestRun } from "../types";
-import { buildsService, testRunService } from "../services";
+import { TestRun } from "../types";
+import { testRunService } from "../services";
 import BuildList from "../components/BuildList";
 import ProjectSelect from "../components/ProjectSelect";
 import qs from "qs";
@@ -11,6 +11,12 @@ import TestDetailsModal from "../components/TestDetailsModal";
 import { NavigateBefore, NavigateNext } from "@material-ui/icons";
 import Filters from "../components/Filters";
 import { buildTestRunLocation } from "../_helpers/route.helpers";
+import {
+  useBuildState,
+  useBuildDispatch,
+  getBuildList,
+  selectBuild,
+} from "../contexts/build.context";
 
 const getQueryParams = (guery: string) => {
   const queryParams = qs.parse(guery, { ignoreQueryPrefix: true });
@@ -46,9 +52,9 @@ const ProjectPage = () => {
   const { projectId } = useParams();
   const location = useLocation();
   const history = useHistory();
-  const [builds, setBuilds] = useState<Build[]>([]);
+  const { buildList, selectedBuildId } = useBuildState();
+  const buildDispatch = useBuildDispatch();
   const [testRuns, setTestRuns] = useState<TestRun[]>([]);
-  const [selectedBuildId, setSelectedBuildId] = useState<string>();
   const [selectedTestdId, setSelectedTestId] = useState<string>();
   const [selectedTestRunIndex, setSelectedTestRunIndex] = useState<number>();
 
@@ -64,9 +70,9 @@ const ProjectPage = () => {
   useEffect(() => {
     const queryParams = getQueryParams(location.search);
     if (queryParams.buildId) {
-      setSelectedBuildId(queryParams.buildId);
-    } else if (builds.length > 0) {
-      setSelectedBuildId(builds[0].id);
+      selectBuild(buildDispatch, queryParams.buildId);
+    } else if (buildList.length > 0) {
+      selectBuild(buildDispatch, buildList[0].id);
     }
     if (queryParams.testId) {
       setSelectedTestId(queryParams.testId);
@@ -76,13 +82,19 @@ const ProjectPage = () => {
       setSelectedTestId(undefined);
       setSelectedTestRunIndex(undefined);
     }
-  }, [location.search, builds, testRuns, selectedTestRunIndex]);
+  }, [
+    location.search,
+    buildList,
+    testRuns,
+    selectedTestRunIndex,
+    buildDispatch,
+  ]);
 
   useEffect(() => {
     if (projectId) {
-      buildsService.getList(projectId).then((builds) => setBuilds(builds));
+      getBuildList(buildDispatch, projectId);
     }
-  }, [projectId]);
+  }, [projectId, buildDispatch]);
 
   useEffect(() => {
     if (selectedBuildId) {
@@ -126,11 +138,7 @@ const ProjectPage = () => {
           </Grid>
         </Grid>
         <Grid item>
-          <BuildList
-            builds={builds}
-            setBuilds={setBuilds}
-            selectedBuildId={selectedBuildId}
-          />
+          <BuildList />
         </Grid>
       </Grid>
       <Grid item xs={9}>