feat(MessageList, Message): Start /getting-start page

Took 4 hours 41 minutes

src/components/chat/Message.tsx

@@ -1,18 +1,18 @@
-import {Box, Flex, Text} from '@chakra-ui/react';
+import {Flex, Text} from '@chakra-ui/react';
-import type {Message as MessageType, User} from "@prisma/client"
+import type {Message as MessageType, User} from '@prisma/client';
-
 
 type Props = {
-  user: User
+  align: "left" | 'right'
   message: MessageType
 }
 
-export default function Message(props: Props) {
+const Message = ({message, align}: Props) => (
-  const {message, user} = props;
+    <Flex justifyContent={align}>
-
+      <Text w={'fit-content'} bg={'purple.500'} borderRadius={'full'}
-  return (
+            color={'white'} px={'10px'} py={'5px'}>
-      <Flex justifyContent={user.id === message.UserID ? 'right' : 'left'}>
+        {message.text}
-        <Text w={'fit-content'} bg={'purple.500'} borderRadius={'full'} color={'white'} px={"10px"} py={"5px"}>{message.text}</Text>
+      </Text>
     </Flex>
-  );
+);
-}
+
+export default Message;

src/components/chat/MessageList.tsx

@@ -1,4 +1,4 @@
-import type {Message as MessageType, User} from "@prisma/client";
+import type {Message as MessageType, User} from '@prisma/client';
 import Message from '@/components/chat/Message';
 import {Box, Flex} from '@chakra-ui/react';
 
@@ -7,12 +7,14 @@ type Props = {
   messages: MessageType[]
 }
 
-export default function MessageList(props: Props) {
+const MessageList = ({messages, user}: Props) => (
-  const {messages, user} = props;
-
-  return (
     <Flex direction={'column'} gap={1}>
-        {messages.map((message, index) => <Message key={index} user={user} message={message}/>)}
+      {messages.map((message, index) =>
+          <Message key={index}
+                   align={user.id === message.UserID ? 'right' : 'left'}
+                   message={message}/>
+      )}
     </Flex>
-  );
+);
-}
+
+export default MessageList;

src/components/form/GettingStartForm.tsx

@@ -0,0 +1,119 @@
+import {useEffect, useState} from 'react';
+import {
+  Gender,
+  Message as MessageType, Passion,
+  User as UserType,
+} from '@prisma/client';
+import MessageList from '@/components/chat/MessageList';
+import {Button, ButtonGroup, Input, Slider} from '@chakra-ui/react';
+
+type Props = {
+  user: UserType
+}
+
+type FormInputs = {
+  userGender: Gender
+  genderResearch: Gender,
+  ages: [number, number],
+  birth: Date,
+  passions: Passion[]
+}
+
+export default function GettingStartForm({user}: Props) {
+
+  const steps = [
+    {
+      question: 'Salut, je suis Cupibot. Il me manque quelques détails avant de terminer ton inscription. C\'est quoi ton sexe ?',
+      component: ( // TODO Optimiser ça
+          <ButtonGroup>
+            <Button onClick={() => {
+              setFormInputs({...formInputs, userGender: Gender.MALE});
+              nextStep();
+            }}>Homme</Button>
+            <Button onClick={() => {
+              setFormInputs({...formInputs, userGender: Gender.FEMALE});
+              nextStep();
+            }}>Femme</Button>
+            <Button onClick={() => {
+              setFormInputs({...formInputs, userGender: Gender.OTHER});
+              nextStep();
+            }}>Autre</Button>
+          </ButtonGroup>
+      ),
+    },
+    {
+      question: 'Ok et tu es attiré par quel genre ?',
+      component: ( // TODO Optimiser ça
+          <ButtonGroup>
+            <Button onClick={() => {
+              setFormInputs({...formInputs, genderResearch: Gender.MALE});
+              nextStep();
+            }}>Homme</Button>
+            <Button onClick={() => {
+              setFormInputs({...formInputs, genderResearch: Gender.FEMALE});
+              nextStep();
+            }}>Femme</Button>
+            <Button onClick={() => {
+              setFormInputs({...formInputs, genderResearch: Gender.OTHER});
+              nextStep();
+            }}>Autre</Button>
+          </ButtonGroup>),
+    },
+    {
+      question: 'Ça marche, c\'est quoi la tranche d\'âge que tu recherche ?',
+      component: (
+          <>
+            <Slider/>
+            <Button onClick={() => nextStep()}>Suite</Button>
+          </>
+      ), // TODO
+    },
+    {
+      question: 'D\'ailleurs je ne t\'ai pas demandé, quand est-ce que tu est né ?',
+      component: (
+          <>
+            <Input type={'date'}/>
+            <Button onClick={() => nextStep()}>Suite</Button>
+          </>
+      ), // TODO
+    },
+    {
+      question: 'T\'as des passions dans la vie ? (Choisis-en 3 minimum)',
+      component: (
+          <>
+            Passion selector
+            <Button onClick={() => nextStep()}>Suite</Button>
+          </>), // TODO
+    },
+    {
+      question: 'Ok j\'ai toutes les infos d\'on j\'ai besoin, je vais tout faire pour te faire trouver la personne qui te correspond!',
+      component: (<Button onClick={() => {/*handleSubmit()*/}}>Suite</Button>), // TODO
+    },
+  ];
+
+  const [progress, setProgress] = useState(0);
+  const [messages, setMessages] = useState<MessageType[]>([
+    {text: steps[0].question} as MessageType,
+  ]);
+
+  const [formInputs, setFormInputs] = useState<FormInputs>({
+    userGender: Gender.UNKNOWN,
+    genderResearch: Gender.UNKNOWN,
+    ages: [18, 25],
+    birth: new Date(),
+    passions: [],
+  });
+
+  const nextStep = () => {
+    const newMessage = {text: steps[progress + 1].question} as MessageType;
+    setMessages([...messages, newMessage]);
+    setProgress(progress + 1);
+  };
+
+  return (
+      <>
+        <MessageList user={user} messages={messages}/>
+        {steps[progress].component}
+      </>
+  );
+}

src/components/layout/dashboard/left_panel/LeftPanel.tsx

@@ -1,13 +1,4 @@
-import {
+import {Card, Flex, Box, Image, Text, Spacer, Divider} from "@chakra-ui/react";
-  Card,
-  Flex,
-  Box,
-  Image,
-  Text,
-  Spacer,
-  VStack,
-  Divider,
-} from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
 import { AiFillMessage } from "react-icons/ai";

src/pages/getting-start.tsx

@@ -0,0 +1,17 @@
+import Head from 'next/head';
+import {websiteName} from '@/lib/constants';
+import {useSession} from 'next-auth/react';
+import LoadingPage from '@/components/LoadingPage';
+import GettingStartForm from '@/components/form/GettingStartForm';
+
+export default function GettingStart() {
+  const {data: session, status} = useSession({required: true})
+
+  if (status === "loading") return <LoadingPage/>
+  return (
+      <>
+        <Head><title>{websiteName}</title></Head>
+        <GettingStartForm user={session.user}/>
+      </>
+  )
+}