Merge pull request #164 from jbrunton/home-page

feat: home page
jbrunton · Aug 31, 2024 · 721d2e8 · 721d2e8
2 parents bd8bfc1 + dfb7827
commit 721d2e8
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 16 deletions.
diff --git a/client/src/ErrorPage.tsx b/client/src/ErrorPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Container, Alert, AlertIcon, AlertTitle, AlertDescription, Box } from '@chakra-ui/react'
+import { Container, Alert, AlertIcon, AlertTitle, AlertDescription, Box, Center } from '@chakra-ui/react'
 import { AxiosError } from 'axios'
 import { useRouteError } from 'react-router-dom'
 import { HeaderTemplate } from './shared/navigation/molecules/HeaderTemplate'
@@ -10,17 +10,19 @@ export const ErrorPage = () => {
   return (
     <>
       <HeaderTemplate title='Chat Demo' />
-      <Container maxWidth='container.lg'>
-        <Alert status='error' variant='top-accent' height='200px'>
-          <AlertIcon boxSize='40px' ml='20px' mr='40px' />
-          <Box>
-            <AlertTitle mt={4} mb={1} fontSize='lg'>
-              Uh oh!
-            </AlertTitle>
-            <AlertDescription>{message}</AlertDescription>
-          </Box>
-        </Alert>
-      </Container>
+      <Center height='100%'>
+        <Container maxWidth='container.lg'>
+          <Alert status='error' variant='top-accent' p='10'>
+            <AlertIcon boxSize='40px' ml='20px' mr='40px' />
+            <Box>
+              <AlertTitle mt={4} mb={1} fontSize='lg'>
+                Uh oh!
+              </AlertTitle>
+              <AlertDescription>{message}</AlertDescription>
+            </Box>
+          </Alert>
+        </Container>
+      </Center>
     </>
   )
 }

diff --git a/client/src/features/Home.tsx b/client/src/features/Home.tsx
@@ -1,5 +1,32 @@
+import { Alert, Button, Center, Container, Flex } from '@chakra-ui/react'
 import React from 'react'
+import { useAuth } from './auth'
+import { LoadingIndicator } from '../shared/molecules/LoadingIndicator'
+import { RoomSelector } from '../shared/navigation/organisms/RoomSelector'
 
 export const HomePage = () => {
-  return <p>Home</p>
+  const { isAuthenticated, isLoading, signIn } = useAuth()
+  if (isLoading) {
+    return <LoadingIndicator />
+  }
+  return (
+    <Center height='100%'>
+      <Container maxWidth='container.lg'>
+        <Alert status='info' variant='top-accent' p='10'>
+          {isAuthenticated ? (
+            <Flex flexDirection='column'>
+              <RoomSelector />
+            </Flex>
+          ) : (
+            <span>
+              <Button variant='link' onClick={signIn}>
+                Sign in
+              </Button>{' '}
+              to get started.
+            </span>
+          )}
+        </Alert>
+      </Container>
+    </Center>
+  )
 }
diff --git a/client/src/shared/navigation/organisms/RoomSelector.tsx b/client/src/shared/navigation/organisms/RoomSelector.tsx
@@ -15,7 +15,7 @@ export const RoomSelector = () => {
   return (
     <>
       <Heading size='sm' m='4'>
-        Rooms
+        Your Rooms
       </Heading>
       <Link to='/room/new'>
         <Button variant='drawer' leftIcon={<NewRoomIcon />}>

diff --git a/e2e/tests/fixtures/menu.ts b/e2e/tests/fixtures/menu.ts
@@ -7,8 +7,8 @@ export class Menu {
 
   constructor(private readonly page: Page) {
     this.openMenuButton = page.getByLabel("Open Menu");
-    this.createRoomButton = page.getByText("New Room");
-    this.signInButton = page.getByText("Sign In");
+    this.createRoomButton = page.getByRole("dialog").getByText("New Room");
+    this.signInButton = page.getByRole("dialog").getByText("Sign In");
   }
 
   async open() {