From c9713a6e89a892e76eece537c73c7affc18e3c80 Mon Sep 17 00:00:00 2001 From: Moaz Dawalibi Date: Mon, 10 Jun 2024 17:24:05 +0300 Subject: [PATCH] fix bugs --- src/Components/HOC/CartWithDrawer.tsx | 2 +- src/Components/HOC/ChangeMode.tsx | 2 +- src/Components/HOC/SearchWithDrawer.tsx | 45 ++--- src/Components/Home/BoseHeadphones.tsx | 5 +- src/Components/Home/ProductSwiper.tsx | 6 +- src/Components/Utils/Search/SearchButton.tsx | 26 +-- src/Components/Utils/SearchBar/SearchBar.scss | 35 ++-- src/Pages/Faqs/CollapseGroup.tsx | 41 ++++- src/Pages/Product/Page.tsx | 17 +- src/Pages/Product/Similar.tsx | 8 +- src/Styles/App/Mixing.scss | 5 +- src/Styles/App/className.scss | 4 +- src/Styles/Auth/Auth.scss | 14 +- src/Styles/Layout/Layout.scss | 4 +- src/Styles/Layout/NavBar.scss | 18 +- src/Styles/Page/About.scss | 3 + src/Styles/Page/Cart.scss | 27 ++- src/Styles/Page/Categories.scss | 19 ++- src/Styles/Page/Faqs.scss | 155 +++++++----------- src/Styles/Page/Home.scss | 81 +++------ src/Styles/Page/setting.scss | 18 +- src/Styles/components/Card.scss | 10 +- src/Styles/components/antd.scss | 11 ++ src/translate/ar.json | 5 +- src/translate/ch.json | 4 +- src/translate/en.json | 7 +- 26 files changed, 273 insertions(+), 299 deletions(-) diff --git a/src/Components/HOC/CartWithDrawer.tsx b/src/Components/HOC/CartWithDrawer.tsx index 2cea1d0..e98f7cf 100644 --- a/src/Components/HOC/CartWithDrawer.tsx +++ b/src/Components/HOC/CartWithDrawer.tsx @@ -64,7 +64,7 @@ const CartWithDrawer = () => { onClose={() => setOpen(false)} open={open} key={placement} - width={550} + width={450} style={{maxHeight:"60%", minHeight:"500px"}} >
diff --git a/src/Components/HOC/ChangeMode.tsx b/src/Components/HOC/ChangeMode.tsx index e41fe5f..42e295a 100644 --- a/src/Components/HOC/ChangeMode.tsx +++ b/src/Components/HOC/ChangeMode.tsx @@ -16,7 +16,7 @@ export const ChangeModeComp = ({onClickFunction, src, modeText,icon, isImage = t const ModeContainer = memo(() => (
{isImage - ? ModeImage + ? ModeImage : icon } {t(modeText)} diff --git a/src/Components/HOC/SearchWithDrawer.tsx b/src/Components/HOC/SearchWithDrawer.tsx index 53a8c7a..03db1bd 100644 --- a/src/Components/HOC/SearchWithDrawer.tsx +++ b/src/Components/HOC/SearchWithDrawer.tsx @@ -1,33 +1,23 @@ -import React, { useState, ReactNode } from 'react'; +import { useState } from 'react'; import type { DrawerProps } from 'antd'; -import { Badge, Button, Drawer, Space } from 'antd'; -import CardItem from '../Cart/CardItem'; -import { BsArrowLeft, BsCart, BsSearch } from 'react-icons/bs'; -import { Link } from 'react-router-dom'; -import { ShoppingCartOutlined } from '@ant-design/icons'; -import { useCartData } from '../../Redux/DispatchData'; -import { useTranslation } from 'react-i18next'; +import { Drawer, Space } from 'antd'; import { TiDeleteOutline } from "react-icons/ti"; import SearchButton from '../Utils/Search/SearchButton'; -import { GoClock } from "react-icons/go"; -import { FiDelete } from "react-icons/fi"; -import { RiSearch2Line, RiSearchLine } from "react-icons/ri"; - - +import { RiSearchLine } from "react-icons/ri"; +import Empty from '../Utils/Search/Empty'; const SearchWithDrawer = () => { const [open, setOpen] = useState(false); const [placement, setPlacement] = useState('right'); - const { DataCart,count} = useCartData() - const {t} = useTranslation(); - - + const [noDataFound, setNoDataFound] = useState(true); + console.log(noDataFound); + return ( <> -
setOpen(true)} className="icon_navbar"> - -
+
setOpen(true)} className="icon_navbar"> + +
{ onClose={() => setOpen(false)} open={open} key={placement} - width ={700} - style={{maxHeight:"40%"}} + width={720} + style={{ maxHeight: "40%" }} >
- - setOpen(false)}> + + setOpen(false)}> +
+
+ {noDataFound && }
- - - ); }; export default SearchWithDrawer; - diff --git a/src/Components/Home/BoseHeadphones.tsx b/src/Components/Home/BoseHeadphones.tsx index c80b953..23faf71 100644 --- a/src/Components/Home/BoseHeadphones.tsx +++ b/src/Components/Home/BoseHeadphones.tsx @@ -1,6 +1,5 @@ -import React from "react"; import { useTranslation } from "react-i18next"; -import { GoArrowUpRight } from "react-icons/go"; +import { RiArrowRightUpFill } from "react-icons/ri"; const BoseHeadphones = () => { const {t} = useTranslation(); @@ -12,7 +11,7 @@ const BoseHeadphones = () => {

{t("Smarter than your average headphones")}

diff --git a/src/Components/Home/ProductSwiper.tsx b/src/Components/Home/ProductSwiper.tsx index d749813..5e78386 100644 --- a/src/Components/Home/ProductSwiper.tsx +++ b/src/Components/Home/ProductSwiper.tsx @@ -1,11 +1,10 @@ -import React, { useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/free-mode'; import 'swiper/css/pagination'; import ProductCard from './ProductCard'; import { Product } from '../../types/item'; -import { useGetBaseProduct } from '../../api/baseProduct'; import { A11y, Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules'; import { Spin } from 'antd'; @@ -13,7 +12,6 @@ import { Spin } from 'antd'; const ProductSwiper = ({data,isLoading}:any) => { const language = localStorage.getItem('language') ; - console.log(language); const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr"); const swiperRef = useRef(null); @@ -28,7 +26,7 @@ const ProductSwiper = ({data,isLoading}:any) => { spaceBetween={50} breakpoints={{ 0: { slidesPerView: 1 }, - 400: { slidesPerView: 2 }, + 400: { slidesPerView: 1 }, 600: { slidesPerView: 2 }, 900: { slidesPerView: 4 }, 1200: { slidesPerView: 4 }, diff --git a/src/Components/Utils/Search/SearchButton.tsx b/src/Components/Utils/Search/SearchButton.tsx index 16c2ae9..4dbbe4b 100644 --- a/src/Components/Utils/Search/SearchButton.tsx +++ b/src/Components/Utils/Search/SearchButton.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Select, Spin } from 'antd'; import { useNavigate, useSearchParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; @@ -6,7 +6,12 @@ import { LuSearch } from 'react-icons/lu'; import { useGetBaseProduct } from '../../../api/baseProduct'; import { Product } from '../../../types/item'; -const SearchButton: React.FC = () => { +interface SearchButtonProps { + setOpen: (open: boolean) => void; + setNoDataFound: (noData: boolean) => void; +} + +const SearchButton: React.FC = ({ setOpen, setNoDataFound }) => { const navigate = useNavigate(); const { t } = useTranslation(); const [searchParams] = useSearchParams(); @@ -17,9 +22,13 @@ const SearchButton: React.FC = () => { }); const BaseProducts = (data?.products as Product[]) || []; + useEffect(() => { + setNoDataFound(!isLoading && BaseProducts.length <= 0); + }, [isLoading, BaseProducts, setNoDataFound]); + const options = BaseProducts.map((product: any) => ({ value: product.base_product_id, - label: product?.name as string, // Ensuring the label is a string + label: product?.name as string, })); const handleSearchChange = (value: string) => { @@ -32,22 +41,21 @@ const SearchButton: React.FC = () => { const handleSelectChange = (value: number) => { const selectedProduct = BaseProducts.find(product => product.base_product_id === value); if (selectedProduct) { + setOpen(false); navigate(`/product/${selectedProduct.base_product_id}`); } }; const filterOption = (input: string, option?: { label: string }) => { if (!option) return false; - const filteredData = option?.label.toLowerCase().includes(input.toLowerCase()); - - return filteredData; + return option?.label.toLowerCase().includes(input.toLowerCase()); }; return (