From 4523580573fadcf8a3fcb8dfd5e2e18431266797 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Thu, 3 Feb 2022 16:42:23 +0330 Subject: [PATCH] reza added global Search --- src/components/Navbar/SearchResult/index.js | 113 ++++++++++ src/components/Navbar/index.js | 68 +++--- src/components/Search/index.js | 5 +- src/views/Home/Desktop/Part4/index.js | 217 ++++++++++---------- 4 files changed, 256 insertions(+), 147 deletions(-) create mode 100644 src/components/Navbar/SearchResult/index.js diff --git a/src/components/Navbar/SearchResult/index.js b/src/components/Navbar/SearchResult/index.js new file mode 100644 index 0000000..dd6e3f6 --- /dev/null +++ b/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 ( +
+
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' }} + > +
+ محصولات + +
+ {relatedBooks.length > 0 ? ( +
    + {relatedBooks.map((book, index) => ( + setText(null)} + > + + + {book.product[1].name} + + + ))} +
+ ) : هیچ محصولی یافت نشد.} +
+ صفحات + +
+ {relatedPages.length > 0 ? ( +
    + {relatedPages.map((page, index) => ( + setText(null)} + > + {page.name} + + ))} +
+ ) : هیچ محصولی یافت نشد.} +
+
+ ); +}; + +const mapStateToProps = (state) => ({ + books: state.book.list, +}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(SearchResult); diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index e88c5ec..caa3e76 100644 --- a/src/components/Navbar/index.js +++ b/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 ? (
دانوین @@ -252,20 +243,25 @@ function Navbar({ style={{ maxWidth: "calc(100vw / 2)" }} >
- -
- -
- - - - {/* */} - {/* */} - {/* */} + setSearch(val)} /> + {search && }
+ {isLogin && ( +
+ + + + {cartProductsLength} + + + {/* */} + {/* */} + {/* */} +
+ )}
{/* */} - دسته بندی کالاها - -    + دسته بندی کالاها   
({ 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: [ diff --git a/src/components/Search/index.js b/src/components/Search/index.js index 25a8936..42563e4 100644 --- a/src/components/Search/index.js +++ b/src/components/Search/index.js @@ -20,10 +20,11 @@ export default function Search(props) { props.onChange(e.target.value)} />
diff --git a/src/views/Home/Desktop/Part4/index.js b/src/views/Home/Desktop/Part4/index.js index a5cde23..256c4e4 100644 --- a/src/views/Home/Desktop/Part4/index.js +++ b/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
-
-
-
-

- جدیدترین دوره های ویدیویی -

-
-
- -
-
-
-} + + ))} + + + + ); +}; -export default Part4; \ No newline at end of file +export default Part4;