Merge pull request #40 from atlp-rwanda/bg-fix

fixing the navbar and it responsiveness
atlp-rwanda · Jun 25, 2024 · 5e6047c · 5e6047c
2 parents 3b19d13 + 12cbdd1
commit 5e6047c
Show file tree

Hide file tree

Showing 11 changed files with 268 additions and 142 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -53,7 +53,7 @@ export default function Home() {
       <Header />
       <HeroSection />
       <main className="flex   flex-col items-center justify-between ">
-        <div className="sm:flex h-[20px] gap-10">
+        {/* <div className="sm:flex h-[20px] gap-10">
           <div>
             <button
               className=" w-auto"
@@ -62,7 +62,7 @@ export default function Home() {
               change password
             </button>
           </div>
-        </div>
+        </div> */}
         {showlModal && (
           <GlobarPopUp handleShowModel={handleshow}>
             <div className="flex justify-center flex-col  mx-6 py-20">

diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx
@@ -7,16 +7,21 @@ import 'swiper/css/free-mode';
 import 'swiper/css/navigation';
 import 'swiper/css/thumbs';
 import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
-import Image from 'next/image';//@ts-ignore
-import ReactStars from "react-rating-stars-component";
+import Image from 'next/image'; //@ts-ignore
+import ReactStars from 'react-rating-stars-component';
 import { MdOutlineShoppingCart } from 'react-icons/md';
 import { FaRegHeart } from 'react-icons/fa6';
 import { useParams } from 'next/navigation';
 import { Product } from '@/utils/requests';
-import { ProductObj, ProductType, ReviewType, imageType } from '@/types/Product';
+import {
+  ProductObj,
+  ProductType,
+  ReviewType,
+  imageType,
+} from '@/types/Product';
 import Card from '@/components/Card';
 import Header from '@/components/Header';
-import Footer from '@/components/Footer'; 
+import Footer from '@/components/Footer';
 import image from '../../../../public/product.png';
 import { useQuery } from '@tanstack/react-query';
 import ReviewCard from '@/components/ReviewCard';
@@ -36,8 +41,10 @@ function Page() {
     queryKey: ['product', id],
     queryFn: async () => {
       try {
-        const response: ProductType = (await Product.single(_id)) as ProductType;
-
+        const response: ProductType = (await Product.single(
+          _id,
+        )) as ProductType;
+
         return response;
       } catch (error) {
         throw new Error('Error fetching product data');
@@ -56,14 +63,14 @@ function Page() {
     reviews,
   } = data.product;
   console.log('this is reviews >>>>>>>>>', reviews);
-  console.log(' this is average reviews', averageReviews(reviews));
+  console.log(' this is average reviews', productPictures);
   const { relatedProducts } = data;
-const dispatch = useAppDispatch();
-const handleNewItem=()=>{
-  const productId=data.product.id
-dispatch(handleUserAddCart({productPrice,productId}));
-}
-  
+  const dispatch = useAppDispatch();
+  const handleNewItem = () => {
+    const productId = data.product.id;
+    dispatch(handleUserAddCart({ productPrice, productId }));
+  };
+
   return (
     <div>
       <Header />
@@ -80,10 +87,10 @@ dispatch(handleUserAddCart({productPrice,productId}));
                     modules={[FreeMode, Navigation, Thumbs]}
                     className="mySwiper2"
                   >
-                    {productPictures.map((image:imageType) => {
+                    {productPictures.map((image: imageType) => {
                       return (
                         <SwiperSlide key={image.imgId}>
-                          <img src={image.url} alt='image' />
+                          <img src={image.url} alt="image" />
                         </SwiperSlide>
                       );
                     })}
@@ -104,10 +111,10 @@ dispatch(handleUserAddCart({productPrice,productId}));
                       modules={[FreeMode, Navigation, Thumbs]}
                       className="mySwiper mycss"
                     >
-                      {productPictures.map((image:imageType) => {
+                      {productPictures.map((image: imageType) => {
                         return (
                           <SwiperSlide key={image.imgId}>
-                            <img src={image.url} alt='image'/>
+                            <img src={image.url} alt="image" />
                           </SwiperSlide>
                         );
                       })}
@@ -128,21 +135,25 @@ dispatch(handleUserAddCart({productPrice,productId}));
                     <FaRegHeart />
                   </div>
                   <div className="p-3 rounded-full bg-gray-200 hover:bg-green-500 hover:text-white cursor-pointer">
-                    <MdOutlineShoppingCart onClick={() =>{handleNewItem()}}  />
+                    <MdOutlineShoppingCart
+                      onClick={() => {
+                        handleNewItem();
+                      }}
+                    />
                   </div>
                 </div>
                 <span className="font-medium text-2xl text-blue-300">
-                  ${productPrice}
+                  RWF {productPrice}
                 </span>
               </div>
-              <div className='block'>
+              <div className="block">
                 <ReactStars
-                    count={5}
-                    value={averageReviews(reviews)}
-                    isHalf={true}
-                    size={30}
-                    activeColor="#ffd700"
-                    edit={false}
+                  count={5}
+                  value={averageReviews(reviews)}
+                  isHalf={true}
+                  size={30}
+                  activeColor="#ffd700"
+                  edit={false}
                 />
               </div>
               <div className="flex flex-col gap-2">
@@ -156,7 +167,7 @@ dispatch(handleUserAddCart({productPrice,productId}));
             <div className="w-full">
               <div className="product-grid flex justify-left gap-5 mt-5 mx-0">
                 {relatedProducts && relatedProducts.length > 0 ? (
-                  relatedProducts.map((product:ProductType) => (
+                  relatedProducts.map((product: ProductType) => (
                     <Card
                       key={product.id}
                       id={product.id}
@@ -176,9 +187,9 @@ dispatch(handleUserAddCart({productPrice,productId}));
             </div>
           </div>
           <div className="w-full flex flex-col mt-10">
-            <div className='flex'>
+            <div className="flex">
               <h2 className="font-medium text-2xl mr-5">Reviews:</h2>
-              <Button name='Add Review' background='blue'></Button>
+              <Button name="Add Review" background="blue"></Button>
             </div>
             <div className="my-10">
               {reviews && reviews.length > 0 ? (
@@ -203,4 +214,4 @@ dispatch(handleUserAddCart({productPrice,productId}));
   );
 }
 
-export default Page;
+export default Page;
diff --git a/src/components/2faVerification.tsx b/src/components/2faVerification.tsx
@@ -2,7 +2,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import Image from 'next/image';
-import {Button} from '@/components/Button';
+import { Button } from '@/components/Button';
 import { otpValidation } from '@/validations/otpValidations';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
@@ -13,6 +13,7 @@ import {
   resendOTPCode,
 } from '@/redux/slices/2faAuthenticationSlice';
 import GlobarPopUp from './UsablePopUp';
+import request from '@/utils/axios';
 
 interface OtpVerifyInterface {
   isOpen: boolean;
@@ -44,7 +45,12 @@ const OtpVerify: React.FC<OtpVerifyInterface> = ({ isOpen }) => {
   const VerifyOtp = async () => {
     var otp = input.join('');
     const result = otpValidation.safeParse({ otp });
-    dispatch(handleOTPVerification(otp));
+    const result1 = await dispatch(handleOTPVerification(otp));
+    if (result1) {
+      const profile = await request.get(`${URL}/users/profile`);
+      const userData = JSON.stringify(profile);
+      localStorage.setItem('profile', userData);
+    }
   };
   const HandleInput = (
     index: number,
@@ -131,4 +137,4 @@ const OtpVerify: React.FC<OtpVerifyInterface> = ({ isOpen }) => {
     </>
   );
 };
-export default OtpVerify;
+export default OtpVerify;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { MdOutlineRemoveRedEye, MdOutlineShoppingCart } from "react-icons/md";
-import Image from 'next/image';//@ts-ignore
-import ReactStars from "react-rating-stars-component";
-import { FaRegHeart } from "react-icons/fa6";
-import { Cards } from "../types/Product";
-import image from "../../public/product.png";
+import { MdOutlineRemoveRedEye, MdOutlineShoppingCart } from 'react-icons/md';
+import Image from 'next/image'; //@ts-ignore
+import ReactStars from 'react-rating-stars-component';
+import { FaRegHeart } from 'react-icons/fa6';
+import { Cards } from '../types/Product';
+import image from '../../public/product.png';
 import Link from 'next/link';
 import { averageReviews } from '@/utils/averageReviews';
 import { RootState, useAppDispatch, useAppSelector } from '@/redux/store';
@@ -18,7 +18,7 @@ function Card({
   productPrice,
   productThumbnail,
   id,
-  reviews
+  reviews,
 }: Cards) {
 
 const productId=id
@@ -29,37 +29,41 @@ const handleNewItem=()=>{
 dispatch(handleUserAddCart({productPrice,productId}));
 }
   return (
-    <div className="w-full sm:max-w-48 sm:mb-10 mr-3  ml-0 my-3 sm:h-[17rem] h-[19rem] flex flex-col bg-white border border-gray-100 shadow relative">
+    <div className="w-full max-w-[80%] sm:max-w-48 sm:mb-10 min-w-[200px] mr-3  ml-0 my-3 sm:h-[17rem] h-[19rem] flex flex-col bg-white border border-gray-100 shadow relative">
       <div className="flex justify-center h-[180px]">
         {productThumbnail && productThumbnail.length > 0 ? (
           <img
             src={productThumbnail}
             alt="default image"
-            className='w-full h-[150px] text-[12px]'
+            className="w-full h-[150px] text-[12px]"
           />
         ) : (
           <img src="./force.png" alt={'no image found'} />
         )}
       </div>
       <div className="sm:px-4 flex flex-col gap-1">
         <h5 className="max-w-1xl sm:text-[12px] text-[30px] sm:text-left sm:mx-0  mx-3 w font-semibold tracking-tight text-black-900">
-          {productName.length < 30 ? productName : productName.substring(0,30)+'...' }
+          {productName.length < 30
+            ? productName
+            : productName.substring(0, 30) + '...'}
         </h5>
-        <div className='block text-[12px] text-muted'>
-          {productDescription.length < 50 ? productDescription : productDescription.substring(0,50)+'...' }
+        <div className="block text-[12px] text-muted">
+          {productDescription.length < 50
+            ? productDescription
+            : productDescription.substring(0, 50) + '...'}
         </div>
         <div className="flex items-center justify-between pb-3">
           <span className="text-1xl sm:m-0 m-3 font-bold text-green-400">
             {productPrice} RWF
           </span>
-          <span className='block'>
+          <span className="block">
             <ReactStars
-                count={5}
-                value={averageReviews(reviews)}
-                isHalf={true}
-                size={13}
-                activeColor="#ffd700"
-                edit={false}
+              count={5}
+              value={averageReviews(reviews)}
+              isHalf={true}
+              size={13}
+              activeColor="#ffd700"
+              edit={false}
             />
           </span>
         </div>

diff --git a/src/components/CartContainer.tsx b/src/components/CartContainer.tsx
@@ -114,7 +114,7 @@ const CartContainer = (hideOverLay: any) => {
 }
   return (
     <div className="flex flex-col h-full justify-center w-full bg-[#F6F6F6] overflow-y-auto">
-      <div className="flex gap-4 mb-4  px-2 md:px-10">
+      <div className="flex gap-4 sm:mb-4  px-2 md:px-10">
         <Image
           src={backAllow}
           alt=''

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -36,9 +36,9 @@ const Icons = [
 
 export default function Footer() {
   return (
-    <footer className="bg-black text-white pt-10 w-full ">
+    <footer className="bg-black text-white pt-10 w-full flex flex-col justify-center items-center content-center ">
       {/* <ItemsContainer /> */}
-      <div className="w-full  max-w-[1400px] flex justify-center items-center">
+      <div className="w-full  max-w-[1400px] flex justify-center items-center content-center">
         {/* Center section  */}
         <div className="flex sm:justify-between sm:gap-20 sm:py-4 sm:flex-row  gap-5 flex-col-reverse">
           <div className="flex flex-col sm:flex-row gap-2 mb-5">
@@ -116,7 +116,7 @@ export default function Footer() {
           </div>
         </div>
       </div>
-      <div className=" border-t-4 border-white items-center justify-center flex text-center  text-gray-400 text-sm p-4">
+      <div className=" border-t-4 border-white items-center justify-center flex text-center  text-gray-400 text-sm p-4 w-full">
         <span>
           {' '}
           Copyright © {new Date().getFullYear()} Champs bay. All rights