From 06e3b417bf8b8a98286381910cf8a92ec5563460 Mon Sep 17 00:00:00 2001 From: balayette_ Date: Sat, 2 Dec 2023 13:43:12 +0100 Subject: [PATCH 01/12] feat(front): creating chat page --- apps/front/components/chat/ChatBox.tsx | 0 apps/front/pages/chat/[id].tsx | 17 +++++++++++++++++ apps/front/pages/chat/index.tsx | 0 3 files changed, 17 insertions(+) create mode 100644 apps/front/components/chat/ChatBox.tsx create mode 100644 apps/front/pages/chat/[id].tsx create mode 100644 apps/front/pages/chat/index.tsx diff --git a/apps/front/components/chat/ChatBox.tsx b/apps/front/components/chat/ChatBox.tsx new file mode 100644 index 0000000..e69de29 diff --git a/apps/front/pages/chat/[id].tsx b/apps/front/pages/chat/[id].tsx new file mode 100644 index 0000000..68eabbf --- /dev/null +++ b/apps/front/pages/chat/[id].tsx @@ -0,0 +1,17 @@ +import BasicInput from 'apps/front/components/forms/Input'; +import { useRouter } from 'next/router'; +import { useRef } from 'react'; + +export function Chat() { + const router = useRouter(); + const { id } = router.query; + const inputRef = useRef(null); + console.log(id); + return ( + <> + + + ); +} + +export default Chat; diff --git a/apps/front/pages/chat/index.tsx b/apps/front/pages/chat/index.tsx new file mode 100644 index 0000000..e69de29 From a2307993f25adc60a30f3466863236e9f918ea8e Mon Sep 17 00:00:00 2001 From: Charles Lambret Date: Wed, 6 Dec 2023 21:24:47 +0100 Subject: [PATCH 02/12] ajout du composants de messages et de la chatbox --- README.md | 2 +- apps/front/components/chat/ChatBox.tsx | 38 +++++++++++++++++++++++ apps/front/components/chat/message.tsx | 34 ++++++++++++++++++++ apps/front/components/forms/Input.tsx | 2 +- apps/front/components/nav/fixedlayout.tsx | 0 apps/front/components/nav/header.tsx | 10 +++--- apps/front/components/nav/sidebar.tsx | 0 apps/front/components/nav/userlist.tsx | 2 +- apps/front/pages/index.tsx | 4 +-- 9 files changed, 82 insertions(+), 10 deletions(-) create mode 100644 apps/front/components/chat/message.tsx delete mode 100644 apps/front/components/nav/fixedlayout.tsx delete mode 100644 apps/front/components/nav/sidebar.tsx diff --git a/README.md b/README.md index d17e6d5..a9657b2 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ ## Start the app -To start the development server run `nx serve hetic-chat-app`. Open your browser and navigate to http://localhost:4200/. Happy coding! +To start the development server run `nx serve apps/front`. Open your browser and navigate to http://localhost:4200/. Happy coding! ## Generate code diff --git a/apps/front/components/chat/ChatBox.tsx b/apps/front/components/chat/ChatBox.tsx index e69de29..0ebdfc9 100644 --- a/apps/front/components/chat/ChatBox.tsx +++ b/apps/front/components/chat/ChatBox.tsx @@ -0,0 +1,38 @@ +import React, { useState } from 'react'; +import { Box, Button } from '@mui/material'; +import BasicInput from '../forms/Input'; +import { useRef } from 'react'; +import MessageItem from './message'; +import { BasicButton } from '../forms/Button'; + +export default function ChatBox() { + const [messages, setMessages] = useState([ + { text: 'Bonjour, comment puis-je vous aider?', user: 'user1', timestamp: new Date() }, + { text: 'Voici un exemple de message.', user: 'user2', timestamp: new Date() }, + { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() } + ]); + + const inputRef = useRef(null); + const sendMessage = () => { + if (inputRef.current) { + setMessages([...messages, { text: inputRef.current.value, user: 'user2', timestamp: new Date() }]); + inputRef.current.value = ""; + } + }; + + return ( + + + {messages.map((message, index) => ( + + ))} + + + + + ); +} diff --git a/apps/front/components/chat/message.tsx b/apps/front/components/chat/message.tsx new file mode 100644 index 0000000..14c47d6 --- /dev/null +++ b/apps/front/components/chat/message.tsx @@ -0,0 +1,34 @@ +import { Box } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; + +interface MessageProps { + text: string; + user: string; + timestamp: Date; +} +export default function MessageItem(props: MessageProps) { + const theme = useTheme(); + const messageBoxStyle = { + bgcolor: props.user === 'user1' ? 'primary.main' : 'secondary.main', // Changer la couleur en fonction de l'utilisateur + boxShadow: `0px 2px 4px ${theme.palette.primary.main}`, + borderRadius: 2, + p: 2, + margin:2, + minWidth: 100, + maxWidth: 'fit-content', + color: 'background.default', + textAlign: props.user === 'user1' ? 'left' : 'right', + marginLeft: props.user === 'user1' ? 0 : 'auto', + }; + const formatDate = (date: Date) => { + return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`; + }; + return ( + + {props.text} + + {formatDate(props.timestamp)} + + + ) +} diff --git a/apps/front/components/forms/Input.tsx b/apps/front/components/forms/Input.tsx index 99be181..ca29e8a 100644 --- a/apps/front/components/forms/Input.tsx +++ b/apps/front/components/forms/Input.tsx @@ -11,7 +11,7 @@ export default function BasicInput(props: BasicInputProps) { return ( diff --git a/apps/front/components/nav/fixedlayout.tsx b/apps/front/components/nav/fixedlayout.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/apps/front/components/nav/header.tsx b/apps/front/components/nav/header.tsx index bdd73e0..f68536d 100644 --- a/apps/front/components/nav/header.tsx +++ b/apps/front/components/nav/header.tsx @@ -18,7 +18,7 @@ import FormGroup from '@mui/material/FormGroup'; import MenuItem from '@mui/material/MenuItem'; import Menu from '@mui/material/Menu'; import AccountCircle from '@mui/icons-material/AccountCircle'; -import AlignItemsList from './userlist'; +import MessagesList from './userlist'; const drawerWidth = 240; const navItems = ['Home', 'About', 'Contact']; @@ -117,8 +117,8 @@ export default function DrawerAppBar() { open={Boolean(anchorEl)} onClose={handleClose} > - Profile - My account + Profil + Mon compte )} @@ -134,7 +134,7 @@ export default function DrawerAppBar() { }} open > - + - + )} diff --git a/apps/front/components/nav/sidebar.tsx b/apps/front/components/nav/sidebar.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/apps/front/components/nav/userlist.tsx b/apps/front/components/nav/userlist.tsx index 30543e6..890e3d2 100644 --- a/apps/front/components/nav/userlist.tsx +++ b/apps/front/components/nav/userlist.tsx @@ -10,7 +10,7 @@ import AvatarComponent from '../profile/pfp'; -export default function AlignItemsList() { +export default function MessagesList() { return ( diff --git a/apps/front/pages/index.tsx b/apps/front/pages/index.tsx index a24c4f8..0baab18 100644 --- a/apps/front/pages/index.tsx +++ b/apps/front/pages/index.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; - +import ChatBox from '../components/chat/ChatBox'; const StyledPage = styled.div` .page { } @@ -16,7 +16,7 @@ export function Index() { Welcome front đź‘‹ - +

