reza added global Search

src/components/Navbar/SearchResult/index.js

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+
+const Pages = [
+  {
+    strings : 'خانه - home - Home - Landing - landing', link : '/', name : 'خانه'
+  },
+  {
+    strings : 'ورود - ثبت نام - لاگین - login - Login', link : '/signup', name : 'ورود یا ثبت نام'
+  },
+  {
+    strings : 'کتاب - محصول - ویدئو - book - video - books - videos - خرید - ریاضی - علوم - شیمی - زیست - محصولات - ویدئوها - کتاب‌ها', link : '/products', name : 'محصولات'
+  },
+  {
+    strings : 'آدرس - شماره تماس - ارتباط با ما - نقشه - تیکت - شکایت - address - map - phone number - contact us', link : '/contact-us', name : 'ارتباط با ما'
+  },
+]
+
+export const SearchResult = ({ text, books, setText }) => {
+  const [relatedBooks, setRelatedBooks] = useState([]);
+  const [relatedPages, setRelatedPages] = useState([]);
+
+  useEffect(() => {
+    if (text && books.length > 0) {
+      let list = books.filter(
+        (book) =>
+          book.product[0].name.indexOf(text) !== -1 ||
+          book.product[1].name.indexOf(text) !== -1
+      );
+      let pages = Pages.filter((page) => page.strings.indexOf(text) !== -1);
+      setRelatedPages(pages);
+      setRelatedBooks(list);
+
+    }
+  }, [text]);
+
+  
+  return (
+    <div
+      className="w-full list-none relative"
+      // style={{ height: 300 }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="absolute -top-1 w-full left-0 px-6 pt-5 bg-white pb-5 shadow-lg rounded-md flex flex-col overflow-y-scroll"
+        style={{ maxHeight: "calc(100vh / 1.5)", direction : 'ltr' }}
+      >
+        <header className="w-full flex flex-row-reverse items-center gap-4">
+          <strong className="text-greenBA font-normal text-sm">محصولات</strong>
+          <span
+            className="flex-1 bg-greenBA bg-opacity-30"
+            style={{ height: 1 }}
+          ></span>
+        </header>
+        {relatedBooks.length > 0 ? (
+          <ul className="list-none p-0 m-0 mt-4 flex flex-col gap-3 divide-solid divide-y divide-gray-200">
+            {relatedBooks.map((book, index) => (
+              <Link
+                to={"/products/" + book.id}
+                className="flex flex-row-reverse w-full gap-4 items-center"
+                ley={index}
+                onClick={() => setText(null)}
+              >
+                <img
+                  style={{
+                    height: "calc(100vh / 17)",
+                    width: "calc(100vh / 17 * 2 / 3)",
+                  }}
+                  className="rounded-sm"
+                  src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
+                  alt=""
+                ></img>
+                <strong className="text-sm pt-2 text-blueC0 font-semibold">
+                  {book.product[1].name}
+                </strong>
+              </Link>
+            ))}
+          </ul>
+        ) : <span style={{direction: "rtl"}} className="text-blueC0 text-sm text-right py-4 font-semibold">هیچ محصولی یافت نشد.</span>}
+        <header className="w-full flex flex-row-reverse items-center gap-4 mt-5">
+          <strong className="text-greenBA font-normal text-sm">صفحات</strong>
+          <span
+            className="flex-1 bg-greenBA bg-opacity-30"
+            style={{ height: 1 }}
+          ></span>
+        </header>
+        {relatedPages.length > 0 ? (
+          <ul className="list-none p-0 m-0 mt-4 flex flex-col gap-3 divide-solid divide-y divide-gray-200">
+            {relatedPages.map((page, index) => (
+              <Link
+                to={page.link}
+                className="flex flex-row-reverse w-full gap-4 items-center text-green-800 text-tiny font-semibold underline"
+                ley={index}
+                onClick={() => setText(null)}
+              >
+                {page.name}
+              </Link>
+            ))}
+          </ul>
+        ) : <span style={{direction: "rtl"}} className="text-blueC0 text-sm text-right py-4 font-semibold">هیچ محصولی یافت نشد.</span>}
+      </div>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  books: state.book.list,
+});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SearchResult);

