updated project name and fixed some issues

Nathan-Somto · Nathan-Somto · commit de9035116ffc · 2023-08-26T14:24:25.000+01:00
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 
-# Fake Store
+# SM Store
 
-An ECommerce  Application built with React, Fake store api and Flutterwave SDK for payment integration.
+An Ecommerce  Application built with React, Fake store api and Flutterwave SDK for payment integration.
 
 
 
@@ -139,13 +139,13 @@ if you don't have node js installed get it here.
 - [ ] Clone the Repository  
 
 ```
-    $ git clone https://github.com/nathan-somto/fakestore.git
+    $ git clone https://github.com/nathan-somto/smstore.git
 ```
 
 - [ ] Enter into the directory
 
 ```
-    $ cd fakestore
+    $ cd Smstore
 ```
 
 - [ ] Install all dependencies
diff --git a/index.html b/index.html
@@ -3,12 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FakeStore - Get your fake items today.</title>
+    <title>SmStore - Get your  items with ease and at afforable prices today.</title>
     <meta name="description" content="An ecommerce site to get
      various items that you need ranging 
      from clothing to everyday accessories.">
      <meta name="keywords" content="ecommerce, clothing, accessories, electronics, fake items, stripe">
-     <meta property="og:title" content="Fake Store - Get your fake items at unbeliveable rates" />
+     <meta property="og:title" content="SmStore - Get your fake items at unbeliveable rates" />
       <meta property="og:type" content="website" />
       <meta property="og:image" content="./public/img-02.jpg" />
       <meta property="og:url" content="https://fake-store-blond-pi.vercel.app" />
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fakestore",
+  "name": "smstore",
   "private": true,
   "version": "0.0.0",
   "type": "module",
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -1,22 +1,27 @@
 import { img1, img2, img3 } from "../../assets/Banner";
 import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { Carousel } from "react-responsive-carousel";
