gsadmin/meet
1
0
Fork 0
mirror of https://github.com/suitenumerique/meet.git synced 2026-08-05 08:27:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

⚡️(frontend) isolate the creation menu in a dedicated component

Browse Source 
Avoid re-rendering the whole home page when interacting with the later
meeting creation flow.

Maintaining the modal open/close state at the parent level was causing
the whole home page to re-render on every menu open/close state
change.
This commit is contained in:
lebaudantoine
2026-05-26 10:44:00 +02:00
committed by aleb_the_flash
parent 995e6fa41d
commit 8984d863df
1 changed files with 51 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/features/home/routes/Home.tsx
+51 -48
View File
@@ -147,18 +147,63 @@ const IntroText = styled('div', {
},
})
const Home = () => {
const { t } = useTranslation('home')
const { isLoggedIn } = useUser()
const CreateMeetingMenu = () => {
const {
userChoices: { username },
} = usePersistentUserChoices()
const { t } = useTranslation('home')
const { mutateAsync: createRoom } = useCreateRoom()
const [laterRoom, setLaterRoom] = useState<null | ApiRoom>(null)
const [redirectFailed, setRedirectFailed] = useState(false)
return (
<>
<Menu>
<Button variant="primary" data-attr="create-meeting">
{t('createMeeting')}
</Button>
<RACMenu>
<MenuItem
className={menuRecipe({ icon: true, variant: 'light' }).item}
onAction={() => {
const slug = generateRoomId()
createRoom({ slug, username }).then((data) =>
navigateTo('room', data.slug, {
state: { create: true, initialRoomData: data },
})
)
}}
data-attr="create-option-instant"
>
<RiAddLine size={18} />
{t('createMenu.instantOption')}
</MenuItem>
<MenuItem
className={menuRecipe({ icon: true, variant: 'light' }).item}
onAction={() => {
const slug = generateRoomId()
createRoom({ slug, username }).then(setLaterRoom)
}}
data-attr="create-option-later"
>
<RiLink size={18} />
{t('createMenu.laterOption')}
</MenuItem>
</RACMenu>
</Menu>
<LaterMeetingDialog
room={laterRoom}
onOpenChange={() => setLaterRoom(null)}
/>
</>
)
}
const Home = () => {
const { t } = useTranslation('home')
const { isLoggedIn } = useUser()
const [redirectFailed, setRedirectFailed] = useState(false)
const { data } = useConfig()
useEffect(() => {
@@ -201,45 +246,7 @@ const Home = () => {
})}
>
{isLoggedIn ? (
<Menu>
<Button variant="primary" data-attr="create-meeting">
{t('createMeeting')}
</Button>
<RACMenu>
<MenuItem
className={
menuRecipe({ icon: true, variant: 'light' }).item
}
onAction={async () => {
const slug = generateRoomId()
createRoom({ slug, username }).then((data) =>
navigateTo('room', data.slug, {
state: { create: true, initialRoomData: data },
})
)
}}
data-attr="create-option-instant"
>
<RiAddLine size={18} />
{t('createMenu.instantOption')}
</MenuItem>
<MenuItem
className={
menuRecipe({ icon: true, variant: 'light' }).item
}
onAction={() => {
const slug = generateRoomId()
createRoom({ slug, username }).then((data) =>
setLaterRoom(data)
)
}}
data-attr="create-option-later"
>
<RiLink size={18} />
{t('createMenu.laterOption')}
</MenuItem>
</RACMenu>
</Menu>
<CreateMeetingMenu />
) : (
<LoginButton proConnectHint={false} />
)}
@@ -265,10 +272,6 @@ const Home = () => {
<IntroSlider />
</RightColumn>
</Columns>
<LaterMeetingDialog
room={laterRoom}
onOpenChange={() => setLaterRoom(null)}
/>
</Screen>
</UserAware>
)