fix(frontend): ⚡ Add refetch to home page and category select | fix a…

…dd product form
WildCodeSchool · Jul 17, 2024 · 3836106 · 3836106
1 parent c0287cd
commit 3836106
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/frontend/src/components/CategorySelect.tsx b/frontend/src/components/CategorySelect.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from "@apollo/client";
 import * as Select from "@radix-ui/react-select";
 import { GET_ALL_CATEGORIES } from "lib/graphql/queries";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface Category {
   id: string;
@@ -19,9 +19,13 @@ const CategorySelect: React.FC<CategorySelectProps> = ({
   selectedCategoryName,
   onCategoryChange,
 }) => {
-  const { loading, error, data } = useQuery(GET_ALL_CATEGORIES);
+  const { loading, error, data, refetch } = useQuery(GET_ALL_CATEGORIES);
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => {
+    refetch();
+  });
+
   const handleSelectChange = (categoryId: string, categoryName: string) => {
     onCategoryChange(categoryId, categoryName);
   };

diff --git a/frontend/src/components/ui/SearchInput.tsx b/frontend/src/components/ui/SearchInput.tsx
@@ -1,10 +1,12 @@
 import { useQuery } from "@apollo/client";
 import { GET_ALL_PRODUCTS_BY_KEYWORD } from "lib/graphql/queries";
-import Link from "next/link";
 import { useEffect, useState } from "react";
+
 import { FaTimes } from "react-icons/fa";
 import { IoMdSearch } from "react-icons/io";
 
+import Link from "next/link";
+
 const SearchInput = () => {
   const [searchActive, setSearchActive] = useState(false);
   const [searchValue, setSearchValue] = useState("");

diff --git a/frontend/src/containers/public/home/hot-products-section.tsx b/frontend/src/containers/public/home/hot-products-section.tsx
@@ -4,10 +4,16 @@ import LoadingProgress from "components/ui/LoadingProgress";
 import { GET_PRODUCTS } from "lib/graphql/queries";
 import { HiPlusCircle } from "react-icons/hi";
 
+import { useEffect } from "react";
+
 import styles from "styles/pages/ProductsPage.module.scss";
 
 const HomeHotProductsSection = () => {
-  const { data, loading, error } = useQuery(GET_PRODUCTS);
+  const { data, loading, error, refetch } = useQuery(GET_PRODUCTS);
+
+  useEffect(() => {
+    refetch();
+  });
 
   if (loading) return <LoadingProgress />;
   if (error) return <p>Error: {error.message}</p>;

diff --git a/frontend/src/pages/products/add.tsx b/frontend/src/pages/products/add.tsx
@@ -114,12 +114,12 @@ const ProductsAddPage = () => {
         <br />
         <label>
           Description courte: <br />
-          <input className="text-field" {...register("description_long")} />
+          <input className="text-field" {...register("description_short")} />
         </label>
         <br />
         <label>
           Description longue: <br />
-          <input className="text-field" {...register("description_short")} />
+          <input className="text-field" {...register("description_long")} />
         </label>
         <br />
         <div className="flex gap-4">