From c241c8b4fed7fe76bcfdf31ea9bef9291caeac28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luc=C3=A0s?= Date: Thu, 23 Mar 2023 12:26:24 +0100 Subject: [PATCH] Refactor Dashboard Took 1 hour 32 minutes --- public/logo.svg | 17 ++++ src/components/CardUser.jsx | 35 -------- src/components/InfoUser.jsx | 84 ------------------- src/components/Navbar.tsx | 12 ++- src/components/layout/Dashboard/CardUser.jsx | 29 +++++++ .../layout/Dashboard/LeftPanel/LeftPanel.jsx | 51 +++++++++++ .../Dashboard/LeftPanel/LeftPanelButton.tsx | 25 ++++++ src/models/api/{user.ts => UserQuery.ts} | 0 src/models/data_models/Session.ts | 6 ++ src/models/data_models/User.ts | 8 ++ src/pages/api/user/index.ts | 2 +- src/pages/dashboard.tsx | 28 ++++++- src/pages/test_card.jsx | 22 ----- 13 files changed, 171 insertions(+), 148 deletions(-) create mode 100644 public/logo.svg delete mode 100644 src/components/CardUser.jsx delete mode 100644 src/components/InfoUser.jsx create mode 100644 src/components/layout/Dashboard/CardUser.jsx create mode 100644 src/components/layout/Dashboard/LeftPanel/LeftPanel.jsx create mode 100644 src/components/layout/Dashboard/LeftPanel/LeftPanelButton.tsx rename src/models/api/{user.ts => UserQuery.ts} (100%) create mode 100644 src/models/data_models/Session.ts create mode 100644 src/models/data_models/User.ts delete mode 100644 src/pages/test_card.jsx diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..a692b35 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,17 @@ + + + + + + + + diff --git a/src/components/CardUser.jsx b/src/components/CardUser.jsx deleted file mode 100644 index 06cb026..0000000 --- a/src/components/CardUser.jsx +++ /dev/null @@ -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 ( - - - - ); -} diff --git a/src/components/InfoUser.jsx b/src/components/InfoUser.jsx deleted file mode 100644 index f4874dd..0000000 --- a/src/components/InfoUser.jsx +++ /dev/null @@ -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 ( - - ); - }; - - //changer l'url - const messageButton = buttonGenerator( - , - "Messages", - "/test_card" - ); - - const profileButton = buttonGenerator( - , - "Profile", - "/test_card" - ); - - return ( - - - - - - - {user.firstName} {user.lastName} - - - "{user.aPropos}"" - - - - - - {messageButton} - {profileButton} - - - - ); -} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index c09f9e4..cb54529 100644 --- a/src/components/Navbar.tsx +++ b/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 ( {session.user.email} @@ -38,7 +44,7 @@ export default function Navbar() { backdropFilter={'auto'} backdropBlur={'20px'} px={10} py={2}> - Logo + diff --git a/src/components/layout/Dashboard/CardUser.jsx b/src/components/layout/Dashboard/CardUser.jsx new file mode 100644 index 0000000..73cb71d --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/src/components/layout/Dashboard/LeftPanel/LeftPanel.jsx b/src/components/layout/Dashboard/LeftPanel/LeftPanel.jsx new file mode 100644 index 0000000..cfd405d --- /dev/null +++ b/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 ( + + + + + + + {user.firstName} {user.lastName} + + + "{user.aPropos}" + + + + + + + } + onClickHandler={() => router.push('/dashboard')}> + Messages + + } + onClickHandler={() => router.push('/dashboard')}> + Profile + + + + + ); +} diff --git a/src/components/layout/Dashboard/LeftPanel/LeftPanelButton.tsx b/src/components/layout/Dashboard/LeftPanel/LeftPanelButton.tsx new file mode 100644 index 0000000..9ae0b91 --- /dev/null +++ b/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 ( + + ); +} \ No newline at end of file diff --git a/src/models/api/user.ts b/src/models/api/UserQuery.ts similarity index 100% rename from src/models/api/user.ts rename to src/models/api/UserQuery.ts diff --git a/src/models/data_models/Session.ts b/src/models/data_models/Session.ts new file mode 100644 index 0000000..968e1d1 --- /dev/null +++ b/src/models/data_models/Session.ts @@ -0,0 +1,6 @@ +import {User} from '@/models/data_models/User'; + +export type Session = { + user: User + token: string +} \ No newline at end of file diff --git a/src/models/data_models/User.ts b/src/models/data_models/User.ts new file mode 100644 index 0000000..b24622a --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/src/pages/api/user/index.ts b/src/pages/api/user/index.ts index 91e7765..07867f9 100644 --- a/src/pages/api/user/index.ts +++ b/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'; diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 7764948..b242587 100644 --- a/src/pages/dashboard.tsx +++ b/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 Loading... if (status === "unauthenticated") router.push("/login"); - return ( - Dashboard de {session.user.firstName} {session.user.lastName} - ) + + 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 ( + + + + + ); + } } \ No newline at end of file diff --git a/src/pages/test_card.jsx b/src/pages/test_card.jsx deleted file mode 100644 index 60cc37e..0000000 --- a/src/pages/test_card.jsx +++ /dev/null @@ -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 ( - - {/* à terme, envoyer les données du user depuis la session */} - - - - ); -}