lint and todos

frontend/packages/core/src/index.tsx

 import { Grid } from "@material-ui/core";
+
 import { userId } from "./AppLayout/user";
 import { Checkbox, CheckboxPanel } from "./Input/checkbox";
 import { Form, FormRow } from "./Input/form";

frontend/workflows/projectSelector/src/hello-world.tsx

 import * as React from "react";
 import type { ClutchError } from "@clutch-sh/core";
-import { client, TextField, userId } from "@clutch-sh/core";
+import { client, Error, TextField, userId } from "@clutch-sh/core";
 import styled from "@emotion/styled";
 import { Divider, LinearProgress } from "@material-ui/core";
 import LayersIcon from "@material-ui/icons/Layers";
@@ -113,7 +113,7 @@ const StyledSelectorContainer = styled.div({
 const StyledWorkflowHeader = styled.div({
   margin: "16px 16px 12px 16px",
   display: "flex",
-  alignItems: "center"
+  alignItems: "center",
 });
 
 const StyledWorkflowTitle = styled.span({
@@ -134,7 +134,7 @@ const StyledProgressContainer = styled.div({
   },
   ".MuiLinearProgress-bar": {
     backgroundColor: "#3548D4",
-  }
+  },
 });
 
 const ProjectSelector = () => {
@@ -173,17 +173,17 @@ const ProjectSelector = () => {
       dispatch({ type: "HYDRATE_START" });
 
       // TODO: have userId check be server driven
-      let requestParams = {"users": [userId()], "projects": []}
+      const requestParams = {"users": [userId()], "projects": []}
 
-      let customProjects = []
+      const customProjects = [];
       _.forEach(Object.keys(state[Group.PROJECTS]), p => {
         // if the project is custom and missing from state.projectdata
-        if (state[Group.PROJECTS][p].custom && !(p in state.projectData)){
-          customProjects.push(p)
+        if (state[Group.PROJECTS][p].custom && !(p in state.projectData)) {
+          customProjects.push(p);
         }
       });
-      if (customProjects.length > 0){
-        requestParams.projects = customProjects
+      if (customProjects.length > 0) {
+        requestParams.projects = customProjects;
       }
 
       /*
@@ -194,8 +194,8 @@ const ProjectSelector = () => {
         .post("/v1/project/getProjects", requestParams)
         .then(resp => dispatch({ type: "HYDRATE_END", payload: { result: resp.data.results } }))
         .catch((err: ClutchError) => {
-          dispatch({ type: "HYDRATE_ERROR", payload: {result: err}})
-        })
+          dispatch({ type: "HYDRATE_ERROR", payload: { result: err } });
+        });
     }
   }, [state[Group.PROJECTS]]);
 
@@ -210,6 +210,8 @@ const ProjectSelector = () => {
     setCustomProject("");
   };
 
+  const hasError = state.error !== undefined && state.error !== null;
+
   return (
     <DispatchContext.Provider value={dispatch}>
       <StateContext.Provider value={state}>
@@ -231,6 +233,8 @@ const ProjectSelector = () => {
             onChange={e => setCustomProject(e.target.value)}
             onKeyDown={e => e.key === "Enter" && handleAdd()}
           />
+          {/* TODO: styling for the error */}
+          {hasError && <Error subject={state.error} />}
           <ProjectGroup title="Projects" group={Group.PROJECTS} displayToggleHelperText />
           <Divider />
           <ProjectGroup title="Upstreams" group={Group.UPSTREAM} />

frontend/workflows/projectSelector/src/selector-reducer.tsx

@@ -82,38 +82,38 @@ const selectorReducer = (state: State, action: Action): State => {
       return { ...state, loading: true };
     }
     case "HYDRATE_END": {
-      const newPostAPICallState = { ...state, loading: false };
+      const newPostAPICallState = { ...state, loading: false, error: undefined };
 
       // TODO: Add the projects, but if the project already exists in this group preserve its existing checked value.
       _.forIn(action.payload.result, (v, k) => {
-        if (v.from.users.length > 0){
+        if (v.from.users.length > 0) {
           // a user owned project
           state[Group.PROJECTS][k] = { checked: true };
-        } else if (v.from.selected){
+        } else if (v.from.selected) {
           // a custom project
           state[Group.PROJECTS][k] = { checked: true, custom: true };
         }
 
         // collect upstreams for each project in the results
-        let upstreamsDeps = []
-        _.forIn(v.project.dependencies.upstreams, (v) => {
-          upstreamsDeps = v.id
+        let upstreamsDeps = [];
+        _.forIn(v.project.dependencies.upstreams, v => {
+          upstreamsDeps = v.id;
         });
 
         // collect downstreams for each project in the results
-        let downstreamsDeps = []
-        _.forIn(v.project.dependencies.downstreams, (v) => {
-          downstreamsDeps = v.id
+        let downstreamsDeps = [];
+        _.forIn(v.project.dependencies.downstreams, v => {
+          downstreamsDeps = v.id;
         });
 
         // Add each upstream/downstream for the selected or user project
-        if (v.from.users.length > 0 || v.from.selected){
+        if (v.from.users.length > 0 || v.from.selected) {
           upstreamsDeps.forEach(v => {
             state[Group.UPSTREAM][v] = { checked: false };
-          })
+          });
           downstreamsDeps.forEach(v => {
             state[Group.DOWNSTREAM][v] = { checked: false };
-          })
+          });
         }
 
         // stores the raw project data for each project in the API result
@@ -126,12 +126,19 @@ const selectorReducer = (state: State, action: Action): State => {
           upstreams: upstreamsDeps,
           downstreams: downstreamsDeps,
         };
-
       });
       return newPostAPICallState;
     }
-    // TODO: test out an error case
     case "HYDRATE_ERROR":
+      /*
+       TODO: do we want to handle the error state differently? For example, when we render the error on the UI,
+       it won't disapper unless there's a successful API call or if the user refreshes the page. If a user performs other
+       actions, such as use the toggle/checkbox/click into the text box etc. the error message will be still be on the page
+
+       TODO: when we add error handling for projects not found, we'll need to make sure we don't add the project sent in the request
+       to the project list as that's confusing to the user and the not-found project will continue to be added to consectutive API requests
+       as we don't have the project data for it.
+      */
       return { ...state, loading: false, error: action.payload.result };
     default:
       throw new Error(`unknown resolver action`);