build releated notifications handeled

Author: pashidlos

src/components/BuildList.tsx

@@ -23,6 +23,7 @@ import {
 import { BuildStatusChip } from "./BuildStatusChip";
 import { SkeletonList } from "./SkeletonList";
 import { formatDateTime } from "../_helpers/format.helper";
+import { useSnackbar } from "notistack";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -42,6 +43,7 @@ const BuildList: FunctionComponent = () => {
   const history = useHistory();
   const { buildList, selectedBuildId, loading } = useBuildState();
   const buildDispatch = useBuildDispatch();
+  const { enqueueSnackbar } = useSnackbar();
 
   return (
     <List>
@@ -98,7 +100,17 @@ const BuildList: FunctionComponent = () => {
             >
               <IconButton
                 onClick={() => {
-                  deleteBuild(buildDispatch, build.id);
+                  deleteBuild(buildDispatch, build.id)
+                    .then((b) =>
+                      enqueueSnackbar(`${b.id} removed`, {
+                        variant: "success",
+                      })
+                    )
+                    .catch((err) =>
+                      enqueueSnackbar(err, {
+                        variant: "error",
+                      })
+                    );
                 }}
               >
                 <Delete />

src/contexts/build.context.tsx

@@ -93,7 +93,7 @@ function buildReducer(state: State, action: IAction): State {
         ...state,
         buildList: state.buildList.map((p) => {
           if (p.id === action.payload.id) {
-            return action.payload
+            return action.payload;
           }
           return p;
         }),
@@ -134,27 +134,16 @@ function useBuildDispatch() {
 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());
-    });
+  return buildsService.getList(id).then((items) => {
+    dispatch({ type: "get", payload: items });
+  });
 }
 
 async function deleteBuild(dispatch: Dispatch, id: string) {
-  buildsService
-    .remove(id)
-    .then((isDeleted) => {
-      if (isDeleted) {
-        dispatch({ type: "delete", payload: id });
-      }
-    })
-    .catch((error) => {
-      console.log(error.toString());
-    });
+  return buildsService.remove(id).then((build) => {
+    dispatch({ type: "delete", payload: id });
+    return build;
+  });
 }
 
 async function selectBuild(dispatch: Dispatch, id: string) {

src/pages/ProjectPage.tsx

@@ -27,6 +27,7 @@ import {
   selectTestRun,
   getTestRunList,
 } from "../contexts";
+import { useSnackbar } from "notistack";
 
 const getQueryParams = (guery: string) => {
   const queryParams = qs.parse(guery, { ignoreQueryPrefix: true });
@@ -67,6 +68,7 @@ const ProjectPage = () => {
   const { projectId } = useParams();
   const location = useLocation();
   const history = useHistory();
+  const { enqueueSnackbar } = useSnackbar();
   const { buildList, selectedBuildId } = useBuildState();
   const buildDispatch = useBuildDispatch();
   const {
@@ -87,9 +89,13 @@ const ProjectPage = () => {
 
   useEffect(() => {
     if (projectId) {
-      getBuildList(buildDispatch, projectId);
+      getBuildList(buildDispatch, projectId).catch((err) =>
+        enqueueSnackbar(err, {
+          variant: "error",
+        })
+      );
     }
-  }, [projectId, buildDispatch]);
+  }, [projectId, buildDispatch, enqueueSnackbar]);
 
   useEffect(() => {
     if (selectedBuildId) {

src/services/builds.service.ts

@@ -20,7 +20,7 @@ function getList(projectId: string): Promise<Build[]> {
   );
 }
 
-function remove(id: string): Promise<number> {
+function remove(id: string): Promise<Build> {
   const requestOptions = {
     method: "DELETE",
     headers: authHeader(),