feat(leagues-frontend): Show Location name & address on list page

alexstojda · Jul 29, 2023 · 677c8ce · 677c8ce
1 parent 0295496
commit 677c8ce
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 26 deletions.
diff --git a/web/app/src/pages/Leagues/index.tsx b/web/app/src/pages/Leagues/index.tsx
@@ -1,11 +1,11 @@
 import {Api, League, useAuth} from "../../api";
 import {useEffect, useState} from "react";
 import {
+ Box,
  Button,
  Card,
  CardBody,
  CardHeader,
- Container,
  Grid,
  GridItem,
  Heading,
@@ -16,7 +16,7 @@ import {
  ModalContent,
  ModalHeader,
  ModalOverlay,
- Spacer,
+ Spacer, Text,
 } from "@chakra-ui/react";
 import {useNavigate} from "react-router-dom";
 import {AxiosError} from "axios";
@@ -78,10 +78,11 @@ export default function LeaguesPage(props: LeagueListPageProps) {
  <GridItem key={league.id}>
  <Card data-testid="league-card" direction={'row'}>
  <CardHeader>
- <Heading size={'md'}>{league.name}</Heading>
+ <Heading lineHeight={'2em'} mt={'0'} mb={'0'} verticalAlign={'middle'} size={'md'}>{league.name}</Heading>
  </CardHeader>
- <CardBody>
- <p style={{textAlign: 'right'}}>{league.locationId}</p>
+ <CardBody textAlign={'right'}>
+ <Text fontSize={'0.8em'}>{league.location.name}</Text>
+ <Text fontSize={'0.65em'}>{league.location.address}</Text>
  </CardBody>
  </Card>
  </GridItem>
@@ -103,26 +104,28 @@ export default function LeaguesPage(props: LeagueListPageProps) {
  </ModalContent>
  </Modal>
 
- <Container>
- <HStack py={5}>
- <Heading
- textAlign={'center'}
- fontSize={'4xl'}
- fontWeight={'bold'}>
- Leagues
- </Heading>
- <Spacer/>
- {auth?.user &&
- <Button data-testid={'create-league'} size={'sm'} onClick={() => {
- navigate('/leagues/create')
- }}>
- Create League
- </Button>
- }
- </HStack>
- {renderList()}
- <Footer/>
- </Container>
+ <Box fontSize="xl" w={['90%', '85%', '80%']} maxW={800} mx="auto">
+ <Box pb={10}>
+ <HStack py={5}>
+ <Heading
+ textAlign={'center'}
+ fontSize={'4xl'}
+ fontWeight={'bold'}>
+ Leagues
+ </Heading>
+ <Spacer/>
+ {auth?.user &&
+ <Button data-testid={'create-league'} size={'sm'} onClick={() => {
+ navigate('/leagues/create')
+ }}>
+ Create League
+ </Button>
+ }
+ </HStack>
+ {renderList()}
+ <Footer/>
+ </Box>
+ </Box>
  </>
  )
 }
diff --git a/web/app/src/test/fake/league.ts b/web/app/src/test/fake/league.ts
@@ -1,6 +1,7 @@
 import {League} from "../../api";
 import {faker} from "@faker-js/faker";
 import * as helpers from "../../helpers";
+import {location} from "./location";
 
 export function league(): League {
  const name = faker.hacker.phrase();
@@ -9,7 +10,7 @@ export function league(): League {
  id: faker.datatype.uuid(),
  name: name,
  slug: helpers.slugify(name),
- locationId: faker.datatype.uuid(),
+ location: location(),
  ownerId: faker.datatype.uuid(),
  created_at: faker.date.recent(5).toISOString(),
  updated_at: faker.date.recent(1).toISOString()

diff --git a/web/app/src/test/fake/location.ts b/web/app/src/test/fake/location.ts
@@ -0,0 +1,17 @@
+import {Location} from "../../api";
+import {faker} from "@faker-js/faker";
+import * as helpers from "../../helpers";
+
+export function location(): Location {
+ const name = faker.hacker.phrase();
+
+ return {
+ id: faker.datatype.uuid(),
+ name: name,
+ slug: helpers.slugify(name),
+ address: faker.address.streetAddress(),
+ pinball_map_id: faker.datatype.number(),
+ created_at: faker.date.recent(5).toISOString(),
+ updated_at: faker.date.recent(1).toISOString()
+ }
+}