Merge pull request #118 from igrowker/javi-branch

The Last of Fronters
IgrowkerTraining · Dec 9, 2024 · 07ef65c · 07ef65c
2 parents ac993ec + 6b66f36
commit 07ef65c
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Wander | Explora nuevas aventuras</title>
 
   </head>
   <body>

diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/src/components/ConfirmRegister/ConfirmRegister.tsx b/src/components/ConfirmRegister/ConfirmRegister.tsx
@@ -24,13 +24,22 @@ const ConfirmRegister = () => {
     } else {
       setResendEnabled(true); // Habilitar el botón de reenviar cuando los 60 segundos se hayan agotado
     }
+
+    // return () => localStorage.removeItem("tempEmail")
   }, [timeLeft]);
 
-  const handleResend = () => {
+  const handleResend = async () => {
     setTimeLeft(60); // Resetear cuenta regresiva
     setResendEnabled(false); // Deshabilitar el botón hasta pasar otros 60 segundos
     // Lógica para reenviar el código
-    console.log("Código reenviado.");
+    const email = localStorage.getItem("tempEmail")
+
+    try {
+      const res = await authServices.resendCode(email!)
+      console.log(res)
+    } catch (error) {
+      console.log(error)
+    }
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -43,9 +52,9 @@ const ConfirmRegister = () => {
     }
 
     try {
-      const res = await authServices.confirmAccount({ email: tempEmail, verificationCode: code })
-      console.log(res)
-      localStorage.removeItem("tempEmail")
+      await authServices.confirmAccount({ email: tempEmail, verificationCode: code })
+      // console.log(res)
+      // localStorage.removeItem("tempEmail")
       setShowModal(true); // Si el código es válido, mostramos el modal de éxito
     } catch (error) {
       if(error instanceof AxiosError) {
@@ -85,6 +94,7 @@ const ConfirmRegister = () => {
 
   // Función para redirigir a la página de login
   const handleLoginRedirect = () => {
+    localStorage.removeItem("tempEmail")
     navigate("/login"); // Redirigir al login
   };
 

diff --git a/src/components/ExperienceDetail/ExperienceDetail.tsx b/src/components/ExperienceDetail/ExperienceDetail.tsx
@@ -21,7 +21,7 @@ function ExperienceDetail() {
     {} as DetailExperience
   );
 
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const reservation = localStorage.getItem("reservation")
@@ -67,6 +67,7 @@ function ExperienceDetail() {
     <div className="mb-28">
       {/* Seccion de imagenes (Posible slider u otra forma de mostrar las imagenes) */}
       <ImageCardExperience
+        images={experience.experienceImages}
         title={experience?.title}
         rating={experience?.rating}
       />

diff --git a/src/components/ExperienceDetail/ImageCardExperience.tsx b/src/components/ExperienceDetail/ImageCardExperience.tsx
@@ -1,11 +1,11 @@
-import exampleImage from "../../assets/exampleImage.png";
+// import exampleImage from "../../assets/exampleImage.png";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Pagination } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/pagination";
 
-function ImageCardExperience({title, rating} : {title: string, rating: number}) {
-  const photos = [exampleImage, exampleImage, exampleImage];
+function ImageCardExperience({title, rating, images} : {title: string, rating: number, images: string[]}) {
+  // const photos = [exampleImage, exampleImage, exampleImage];
 
   const getRating = (rating: number) => {
     switch (rating) {
@@ -22,7 +22,6 @@ function ImageCardExperience({title, rating} : {title: string, rating: number})
     }
   };
 
-
   return (
     <div className="relative z-10">
       <Swiper
@@ -36,7 +35,7 @@ function ImageCardExperience({title, rating} : {title: string, rating: number})
         }}
         className="mySwiper"
       >
-        {photos.map((photo, index) => (
+        {images.map((photo, index) => (
           <SwiperSlide key={index}>
             <img
               className="w-full max-h-[300px] object-cover"
@@ -49,7 +48,7 @@ function ImageCardExperience({title, rating} : {title: string, rating: number})
               <h1 className="text-2xl font-bold text-white">
                 {title}
               </h1>
-              <p className="text-sm text-white"><span>{getRating(rating)?.stars}</span> 10 Reviews </p>
+              <p className="text-sm text-white"><span>{getRating(rating)?.stars}</span> {/* 10 Reviews */} </p>
             </div>
           </SwiperSlide>
         ))}

diff --git a/src/components/ExperienceDetail/ReviewCard.tsx b/src/components/ExperienceDetail/ReviewCard.tsx
@@ -13,6 +13,8 @@ interface IReview {
 function ReviewCard({review} : {review: IReview}) {
 
   const { rating, comment, createdAt, userName, userAvatar } = review;
+  const userImage = "https://medvirturials.com/img/default-image.png"
+
   console.log(review)
 
   const getRating = (rating: number) => {
@@ -34,7 +36,7 @@ function ReviewCard({review} : {review: IReview}) {
   return (
     <div className="border-gray-300 border-[1.5px] rounded-xl p-4">
         <div className="flex gap-4">
-            <img className="w-12 h-12 rounded-full" src={userAvatar ?? ""} alt="" />
+            <img className="w-12 h-12 rounded-full" src={userAvatar ?? userImage} alt="" />
             <div className="flex flex-col">
                 <h1>{userName ?? "Usuario"}</h1>
                 <p className=""><span className="text-primary">{getRating(rating)?.stars}</span> {formatToShortDate(createdAt)}</p>

diff --git a/src/components/Filters/Filters.tsx b/src/components/Filters/Filters.tsx
@@ -266,7 +266,7 @@ const Filters: React.FC = () => {
                   >
                     <img
                       alt={experience.title}
-                      src={imageSafari}
+                      src={experience.experienceImages ? experience.experienceImages[0] : imageSafari}
                       className="object-cover w-full rounded-xl h-44"
                     />
                     <div className="mt-2">

diff --git a/src/components/Home/homePage.tsx b/src/components/Home/homePage.tsx
@@ -132,7 +132,7 @@ const Home: React.FC = () => {
                       <div
                         className="w-11/12 h-40 mx-auto mt-2 bg-center bg-cover rounded-lg"
                         style={{
-                          backgroundImage: `url(${imageCity})`,
+                          backgroundImage: `url(${experience.experienceImages ? experience.experienceImages[0] : imageCity})`,
                         }}
                       ></div>
                       <div className="flex items-center justify-between p-4">
@@ -164,7 +164,7 @@ const Home: React.FC = () => {
                   ultimaLlamadaExperiences.map((experience) => (
                     <div key={experience.id} className="overflow-hidden rounded-md bg-gray-50" onClick={() => handleImageClick(experience.id)}>
                       <img
-                        src={imageCity}
+                        src={experience.experienceImages ? experience.experienceImages[0] : imageCity}
                         alt={experience.title}
                         className="object-cover w-full h-auto"
                       />

diff --git a/src/components/UserProfile/UserProfile.tsx b/src/components/UserProfile/UserProfile.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect, useContext } from "react"
 
 import userServices from "../../services/user.services"
 import { userInitialValues } from "../../consts/userInitialValues"
@@ -8,11 +8,13 @@ import DetailsCard from "./DetailsCard"
 import Logout from "../Logout"
 import AddExperienceButton from "./AddExperienceButton"
 import { useLocation } from "react-router-dom";
+import { AuthContext } from "../../contexts/auth.context"
 
 const UserProfile: React.FC = () => {
 
     const path = useLocation();
 
+    const { user } = useContext(AuthContext)
     const [userInfo, setUserInfo] = useState<User>(userInitialValues)
 
     const loadUserInfo = async () => {
@@ -36,14 +38,14 @@ const UserProfile: React.FC = () => {
 
     const {  email, location, name, phone, role } = userInfo
     const userImage = "https://medvirturials.com/img/default-image.png"
-
+    console.log(userInfo)
 
     return (
         <div className='flex flex-col items-center mt-4'>
             <div className='w-full px-8 mb-12'>
                 <ProfileCard
                     name={name}
-                    avatar={userImage || userImage}
+                    avatar={user?.avatar || userImage}
                 />
             </div>
             {role.toUpperCase() === 'PROVIDER' && (

diff --git a/src/services/auth.services.ts b/src/services/auth.services.ts
@@ -36,6 +36,10 @@ class AuthServices {
     logout(token: string) {
         return this.api.post('/logout', null, { headers: { Authorization: `Bearer ${token}` } });
     }
+
+    async resendCode(email: string) {
+        return this.api.post("/resend-code", { email })
+    }
 }
 
 const authServices = new AuthServices()

diff --git a/src/types/detailexperience.ts b/src/types/detailexperience.ts
@@ -10,5 +10,6 @@ export interface DetailExperience {
     rating: number,
     capacity: number,
     createdAt: string,
-    status: boolean
+    status: boolean,
+    experienceImages: string[]
 }
diff --git a/src/types/experience.ts b/src/types/experience.ts
@@ -10,5 +10,6 @@ export interface IExperience {
   rating: number;
   capacity: number;
   createdAt: Date;
+  experienceImages: string[]
 }