+import { useNavigate } from "react-router-dom";
 function Banner() {
+  const navigate = useNavigate();
   const items = [
     {
       heading1: "Men's Collection",
       para: "New Arrivals",
       imgUrl: img1,
+      link:  "men's clothing"
     },
     {
       heading1: "Women's Collection",
       para: "New Season's",
       imgUrl: img2,
+      link: "women's clothing"
     },
     {
       heading1: "Accessories",
       para: "Slick Jacket",
       imgUrl: img3,
+      link: 'jewelery'
     },
   ];
   return (
@@ -39,7 +44,7 @@ function Banner() {
             <div className="absolute space-y-3 text-left left-[10%] lg:space-y-7 top-[30%] ">
               <h3 className="lg:text-3xl opacity-70 ">{item.heading1}</h3>
               <h1 className="lg:text-[55px] ">{item.para}</h1>
-              <button className="py-2 px-10 font-semibold bg-[#2206fb] rounded-[24px] text-[#fff] hover:bg-[#272726] transition-all duration-300 ease-in ">
+              <button onClick={() =>navigate(`/category/${item.link}`)} className="py-2 px-10 font-semibold bg-[#2206fb] rounded-[24px] text-[#fff] hover:bg-[#272726] transition-all duration-300 ease-in ">
                 Shop now
               </button>
             </div>
diff --git a/src/components/CategoryCenter/index.tsx b/src/components/CategoryCenter/index.tsx
@@ -19,7 +19,7 @@ function CategoryCenter({ data, setFilter, loading }: props) {
   // with the dropdown we sort the items.
   function handleFilter(e: ChangeEvent<HTMLSelectElement>) {
     if (data === null) return;
-    const filtered = [...data];
+    const filtered = data.slice();
     switch (e.target.value) {
       case "highest rated":
         filtered.sort((a, b) => b.rating.rate - a.rating.rate);
@@ -37,7 +37,7 @@ function CategoryCenter({ data, setFilter, loading }: props) {
         break;
     }
     setFilterOption(e.target.value);
-    setFilter([...filtered]);
+    setFilter(filtered);
   }
   return (
     <div className="space-y-6">
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -14,11 +14,11 @@ function Footer() {
       <div className="flex flex-col space-y-4 lg:space-x-[25%] lg:space-y-0   lg:flex-row ">
         <div className="flex space-x-24 max-[500px]:flex-col max-[500px]:space-x-0 max-[500px]:space-y-4 lg:space-x-[25%]">
           <Link to={"/"} className="uppercase  font-bold">
-            FakeStore
+            SmStore
           </Link>
           <div className="flex space-x-4">
             <Link
-              to={"/products/category/acessories"}
+              to={"/products/category/jewelery"}
               className="opacity-70 hover:opacity-100 transition-all ease-in duration-300 hover:text-white"
             >
               Categories
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -37,7 +37,7 @@ function Navbar() {
     >
       <div className="lg:mr-[5%] h-[2.5rem] justify-between flex items-center pl-[1.5rem] lg:pl-0 lg:h-[5rem]">
         <Link to={"/"} className="uppercase  font-bold">
-          fakestore
+          smstore
         </Link>
         <div
           className="hamburger mr-5 cursor-pointer lg:hidden"
@@ -110,7 +110,7 @@ function Navbar() {
       </div>
       <div className="divide-x flex items-center justify-end lg:absolute lg:right-0">
         <form className="border-l h-[2.5rem] lg:h-[5rem] flex relative items-center">
-          <button className="pl-3">
+          <button className="pl-3" type="button">
             <FaSearch color="#bbb" size="15" />
           </button>
           <label htmlFor="search">
diff --git a/src/components/ProductCard/index.tsx b/src/components/ProductCard/index.tsx
@@ -19,7 +19,7 @@ function ProductCard({
   // wrapped in a useMemo so as to cache the checking of an item in the cart
   const isIteminCart: boolean = useMemo(
     () => items.findIndex((item) => item.id === id) !== -1,
-    [items]
+    [id, items]
   );
   const dispatch = useDispatch();
   function handleAddToCart() {
@@ -31,7 +31,7 @@ function ProductCard({
   const factorOf3 = id % 3 === 0;
   const newPrice = factorOf3 ? calculatePercentageOff(price, 30) : price;
   return (
-    <div className="h-[550px] w-[300px] relative group flex-shrink-0 text-[#1e1d1d]">
+    <div className="h-[350px] md:h-[400px] w-[300px] relative group flex-shrink-0 text-[#1e1d1d]">
       {factorOf3 && (
         <div className="bg-[#ff3341] p-2 font-semibold text-center absolute top-[50px] left-[5px] text-white">
           -30%
@@ -40,7 +40,7 @@ function ProductCard({
       <div className="group-hover:opacity-100 opacity-0 text-[#b183b1bb] bg-[#e4e4e4] absolute p-2 top-[50px] right-[5px]">
         <AiOutlineHeart />
       </div>
-      <Link to={`/products/${id}`} className="h-[400px] w-full">
+      <Link to={`/products/${id}`} className=" h-[250px] block md:h-[300px] w-full">
         <img
           src={image}
           alt={`${title} product poster`}
diff --git a/src/components/ProductsRow/index.tsx b/src/components/ProductsRow/index.tsx
@@ -63,15 +63,15 @@ function ProductsRow() {
           </button>
         ))}
       </div>
-      <div className="relative">
+      <div className="relative mt-5">
         <button
           onClick={() => handleScrollClick("right")}
           className="absolute top-[50%] right-[10px] rounded-sm text-center bg-[#131313] hover:opacity-70 text-[#ebebeb] z-[10] p-2 shadow-md"
         >
           <FaChevronRight className="h-4 w-4" />
         </button>
         <div
-          className="overflow-x-auto no-scroll flex space-x-12 w-full h-[650px] "
+          className="overflow-x-auto no-scroll px-8 flex space-x-12 w-full h-[480px] "
           ref={rowRef}
         >
           {/* Product cards go here */}
diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx
@@ -22,15 +22,15 @@ function About() {
           <article  className="flex-shrink-0 w-[100%]  lg:w-[calc(90%-350px)] text-gray-500 text-[15px] leading-6">
             <h2 className="font-bold text-2xl text-gray-700 mb-6">Our Story</h2>
             <p>
-              Welcome to Fake Store, where imagination meets convenience! Our
+              Welcome to Sm Store, where imagination meets convenience! Our
               story began with a simple idea—to transform the way you shop
               online. We wanted to create an experience that goes beyond the
               ordinary, one that sparks your imagination and fills your life
               with joy and inspiration.
             </p>
             <br />
             <p>
-              At Fake Store, we handpick a diverse range of products that
+              At Sm Store, we handpick a diverse range of products that
               capture the essence of creativity. From innovative gadgets to
               trendy accessories, our collection is carefully curated to bring a
               touch of magic to your everyday life. We believe in quality,
@@ -42,7 +42,7 @@ function About() {
               We're committed to making your shopping journey seamless and
               enjoyable. With our user-friendly website, secure transactions,
               and dedicated customer service, we aim to provide you with a
-              hassle-free experience. So, come and join us at Fake Store, and
+              hassle-free experience. So, come and join us at Sm Store, and
               let your imagination run wild as you explore our captivating world
               of products. Get ready to embark on an extraordinary shopping
               adventure where inspiration and convenience await!
@@ -73,7 +73,7 @@ function About() {
           <article className="flex-shrink-0 w-[100%]  lg:w-[calc(90%-350px)] text-gray-500 text-[15px] leading-6">
             <h2 className="font-bold text-2xl text-gray-700 mb-6">Our Mission</h2>
             <p>
-              At Fake Store, our mission is to ignite the spark of imagination
+              At Sm Store, our mission is to ignite the spark of imagination
               in every shopper, transforming the act of online shopping into a
               captivating and joyous experience. We strive to curate a
               collection of innovative and whimsical products that inspire
diff --git a/src/pages/Category/index.tsx b/src/pages/Category/index.tsx
@@ -24,7 +24,9 @@ function Category() {
   useEffect(() => {
     window.scrollTo(0, 0);
     setLocalData(data);
-    return () => {};
+    return () => {
+      console.log('un mounted')
+    };
   }, [data]);
   if (error) return <Notfound />;
   const images: Images<CategoryType> = {
diff --git a/src/pages/Checkout/index.tsx b/src/pages/Checkout/index.tsx
@@ -24,7 +24,7 @@ function Checkout() {
       name: "",
     },
     customizations: {
-      title: "FAKESTORE",
+      title: "SMSTORE",
       description: "Payment for items in cart",
       logo: "",
     },
@@ -67,7 +67,9 @@ function Checkout() {
           closePaymentModal();
           Navigate("/success");
         },
-        onClose: () => {},
+        onClose: () => {
+          console.log('closed')
+        },
       });
     } catch (err) {
       toast.error("an error occured while submitting the form", {
@@ -92,7 +94,7 @@ function Checkout() {
     if (cartItems.length === 0) {
       Navigate("/");
     }
-  }, [cartItems]);
+  }, [Navigate, cartItems]);
   return (
     <main className="my-24  min-h-screen grid place-items-center">
       <div className="h-[300px] relative text-white overflow-hidden group w-full -mt-5 mb-12">
diff --git a/src/pages/Contact/index.tsx b/src/pages/Contact/index.tsx
@@ -27,7 +27,7 @@ function Contact() {
       <div className="space-y-6 pl-4 my-7 lg:my-0">
         <h1 className="text-4xl">Want to Find us?</h1>
         <p className="w-[70%] text-gray-500 font-light break-words">
-          Welcome to the contact page of FakeStore, your go-to destination for
+          Welcome to the contact page of SmStore, your go-to destination for
           all your online shopping needs. We value your feedback, questions, and
           concerns, and we are here to assist you in every possible way. Please
           don't hesitate to get in touch with us using the provided contact
@@ -51,7 +51,7 @@ function Contact() {
           to={"#"}
           className="hover:text-[#0808de] text-gray-500 mt-12  text-center "
         >
-          info@fakestore.com
+          info@smstore.com
         </Link>
       </div>
     </div>
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -4,7 +4,7 @@ import ProductsRow from "../../components/ProductsRow"
 import Brands from '../../components/Brands'
 import { Variants, motion } from "framer-motion"
 function Home() {
-  let container :Variants = {
+  const container :Variants = {
     hidden:{
     
        opacity:0
diff --git a/src/pages/Loader/index.tsx b/src/pages/Loader/index.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 
 function Loader() {
   const navigate = useNavigate();
-  let container: Variants = {
+  const container: Variants = {
     hidden: {
       opacity: 1,
     },
@@ -51,8 +51,8 @@ function Loader() {
   };
   useEffect(() => {
     setTimeout(() => navigate("/home"), 3000);
-  }, []);
-  let text = "FAKE STORE";
+  }, [navigate]);
+  const text = "SM STORE";
   return (
     <motion.main
       className="h-screen fixed top-0 z-[999999] bg-white left-0 w-full flex flex-col items-center justify-center space-y-8"
@@ -66,7 +66,7 @@ function Loader() {
           className="absolute z-[9999998] top-50 left-50 -translate-y-50 -translate-x-50 text-center "
           variants={textContainer}
         >
-          <div className="text-3xl lg:text-5xl overflow-hidden flex text-center mb-5 ">
+          <div className="text-3xl lg:text-5xl mx-auto overflow-hidden flex justify-center text-center mb-5 ">
             {text.split("").map((letter, index) => (
               <motion.span
                 key={index}
@@ -85,7 +85,7 @@ function Loader() {
             transition={{ delay: 2, duration: 0.4 }}
             className="font-medium"
           >
-            Get your fake items at awesome rates.
+            Get awesome stuff at affordable rates.
           </motion.p>
         </motion.div>
       )}
diff --git a/src/pages/ProductDetails/index.tsx b/src/pages/ProductDetails/index.tsx
@@ -29,7 +29,7 @@ function ProductDetails() {
       return cartItems.findIndex((item) => item.id === data?.id);
     }
     return -1;
-  }, [cartItems, data]);
+  }, [cartItems, data?.id, productData]);
   /**
    * @todo  change the product fetching from json with an actual call to the fake store api
    */
diff --git a/src/pages/Success/index.tsx b/src/pages/Success/index.tsx
@@ -10,7 +10,7 @@ function Success() {
   // empty the cart when this page loads.
   useEffect(() => {
     dispatch(emptyCart());
-  }, []);
+  }, [dispatch]);
   return (
     <div className="h-[100vh] w-[80%] mx-auto my-32  space-y-6 flex  flex-col text-center  items-center">
       <motion.div
@@ -33,7 +33,7 @@ function Success() {
         transition={{ duration: 0.85, delay: 0.85, ease: "easeIn" }}
       >
         <h1 className="font-bold text-2xl sm:text-3xl w-[70%] mx-auto text-gray-800">
-          Thank you for shopping with Fake Store
+          Thank you for shopping with SmStore
         </h1>
         <p className="text-gray-700 text-[1.05rem]">we hope to see you soon.</p>
         <Link

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "fakestore",`
	`2`	`+ "name": "smstore",`
`3`	`3`	`"private": true,`
`4`	`4`	`"version": "0.0.0",`
`5`	`5`	`"type": "module",`