fix currency && toast && style (#74)

* [Finishes #187584877] Admin should be able to disable an account * [Delivers #187584880]Users should be able to chat
atlp-rwanda · Aug 5, 2024 · 19ed017 · 19ed017
1 parent 4613391
commit 19ed017
Show file tree

Hide file tree

Showing 15 changed files with 161 additions and 221 deletions.
diff --git a/src/assets/styles/Header.scss b/src/assets/styles/Header.scss
@@ -382,7 +382,7 @@ a {
     left: -10%;
     padding-right: 10px;
     top: 150%;
-    width: 135%;
+    width: 145%;
     z-index: 500;
     box-shadow: 0 5rem 10rem 0 rgba(0, 0, 0, 0.08);
 

diff --git a/src/assets/styles/LandingPage.scss b/src/assets/styles/LandingPage.scss
@@ -94,44 +94,29 @@
     }
 
     .span {
-      width: 20rem;
+      width: 25rem;
     }
   }
 
   input[type="range"] {
     -webkit-appearance: none;
     width: 100%;
     height: 8px;
-    background: #ddd;
+    background: $white-color;
     border-radius: 5px;
     outline: none;
   }
 
-  input[type="range"]::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 8px;
-    cursor: pointer;
-    background: #ddd;
-    border-radius: 5px;
-  }
-
   input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
+    appearance: none;
     height: 20px;
     width: 20px;
     background: #ff6d18;
     border-radius: 50%;
-    margin-top: -6px;
     cursor: pointer;
   }
 
-  input[type="range"]::-moz-range-track {
-    width: 100%;
-    height: 8px;
-    background: #ddd;
-    border-radius: 5px;
-    cursor: pointer;
-  }
 
   input[type="range"]::-moz-range-thumb {
     height: 20px;
@@ -141,51 +126,6 @@
     cursor: pointer;
   }
 
