create algorithm for show products in home page

src/pages/index.js

@@ -27,8 +27,11 @@ export default function Home() {
   const cart = useContext(CartContext);
   const [category, setCategory] = useState(-1);
   const [categoryList, setCategoryList] = useState([]);
+  const [productsFilter, setProductsFilter] = useState([]);
+  const [algorithm, setAlgorithm] = useState([]);
 
-  const productsFilter =
+  useEffect(() => {
+    let product_cache =
       !!router.query?.q && router.query?.q?.length
         ? products.filter(
             (prod) =>
@@ -43,6 +46,19 @@ export default function Home() {
               (category === -1 || category === prod.cateId) &&
               Number(prod.stock) > 0
           );
+    setProductsFilter(product_cache);
+
+    if (!algorithm.length) {
+      let seed = [...Array(products.length).keys()];
+      let productRandom = [];
+      for (let i = 0; i < seed.length; i++) {
+        let point = Math.floor(Math.random() * seed.length);
+        productRandom.push(seed[point]);
+        seed.slice(point, 1);
+      }
+      setAlgorithm(productRandom);
+    }
+  }, [products, category]);
 
   async function onCart(id, isRemove = false) {
     if (!user.value?.token) {
@@ -111,13 +127,15 @@ export default function Home() {
   };
 
   useEffect(() => {
+    if (!user.value?.token) return;
     fetchCategory();
     FetchProduct();
   }, [user]);
+
   useEffect(() => {
     if (router.query?.cat) {
       setCategory(Number(router.query.cat));
-    } else {
+    } else if (category !== -1) {
       setCategory(-1);
     }
   }, [router]);
@@ -177,37 +195,45 @@ export default function Home() {
 
         {productsFilter.length ? (
           <div className="mx-auto text-left grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 max-w-[1520px]">
-            {productsFilter.map((prod, idx) => (
+            {algorithm.map(
+              (algor, idx) =>
+                !!productsFilter[algor]?.id && (
                   <ProductCard
                     key={idx}
                     isFav={
                       !!wishlist.value.filter(
-                    (wish) => wish.product_id === Number(prod.id)
+                        (wish) =>
+                          wish.product_id === Number(productsFilter[algor].id)
                       ).length
                     }
                     isCart={
-                  !!cart.value.filter((ct) => ct.product_id === Number(prod.id))
-                    .length
+                      !!cart.value.filter(
+                        (ct) =>
+                          ct.product_id === Number(productsFilter[algor].id)
+                      ).length
                     }
-                product={prod}
+                    product={productsFilter[algor]}
                     cartHandler={() =>
                       onCart(
                         prod.id,
                         !!cart.value.filter(
-                      (ct) => ct.product_id === Number(prod.id)
+                          (ct) =>
+                            ct.product_id === Number(productsFilter[algor].id)
                         ).length
                       )
                     }
                     favHandler={() =>
                       onWishlist(
-                    prod.id,
+                        productsFilter[algor].id,
                         !!wishlist.value.filter(
-                      (wish) => wish.product_id === Number(prod.id)
+                          (wish) =>
+                            wish.product_id === Number(productsFilter[algor].id)
                         ).length
                       )
                     }
                   />
-            ))}
+                )
+            )}
           </div>
         ) : (
           <Paper sx={{ p: 2, textAlign: "center" }}>ไม่พบรายการ</Paper>