feat: Add snackbar

theopensystemslab · Jan 16, 2024 · 148f9c0 · 148f9c0
1 parent 15925c4
commit 148f9c0
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 24 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx
@@ -16,37 +16,48 @@ import { DesignPreview, SettingsForm } from ".";
 
 type FormValues = Pick<TeamTheme, "primaryColour" | "logo">;
 
-export const ThemeAndLogoForm: React.FC<{ team: Team }> = ({ team }) => {
+export const ThemeAndLogoForm: React.FC<{
+  team: Team;
+  onSuccess: () => void;
+}> = ({ team, onSuccess }) => {
   const theme = useTheme();
 
   useEffect(() => {
     setInitialValues({
       primaryColour: team.theme?.primaryColour,
       logo: team.theme?.logo,
-    })
-  }, [team])
-  
+    });
+  }, [team]);
+
   const [initialValues, setInitialValues] = useState<FormValues>({
     primaryColour: "",
     logo: "",
-  })
+  });
 
   const formik = useFormik<FormValues>({
     initialValues,
     onSubmit: async (values, { resetForm }) => {
-      await useStore.getState().updateTeamTheme(values);
-      // Reset "dirty" status to disable Save & Reset buttons
-      resetForm({ values });
+      const isSuccess = await useStore.getState().updateTeamTheme(values);
+      if (isSuccess) {
+        onSuccess();
+        // Reset "dirty" status to disable Save & Reset buttons
+        resetForm({ values });
+      }
     },
     validateOnBlur: false,
     validateOnChange: false,
     enableReinitialize: true,
     validate: ({ primaryColour }) => {
-      const isContrastThresholdMet = getContrastRatio("#FFF", primaryColour) > theme.palette.contrastThreshold;
+      const isContrastThresholdMet =
+        getContrastRatio("#FFF", primaryColour) >
+        theme.palette.contrastThreshold;
 
       if (!isContrastThresholdMet) {
-        return { primaryColour: "Theme colour does not meet accessibility contrast requirements (3:1)"}
-      };
+        return {
+          primaryColour:
+            "Theme colour does not meet accessibility contrast requirements (3:1)",
+        };
+      }
     },
   });
 
@@ -75,15 +86,19 @@ export const ThemeAndLogoForm: React.FC<{ team: Team }> = ({ team }) => {
             <InputRowItem>
               <ColorPicker
                 color={formik.values.primaryColour}
-                onChange={(color) => formik.setFieldValue("primaryColour", color)}
+                onChange={(color) =>
+                  formik.setFieldValue("primaryColour", color)
+                }
                 label="Theme colour"
               />
             </InputRowItem>
           </InputRow>
           <InputRow>
             <InputRowLabel>Logo:</InputRowLabel>
             <InputRowItem width={50}>
-              <PublicFileUploadButton onChange={(newUrl) => formik.setFieldValue("logo", newUrl)}/>
+              <PublicFileUploadButton
+                onChange={(newUrl) => formik.setFieldValue("logo", newUrl)}
+              />
             </InputRowItem>
             <Typography
               color="text.secondary"
@@ -98,14 +113,13 @@ export const ThemeAndLogoForm: React.FC<{ team: Team }> = ({ team }) => {
       }
       preview={
         <DesignPreview bgcolor={formik.values.primaryColour}>
-          { formik.values.logo 
-            ? <img
-              width="140"
-              src={formik.values.logo}
-              alt="council logo"
-            />
-            : <Typography color={theme.palette.primary.contrastText}>{team?.name}</Typography>
-          }
+          {formik.values.logo ? (
+            <img width="140" src={formik.values.logo} alt="council logo" />
+          ) : (
+            <Typography color={theme.palette.primary.contrastText}>
+              {team?.name}
+            </Typography>
+          )}
         </DesignPreview>
       }
     />

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx
@@ -1,5 +1,7 @@
+import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import Snackbar from "@mui/material/Snackbar";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { Team } from "@opensystemslab/planx-core/types";
@@ -14,7 +16,7 @@ import InputLegend from "ui/editor/InputLegend";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import { ButtonForm } from "./ButtonForm";
-import { FaviconForm } from "./FaviconFrom";
+import { FaviconForm } from "./FaviconForm";
 import { TextLinkForm } from "./TextLinkForm";
 import { ThemeAndLogoForm } from "./ThemeAndLogoForm";
 
@@ -77,7 +79,10 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
             {preview}
           </Box>
         )}
-        <ErrorWrapper error={getIn(formik.errors, "primaryColour")} id="design-settings-theme-error">
+        <ErrorWrapper
+          error={getIn(formik.errors, "primaryColour")}
+          id="design-settings-theme-error"
+        >
           <Box>
             <Button type="submit" variant="contained" disabled={!formik.dirty}>
               Save
@@ -102,6 +107,18 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
 const DesignSettings: React.FC = () => {
   const isUsingFeatureFlag = hasFeatureFlag("SHOW_TEAM_SETTINGS");
   const team = useTeam();
+  const [open, setOpen] = useState(false);
+
+  const handleClose = (
+    _event?: React.SyntheticEvent | Event,
+    reason?: string,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpen(false);
+  };
 
   return (
     <>
@@ -119,10 +136,19 @@ const DesignSettings: React.FC = () => {
         </EditorRow>
       ) : (
         <>
-          <ThemeAndLogoForm team={team} />
+          <ThemeAndLogoForm team={team} onSuccess={() => setOpen(true)} />
           <ButtonForm />
           <TextLinkForm />
           <FaviconForm />
+          <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+            <Alert
+              onClose={handleClose}
+              severity="success"
+              sx={{ width: "100%" }}
+            >
+              Theme updated successfully
+            </Alert>
+          </Snackbar>
         </>
       )}
     </>