Merge pull request #7

Add feedback toasts to recipe addition
georgegebbett · May 9, 2022 · 9f05e4b · 9f05e4b
2 parents f5c781e + 53f3ae3
commit 9f05e4b
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 19 deletions.
diff --git a/app/src/components/AddRecipeModal.tsx b/app/src/components/AddRecipeModal.tsx
@@ -8,35 +8,28 @@ import {
   TextField,
 } from "@mui/material";
 import { useState } from "react";
-import { useAtom } from "jotai";
-import { tokenAtom } from "../App";
-import { post } from "../helpers/backendRequests";
 
 interface propTypes {
   modalOpen: boolean;
   setModalOpen: Function;
-  getRecipes: Function;
+  addRecipe: Function;
 }
 
 export function AddRecipeModal({
   modalOpen,
   setModalOpen,
-  getRecipes,
+  addRecipe,
 }: propTypes) {
   const [newRecipeUrl, setNewRecipeUrl] = useState("");
 
-  const [token] = useAtom(tokenAtom);
-
   const handleClose = () => {
     setNewRecipeUrl("");
     setModalOpen(false);
   };
 
-  const addRecipe = async () => {
-    await post("/recipes", { url: newRecipeUrl }, token.access_token);
-
-    getRecipes();
-    handleClose();
+  const addRecipeAndClose = () => {
+    setNewRecipeUrl("");
+    addRecipe(newRecipeUrl);
   };
 
   return (
@@ -59,7 +52,7 @@ export function AddRecipeModal({
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Close</Button>
-        <Button onClick={addRecipe}>Add recipe</Button>
+        <Button onClick={addRecipeAndClose}>Add recipe</Button>
       </DialogActions>
     </Dialog>
   );

diff --git a/app/src/components/RecipeResultSnackBar.tsx b/app/src/components/RecipeResultSnackBar.tsx
@@ -0,0 +1,26 @@
+import { Alert, AlertTitle, Snackbar } from "@mui/material";
+
+interface PropTypes {
+  open: boolean;
+  error: boolean;
+  errorMessage: string;
+  handleClose: () => void;
+}
+
+export function RecipeResultSnackBar(props: PropTypes) {
+  const { open, error, errorMessage, handleClose } = props;
+
+  return (
+    <Snackbar
+      open={open}
+      autoHideDuration={5000}
+      onClose={handleClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+    >
+      <Alert severity={error ? "error" : "success"} onClose={handleClose}>
+        <AlertTitle>{error ? "Error adding recipe" : "Success"}</AlertTitle>
+        {error ? errorMessage : "Recipe added successfully"}
+      </Alert>
+    </Snackbar>
+  );
+}
diff --git a/app/src/pages/RecipeDisplayPage.tsx b/app/src/pages/RecipeDisplayPage.tsx
@@ -17,13 +17,19 @@ import AddIcon from "@mui/icons-material/Add";
 import { rbTheme } from "../styles/styles";
 import MenuAppBar from "../components/MenuAppBar";
 import { tokenAtom } from "../App";
+import { post } from "../helpers/backendRequests";
+import { RecipeResultSnackBar } from "../components/RecipeResultSnackBar";
 
 export function RecipeDisplayPage() {
   const [token] = useAtom(tokenAtom);
 
   const [recipes, setRecipes] = useState<Array<Recipe>>([]);
   const [modalOpen, setModalOpen] = useState(false);
 
+  const [snackbarOpen, setSnackbarOpen] = useState<boolean>(false);
+  const [snackbarIsError, setSnackbarIsError] = useState<boolean>(false);
+  const [snackbarErrorMessage, setSnackbarErrorMessage] = useState<string>("");
+
   const fabStyle = {
     position: "sticky",
     right: 16,
@@ -36,10 +42,23 @@ export function RecipeDisplayPage() {
         Authorization: `Bearer ${token.access_token}`,
       },
     });
-
     setRecipes(data);
   };
 
+  const addRecipe = async (newRecipeUrl: string) => {
+    setModalOpen(false);
+    try {
+      await post("/recipes", { url: newRecipeUrl }, token.access_token);
+      getRecipes();
+      setSnackbarIsError(false);
+      setSnackbarOpen(true);
+    } catch (e: any) {
+      setSnackbarErrorMessage(e.response.data.message);
+      setSnackbarIsError(true);
+      setSnackbarOpen(true);
+    }
+  };
+
   useEffect(() => {
     getRecipes();
   }, []);
@@ -61,7 +80,13 @@ export function RecipeDisplayPage() {
           <AddRecipeModal
             modalOpen={modalOpen}
             setModalOpen={setModalOpen}
-            getRecipes={getRecipes}
+            addRecipe={addRecipe}
+          />
+          <RecipeResultSnackBar
+            open={snackbarOpen}
+            error={snackbarIsError}
+            errorMessage={snackbarErrorMessage}
+            handleClose={() => setSnackbarOpen(false)}
           />
           <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
             <Stack spacing={2}>
@@ -82,7 +107,3 @@ export function RecipeDisplayPage() {
     </ThemeProvider>
   );
 }
-
-// interface propTypes {
-//   tokenAtom: Atom<any>;
-// }