From 86f3045ccef833f7ffc9c1288d0a3c2939f02cd0 Mon Sep 17 00:00:00 2001
From: moaz_dw <moaz.dawalibi@sdnone.net>
Date: Sat, 13 Jul 2024 16:26:20 +0300
Subject: [PATCH] fixes

---
 src/Components/Home/Categories.tsx       | 15 +++++++++
 src/Components/Home/CategoriesSlider.tsx | 10 ++++--
 src/Components/Home/ProductCard.tsx      | 11 +------
 src/Components/Home/ProductSwiper.tsx    | 31 ++++++++-----------
 src/Pages/Home/Page.tsx                  |  3 +-
 src/Pages/Product/Page.tsx               | 12 ++++----
 src/Styles/Page/Categories.scss          | 16 +++++++++-
 src/Styles/Page/Home.scss                | 39 ++++++++++++++++++------
 src/Styles/Page/Product.scss             |  5 +--
 src/Styles/components/ProductCard.scss   |  7 +++++
 src/Styles/components/ProductSwiper.scss |  2 +-
 src/api/Product.ts                       | 10 ++++++
 src/translate/ar.json                    |  2 +-
 src/translate/ch.json                    |  2 +-
 src/ui/CustomImage.tsx                   | 21 ++++++-------
 15 files changed, 120 insertions(+), 66 deletions(-)
 create mode 100644 src/Components/Home/Categories.tsx

diff --git a/src/Components/Home/Categories.tsx b/src/Components/Home/Categories.tsx
new file mode 100644
index 0000000..7a028b4
--- /dev/null
+++ b/src/Components/Home/Categories.tsx
@@ -0,0 +1,15 @@
+import HomeSlider from "../../Components/Home/CategoriesSlider";
+import { useTranslation } from 'react-i18next';
+
+const Categories = () => {
+    const {t} = useTranslation();
+  return (
+    <div className='category_page'>
+        <h1>{t("What do you like")}?</h1>
+
+        <HomeSlider />
+    </div>
+  )
+}
+
+export default Categories
\ No newline at end of file
diff --git a/src/Components/Home/CategoriesSlider.tsx b/src/Components/Home/CategoriesSlider.tsx
index 3e4dbb8..0b1c04d 100644
--- a/src/Components/Home/CategoriesSlider.tsx
+++ b/src/Components/Home/CategoriesSlider.tsx
@@ -12,15 +12,18 @@ import { useGetCategories } from "../../api/Categories";
 import { Category } from "../../types/item";
 import { useNavigate } from "react-router-dom";
 import { addBaseUrlToSrc } from "../../utils/addBaseUrlToSrc";
+import { languageObject } from "../../utils/languageObject";
+import Loading from "../Utils/Loading/Loading";
 
 const CategoriesSlider = () => {
-  const { data } = useGetCategories();
+  const { data , isLoading} = useGetCategories();
   const categories = (data?.categories as Category[]) || ([] as []);
   const navigate = useNavigate();
   const handelNavigate = (data: Category) => {
     navigate(`/categories?category=${data?.id}`);
   };
-
+  console.log(categories);
+  
 
   return (
     <div className="CategoriesSlider">
@@ -47,7 +50,7 @@ const CategoriesSlider = () => {
           },
         }}
       >
