Only redirect to previous page if isSuccess

bocabitlabs · Jul 9, 2024 · afc2608 · afc2608
1 parent 270a994
commit afc2608
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 31 deletions.
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "homepage": "/",
   "private": true,
   "dependencies": {

diff --git a/client/src/pages/products/ProductsPage/components/AddProductButton/AddProductButton.tsx b/client/src/pages/products/ProductsPage/components/AddProductButton/AddProductButton.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Box,
@@ -32,7 +33,7 @@ const productTypes = [
 export default function AddProductButton() {
   const { t } = useTranslation();
   const [opened, { open, close }] = useDisclosure(false);
-  const { mutate, isLoading } = useAddProduct();
+  const { mutate, isLoading, isSuccess } = useAddProduct();
 
   const form = useForm({
     initialValues: {
@@ -44,9 +45,15 @@ export default function AddProductButton() {
   const onSubmit = (values: any) => {
     console.log(values);
     mutate(values);
-    close();
   };
 
+  useEffect(() => {
+    if (isSuccess) {
+      form.reset();
+      close();
+    }
+  }, [isSuccess, form, close]);
+
   return (
     <>
       <Modal

diff --git a/client/src/pages/recipes/AddRecipePage/components/AddRecipeForm/AddRecipeForm.tsx b/client/src/pages/recipes/AddRecipePage/components/AddRecipeForm/AddRecipeForm.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import {
@@ -52,8 +52,8 @@ const daysOfWeek = [
 
 export default function AddRecipeForm() {
   const { t } = useTranslation();
-  const { mutate, isLoading } = useAddrecipe();
-  const { data: products, isFetching: productsFetching } = useProducts();
+  const { mutate, isLoading, isSuccess } = useAddrecipe();
+  const { data: products, isLoading: productsLoading } = useProducts();
   const { data: sides, isLoading: sidesLoading } = useSides();
   const navigate = useNavigate();
   const [files, setFiles] = useState<FileWithPath[]>([]);
@@ -123,10 +123,6 @@ export default function AddRecipeForm() {
     extensions: editorExtensions,
   });
 
-  if (productsFetching || sidesLoading) {
-    return <div>{t("Loading...")}</div>;
-  }
-
   const generateIngredientsFields = () => {
     const productsOptions = products.map((product: IProduct) => ({
       value: product.id.toString(),
@@ -212,9 +208,19 @@ export default function AddRecipeForm() {
     newValues.image = base64file || null;
 
     mutate(newValues);
-    navigate(-1);
   };
 
+  useEffect(() => {
+    if (isSuccess) {
+      form.reset();
+      navigate(-1);
+    }
+  }, [isSuccess, form, navigate]);
+
+  if (productsLoading || sidesLoading) {
+    return <div>{t("Loading...")}</div>;
+  }
+
   return (
     <Group>
       <Box>

diff --git a/client/src/pages/recipes/EditRecipePage/components/EditRecipeForm/EditRecipeForm.tsx b/client/src/pages/recipes/EditRecipePage/components/EditRecipeForm/EditRecipeForm.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import {
@@ -56,7 +56,7 @@ interface EditRecipeFormProps {
 
 export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
   const { t } = useTranslation();
-  const { mutate, isLoading } = useUpdateRecipe();
+  const { mutate, isLoading, isSuccess } = useUpdateRecipe();
   const { data: products, isLoading: productsLoading } = useProducts();
   const { data: sides, isLoading: sidesLoading } = useSides();
   const navigate = useNavigate();
@@ -231,9 +231,15 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
 
     console.log(newValues);
     mutate({ recipeId: recipe.id, newRecipe: newValues });
-    navigate(-1);
   };
 
+  useEffect(() => {
+    if (isSuccess) {
+      form.reset();
+      navigate(-1);
+    }
+  }, [isSuccess, form, navigate]);
+
   if (productsLoading || sidesLoading) {
     return <div>{t("Loading products and side meals...")}</div>;
   }

diff --git a/client/src/pages/sides/AddSidePage/components/AddSideForm/AddSideForm.tsx b/client/src/pages/sides/AddSidePage/components/AddSideForm/AddSideForm.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import {
@@ -28,7 +28,7 @@ import { useEditor } from "@tiptap/react";
 import ImageDropZone from "components/ImageDropzone/ImageDropZone";
 import { useProducts } from "hooks/products/use-products";
 import { useAddrecipe } from "hooks/recipes/use-recipes";
-import recipeTypes from "pages/recipes/recipe-types";
+import { recipeTypes } from "pages/recipes/recipe-types";
 import { IProduct } from "types/products";
 import { DaysOfWeek, MealTemps, MealTypes } from "types/recipes";
 import { getBase64 } from "utils/base_64";
@@ -52,8 +52,8 @@ const daysOfWeek = [
 
 export default function AddSideForm() {
   const { t } = useTranslation();
-  const { mutate, isLoading } = useAddrecipe();
-  const { data: products, isFetching: productsFetching } = useProducts();
+  const { mutate, isLoading, isSuccess } = useAddrecipe();
+  const { data: products, isLoading: productsLoading } = useProducts();
   const navigate = useNavigate();
   const [files, setFiles] = useState<FileWithPath[]>([]);
   const [base64file, setBase64file] = useState<string | null>(null);
@@ -122,10 +122,6 @@ export default function AddSideForm() {
     extensions: editorExtensions,
   });
 
-  if (productsFetching) {
-    return <div>{t("Loading...")}</div>;
-  }
-
   const getIngredients = () => {
     const productsOptions = products.map((product: IProduct) => ({
       value: product.id.toString(),
@@ -179,9 +175,19 @@ export default function AddSideForm() {
     newValues.image = base64file || null;
 
     mutate(newValues);
-    navigate(-1);
   };
 
+  useEffect(() => {
+    if (isSuccess) {
+      form.reset();
+      navigate(-1);
+    }
+  }, [isSuccess, form, navigate]);
+
+  if (productsLoading) {
+    return <div>{t("Loading...")}</div>;
+  }
+
   return (
     <Group>
       <Box>

diff --git a/client/src/pages/sides/EditSidePage/components/EditSideForm/EditSideForm.tsx b/client/src/pages/sides/EditSidePage/components/EditSideForm/EditSideForm.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import {
@@ -28,7 +28,7 @@ import { useEditor } from "@tiptap/react";
 import ImageDropZone from "components/ImageDropzone/ImageDropZone";
 import { useProducts } from "hooks/products/use-products";
 import { useUpdateRecipe } from "hooks/recipes/use-recipes";
-import recipeTypes from "pages/recipes/recipe-types";
+import { recipeTypes } from "pages/recipes/recipe-types";
 import { IProduct } from "types/products";
 import { DaysOfWeek, IRecipe, MealTemps, MealTypes } from "types/recipes";
 import { getBase64 } from "utils/base_64";
@@ -56,8 +56,8 @@ interface EditRecipeFormProps {
 
 export default function EditSideForm({ recipe }: EditRecipeFormProps) {
   const { t } = useTranslation();
-  const { mutate, isLoading } = useUpdateRecipe();
-  const { data: products, isFetching: productsFetching } = useProducts();
+  const { mutate, isLoading, isSuccess } = useUpdateRecipe();
+  const { data: products, isLoading: productsLoading } = useProducts();
   const navigate = useNavigate();
   const [files, setFiles] = useState<FileWithPath[]>([]);
   const [base64file, setBase64file] = useState<string | null>(null);
@@ -191,10 +191,16 @@ export default function EditSideForm({ recipe }: EditRecipeFormProps) {
 
     console.log(newValues);
     mutate({ recipeId: recipe.id, newRecipe: newValues });
-    navigate(-1);
   };
 
-  if (productsFetching) {
+  useEffect(() => {
+    if (isSuccess) {
+      form.reset();
+      navigate(-1);
+    }
+  }, [isSuccess, form, navigate]);
+
+  if (productsLoading) {
     return <div>{t("Loading products...")}</div>;
   }
   return (

diff --git a/client/src/version.js b/client/src/version.js
@@ -1,2 +1,2 @@
-export const PACKAGE_VERSION = "1.4.1";
+export const PACKAGE_VERSION = "1.4.2";
 export default { PACKAGE_VERSION };
diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "cociplan"
-version = "1.4.1"
+version = "1.4.2"
 description = "Weekly menu planner"
 authors = ["Rene Fernandez <[email protected]>"]
 license = "GNU General Public License v3 (GPLv3)"