Refactor Dashboard

Took 1 hour 32 minutes

public/logo.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="100pt" height="100pt" viewBox="0 0 416.000000 416.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,416.000000) scale(0.100000,-0.100000)"
+fill="#805AD5" stroke="none">
+<path d="M1912 3100 c-245 -64 -439 -266 -498 -517 -21 -89 -14 -258 14 -365
+58 -217 202 -494 410 -791 114 -163 233 -312 249 -312 15 0 178 218 288 385
+295 448 425 781 395 1013 -20 163 -82 288 -200 407 -169 170 -426 240 -658
+180z m73 -435 c20 -8 49 -29 65 -47 l30 -32 30 32 c130 142 373 19 346 -175
+-12 -93 -86 -193 -262 -358 l-114 -107 -111 104 c-175 163 -253 268 -265 361
+-21 154 140 282 281 222z"/>
+</g>
+</svg>

src/components/CardUser.jsx

@@ -1,35 +0,0 @@
-import { Card, Flex, Box } from "@chakra-ui/react";
-import Carousel from "./Carousel";
-
-export default function CardUser(props) {
-  const { user } = props;
-  // const data_user = props;
-  const borderRad = "2rem";
-
-  const potentialMatch = {
-    lastName: "dujardin",
-    firstName: "jean",
-    age: 19,
-    aPropos: "Je suis une personne fictive, pas tres fictive",
-    images: ["401446.webp"],
-    passions: ["Sport", "Piscine", "Formule1"],
-  };
-
-  return (
-    <Card
-      borderRadius={borderRad}
-      width={"35vw"}
-      height={"90vh"}
-      padding={"0px"}
-      marginY={"auto"}
-    >
-      <Carousel
-        actualUser={user}
-        potentialMatch={potentialMatch}
-        borderRadiusImg={borderRad}
-        heightPhoto={"75vh"}
-        heightText={"25vh"}
-      />
-    </Card>
-  );
-}

src/components/InfoUser.jsx

@@ -1,84 +0,0 @@
-import {
-  Card,
-  Flex,
-  Box,
-  Image,
-  Text,
-  Button,
-  Center,
-  HStack,
-  VStack,
-  Spacer,
-} from "@chakra-ui/react";
-import { useRouter } from "next/router";
-import Carousel from "./Carousel";
-import { AiFillMessage } from "react-icons/ai";
-import { BsFillPersonFill } from "react-icons/bs";
-
-export default function InfoUser(props) {
-  const router = useRouter();
-  const { user } = props;
-  // const data_user = props;
-  const borderRad = "2rem";
-
-  const buttonGenerator = (icon, text, url) => {
-    return (
-      <Button
-        bg={"white"}
-        _hover={{ bg: "blackAlpha.100", color: "purple.400" }}
-        width={"100%"}
-        lineHeight={"auto"}
-        justifyContent={"left"}
-        onClick={() => router.push(url)}
-      >
-        <HStack spacing={"1rem"} alignItems={"center"}>
-          {icon}
-          <Text fontWeight={"bold"} fontSize={"1.2rem"}>
-            {text}
-          </Text>
-        </HStack>
-      </Button>
-    );
-  };
-
-  //changer l'url
-  const messageButton = buttonGenerator(
-    <AiFillMessage />,
-    "Messages",
-    "/test_card"
-  );
-
-  const profileButton = buttonGenerator(
-    <BsFillPersonFill />,
-    "Profile",
-    "/test_card"
-  );
-
-  return (
-    <Card
-      borderRadius={borderRad}
-      width={"20vw"}
-      height={"100vh"}
-      padding={"0px"}
-    >
-      <Flex direction={"column"} height={"100%"} margin={"10%"}>
-        <Box>
-          <Image src={user.images[0]} borderRadius={borderRad} />
-          <Box mt={"1vh"}>
-            <Text fontSize={"1.5rem"} fontWeight={"bold"}>
-              {user.firstName} {user.lastName}
-            </Text>
-            <Text as={"i"} fontWeight={"bold"}>
-              "{user.aPropos}""
-            </Text>
-          </Box>
-        </Box>
-        <Spacer />
-        <VStack mt={"1vh"} spacing={3.5} alignContent={"bottom"}>
-          {messageButton}
-          {profileButton}
-        </VStack>
-      </Flex>
-    </Card>
-  );
-}