From 7ccb5471db5a1421e270e35cf81244a92531db15 Mon Sep 17 00:00:00 2001 From: Charles Lambret Date: Wed, 6 Dec 2023 22:01:15 +0100 Subject: [PATCH 03/12] =?UTF-8?q?am=C3=A9lioration=20de=20l'input=20de=20m?= =?UTF-8?q?essage=20et=20du=20bouton=20envoyer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/front/components/chat/ChatBox.tsx | 36 +++++++++++++++++------ apps/front/components/forms/Button.tsx | 27 ++++++++++------- apps/front/components/forms/Input.tsx | 5 ++++ apps/front/components/forms/LoginForm.tsx | 32 ++++++++++---------- apps/front/pages/connexion.tsx | 4 +-- 5 files changed, 67 insertions(+), 37 deletions(-) diff --git a/apps/front/components/chat/ChatBox.tsx b/apps/front/components/chat/ChatBox.tsx index 0ebdfc9..4627c0c 100644 --- a/apps/front/components/chat/ChatBox.tsx +++ b/apps/front/components/chat/ChatBox.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, ChangeEvent } from 'react'; import { Box, Button } from '@mui/material'; import BasicInput from '../forms/Input'; import { useRef } from 'react'; @@ -11,28 +11,46 @@ export default function ChatBox() { { text: 'Voici un exemple de message.', user: 'user2', timestamp: new Date() }, { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() } ]); + const [inputValue, setInputValue] = useState(''); const inputRef = useRef(null); const sendMessage = () => { - if (inputRef.current) { + if (inputRef.current && inputRef.current.value.trim() !== '') { setMessages([...messages, { text: inputRef.current.value, user: 'user2', timestamp: new Date() }]); inputRef.current.value = ""; + setInputValue(''); } }; + const handleInputChange = (event: ChangeEvent) => { + setInputValue(event.target.value); + }; + return ( - {messages.map((message, index) => ( + {messages.map((message, index) => ( ))} - - + + + + + ); } diff --git a/apps/front/components/forms/Button.tsx b/apps/front/components/forms/Button.tsx index 92659ee..ba30e9b 100644 --- a/apps/front/components/forms/Button.tsx +++ b/apps/front/components/forms/Button.tsx @@ -1,22 +1,27 @@ import Button from '@mui/material/Button'; +import SendIcon from '@mui/icons-material/Send'; interface BasicButtonProps { - buttonText: string; - buttonVariant: 'text' | 'outlined' | 'contained'; // Ajoutez les types de variant possibles ici + buttonText?: string; + buttonVariant: 'text' | 'outlined' | 'contained'; onClick: () => void; buttonColor: 'primary' | 'secondary'; + chat: 'yes' | 'no'; + disabled?: boolean; // Ajout de la propriété disabled } export function BasicButton(props: BasicButtonProps) { + const { buttonText, buttonVariant, onClick, buttonColor, chat, disabled } = props; + return ( - <> - - + ); } diff --git a/apps/front/components/forms/Input.tsx b/apps/front/components/forms/Input.tsx index ca29e8a..90134b4 100644 --- a/apps/front/components/forms/Input.tsx +++ b/apps/front/components/forms/Input.tsx @@ -5,15 +5,20 @@ interface BasicInputProps { label: string; forwardedRef: React.RefObject; variant?: 'standard' | 'filled' | 'outlined'; + value: string; + onChange: (event: React.ChangeEvent) => void; } export default function BasicInput(props: BasicInputProps) { return ( ); } diff --git a/apps/front/components/forms/LoginForm.tsx b/apps/front/components/forms/LoginForm.tsx index 2ea36f1..ac82447 100644 --- a/apps/front/components/forms/LoginForm.tsx +++ b/apps/front/components/forms/LoginForm.tsx @@ -14,6 +14,10 @@ export default function LoginForm({ variant, onLogin, onSignup }: FormProps) { const passwordRef = useRef(null); const confirmPasswordRef = useRef(null); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [formVariant, setFormVariant] = useState<'login' | 'signup'>('login'); const toggleFormVariant = () => { @@ -32,33 +36,31 @@ export default function LoginForm({ variant, onLogin, onSignup }: FormProps) { alignItems="start" justifyContent="space-around" > - - - {variant === 'login' ? 'Connexion' : 'Inscription'} - - - - - + {/* ... autres éléments */} + setEmail(e.target.value)} + /> setPassword(e.target.value)} /> {variant === 'signup' && ( setConfirmPassword(e.target.value)} /> )} - - + {/* ... autres éléments */} ); } diff --git a/apps/front/pages/connexion.tsx b/apps/front/pages/connexion.tsx index 38d4078..38b67f5 100644 --- a/apps/front/pages/connexion.tsx +++ b/apps/front/pages/connexion.tsx @@ -19,10 +19,10 @@ export default function PageConnexionInscription() { { - /* Logique de connexion */ + }} onSignup={() => { - /* Logique d'inscription */ + }} /> From 75cb8d44a1ca0f332c2b814115fce29f01f54030 Mon Sep 17 00:00:00 2001 From: Charles Lambret Date: Wed, 6 Dec 2023 22:21:24 +0100 Subject: [PATCH 04/12] =?UTF-8?q?montage=20des=20composants=20ensemble,=20?= =?UTF-8?q?initialisation=20de=20l'=C3=A9tat=20g=C3=A9n=C3=A9ral=20auth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/front/components/chat/ChatBox.tsx | 1 - apps/front/components/nav/header.tsx | 24 +- apps/front/pages/_app.tsx | 14 +- apps/front/pages/chat/[id].tsx | 17 - apps/front/pages/chat/index.tsx | 0 apps/front/pages/connexion.tsx | 44 --- apps/front/pages/index.tsx | 452 ------------------------- 7 files changed, 15 insertions(+), 537 deletions(-) delete mode 100644 apps/front/pages/chat/[id].tsx delete mode 100644 apps/front/pages/chat/index.tsx delete mode 100644 apps/front/pages/connexion.tsx delete mode 100644 apps/front/pages/index.tsx diff --git a/apps/front/components/chat/ChatBox.tsx b/apps/front/components/chat/ChatBox.tsx index 4627c0c..8cf6144 100644 --- a/apps/front/components/chat/ChatBox.tsx +++ b/apps/front/components/chat/ChatBox.tsx @@ -49,7 +49,6 @@ export default function ChatBox() { chat='yes' disabled={inputValue.trim() === ''} // Passer l'état disabled basé sur la valeur de l'input /> - ); diff --git a/apps/front/components/nav/header.tsx b/apps/front/components/nav/header.tsx index f68536d..ee07a36 100644 --- a/apps/front/components/nav/header.tsx +++ b/apps/front/components/nav/header.tsx @@ -23,19 +23,18 @@ import MessagesList from './userlist'; const drawerWidth = 240; const navItems = ['Home', 'About', 'Contact']; -export default function DrawerAppBar() { +interface HeaderProps { + auth: boolean; +} + +export default function DrawerAppBar({ auth }: HeaderProps) { const [mobileOpen, setMobileOpen] = React.useState(false); - const [auth, setAuth] = React.useState(false); const [anchorEl, setAnchorEl] = React.useState(null); const handleDrawerToggle = () => { setMobileOpen(!mobileOpen); }; - const handleChange = (event: React.ChangeEvent) => { - setAuth(event.target.checked); - }; - const handleMenu = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); }; @@ -78,18 +77,7 @@ export default function DrawerAppBar() { Ami-es - - - } - label={auth ? 'Logout' : 'Login'} - /> - + {auth && (
(false); + return ( - Web Chat App + Web Chat
-
- +
+ {auth ? : }
); diff --git a/apps/front/pages/chat/[id].tsx b/apps/front/pages/chat/[id].tsx deleted file mode 100644 index 68eabbf..0000000 --- a/apps/front/pages/chat/[id].tsx +++ /dev/null @@ -1,17 +0,0 @@ -import BasicInput from 'apps/front/components/forms/Input'; -import { useRouter } from 'next/router'; -import { useRef } from 'react'; - -export function Chat() { - const router = useRouter(); - const { id } = router.query; - const inputRef = useRef(null); - console.log(id); - return ( - <> - - - ); -} - -export default Chat; diff --git a/apps/front/pages/chat/index.tsx b/apps/front/pages/chat/index.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/apps/front/pages/connexion.tsx b/apps/front/pages/connexion.tsx deleted file mode 100644 index 38b67f5..0000000 --- a/apps/front/pages/connexion.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import LoginForm from '../components/forms/LoginForm'; -import { useState } from 'react'; -import { Box } from '@mui/material'; -import Link from 'next/link'; - -export default function PageConnexionInscription() { - const [formVariant, setFormVariant] = useState<'login' | 'signup'>('login'); - - const toggleFormVariant = () => { - setFormVariant(formVariant === 'login' ? 'signup' : 'login'); - }; - return ( - - { - - }} - onSignup={() => { - - }} - /> - - {formVariant === 'login' ? ( - <> - Mot de passe oublié ? - - Pas encore inscrit ? - - - ) : ( - - Déjà inscrit ? - - )} - - - ); -} diff --git a/apps/front/pages/index.tsx b/apps/front/pages/index.tsx deleted file mode 100644 index 0baab18..0000000 --- a/apps/front/pages/index.tsx +++ /dev/null @@ -1,452 +0,0 @@ -import styled from '@emotion/styled'; -import ChatBox from '../components/chat/ChatBox'; -const StyledPage = styled.div` - .page { - } -`; - -export function Index() { - return ( - -
-
-
-

- Hello there, - Welcome front đź‘‹ -

-
- -
-
-

- - - -

You're up and running

-

- What's next? -
-
- - - -
-
- -
- - -
- -
-

Next steps

-

Here are some things you can do with Nx:

-
- - - - - Add UI library - - 
-                # Generate UI lib
-                nx g @nx/next:library ui
-                # Add a component
-                nx g @nx/next:component ui/src/lib/button
-
-
-
- - - - - View interactive project graph - - 
nx graph
-
-
- - - - - Run affected commands - - 
-                # see what's been affected by changes
-                nx affected:graph
-                # run tests for current changes
-                nx affected:test
-                # run e2e tests for current changes
-                nx affected:e2e
-
-
-
- -

- Carefully crafted with - - - -

- - - - ); -} - -export default Index; From 39a5beef299c7e8a328cfb1e2c4f827f1b7f21b7 Mon Sep 17 00:00:00 2001 From: Charles Lambret Date: Sat, 9 Dec 2023 18:28:43 +0100 Subject: [PATCH 05/12] ajout de la page profil, fix layout chatbox, fix layout sidebar --- apps/front/components/chat/ChatBox.tsx | 53 +++++++++++++++-------- apps/front/components/forms/Button.tsx | 8 ++-- apps/front/components/forms/Input.tsx | 6 +++ apps/front/components/forms/LoginForm.tsx | 41 +++++++++++++++--- apps/front/components/nav/header.tsx | 29 +++++-------- apps/front/components/profile/profile.tsx | 32 ++++++++++++++ apps/front/pages/_app.tsx | 33 ++++++++++++-- apps/front/pages/styles.css | 7 +++ 8 files changed, 159 insertions(+), 50 deletions(-) create mode 100644 apps/front/components/profile/profile.tsx diff --git a/apps/front/components/chat/ChatBox.tsx b/apps/front/components/chat/ChatBox.tsx index 8cf6144..1569312 100644 --- a/apps/front/components/chat/ChatBox.tsx +++ b/apps/front/components/chat/ChatBox.tsx @@ -1,4 +1,4 @@ -import React, { useState, ChangeEvent } from 'react'; +import React, { useState, ChangeEvent, useEffect } from 'react'; import { Box, Button } from '@mui/material'; import BasicInput from '../forms/Input'; import { useRef } from 'react'; @@ -9,10 +9,21 @@ export default function ChatBox() { const [messages, setMessages] = useState([ { text: 'Bonjour, comment puis-je vous aider?', user: 'user1', timestamp: new Date() }, { text: 'Voici un exemple de message.', user: 'user2', timestamp: new Date() }, - { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() } + { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() }, + { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() }, + { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() }, + { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() }, + { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() }, + { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() }, + ]); const [inputValue, setInputValue] = useState(''); - + const handleKeyPress = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' && !event.shiftKey) { // Vérifier si la touche "Entrée" est pressée sans "Shift" + event.preventDefault(); // Prévenir le comportement par défaut (saut de ligne) + sendMessage(); + } + }; const inputRef = useRef(null); const sendMessage = () => { if (inputRef.current && inputRef.current.value.trim() !== '') { @@ -22,32 +33,40 @@ export default function ChatBox() { } }; + const messagesEndRef = useRef(null); const handleInputChange = (event: ChangeEvent) => { setInputValue(event.target.value); }; + const scrollToBottom = () => { + messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); + }; + useEffect(() => { + scrollToBottom(); + }, [messages]); return ( - - - {messages.map((message, index) => ( - - ))} - - + + + + {messages.map((message, index) => ( + + ))} +
+ + diff --git a/apps/front/components/forms/Button.tsx b/apps/front/components/forms/Button.tsx index ba30e9b..ad35ffd 100644 --- a/apps/front/components/forms/Button.tsx +++ b/apps/front/components/forms/Button.tsx @@ -7,21 +7,23 @@ interface BasicButtonProps { onClick: () => void; buttonColor: 'primary' | 'secondary'; chat: 'yes' | 'no'; - disabled?: boolean; // Ajout de la propriété disabled + disabled?: boolean; } export function BasicButton(props: BasicButtonProps) { const { buttonText, buttonVariant, onClick, buttonColor, chat, disabled } = props; + const buttonContent = chat === 'yes' ? : buttonText; + return ( ); } diff --git a/apps/front/components/forms/Input.tsx b/apps/front/components/forms/Input.tsx index 90134b4..a2211ac 100644 --- a/apps/front/components/forms/Input.tsx +++ b/apps/front/components/forms/Input.tsx @@ -10,6 +10,12 @@ interface BasicInputProps { } export default function BasicInput(props: BasicInputProps) { + const handleKeyPress = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault(); + + } +}; return ( void; onSignup?: () => void; + onUpdate?: () => void; } -export default function LoginForm({ variant, onLogin, onSignup }: FormProps) { +export default function LoginForm({ variant, onLogin, onSignup, onUpdate }: FormProps) { const emailRef = useRef(null); const passwordRef = useRef(null); const confirmPasswordRef = useRef(null); + const nameRef = useRef(null); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); - + const [name, setName] = useState(''); const [formVariant, setFormVariant] = useState<'login' | 'signup'>('login'); const toggleFormVariant = () => { @@ -25,7 +27,14 @@ export default function LoginForm({ variant, onLogin, onSignup }: FormProps) { }; const handleSubmit = () => { - // faut implémenter la logique de soumission ici en fonction de la version du form + if (variant === 'login' && onLogin) { + onLogin(); + } else if (variant === 'signup' && onSignup) { + onSignup(); + } + else if (variant === 'update' && onUpdate) { + onUpdate(); + } }; return ( @@ -35,8 +44,18 @@ export default function LoginForm({ variant, onLogin, onSignup }: FormProps) { flexDirection="column" alignItems="start" justifyContent="space-around" + sx={{width:1, height:1}} > - {/* ... autres éléments */} + { variant=== 'login' ? Connexion : Inscription} + {variant === 'signup' || variant === 'update' && ( + setName(e.target.value)} + /> + )} setPassword(e.target.value)} /> - {variant === 'signup' && ( + {variant === 'signup' || variant === 'update' && ( setConfirmPassword(e.target.value)} /> )} - {/* ... autres éléments */} + {variant === 'login' && ( + Pas de compte ?Créez-en un + ) + } + {variant === 'signup' && ( + Vous avez déjà un compte ?Connectez-vous + ) + } + ); } diff --git a/apps/front/components/nav/header.tsx b/apps/front/components/nav/header.tsx index ee07a36..d28ecad 100644 --- a/apps/front/components/nav/header.tsx +++ b/apps/front/components/nav/header.tsx @@ -19,15 +19,16 @@ import MenuItem from '@mui/material/MenuItem'; import Menu from '@mui/material/Menu'; import AccountCircle from '@mui/icons-material/AccountCircle'; import MessagesList from './userlist'; - +import { useRef } from 'react'; const drawerWidth = 240; -const navItems = ['Home', 'About', 'Contact']; +const navItems = ['Home']; interface HeaderProps { auth: boolean; + onProfileClick: () => void; } -export default function DrawerAppBar({ auth }: HeaderProps) { +export default function DrawerAppBar({ auth, onProfileClick }: HeaderProps) { const [mobileOpen, setMobileOpen] = React.useState(false); const [anchorEl, setAnchorEl] = React.useState(null); @@ -42,7 +43,8 @@ export default function DrawerAppBar({ auth }: HeaderProps) { const handleClose = () => { setAnchorEl(null); }; - + + const messagesEndRef = useRef(null); const drawer = ( @@ -105,37 +107,26 @@ export default function DrawerAppBar({ auth }: HeaderProps) { open={Boolean(anchorEl)} onClose={handleClose} > - Profil - Mon compte + Profil
)} {auth &&( -