Merge pull request #80 from NextCafeteria/feature/product-filter

Implement product filter
NextCafeteria · Sep 6, 2023 · 62c953d · 62c953d
2 parents 31433ac + f23cbe2
commit 62c953d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "encoding": "^0.1.13",
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.2",
+    "fuse.js": "^6.6.2",
     "i18next": "22.4.15",
     "i18next-browser-languagedetector": "7.0.1",
     "i18next-resources-to-backend": "1.1.3",

diff --git a/src/app/[lng]/page.js b/src/app/[lng]/page.js
@@ -1,5 +1,5 @@
 "use client";
-
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import ProductCardSkeleton from "@/components/skeletons/ProductCard";
 import dynamic from "next/dynamic";
@@ -8,13 +8,36 @@ import { useTranslation } from "@/app/i18n/client";
 const Header = dynamic(() => import("@/components/Header"), { ssr: false });
 import { useGetCommonSettings } from "@/lib/requests/settings";
 import { formatPrice } from "@/lib/utils";
+import Fuse from "fuse.js";
 
 export default function Home({ params: { lng } }) {
   const { products, error, isLoading } = useGetProducts();
   if (error) {
     console.log(error);
   }
 
+  const [filteredProducts, setFilteredProducts] = useState(products);
+  const handleSearch = (event) => {
+    const { value } = event.target;
+    if (value.length === 0) {
+      setFilteredProducts(products);
+      return;
+    }
+
+    const fuse = new Fuse(products, {
+      keys: ["name", "description"],
+    });
+
+    const results = fuse.search(value);
+    const items = results.map((result) => result.item);
+    setFilteredProducts(items);
+  };
+
+  // First data load
+  useEffect(() => {
+    setFilteredProducts(products);
+  }, [products]);
+
   const { data: commonSettings } = useGetCommonSettings();
 
   const productCss = `
@@ -36,15 +59,23 @@ export default function Home({ params: { lng } }) {
       <style>{productCss}</style>
       <div className="max-w-[600px] md:max-w-[1000px] mx-auto font-mono text-sm">
         <Header />
+        <div className="px-3 mt-4">
+          <input
+            className="w-full border-[1px] border-gray-600 p-2 rounded-md max-[500px]"
+            type="text"
+            placeholder={t("Search Products")}
+            onChange={handleSearch}
+          />
+        </div>
         <div className="menu flex flex-wrap justify-center w-full md:gap-5 md:grid md:grid-cols-2">
           {isLoading
             ? Array.from({ length: 4 }, (e, i) => i).map((i) => (
                 <div className="product w-full" key={i}>
                   <ProductCardSkeleton />
                 </div>
               ))
-            : products &&
-              products.map((product, key) => {
+            : filteredProducts &&
+              filteredProducts.map((product, key) => {
                 const isAvailable =
                   product.isAvailable === undefined
                     ? true

diff --git a/src/app/i18n/locales/cn/common.json b/src/app/i18n/locales/cn/common.json
@@ -163,8 +163,6 @@
   "Total Sales": "总收入",
   "Number of Visitor": "客户数量",
   "Customer 360": "360° 查看客户",
-  "Ho Chi Minh Branch": "Chi Nhánh Hồ Chí Minh",
-  "Ha Noi Branch": "Chi Nhánh Hà Nội",
-  "Da Nang Branch": "Chi Nhánh Đà Nẵng",
-  "Filter By Branch": "Phân loại theo Chi Nhánh"
+  "Filter By Branch": "按分店筛选",
+  "Search Products": "搜索产品"
 }
diff --git a/src/app/i18n/locales/vi/common.json b/src/app/i18n/locales/vi/common.json
@@ -164,8 +164,6 @@
   "Total Sales": "Tổng Doanh Thu",
   "Number of Visitor": "Khách hàng tới quán",
   "Customer 360": "Xem khách hàng 360",
-  "Ho Chi Minh Branch": "Chi Nhánh Hồ Chí Minh",
-  "Ha Noi Branch": "Chi Nhánh Hà Nội",
-  "Da Nang Branch": "Chi Nhánh Đà Nẵng",
-  "Filter By Branch": "Phân loại theo Chi Nhánh"
+  "Filter By Branch": "Phân loại theo Chi Nhánh",
+  "Search Products": "Tìm kiếm sản phẩm"
 }
diff --git a/src/components/MainMenu.js b/src/components/MainMenu.js
@@ -27,12 +27,12 @@ function MainMenuUser({ lng }) {
   }`;
   return (
     <>
-      <div className="nav-bar flex justify-evenly md:justify-start md:pt-8 w-full fixed bottom-0 md:left-0 md:h-full md:w-auto md:flex-col h-[90px] border-t-[1px] md:border-t-0 md:border-r-[1px] rounded-t-xl md:rounded-none border-primary-500 p-2 bg-primary md:min-w-[100px]">
+      <div className="nav-bar flex justify-evenly md:justify-start md:pt-8 w-full fixed bottom-0 md:left-0 md:h-full md:w-auto md:flex-col h-[90px] border-t-[1px] md:border-t-0 md:border-r-[1px] rounded-t-xl md:rounded-none border-primary-500 p-2 bg-primary md:min-w-[120px] min-w-[50px]">
         <style>{navCss}</style>
         <Link href={`/${lng}`}>
           <div
             className={
-              "md:mb-4 md:py-4 nav-item flex flex-col items-center p-2 clickable text-center" +
+              "md:mb-4 md:py-4 nav-item flex flex-col items-center p-2 clickable text-center min-w-[80px]" +
               (currentPath === `/${lng}`
                 ? " bg-[#ffffffff] rounded-xl"
                 : " bg-[#ffffffcc] rounded-xl")
@@ -64,7 +64,7 @@ function MainMenuUser({ lng }) {
         <Link href={`/${lng}/orders`}>
           <div
             className={
-              "md:mb-4 md:py-4 nav-item flex flex-col items-center p-2 clickable text-center" +
+              "md:mb-4 md:py-4 nav-item flex flex-col items-center p-2 clickable text-center min-w-[80px]" +
               (currentPath === `/${lng}/orders`
                 ? " bg-[#ffffffff] rounded-xl"
                 : " bg-[#ffffffcc] rounded-xl")
@@ -102,7 +102,7 @@ function MainMenuUser({ lng }) {
         <Link href={`/${lng}/cart`}>
           <div
             className={
-              "md:mb-4 md:py-4 nav-item flex flex-col items-center p-2 clickable text-center" +
+              "md:mb-4 md:py-4 nav-item flex flex-col items-center p-2 clickable text-center min-w-[80px]" +
               (currentPath === `/${lng}/cart`
                 ? " bg-[#ffffffff] rounded-xl"
                 : " bg-[#ffffffcc] rounded-xl")
@@ -137,7 +137,7 @@ function MainMenuUser({ lng }) {
         <Link href={`/${lng}/user`}>
           <div
             className={
-              "md:mb-4 md:py-4 nav-item flex flex-col items-center p-2 clickable text-center" +
+              "md:mb-4 md:py-4 nav-item flex flex-col items-center p-2 clickable text-center min-w-[80px]" +
               (currentPath === `/${lng}/user`
                 ? " bg-[#ffffffff] rounded-xl"
                 : " bg-[#ffffffcc] rounded-xl")
@@ -192,7 +192,7 @@ function MainMenuStaff({ lng }) {
 
   return (
     <>
-      <div className="nav-bar flex justify-evenly md:justify-start md:pt-8 w-full fixed bottom-0 md:left-0 md:h-full md:w-auto md:flex-col h-[90px] border-t-[1px] md:border-t-0 md:border-r-[1px] rounded-t-xl md:rounded-none border-primary-500 p-2 bg-primary md:min-w-[100px]">
+      <div className="nav-bar flex justify-evenly md:justify-start md:pt-8 w-full fixed bottom-0 md:left-0 md:h-full md:w-auto md:flex-col h-[90px] border-t-[1px] md:border-t-0 md:border-r-[1px] rounded-t-xl md:rounded-none border-primary-500 p-2 bg-primary md:min-w-[120px]">
         <Link href={`/${lng}`}>
           <div
             className={