src/components/Navbar.tsx

@@ -1,4 +1,11 @@
-import {Box, Flex, Text, ButtonGroup, Button} from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Text,
+  ButtonGroup,
+  Button,
+  Image,
+} from '@chakra-ui/react';
 import {useRouter} from 'next/router';
 import {signOut, useSession} from 'next-auth/react';
 
@@ -7,7 +14,6 @@ export default function Navbar() {
   const {data: session, status} = useSession();
 
   const RightSection = () => {
-
     if (status === "authenticated" && session.user) return (
         <Flex justify={'right'} flexBasis={'100%'}>
           <Text>{session.user.email}</Text>
@@ -38,7 +44,7 @@ export default function Navbar() {
            backdropFilter={'auto'} backdropBlur={'20px'} px={10} py={2}>
         <Flex align={'center'}>
           <Box flexBasis={'100%'}>
-            <Text>Logo</Text>
+            <Image src={"/logo.svg"} h={"100px"} objectFit={"contain"}/>
           </Box>
 
           <Flex gap={5} justify={'center'} flexBasis={'100%'}>

src/components/layout/Dashboard/CardUser.jsx

@@ -0,0 +1,29 @@
+import {Card, Flex, Box} from '@chakra-ui/react';
+import Carousel from '../../Carousel';
+
+export default function CardUser(props) {
+  const {user} = props;
+
+  const potentialMatch = {
+    lastName: 'dujardin',
+    firstName: 'jean',
+    age: 19,
+    aPropos: 'Je suis une personne fictive, pas tres fictive',
+    images: ['401446.webp'],
+    passions: ['Sport', 'Piscine', 'Formule1'],
+  };
+
+  return (
+    <Card borderRadius={"1rem"}
+          width={'35vw'}
+          height={'90vh'}
+          padding={'0px'}
+          marginY={'auto'}
+          overflow={'hidden'}>
+      <Carousel actualUser={user}
+                potentialMatch={potentialMatch}
+                heightPhoto={'75vh'}
+                heightText={'25vh'}/>
+    </Card>
+  );
+}

src/components/layout/Dashboard/LeftPanel/LeftPanel.jsx

@@ -0,0 +1,51 @@
+import {
+  Card,
+  Flex,
+  Box,
+  Image,
+  Text,
+  Button,
+  VStack,
+  Spacer,
+} from '@chakra-ui/react';
+import {useRouter} from 'next/router';
+import {AiFillMessage} from 'react-icons/ai';
+import {BsFillPersonFill} from 'react-icons/bs';
+import LeftPanelButton
+  from '@/components/layout/Dashboard/LeftPanel/LeftPanelButton';
+
+export default function LeftPanel(props) {
+  const router = useRouter();
+  const {user} = props;
+
+  return (
+    <Card width={'20vw'} height={'100vh'} padding={'0px'}>
+      <Flex direction={'column'} height={'100%'} margin={'10%'}>
+        <Box>
+          <Image src={user.images[0]} borderRadius={'1rem'}/>
+          <Box mt={'1vh'}>
+            <Text fontSize={'1.5rem'} fontWeight={'bold'}>
+              {user.firstName} {user.lastName}
+            </Text>
+            <Text as="i" fontWeight={'bold'}>
+              &quot;{user.aPropos}&quot;
+            </Text>
+          </Box>
+        </Box>
+        <Spacer/>
+        <Flex gap={2} direction={'column'} mt={'1vh'} spacing={3.5}
+              alignContent={'bottom'}>
+
+          <LeftPanelButton leftIcon={<AiFillMessage/>}
+                           onClickHandler={() => router.push('/dashboard')}>
+            Messages
+          </LeftPanelButton>
+          <LeftPanelButton leftIcon={<BsFillPersonFill/>}
+                           onClickHandler={() => router.push('/dashboard')}>
+            Profile
+          </LeftPanelButton>
+        </Flex>
+      </Flex>
+    </Card>
+  );
+}

src/components/layout/Dashboard/LeftPanel/LeftPanelButton.tsx

@@ -0,0 +1,25 @@
+import {Button} from '@chakra-ui/react';
+import {ReactJSXElement} from '@emotion/react/types/jsx-namespace';
+
+type Props = {
+  children?: ReactJSXElement
+  onClickHandler: () => void
+  leftIcon ?: ReactJSXElement
+}
+
+export default function LeftPanelButton(props: Props) {
+  const {children, onClickHandler, leftIcon: icon} = props;
+
+  return (
+      <Button
+          colorScheme={'purple'}
+          variant={'ghost'}
+          width={'100%'}
+          justifyContent={'left'}
+          onClick={onClickHandler}
+          leftIcon={icon}
+          fontWeight={'bold'}
+          fontSize={'1.2rem'}
+      >{children}</Button>
+  );
+}

src/models/data_models/Session.ts

@@ -0,0 +1,6 @@
+import {User} from '@/models/data_models/User';
+
+export type Session = {
+  user: User
+  token: string
+}

src/models/data_models/User.ts

@@ -0,0 +1,8 @@
+export type User = {
+  id: string
+  email: string
+  password: string
+  firstName: string
+  lastName: string
+  role: "USER" | "ADMIN"
+}

src/pages/api/user/index.ts

@@ -1,6 +1,6 @@
 import type {NextApiRequest, NextApiResponse} from 'next';
 import CRUD from '@/utils/CRUD';
-import {CreateUserQuery} from '@/models/api/user';
+import {CreateUserQuery} from '@/models/api/UserQuery';
 import {hashPassword} from '@/lib/PasswordTools';
 import prismaClient from '@/lib/prismaClient';
 

src/pages/dashboard.tsx

@@ -1,13 +1,35 @@
 import {Text} from '@chakra-ui/react';
 import {useSession} from 'next-auth/react';
 import {useRouter} from 'next/router';
+import {Flex} from '@chakra-ui/react';
+
+import type {Session} from '@/models/data_models/Session';
+import CardUser from "../components/layout/Dashboard/CardUser";
+import LeftPanel from "../components/layout/Dashboard/LeftPanel/LeftPanel";
 
 export default function Dashboard() {
   const router = useRouter();
   const {data: session, status} = useSession();
+
+  if (status === "loading") return <Text>Loading...</Text>
   if (status === "unauthenticated") router.push("/login");
 
-  return (
+
-      <Text>Dashboard de {session.user.firstName} {session.user.lastName}</Text>
+  if (status === "authenticated") {
-  )
+    const {user} = session as unknown as Session;
+
+    const refinedUser = {...user,
+      age: 21,
+      aPropos: "Je suis la personne fictive la plus fictive",
+      images: ["135538.webp"],
+      passions: ["Sport", "Voiture", "Cuisine"],
+    };
+
+    return (
+        <Flex gap={10}>
+          <LeftPanel user={refinedUser} />
+          <CardUser user={refinedUser} />
+        </Flex>
+    );
+  }
 }

src/pages/test_card.jsx

@@ -1,22 +0,0 @@
-import { Flex } from "@chakra-ui/react";
-import CardUser from "../components/CardUser";
-import InfoUser from "../components/InfoUser";
-
-export default function Test_card() {
-  const user = {
-    lastName: "Alexandra",
-    firstName: "Lamy",
-    age: 21,
-    aPropos: "Je suis la personne fictive la plus fictive",
-    images: ["135538.webp"],
-    passions: ["Sport", "Voiture", "Cuisine"],
-  };
-
-  return (
-    <Flex gap={10}>
-      {/* à terme, envoyer les données du user depuis la session */}
-      <InfoUser user={user} />
-      <CardUser user={user} />
-    </Flex>
-  );
-}