From 378cc3a651f89d3aad6b30584f504898d3cad8d7 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 7 Aug 2024 16:31:56 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20persist=20local=20partici?=
 =?UTF-8?q?pant=20name=20on=20updates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Utilized local storage to persist the updated name. After careful
consideration, persisting all user choices in the backend was deemed overly
complex and unnecessary for the value it would provide.

Opted for a single responsibility approach by leveraging local storage to manage
user choices, aligning with LiveKit's default implementation.
---
 .../livekit/components/dialogs/UsernameDialog.tsx      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx b/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx
index 718fb035..3cdb768b 100644
--- a/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx
@@ -1,18 +1,24 @@
 import { useTranslation } from 'react-i18next'
 import { Field, Form, Dialog, DialogProps } from '@/primitives'
-import { useRoomContext } from '@livekit/components-react'
+import {
+  usePersistentUserChoices,
+  useRoomContext,
+} from '@livekit/components-react'
 
 export type UsernameDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
 
 export const UsernameDialog = (props: UsernameDialogProps) => {
   const { t } = useTranslation('rooms')
+  const { saveUsername } = usePersistentUserChoices()
 
   const ctx = useRoomContext()
   return (
     <Dialog title={t('options.username.heading')} {...props}>
       <Form
         onSubmit={(data) => {
-          ctx.localParticipant.setName(data.username as string)
+          const { username } = data as { username: string }
+          ctx.localParticipant.setName(username)
+          saveUsername(username)
           const { onOpenChange } = props
           if (onOpenChange) {
             onOpenChange(false)