#464 New mission modals, general modals and snackbar

configure/package.json

@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.2",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

configure/src/components/Main/Main.js

@@ -14,7 +14,7 @@ import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import ViewQuiltIcon from "@mui/icons-material/ViewQuilt";
 
 import { calls } from "../../core/calls";
-import { setConfiguration } from "../../core/ConfigureStore";
+import { setConfiguration, setSnackBarText } from "../../core/ConfigureStore";
 
 const useStyles = makeStyles((theme) => ({
   Main: {
@@ -25,23 +25,23 @@ const useStyles = makeStyles((theme) => ({
   },
   tabs: {
     width: "100%",
-    height: "40px",
-    minHeight: "40px",
+    height: "48px",
+    minHeight: "48px",
     display: "flex",
     justifyContent: "center",
     background: theme.palette.swatches.grey[900],
     boxShadow: `inset 10px 0px 10px -5px rgba(0,0,0,0.3)`,
     borderBottom: `1px solid ${theme.palette.swatches.grey[700]} !important`,
     "& > div": {
       borderRight: "none",
-      height: "40px",
-      minHeight: "40px",
+      height: "48px",
+      minHeight: "48px",
     },
     "& .MuiTab-root": {
       color: theme.palette.swatches.grey[500],
-      height: "40px",
-      minHeight: "40px",
-      padding: "0px 16px",
+      height: "48px",
+      minHeight: "48px",
+      padding: "0px 24px",
       fontSize: "13px",
       textTransform: "none",
       borderBottom: `none !important`,
@@ -65,9 +65,22 @@ export default function Main() {
   const mission = useSelector((state) => state.core.mission);
 
   useEffect(() => {
-    calls.api("get", { mission: mission }, (res) => {
-      dispatch(setConfiguration(res));
-    });
+    if (mission != null)
+      calls.api(
+        "get",
+        { mission: mission },
+        (res) => {
+          dispatch(setConfiguration(res));
+        },
+        (res) => {
+          dispatch(
+            setSnackBarText({
+              text: res?.message || "Failed to get configuration for mission.",
+              severity: "error",
+            })
+          );
+        }
+      );
   }, [dispatch, mission]);
 
   const [tabValue, setTabValue] = useState(0);

configure/src/components/Main/MainSlice.js

@@ -2,28 +2,11 @@ import { createSlice } from "@reduxjs/toolkit";
 
 export const MainSlice = createSlice({
   name: "main",
-  initialState: {
-    value: 0,
-  },
-  reducers: {
-    increment: (state) => {
-      // Redux Toolkit allows us to write "mutating" logic in reducers. It
-      // doesn't actually mutate the state because it uses the Immer library,
-      // which detects changes to a "draft state" and produces a brand new
-      // immutable state based off those changes.
-      // Also, no return statement is required from these functions.
-      state.value += 1;
-    },
-    decrement: (state) => {
-      state.value -= 1;
-    },
-    incrementByAmount: (state, action) => {
-      state.value += action.payload;
-    },
-  },
+  initialState: {},
+  reducers: {},
 });
 
 // Action creators are generated for each case reducer function
-export const { increment, decrement, incrementByAmount } = MainSlice.actions;
+export const {} = MainSlice.actions;
 
 export default MainSlice.reducer;