src/components/Navbar/index.js

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { connect } from "react-redux";
-import {publicApi} from "../../redux/actions";
+import { userProduct } from "../../redux/actions";
 import _ from "lodash";
 import Drawer from "../Drawer";
 import Search from "../Search";
+import SearchResult from "./SearchResult";
 //assets
 import cartIcon from "./cart-blue.svg";
 // import whiteCartIcon from "./white-cart-icon.svg";
@@ -31,6 +32,8 @@ import dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg";
 import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg";
 
 function Navbar({
+  getCartProducts,
+  cartProductsLength,
   pages,
   isDark,
   isMobile,
@@ -50,12 +53,12 @@ function Navbar({
     headerOptions;
 
   const [top, setTop] = useState(false);
+  const [search, setSearch] = useState(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [desktopMiddleFix, setDesktopMiddleFix] = useState(false);
   const [desktopEndTransform, setDesktopEndTransform] = useState(false);
 
   useEffect(() => {
-    var lastScroll = window.scrollY;
     if (window.scrollY === 0) {
       setTop(() => true);
     }
@@ -68,25 +71,13 @@ function Navbar({
         }
       });
     }
-
-    if (!isMobile) {
-      window.addEventListener("scroll", () => {
-        if (window.scrollY >= 64) {
-          setDesktopMiddleFix(() => true);
-        } else {
-          setDesktopMiddleFix(() => false);
-        }
-
-        if (window.scrollY > lastScroll && window.scrollY >= 90) {
-          setDesktopEndTransform(() => true);
-        } else {
-          setDesktopEndTransform(() => false);
-        }
-        lastScroll = window.scrollY;
-      });
-    }
   }, []);
 
+  useEffect(() => {
+    if (!isMobile && isLogin) {
+      getCartProducts();
+    }
+  }, [isLogin]);
   return isMobile ? (
     <div
       className={_.join(
@@ -241,7 +232,7 @@ function Navbar({
             <Link to="/" className="flex flex-row items-center">
               <img src={logoIcon} className="w-6" />
               <span
-                className={`text-base font-bold text-3xl text-blue52 transform translate-y-1 mr-2`}
+                className={`font-bold text-3xl text-blue52 transform translate-y-1 mr-2`}
               >
                 دانوین
               </span>
@@ -252,20 +243,25 @@ function Navbar({
             style={{ maxWidth: "calc(100vw / 2)" }}
           ></div>
           <div
-            className="flex w-full  absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            className="flex flex-col w-full  absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
             style={{ maxWidth: "calc(100vw / 3)" }}
           >
-            <Search />
-          </div>
-
-          <div className="flex justify-end items-center gap-4">
-            <Link to="/cart">
-              <img src={cartIcon} alt="" className="w-9" />
-            </Link>
-            {/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
-            {/* <img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> */}
-            {/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
+            <Search onChange={(val) => setSearch(val)} />
+            {search && <SearchResult text={search} setText={setSearch} />}
           </div>
+          {isLogin && (
+            <div className="flex justify-end items-center gap-4">
+              <Link to="/cart" className="relative">
+                <img src={cartIcon} alt="" className="w-11" />
+                <span className="absolute -right-2 -top-0.5 w-6 h-6 flex justify-center items-center bg-blue-500 bg-opacity-90 rounded-full text-white text-tiny">
+                  {cartProductsLength}
+                </span>
+              </Link>
+              {/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
+              {/* <img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> */}
+              {/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
+            </div>
+          )}
         </div>
 
         <div
@@ -286,9 +282,7 @@ function Navbar({
             />
             {/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */}
             <span className={`text-sm text-blue52 ${productCategoryTextColor}`}>
-              دسته بندی کالاها
-              
-              &nbsp;&nbsp;
+              دسته بندی کالاها &nbsp;&nbsp;
             </span>
           </div>
           <div
@@ -326,10 +320,14 @@ const mapStateToProps = (state) => ({
   isMobile: state.publicApi.isMobile,
   headerOptions: state.publicApi.headerOptions,
   isLogin: state.user.status,
+  cartProductsLength: state.userProduct.list?.length,
 });
 
+const mapDispatchToProps = {
+  getCartProducts: userProduct.list,
+};
 
-export default connect(mapStateToProps)(Navbar);
+export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
 
 Navbar.defaultProps = {
   pages: [

src/components/Search/index.js

@@ -20,10 +20,11 @@ export default function Search(props) {
         </span>
         <input
           type="search"
-          name="q"
-          className="w-full py-3 text-sm text-white border border-solid border-gray-200 rounded-md pr-5 pl-14 outline-none focus:ring-1 focus:text-gray-900 "
+          name={props.name}
+          className="w-full py-3 text-sm lg:text-tiny lg:font-semibold text-gray1 border border-solid border-gray-200 rounded-md pr-5 pl-14 outline-none focus:ring-1 focus:text-gray-900 "
           placeholder={_.join([langDetector(props.lang , "جستجو...", "Search...")], " ")}
           autoComplete="off"
+          onChange={(e) => props.onChange(e.target.value)}
         />
       </div>
     </div>

src/views/Home/Desktop/Part4/index.js

@@ -2,118 +2,115 @@ import React from "react";
 import Button from "../../../../components/Button";
 import VodProduct from "../../../../components/VodProduct";
 import { Link } from "react-router-dom";
-import posterImage from '../../../../assets/images/poster.svg'
+import posterImage from "../../../../assets/images/poster.svg";
 const Part4 = () => {
-    const videosData = [
-        {
-          id: 0,
-          name: "ریاضی",
-          price: "145.000",
-          grade: " پایه چهارم ",
-          imageUrl: "https://dnvn.ir/api/v1/file/2105",
-          poster: posterImage,
-        },
-        {
-          id: 2,
-          name: "علوم تجربی",
-          price: "145.000 ",
-          grade: "پایه سوم",
-          imageUrl: "https://dnvn.ir/api/v1/file/2105",
-          poster: posterImage,
-        },
-        {
-          id: 1,
-          name: "زمین شناسی",
-          price: "145.000 ",
-          grade: "پایه چهارم",
-          imageUrl: "https://dnvn.ir/api/v1/file/2105",
-          poster: posterImage,
-        },
-        {
-          id: 3,
-          name: "ریاضی",
-          price: "145.000 ",
-          grade: "پایه چهارم",
-          imageUrl: "https://dnvn.ir/api/v1/file/2105",
-          poster: posterImage,
-        },
-        {
-          id: 5,
-          name: "ریاضی",
-          price: "145.000 ",
-          grade: "پایه چهارم",
-          imageUrl: "https://dnvn.ir/api/v1/file/2105",
-          poster: posterImage,
-        },
-        {
-            id: 4,
-            name: "ریاضی",
-            price: "145.000 ",
-            grade: "پایه چهارم",
-            imageUrl: "https://dnvn.ir/api/v1/file/2105",
-            poster: posterImage,
-          }
-      ];
-     
-    return <div className="w-full my-6" >
-          <div className="w-full flex justify-between items-center">
-              <div className="flex items-center text-4xl font-black text-blue52">
-              <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
-                  <h1>
-                  جدیدترین دوره های ویدیویی
-                  </h1>
-              </div>
-              <div>
-                  <Link to='/products'>
-                      <Button
-                          title="مشاهده لیست محصولات"
-                          backgroundColor="bg-blue-100"
-                          border={{
-                              color: "#196EC055",
-                              width: "0px",
-                            }}
-                          width="100%"
-                          selectable={true}
-                          
-                          color= "text-blueC0"
-                          onClick={() => null}
-                          radius={false}
-                          twPaddings="py-4 px-12"
-                      />
-                  </Link>
-              </div>
-          </div>
-          <ul className="py-6 my-10 border-t border-b border-solid border-gray-200 justify-center" style={{}}>
-              
-
-          <ul className="flex flex-wrap justify-center ">
-          {
-            videosData.slice(0,6).map((video, index) => (
-                <li className={`flex flex-col border-solid border-gray-200 ${index != 3 && index != 4 && index != 5 ? 'border-b' : null} video ${index != 0 && index != 3 ?'border-r' : null}`}
-                style={{width: '33.333333%',}}>
-              <Link
-              to={"/videos/" + video.id}
+  const videosData = [
+    {
+      id: 0,
+      name: "ریاضی",
+      price: "145.000",
+      grade: " پایه چهارم ",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+    {
+      id: 2,
+      name: "علوم تجربی",
+      price: "145.000 ",
+      grade: "پایه سوم",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+    {
+      id: 1,
+      name: "زمین شناسی",
+      price: "145.000 ",
+      grade: "پایه چهارم",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+    {
+      id: 3,
+      name: "ریاضی",
+      price: "145.000 ",
+      grade: "پایه چهارم",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+    {
+      id: 5,
+      name: "ریاضی",
+      price: "145.000 ",
+      grade: "پایه چهارم",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+    {
+      id: 4,
+      name: "ریاضی",
+      price: "145.000 ",
+      grade: "پایه چهارم",
+      imageUrl: "https://dnvn.ir/api/v1/file/2105",
+      poster: posterImage,
+    },
+  ];
 
+  return (
+    <div className="w-full my-6">
+      <div className="w-full flex justify-between items-center">
+        <div className="flex items-center text-4xl font-black text-blue52">
+          <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
+          <h1>جدیدترین دوره های ویدیویی</h1>
+        </div>
+        <div>
+          <Link to="/products">
+            <Button
+              title="مشاهده لیست محصولات"
+              backgroundColor="bg-blue-100"
+              border={{
+                color: "#196EC055",
+                width: "0px",
+              }}
+              width="100%"
+              selectable={true}
+              color="text-blueC0"
+              onClick={() => null}
+              radius={false}
+              twPaddings="py-4 px-12"
+            />
+          </Link>
+        </div>
+      </div>
+      <ul
+        className="py-6 my-10 border-t border-b border-solid border-gray-200 justify-center"
+        style={{}}
+      >
+        <ul className="flex flex-wrap justify-center ">
+          {videosData.slice(0, 6).map((video, index) => (
+            <li
+              className={`flex flex-col border-solid border-gray-200 ${
+                index != 3 && index != 4 && index != 5 ? "border-b" : null
+              } video ${index != 0 && index != 3 ? "border-r" : null}`}
+              style={{ width: "33.333333%" }}
             >
-              <VodProduct 
-                productTitle={`دوره ی ویدیویی ${video.name}`}
-                productCat={video.grade}
-                price={video.price}
-                priceTitle={false}
-                discountPrice={false}
-                key={index}
-                index={index}
-                minHeight={"calc(100vh / 3.5)"}
-              />
+              <Link to={"/videos/" + video.id}>
+                <VodProduct
+                  productTitle={`دوره ی ویدیویی ${video.name}`}
+                  productCat={video.grade}
+                  price={video.price}
+                  priceTitle={false}
+                  discountPrice={false}
+                  key={index}
+                  index={index}
+                  minHeight={"calc(100vh / 3.5)"}
+                />
               </Link>
-              </li>
-            ))
-          }
-          </ul>
-         
-          
-          </ul>
-      </div>
-}
+            </li>
+          ))}
+        </ul>
+      </ul>
+    </div>
+  );
+};
 
 export default Part4;