-  input[type="range"]::-ms-track {
-    width: 100%;
-    height: 5px;
-    cursor: pointer;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-  }
-
-  input[type="range"]::-ms-fill-lower {
-    background: #ddd;
-    border-radius: 5px;
-  }
-
-  input[type="range"]::-ms-fill-upper {
-    background: #ddd;
-    border-radius: 5px;
-  }
-
-  input[type="range"]::-ms-thumb {
-    height: 10px;
-    width: 10px;
-    background: #ff6d18;
-    border-radius: 50%;
-    cursor: pointer;
-    margin-top: 0;
-  }
-
-  input[type="range"]:focus {
-    outline: none;
-  }
-
-  input[type="range"]:hover::-webkit-slider-runnable-track {
-    background: #ccc;
-  }
-
-  input[type="range"]:hover::-moz-range-track {
-    background: #ccc;
-  }
-
-  input[type="range"]:hover::-ms-fill-lower,
-  input[type="range"]:hover::-ms-fill-upper {
-    background: #ccc;
-  }
-
   .product-list {
     display: grid;
     justify-items: center;

diff --git a/src/assets/styles/Sample.scss b/src/assets/styles/Sample.scss
@@ -4,14 +4,14 @@
   color: $white;
   background-color: $white;
   gap: 1rem;
-  height: 40rem;
+  height: 35rem;
 
   .sample1, .sample3 {
     flex: 1;
     display: flex;
     flex-direction: column;
     width: 20%;
-    height: 40rem;
+    height: 35rem;
     gap: 1rem;
   }
 

diff --git a/src/components/GoogleCallback.tsx b/src/components/GoogleCallback.tsx
@@ -5,18 +5,22 @@ import { googleAuthCallback } from '../store/features/auth/authSlice';
 import { useNavigate } from 'react-router-dom';
 import { HashLoader } from 'react-spinners';
 import { toast } from 'react-toastify';
+import { resetAuth } from '../store/features/auth/authSlice';
 
 const GoogleCallback = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  const { isLoading, isSuccess, isError, message ,token} = useAppSelector((state) => state.auth);
-
+  const { isLoading, isSuccess,isAuthenticated , isError, message ,token} = useAppSelector((state) => state.auth);
   const urlParams = new URLSearchParams(window.location.search);
   const code = urlParams.get('code');
   const scope = urlParams.get('scope');
   const authuser = urlParams.get('authuser');
   const prompt = urlParams.get('prompt');
 
+
+  useEffect(() => {
+    dispatch(resetAuth());
+  }, [dispatch]);
   useEffect(() => {
     if (code && scope && authuser && prompt) {
       dispatch(googleAuthCallback({ code, scope, authuser, prompt }));
@@ -27,18 +31,17 @@ const GoogleCallback = () => {
   }, [code, scope, authuser, prompt, dispatch]);
 
   useEffect(() => {
-    if (isSuccess) {
+    if (isSuccess && isAuthenticated) {
       localStorage.setItem("token", token);
       navigate("/home");
     }
     if (isError) {
-      toast.error(message);
       navigate("/login");
     }
   }, [isSuccess, isError, message, navigate]);
 
   return (
-    <div className="google-callback">
+    <div className="google-callback" style={{height:"100vh" , width:"100vw"}}>
       {isLoading && (
         <div style={{display:'flex',justifyContent:'center',alignItems:'center', flexDirection:'column', height:"90vh", gap:"2rem"}}>
           <div className="btn-loading">

diff --git a/src/components/inputs/SearchInput.tsx b/src/components/inputs/SearchInput.tsx
@@ -37,6 +37,7 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
     e.preventDefault();
     if (search.trim()) {
       navigate(`/search?name=${search.trim()}`);
+      setSearch("");
     }
   };
 

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -229,9 +229,9 @@ const Header: React.FC = () => {
                   <span className="cart__description">
                     {isAuthenticated
                       ? cartTotalMoney !== null
-                        ? `$${cartTotalMoney.toFixed(2)}`
-                        : '$0'
-                      : '$0'}
+                        ? `${cartTotalMoney.toFixed(2)} RWF`
+                        : '0 RWF'
+                      : '0 RWF'}
                   </span>
                 </div>
               </div>

diff --git a/src/components/product/Product.tsx b/src/components/product/Product.tsx
@@ -194,7 +194,7 @@ const Product: React.FC<ProductProps> = ({
           {name}
         </div>
         <div className="product-details">
-          <p className="product-price">{price}</p>
+          <p className="product-price">{price} RWF</p>
           <p className="product-stock">
             <span className="stock">Stock: </span>
             {stock}

diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
@@ -94,7 +94,7 @@ const LandingPage: React.FC = () => {
                     id={product.id}
                     images={product.images}
                     name={product.name}
-                    price={`$${product.price}`}
+                    price={product.price}
                     stock={Number(product.quantity)}
                     description={product.description}
                     discount={Number(product.discount.replace("%", ""))}

diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx
@@ -128,7 +128,7 @@ const ProductsPage: React.FC = () => {
                     setPriceRange([priceRange[0], Number(e.target.value)])
                   }
                 />
-                <span className="span">${priceRange[0]} - ${priceRange[1]}</span>
+                <span className="span">{priceRange[0]}RWF - {priceRange[1]}RWF</span>
               </div>
             </div>
             <div className="product-list">
@@ -142,7 +142,7 @@ const ProductsPage: React.FC = () => {
                     id={product.id}
                     images={product.images}
                     name={product.name}
-                    price={`$${product.price}`}
+                    price={product.price}
                     stock={Number(product.quantity)}
                     description={product.description}
                     discount={Number(product.discount.replace("%", ""))}

diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
@@ -66,12 +66,12 @@ const SearchBar: React.FC = () => {
         setMaxPriceOptions([{ label: 'Max', value: '' }, ...priceOptions]);
       }
 
-      const sortedDiscounts = Array.from(
-        new Set(products.map((product: any) => { return typeof product.discount === 'string' ? Number(product.discount) : product.discount;}))
+      const sortedDiscounts: any = Array.from(
+        new Set(products.map((product: any) => product.discount))
       )
-        .sort((a:number, b:number) => a - b)
-        .map((discount) => ({ label: `${discount}`, value: String(discount) }));
-      setDiscountOptions(sortedDiscounts);
+        .sort((a:string, b:string) => parseInt(a) - parseInt(b))
+        .map((discount) => ({ label: `${discount}`, value: discount }));
+        setDiscountOptions([{ label: 'Discount', value: '' },...sortedDiscounts]);
     }
   }, [products]);
 
@@ -119,21 +119,20 @@ const SearchBar: React.FC = () => {
       .sort((a:number, b:number) => a - b);
       setSelectPrice(sortedPrices);
 
-      const priceOptions = sortedPrices.map(price => ({ label: `$${price}`, value: price.toString() }));
+      const priceOptions = sortedPrices.map(price => ({ label: `${price} RWF`, value: price.toString() }));
       setMinPriceOptions([{ label: 'Min', value: '' }, ...priceOptions]);
 
       if (sortedPrices.length > 1) {
         setMaxPriceOptions([{ label: 'Max', value: '' }, ...priceOptions.slice(1)]);
       } else {
         setMaxPriceOptions([{ label: 'Max', value: '' }, ...priceOptions]);
       }
-
-      const sortedDiscounts = Array.from(
-        new Set(filteredProducts.map((product: any) => { return typeof product.price === 'string' ? Number(product.price) : product.price;}))
+      const sortedDiscounts: any = Array.from(
+        new Set(products.map((product: any) => product.discount))
       )
-        .sort((a:number, b:number) => a - b)
-        .map((discount) => ({ label: `${discount}`, value: String(discount) }));
-      setDiscountOptions([{label:'Discount', value: ''},...sortedDiscounts]);
+        .sort((a:string, b:string) => parseInt(a) - parseInt(b))
+        .map((discount) => ({ label: `${discount}`, value: discount }));
+        setDiscountOptions([{ label: 'Discount', value: '' },...sortedDiscounts]);
     }
   }, [filteredProducts]);
 
@@ -194,7 +193,7 @@ const SearchBar: React.FC = () => {
                       id={product.id}
                       images={product.images}
                       name={product.name}
-                      price={`$${product.price}`}
+                      price={product.price}
                       stock={Number(product.quantity)}
                       description={product.description}
                       discount={Number(product.discount.replace("%", ""))}