diff --git a/src/frontend/src/features/home/components/LaterMeetingDialog.tsx b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx new file mode 100644 index 00000000..e980468b --- /dev/null +++ b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx @@ -0,0 +1,63 @@ +import { useEffect, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { getRouteUrl } from '@/navigation/getRouteUrl' +import { Div, Button, Dialog, Input, type DialogProps, P } from '@/primitives' +import { HStack } from '@/styled-system/jsx' + +// fixme - duplication with the InviteDialog +export const LaterMeetingDialog = ({ + roomId, + ...dialogProps +}: { roomId: string } & Omit) => { + const { t } = useTranslation('home') + const roomUrl = getRouteUrl('room', roomId) + const copyLabel = t('laterMeetingDialog.copy') + const copiedLabel = t('laterMeetingDialog.copied') + const [copyLinkLabel, setCopyLinkLabel] = useState(copyLabel) + useEffect(() => { + if (copyLinkLabel == copiedLabel) { + const timeout = setTimeout(() => { + setCopyLinkLabel(copyLabel) + }, 5000) + return () => { + clearTimeout(timeout) + } + } + }, [copyLinkLabel, copyLabel, copiedLabel]) + + return ( + +

{t('laterMeetingDialog.description')}

+ +
+ { + e.currentTarget.select() + }} + /> +
+
+ +
+
+
+ ) +} diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx index 096abe8f..cb764905 100644 --- a/src/frontend/src/features/home/routes/Home.tsx +++ b/src/frontend/src/features/home/routes/Home.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next' import { DialogTrigger } from 'react-aria-components' -import { Button, Text } from '@/primitives' +import { Button, Menu, Text } from '@/primitives' import { HStack } from '@/styled-system/jsx' import { navigateTo } from '@/navigation/navigateTo' import { Screen } from '@/layout/Screen' @@ -10,6 +10,11 @@ import { authUrl, useUser, UserAware } from '@/features/auth' import { JoinMeetingDialog } from '../components/JoinMeetingDialog' import { useCreateRoom } from '@/features/rooms' import { usePersistentUserChoices } from '@livekit/components-react' +import { menuItemRecipe } from '@/primitives/menuItemRecipe' +import { RiAddLine, RiLink } from '@remixicon/react' +import { MenuItem, Menu as RACMenu } from 'react-aria-components' +import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog' +import { useState } from 'react' export const Home = () => { const { t } = useTranslation('home') @@ -19,13 +24,10 @@ export const Home = () => { userChoices: { username }, } = usePersistentUserChoices() - const { mutateAsync: createRoom } = useCreateRoom({ - onSuccess: (data) => { - navigateTo('room', data.slug, { - state: { create: true, initialRoomData: data }, - }) - }, - }) + const { mutateAsync: createRoom } = useCreateRoom() + const [laterRoomId, setLaterRoomId] = useState(null) + + console.log(laterRoomId) return ( @@ -43,21 +45,43 @@ export const Home = () => { )} - + + { const slug = generateRoomId() - await createRoom({ slug, username }) - } - : undefined - } - href={isLoggedIn ? undefined : authUrl()} - > - {isLoggedIn ? t('createMeeting') : t('login', { ns: 'global' })} - - + createRoom({ slug, username }).then((data) => + navigateTo('room', data.slug, { + state: { create: true, initialRoomData: data }, + }) + ) + }} + > + + {t('createMenu.instantOption')} + + { + const slug = generateRoomId() + createRoom({ slug, username }).then((data) => + setLaterRoomId(data.slug) + ) + }} + > + + {t('createMenu.laterOption')} + + + + ) : ( + + )}