Merge pull request #50 from ayoub/frontend

update profile page
nuuxcode · Dec 18, 2023 · ae6cd61 · ae6cd61
2 parents a926b97 + 16e1414
commit ae6cd61
Show file tree

Hide file tree

Showing 9 changed files with 244 additions and 185 deletions.
diff --git a/api/package.json b/api/package.json
@@ -73,9 +73,9 @@
     "supertest": "^6.1.3",
     "ts-jest": "^26.5.2",
     "ts-loader": "^8.0.17",
-    "ts-node": "^9.1.1",
+    "ts-node": "^10.9.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.2.2"
   },
   "jest": {
     "moduleFileExtensions": [

diff --git a/frontend/package.json b/frontend/package.json
@@ -17,6 +17,7 @@
     "axios": "^1.6.2",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-calendar": "^4.7.0",
     "react-dom": "^18.2.0",

diff --git a/frontend/src/assets/css/minicalender.css b/frontend/src/assets/css/minicalender.css
@@ -3,6 +3,11 @@
   background-color: transparent;
   font-family: "DM Sans", sans-serif;
 }
+@media screen and (max-width: 767px) {
+  .react-calendar {
+    width: 100% !important;
+  }
+}
 .react-calendar__navigation__prev2-button {
   display: none;
 }

diff --git a/frontend/src/components/calender/MniCalender.tsx b/frontend/src/components/calender/MniCalender.tsx
@@ -23,8 +23,8 @@ export default function MiniCalendar(props: {
       flexDirection="column"
       borderRadius={"xl"}
       shadow={"xl"}
-      w="80%"
-      maxW="max-content"
+      w="full"
+      // maxW="full"
       p="20px 15px"
       h="max-content"
       {...rest}

diff --git a/frontend/src/pages/profile/Profile.page.tsx b/frontend/src/pages/profile/Profile.page.tsx
@@ -3,41 +3,80 @@ import {
   Box,
   Flex,
   Heading,
+  Spinner,
   // Icon,
   Text,
 } from "@chakra-ui/react";
-import bikeImg from "../../assets/images/bikes/bike1.jpg";
 import MiniCalendar from "../../components/calender/MniCalender";
 import RentDetails from "./partials/RentDetails";
 import { useEffect, useState } from "react";
 import axios from "../../apis/axios";
+import { useAuth } from "../../hooks/useAuth";
+import Rental from "./partials/RentalCard";
 
 export type Rental = {
   id: number;
   price: number;
   status: string;
-  bike: {
+  start_time: string;
+  end_time: string;
+  qrcode: string;
+  created_at: string;
+  updated_at: string;
+  User: {
+    id: number;
     name: string;
+    email: string;
+    image: string;
+    phone: string;
+    birthday: string;
+  };
+  Bike: {
+    model: string;
+    image: string;
+    status: string;
     location: string;
+    Park: {
+      id: number;
+      name: string;
+      location: string;
+      image: string;
+    };
   };
 };
 const Profile = () => {
   const [rentals, setrentals] = useState<Rental[]>([]);
+  const [currRental, setcurrRental] = useState<Rental | null>(null); // rentals[0]
+  const [isLoaded, setIsLoaded] = useState(true);
+  const { user } = useAuth();
 
   useEffect(() => {
     axios
-      .get(`/rentals/user/8`)
+      .get(`/rentals/user/9`, {
+        withCredentials: true,
+      })
       .then((response) => {
         setrentals(response.data);
       })
       .catch((error) => {
         console.error("Error fetching rentals:", error);
       });
   }, []);
+  useEffect(() => {
+    setcurrRental(rentals[0]);
+    setIsLoaded(false);
+  }, [rentals]);
+
+  const handleRentalClick = (rental: Rental) => {
+    setcurrRental(rental);
+  };
   return (
-    <Box className="container mx-auto px-4 sm:px-16 py-12" minHeight={"80vh"}>
-      <Flex justifyContent={"space-between"}>
-        <Box w="300px">
+    <Box className=" mx-auto px-4 py-12 sm:px-16" minHeight={"80vh"}>
+      <Flex flexWrap={"wrap"} justifyContent={"space-between"}>
+        <Box
+          className=" flex flex-col gap-5 md:flex-row lg:flex-col lg:justify-between"
+          w={{ base: "full", md: "full", lg: "300px" }}
+        >
           <Box
             className="flex flex-col shadow-xl"
             borderRadius={"2xl"}
@@ -53,24 +92,23 @@ const Profile = () => {
               borderRadius={"md"}
             ></Box>
             <Avatar
-              src={
-                "https://images.unsplash.com/photo-1554151228-14d9def656e4?q=80&w=1586&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-              }
+              src={user?.image}
+              name={user?.name}
               size={"xl"}
-              className="-mt-10 mx-auto border-4 border-white"
+              className="mx-auto -mt-10 border-4 border-white"
             ></Avatar>
             <Heading
               as="h2"
               fontSize={18}
               fontWeight={"bold"}
-              className=" capitalize text-center my-3 font"
+              className=" font my-3 text-center capitalize"
             >
-              ayoub El Gharbi
+              {user?.name}
             </Heading>
 
             <Flex justifyContent={"space-evenly"} my={6}>
               <Box
-                className="flex flex-col justify-center items-center"
+                className="flex flex-col items-center justify-center"
                 w={"70px"}
                 h={"70px"}
                 textAlign={"center"}
@@ -86,18 +124,26 @@ const Profile = () => {
               </Box>
             </Flex>
           </Box>
-          <MiniCalendar minW="100%" selectRange={false} />
+          <MiniCalendar selectRange={false} />
         </Box>
+
         <Box
           minHeight={"80vh"}
-          width="45%"
+          minW={{ base: "full", lg: "600px" }}
           shadow={"lg"}
           p={5}
           borderRadius={"2xl"}
         >
-          <RentDetails rent={rentals[1]} />
+          <RentDetails rent={currRental} />
         </Box>
-        <Box width="350px" shadow={"lg"} borderRadius={"2xl"} p={3}>
+
+        <Box
+          width={{ base: "full", md: "350px" }}
+          h={"fit-content"}
+          shadow={"lg"}
+          borderRadius={"2xl"}
+          p={3}
+        >
           <Heading
             as="h1"
             fontSize={20}
@@ -109,53 +155,27 @@ const Profile = () => {
             Rentals
           </Heading>
           <hr className="mb-2" />
-          {rentals.length > 0 ? (
-            rentals.map((rental) => (
-              <Box
-                className="flex justify-between items-center p-2 rounded-lg"
-                _hover={{
-                  bg: "gray.50",
-                  cursor: "pointer",
-                  shadow: "xl",
-                  transition: "all 0.2s ease-in-out",
-                }}
-                _focus={{
-                  bg: "gray.50",
-                  cursor: "pointer",
-                  shadow: "xl",
-                }}
-              >
-                <Avatar borderRadius={"lg"} size={"md"} src={bikeImg} />
-                <Box justifySelf={"start"}>
-                  <Heading as="h2" fontSize={18} fontWeight={"bold"}>
-                    {rental.bike?.name}
-                  </Heading>
-                  <Text fontSize={12} fontWeight={"medium"} color={"gray"}>
-                    {rental.bike?.location}
-                  </Text>
-                </Box>
-                <Box
-                  fontWeight={"bold"}
-                  fontSize={18}
-                  textAlign={"center"}
-                  color={"orange"}
-                >
-                  <Text>${rental?.price}</Text>
-                  {/* <Text></Text> */}
-                </Box>
-                <Box color={"gray"} fontSize={"small"} fontWeight={"medium"}>
-                  <Text>3h</Text>
-                  <Text>ago</Text>
-                </Box>
+          <Box overflow={"auto"} height={"600px"}>
+            {isLoaded ? (
+              <Box className="flex h-full items-center justify-center">
+                <Spinner size="xl" />
+              </Box>
+            ) : rentals.length > 0 ? (
+              rentals.map((rental) => (
+                <Rental
+                  key={rental.id}
+                  rental={rental}
+                  onclickRent={handleRentalClick}
+                />
+              ))
+            ) : (
+              <Box className="flex h-full items-center justify-center">
+                <Text fontSize={18} fontWeight={"bold"} color={"gray"}>
+                  No history yet
+                </Text>
               </Box>
-            ))
-          ) : (
-            <Box className="flex justify-center items-center h-full">
-              <Text fontSize={18} fontWeight={"bold"} color={"gray"}>
-                No history yet
-              </Text>
-            </Box>
-          )}
+            )}
+          </Box>
         </Box>
       </Flex>
     </Box>