diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx index 3dc7d4d9..5a50daf8 100644 --- a/src/frontend/src/features/home/routes/Home.tsx +++ b/src/frontend/src/features/home/routes/Home.tsx @@ -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) - const [redirectFailed, setRedirectFailed] = useState(false) + return ( + <> + + + + { + const slug = generateRoomId() + createRoom({ slug, username }).then((data) => + navigateTo('room', data.slug, { + state: { create: true, initialRoomData: data }, + }) + ) + }} + data-attr="create-option-instant" + > + + {t('createMenu.instantOption')} + + { + const slug = generateRoomId() + createRoom({ slug, username }).then(setLaterRoom) + }} + data-attr="create-option-later" + > + + {t('createMenu.laterOption')} + + + + 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 ? ( - - - - { - const slug = generateRoomId() - createRoom({ slug, username }).then((data) => - navigateTo('room', data.slug, { - state: { create: true, initialRoomData: data }, - }) - ) - }} - data-attr="create-option-instant" - > - - {t('createMenu.instantOption')} - - { - const slug = generateRoomId() - createRoom({ slug, username }).then((data) => - setLaterRoom(data) - ) - }} - data-attr="create-option-later" - > - - {t('createMenu.laterOption')} - - - + ) : ( )} @@ -265,10 +272,6 @@ const Home = () => { - setLaterRoom(null)} - /> )