Skip to content

Commit 420aaa2

Browse files
phlaxdependabot[bot]
phlax
and
dependabot[bot]
authored
single-page-app: Update chakra-ui -> 3+ (#717)
Signed-off-by: Ryan Northey <ryan@synca.io> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
1 parent 789950c commit 420aaa2

File tree

14 files changed

+1169
-793
lines changed

14 files changed

+1169
-793
lines changed

‎single-page-app/ui/package.json‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"@chakra-ui/menu": "^2.2.1",
14-
"@chakra-ui/modal": "^2.3.1",
15-
"@chakra-ui/react": "^2.8.2",
16-
"@chakra-ui/system": "^2.6.2",
17-
"@chakra-ui/table": "^2.1.0",
18-
"@chakra-ui/tabs": "^3.0.0",
13+
"@chakra-ui/react": "^3.21.1",
1914
"@emotion/react": "^11.14.0",
2015
"@emotion/styled": "^11.14.1",
2116
"framer-motion": "^12.22.0",

‎single-page-app/ui/src/@types/app.d.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,3 +134,19 @@ interface IRepoInfo {
134134
full_name: string
135135
updated_at: string
136136
}
137+
138+
interface IComponentWithUserInfoProp {
139+
user: IUser | null
140+
}
141+
142+
interface IUserDialogProps extends IComponentWithUserInfoProp {
143+
open: boolean
144+
setOpen: React.Dispatch<React.SetStateAction<boolean>>
145+
}
146+
147+
interface IUserMenuProps extends IComponentWithUserInfoProp {
148+
handleLogout: () => Promise<void>
149+
onInfoClick: () => void
150+
open: boolean
151+
setOpen: React.Dispatch<React.SetStateAction<boolean>>
152+
}

‎single-page-app/ui/src/App.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {ChakraProvider, extendTheme} from '@chakra-ui/react'
1+
import {ChakraProvider, createSystem, defaultConfig, defineConfig, mergeConfigs} from '@chakra-ui/react'
22
import {useReducer} from 'react'
33
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
44

@@ -9,19 +9,25 @@ import Logout from "./components/Logout"
99
import {AuthContext, DataContext} from "./context"
1010
import {dataInitialState, dataReducer, userInitialState, userReducer} from "./store/reducer"
1111

12-
const theme = extendTheme({
13-
colors: {
14-
primary: {
15-
500: '#000',
12+
const customConfig = defineConfig({
13+
theme: {
14+
tokens: {
15+
colors: {
16+
primary: {
17+
500: {value: "#000"},
18+
},
19+
},
1620
},
1721
},
1822
})
1923

24+
const system = createSystem(mergeConfigs(defaultConfig, customConfig))
25+
2026
function App() {
2127
const [userState, userDispatch] = useReducer(userReducer, userInitialState)
2228
const [dataState, dataDispatch] = useReducer(dataReducer, dataInitialState)
2329
return (
24-
<ChakraProvider theme={theme}>
30+
<ChakraProvider value={system}>
2531
<AuthContext.Provider
2632
value={{
2733
state: userState,

‎single-page-app/ui/src/components/Home.tsx‎

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
import {Text} from '@chakra-ui/react'
2-
import {
3-
Tab,
4-
TabList,
5-
TabPanel,
6-
TabPanels,
7-
Tabs,
8-
} from '@chakra-ui/tabs'
1+
import {Tabs, Text} from '@chakra-ui/react'
92
import {useContext} from "react"
103

4+
import {Toaster} from "./ui/toaster"
115
import {AuthContext} from "../context"
126
import {
137
IHomeProps,
@@ -24,43 +18,42 @@ export const Content = () => {
2418
return <Text>Login to query APIs</Text>
2519
}
2620
return (
27-
<Tabs>
28-
<TabList>
29-
<Tab>Repos</Tab>
30-
<Tab>Followers</Tab>
31-
<Tab>Following</Tab>
32-
</TabList>
33-
<TabPanels>
34-
<TabPanel>
35-
<Resources
36-
name="repos"
37-
title="Repositories"
38-
headers={RepoTableHeaders}
39-
row={RepoTr} />
40-
</TabPanel>
41-
<TabPanel>
42-
<Resources
43-
name="followers"
44-
title="Followers"
45-
headers={RelatedUserTableHeaders}
46-
row={RelatedUserTr} />
47-
</TabPanel>
48-
<TabPanel>
49-
<Resources
50-
name="following"
51-
title="Following"
52-
headers={RelatedUserTableHeaders}
53-
row={RelatedUserTr} />
54-
</TabPanel>
55-
</TabPanels>
56-
</Tabs>
21+
<Tabs.Root defaultValue="repos">
22+
<Tabs.List>
23+
<Tabs.Trigger value="repos">Repos</Tabs.Trigger>
24+
<Tabs.Trigger value="followers">Followers</Tabs.Trigger>
25+
<Tabs.Trigger value="following">Following</Tabs.Trigger>
26+
</Tabs.List>
27+
<Tabs.Content value="repos">
28+
<Resources
29+
name="repos"
30+
title="Repositories"
31+
headers={RepoTableHeaders}
32+
row={RepoTr} />
33+
</Tabs.Content>
34+
<Tabs.Content value="followers">
35+
<Resources
36+
name="followers"
37+
title="Followers"
38+
headers={RelatedUserTableHeaders}
39+
row={RelatedUserTr} />
40+
</Tabs.Content>
41+
<Tabs.Content value="following">
42+
<Resources
43+
name="following"
44+
title="Following"
45+
headers={RelatedUserTableHeaders}
46+
row={RelatedUserTr} />
47+
</Tabs.Content>
48+
</Tabs.Root>
5749
)
5850
}
5951

6052
export default function Home (props: IHomeProps) {
6153
return (
6254
<Layout {...props}>
6355
<Content />
56+
<Toaster />
6457
</Layout>
6558
)
6659
}

‎single-page-app/ui/src/components/Login.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {useToast} from '@chakra-ui/react'
21
import {useEffect, useContext} from "react"
32
import {Navigate} from "react-router-dom"
43
import {AuthContext} from "../context"
54
import {TAuthContext} from "../@types/app"
65
import Home from "./Home"
6+
import {toaster} from "./ui/toast"
77

88
/*
99
Note: Envoy's oAuth implementation requires that a page be requested *after*
@@ -17,7 +17,6 @@ Note: Envoy's oAuth implementation requires that a page be requested *after*
1717
export default function Login() {
1818
const {state, dispatch} = useContext(AuthContext) as TAuthContext
1919
const {isLoggedIn} = state
20-
const toast = useToast()
2120
useEffect(() => {
2221
const {authenticating, failed, isLoggedIn, proxy_url} = state
2322
const fetchUser = async () => {
@@ -32,16 +31,15 @@ export default function Login() {
3231
if (!isLoggedIn && !authenticating && !failed) {
3332
fetchUser().catch(error => {
3433
dispatch({type: "ERROR"})
35-
toast({
36-
title: "Login failed.",
37-
description: `${error.message}`,
38-
status: "error",
39-
duration: 9000,
40-
isClosable: true,
34+
toaster.create({
35+
description: `Login failed: ${error.message}`,
36+
type: "error",
37+
closable: true,
38+
duration: 3000,
4139
})
4240
})
4341
}
44-
}, [state, dispatch, toast])
42+
}, [state, dispatch])
4543
if (isLoggedIn) {
4644
return <Navigate to="/" />
4745
}

‎single-page-app/ui/src/components/Repos.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {
22
Flex,
33
Link,
4+
Table,
45
} from '@chakra-ui/react'
5-
import {Td, Th} from '@chakra-ui/table'
66
import React from "react"
77

88
import {
@@ -13,22 +13,22 @@ import {
1313
export const RepoTableHeaders = () => {
1414
return (
1515
<>
16-
<Th>Repo</Th>
17-
<Th>Updated</Th>
16+
<Table.ColumnHeader>Repo</Table.ColumnHeader>
17+
<Table.ColumnHeader>Updated</Table.ColumnHeader>
1818
</>)
1919
}
2020

2121
export const RepoTr: React.FC<{resource: IRepoInfo | IUserLogin}> = ({resource}) => {
2222
const repo = resource as IRepoInfo
2323
return (
2424
<>
25-
<Td>
25+
<Table.Cell>
2626
<Flex align="center">
2727
<Link href={repo.html_url}>
2828
{repo.full_name}
2929
</Link>
3030
</Flex>
31-
</Td>
32-
<Td>{repo.updated_at}</Td>
31+
</Table.Cell>
32+
<Table.Cell>{repo.updated_at}</Table.Cell>
3333
</>)
3434
}

‎single-page-app/ui/src/components/Resources.tsx‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
1-
import {Button} from '@chakra-ui/react'
2-
import {
3-
Table,
4-
TableCaption,
5-
TableContainer,
6-
Tbody,
7-
Thead,
8-
Tr,
9-
} from '@chakra-ui/table'
1+
import {Button, Table} from '@chakra-ui/react'
102
import React from "react"
3+
import {toaster} from "./ui/toast"
114

125
import {withAuth, withData} from "../hoc"
136
import {
@@ -25,7 +18,7 @@ class BaseResources<T> extends React.Component<ITableResourceProps<T>, IActionSt
2518
}
2619

2720
render() {
28-
const {data, name, headers: Headers, row: Row, title, user} = this.props
21+
const {data, name, headers: Headers, row: Row, user} = this.props
2922
const rows = data.state.data?.[name]
3023
const {user: userData} = user.state || {}
3124
const {login} = userData || {}
@@ -35,30 +28,36 @@ class BaseResources<T> extends React.Component<ITableResourceProps<T>, IActionSt
3528
}
3629

3730
if (!rows || !Array.isArray(rows)) {
38-
return <Button onClick={() => this.updateResources()}>Update {name}</Button>
31+
return (
32+
<Button
33+
variant="subtle"
34+
onClick={() => this.updateResources()}>
35+
Update {name}
36+
</Button>)
3937
}
4038

4139
return (
4240
<>
43-
<Button onClick={() => this.updateResources()}>Update {name}</Button>
44-
<TableContainer>
45-
<Table variant="simple">
46-
<TableCaption>{title}</TableCaption>
47-
<Thead>
48-
<Tr>
49-
<Headers />
50-
</Tr>
51-
</Thead>
52-
<Tbody>
53-
{rows.map((resource, index: number) => (
54-
<Tr key={index}>
55-
<Row resource={resource as T} />
56-
</Tr>
57-
))}
58-
</Tbody>
59-
</Table>
60-
</TableContainer>
61-
</>
41+
<Button
42+
variant="subtle"
43+
onClick={() => this.updateResources()}>
44+
Update {name}
45+
</Button>
46+
<Table.Root striped>
47+
<Table.Header>
48+
<Table.Row>
49+
<Headers />
50+
</Table.Row>
51+
</Table.Header>
52+
<Table.Body>
53+
{rows.map((resource, index: number) => (
54+
<Table.Row key={index}>
55+
<Row resource={resource as T} />
56+
</Table.Row>
57+
))}
58+
</Table.Body>
59+
</Table.Root>
60+
</>
6261
)
6362
}
6463

@@ -79,6 +78,12 @@ class BaseResources<T> extends React.Component<ITableResourceProps<T>, IActionSt
7978
type: 'UPDATE',
8079
payload,
8180
})
81+
toaster.create({
82+
description: `Updated: ${name}`,
83+
type: "info",
84+
closable: true,
85+
duration: 3000,
86+
})
8287
} catch (error) {
8388
const e = error as Record<'message', string>
8489
this.setState({

0 commit comments

Comments
 (0)