-        {categories?.map((item: Category, index: number) => {
+        {isLoading ?<Loading/> :categories?.map((item: Category, index: number) => {
           return (
             <SwiperSlide key={index}>
               <div className="CategoriesSlider_image">
@@ -56,6 +59,7 @@ const CategoriesSlider = () => {
                   src={addBaseUrlToSrc(item?.photo)}
                   alt={`category ${index + 1}`}
                 />
+                <p className="truncate-text">{languageObject(item?.name)}</p>
               </div>
             </SwiperSlide>
           );
diff --git a/src/Components/Home/ProductCard.tsx b/src/Components/Home/ProductCard.tsx
index 4d1c39d..371956c 100644
--- a/src/Components/Home/ProductCard.tsx
+++ b/src/Components/Home/ProductCard.tsx
@@ -78,16 +78,7 @@ const ProductCard = ({ item }: { item: Product }) => {
     <div className="ProductCard">
       <CustomImage src={item?.main_photo} onClick={() => handle_click(item?.base_product_id)} />
       <h4 className="truncate-text">{languageObject(item?.name)}</h4>
-      <h5 className="desc">Description: {result}</h5>
-
-      {/* <p>{Currency} {oldPrice}</p>
-      <div>
-        <p>{price}</p>
-        <p>
-          {randomRate} <FaStar />
-        </p>
-      </div> */}
-      {/* <span>{discountAmount}%</span> */}
+      <h5 className="desc">{t("Description")}: {result}</h5>
       <article>
         <button className="button" onClick={() => handleAddToCart(item)}>
           <FaCartPlus />
diff --git a/src/Components/Home/ProductSwiper.tsx b/src/Components/Home/ProductSwiper.tsx
index 5e78386..c4d8160 100644
--- a/src/Components/Home/ProductSwiper.tsx
+++ b/src/Components/Home/ProductSwiper.tsx
@@ -1,4 +1,3 @@
-import { useRef, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/free-mode';
@@ -8,46 +7,40 @@ import { Product } from '../../types/item';
 import { A11y, Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules';
 import { Spin } from 'antd';
 
+const ProductSwiper = ({ data, isLoading }: any) => {
 
 
-const ProductSwiper = ({data,isLoading}:any) => {
-  const language = localStorage.getItem('language') ;
-  
-  const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr");
-  const swiperRef = useRef<any>(null);
-
   const BaseProducts = (data?.products as Product[]) || ([] as []);
 
   return (
     <div className='productSwiper'>
       <Swiper
-        dir={swiperDirection}
+        dir={"ltr"}
         slidesPerView={5}
-        spaceBetween={50}
+        spaceBetween={20}
         breakpoints={{
           0: { slidesPerView: 1 },
           400: { slidesPerView: 1 },
           600: { slidesPerView: 2 },
           900: { slidesPerView: 4 },
           1200: { slidesPerView: 4 },
-          1500: { slidesPerView: 4  },
+          1500: { slidesPerView: 4 },
         }}
         modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
         pagination={{ clickable: true }}
         className="mySwiper"
-        onSwiper={(swiper:any) => (swiperRef.current = swiper)} // Store swiper instance
       >
         {
-        isLoading ? <Spin/> :
-        BaseProducts?.map((item:Product, index:number) => (
-          <SwiperSlide key={index}>
-            <ProductCard key={index} item={item} />
-          </SwiperSlide>
-        ))
+          isLoading ? <Spin /> :
+          BaseProducts?.map((item: Product, index: number) => (
+            <SwiperSlide key={index}>
+              <ProductCard key={index} item={item} />
+            </SwiperSlide>
+          ))
         }
       </Swiper>
     </div>
   );
-}
+};
 
-export default ProductSwiper;
+export default ProductSwiper;
\ No newline at end of file
diff --git a/src/Pages/Home/Page.tsx b/src/Pages/Home/Page.tsx
index b63d361..15bd640 100644
--- a/src/Pages/Home/Page.tsx
+++ b/src/Pages/Home/Page.tsx
@@ -9,12 +9,13 @@ import NoiseCancellation from "../../Components/Home/NoiseCancellation";
 import BatteryLife from "../../Components/Home/BatteryLife";
 import PerfectSound from "../../Components/Home/PerfectSound";
 import BestSale from "../../Components/Home/BestSale";
+import Categories from "../../Components/Home/Categories";
 
 const Page = () => {
   return (
     <div className="home_page">
       <HeroSection />
-      <HomeSlider />
+      <Categories />
       {/* <ProductsOnSale/> */}
       <Products />
       <PremiumDesign />
diff --git a/src/Pages/Product/Page.tsx b/src/Pages/Product/Page.tsx
index 3f53c28..3d781dd 100644
--- a/src/Pages/Product/Page.tsx
+++ b/src/Pages/Product/Page.tsx
@@ -38,11 +38,10 @@ const Page = () => {
   
   
   const [MainImage, setMainImage] = useState(product?.main_photo);
-
-  const handelImage = (item: any) => {
-    // setMainImage(item);
-  };
-
+  useEffect(() => {
+    setMainImage(product?.main_photo)
+  }, [product?.main_photo])
+  
   const queryClient = useQueryClient();
 
   const handelChangeFavorite = (item: Product) => {
@@ -87,13 +86,14 @@ const Page = () => {
     toast.success(`${languageObject(item?.name)}` + " added to cart");
   };
 
-    const info = jsonObjectToArray(product?.info)
+      const info = jsonObjectToArray(product?.info)
     const handleChangeImage = (imagePath: string) => {
       setMainImage(imagePath);
     };
   if(isLoading){
     return <div className="loading_state"> <Spin/> </div> 
   }
+  
   return (
     <div className="Product">
       <header>
diff --git a/src/Styles/Page/Categories.scss b/src/Styles/Page/Categories.scss
index 2629500..8ed998f 100644
--- a/src/Styles/Page/Categories.scss
+++ b/src/Styles/Page/Categories.scss
@@ -135,6 +135,9 @@
 .ant-pagination .ant-pagination-item a{
   color: var(--white);
 }
+.swiper{
+  direction: ltr !important;
+}
 @media screen and (max-width: 1000px) {
   .show_on_responsive {
     display: inline;
@@ -271,4 +274,15 @@
 
   }
 
-  
\ No newline at end of file
+  
+
+  .category_page{
+    @include Flex; flex-direction: column;
+    h1{
+      font-weight: bold;
+    }
+  }
+
+  .CategoriesSlider{
+    margin-block: 50px !important;
+  }
\ No newline at end of file
diff --git a/src/Styles/Page/Home.scss b/src/Styles/Page/Home.scss
index 65c6402..969d6ae 100644
--- a/src/Styles/Page/Home.scss
+++ b/src/Styles/Page/Home.scss
@@ -54,7 +54,7 @@
   }
 
   .CategoriesSlider {
-    width: var(--padding-page);
+    width: calc(var(--padding-page));
     margin-inline: auto;
     margin-block: var(--margin-block);
 
@@ -64,19 +64,35 @@
 
     .CategoriesSlider_image {
       padding: 10px 30px;
-      width: 152px;
-      height: 160px;
+      width: 160px;
+      min-height: 150px;
       border: 1px solid #d9d9d9;
       border-radius: 10px;
       display: flex;
       justify-content: center;
       align-items: center;
-
+      flex-direction: column;
+      p{
+        font-size: 10px !important;
+        font-weight: 500;
+        margin-bottom: 0 !important;
+        text-align: center !important;
+        padding-top: 3px;
+        color: var(--primary ) !important;
+      }
+      .truncate-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
       img {
-        min-width: 140px;
-        max-width: 140px;
-        height: 150px;
         border-radius: 10px;
+        width: 150px;
+        height: 160px;
+        cursor: pointer;
+        aspect-ratio: 1;
+        object-fit: cover !important;
+
       }
     }
   }
@@ -386,8 +402,7 @@
         width: 110px;
         height: 110px;
         img {
-          min-width: 100px;
-          max-width: 100px;
+          width: 100px;
           height: 100px;
 
         }
@@ -581,4 +596,10 @@
   padding: 4px;
   border-radius: 10px;
   font-size: 30px;
+}
+
+
+
+.swiper-button-disabled{
+  display: none;
 }
\ No newline at end of file
diff --git a/src/Styles/Page/Product.scss b/src/Styles/Page/Product.scss
index 6a9fed6..8f6976a 100644
--- a/src/Styles/Page/Product.scss
+++ b/src/Styles/Page/Product.scss
@@ -101,7 +101,7 @@
       border-radius: 4px;
     }
     .swiper-backface-hidden .swiper-slide{
-      padding-inline: 10px;
+      // padding-inline: 10px;
       min-width: 50px !important;
     }
     > span{
@@ -110,7 +110,8 @@
       .product_multi_image{
         width: 60px !important;
         height: 50px;
-        object-fit: contain;
+        object-fit: cover;
+        aspect-ratio: 1;
         cursor: pointer;
       }
     }
diff --git a/src/Styles/components/ProductCard.scss b/src/Styles/components/ProductCard.scss
index c9d1570..e5b83a3 100644
--- a/src/Styles/components/ProductCard.scss
+++ b/src/Styles/components/ProductCard.scss
@@ -97,6 +97,13 @@
       border: 1px solid var(--primary);
       font-size: 14px;
       padding:6px 6px;
+      &:hover{
+        background: var(--primary);
+        color: var(--white);
+        svg{
+          color: var(--white);
+        }
+      }
     }
     svg {
       color: var(--primary);
diff --git a/src/Styles/components/ProductSwiper.scss b/src/Styles/components/ProductSwiper.scss
index 2306e72..2ed1e2a 100644
--- a/src/Styles/components/ProductSwiper.scss
+++ b/src/Styles/components/ProductSwiper.scss
@@ -18,5 +18,5 @@
 
 .swiper-slide{
 min-width: 220px;
-margin-inline: auto;
+// margin-inline: auto;
 }
\ No newline at end of file
diff --git a/src/api/Product.ts b/src/api/Product.ts
index 9ea9d62..9706b17 100644
--- a/src/api/Product.ts
+++ b/src/api/Product.ts
@@ -7,3 +7,13 @@ const KEY = "product";
 
 export const useGetProduct = (params?: any) =>
   useGetQuery(KEY, API.GET, params);
+
+
+
+const API2 = {
+  GETSimilar: `product`,
+};
+const KEY2 = "product_similar";
+
+export const useGetProductSimilar = (params?: any) =>
+  useGetQuery(KEY2, API2.GETSimilar, params);
diff --git a/src/translate/ar.json b/src/translate/ar.json
index 5314adf..311e724 100644
--- a/src/translate/ar.json
+++ b/src/translate/ar.json
@@ -400,6 +400,6 @@
 "Additional Info":"معلومات إضافية",
 "Product info is empty":"معلومات المنتج فارغة",
 "We are DM company, which has been working for two decades. We are active in the United Arab Emirates in the field of stock laptops, computer parts, RAM, hard drives, etc. We are currently working with Europe, Africa and the Middle East.We provide you the best services with the shortest time and the highest quality":"نحن شركة DM، التي تعمل منذ عقدين من الزمن. نحن نشطون في دولة الإمارات العربية المتحدة في مجال أجهزة الكمبيوتر المحمولة، وقطع الكمبيوتر، وذاكرة الوصول العشوائي، والأقراص الصلبة، وما إلى ذلك. ونعمل حاليًا مع أوروبا وأفريقيا والشرق الأوسط. نقدم لك أفضل الخدمات في أقصر وقت وبأقل تكلفة. اعلى جودة",
-"":""
+"What do you like":"ماذا تريد"
 
 }
\ No newline at end of file
diff --git a/src/translate/ch.json b/src/translate/ch.json
index 7676a21..3339a5f 100644
--- a/src/translate/ch.json
+++ b/src/translate/ch.json
@@ -385,5 +385,5 @@
     "Info":"信息",
     "Additional Info":"附加信息",
     "Product info is empty":"产品信息为空",
-    "":""
+    "What do you like":"你喜欢什么"
 }
\ No newline at end of file
diff --git a/src/ui/CustomImage.tsx b/src/ui/CustomImage.tsx
index a53ecc7..4732df1 100644
--- a/src/ui/CustomImage.tsx
+++ b/src/ui/CustomImage.tsx
@@ -6,26 +6,23 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
 }
 
 const CustomImage: React.FC<ImageProps> = ({ src, ...props }) => {
-  const addBaseUrlToSrc = (src: string) => {
-    return ImageBaseURL + src?.replace("public", "/storage");
-  };
 
-  const [imgSrc, setImgSrc] = useState(addBaseUrlToSrc(src));
+  const [imgSrc, setImgSrc] = useState<any>(src);
 
   useEffect(() => {
-    setImgSrc(addBaseUrlToSrc(src));
-  }, [src]);
+    setImgSrc(src);
+  }, [src,props]);
+
+
+
+  const newImage = ImageBaseURL + (imgSrc?.replace("public", "/storage"))
 
-  const handleError = () => {
-    setImgSrc("/Home/p1.png");
-  };
 
   return (
     <img
-      src={imgSrc}
-      onError={handleError}
+      src={newImage}
       {...props}
-      alt={props.alt || "image"}
+      alt="there is no image"
     />
   );
 };