Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit fd0407f

Browse files
presleyppresleyp
committed
Reorganize App
1 parent 42cc2fb commit fd0407f

File tree

3 files changed

+106
-104
lines changed

3 files changed

+106
-104
lines changed

‎site/src/AppRouter.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from "react"
2+
import { Routes, Route } from "react-router-dom"
3+
import { RequireAuth, AuthAndNav } from "./components"
4+
import { IndexPage } from "./pages"
5+
import { NotFoundPage } from "./pages/404"
6+
import { CliAuthenticationPage } from "./pages/cli-auth"
7+
import { HealthzPage } from "./pages/healthz"
8+
import { SignInPage } from "./pages/login"
9+
import { ProjectsPage } from "./pages/projects"
10+
import { ProjectPage } from "./pages/projects/[organization]/[project]"
11+
import { CreateWorkspacePage } from "./pages/projects/[organization]/[project]/create"
12+
import { WorkspacePage } from "./pages/workspaces/[workspace]"
13+
14+
export const AppRouter: React.FC = () => (
15+
<Routes>
16+
<Route path="/">
17+
<Route
18+
index
19+
element={
20+
<RequireAuth>
21+
<IndexPage />
22+
</RequireAuth>
23+
}
24+
/>
25+
26+
<Route path="login" element={<SignInPage />} />
27+
<Route path="healthz" element={<HealthzPage />} />
28+
<Route path="cli-auth" element={<CliAuthenticationPage />} />
29+
30+
<Route path="projects">
31+
<Route
32+
index
33+
element={
34+
<AuthAndNav>
35+
<ProjectsPage />
36+
</AuthAndNav>
37+
}
38+
/>
39+
<Route path=":organization/:project">
40+
<Route
41+
index
42+
element={
43+
<AuthAndNav>
44+
<ProjectPage />
45+
</AuthAndNav>
46+
}
47+
/>
48+
<Route
49+
path="create"
50+
element={
51+
<RequireAuth>
52+
<CreateWorkspacePage />
53+
</RequireAuth>
54+
}
55+
/>
56+
</Route>
57+
</Route>
58+
59+
<Route path="workspaces">
60+
<Route
61+
path=":workspace"
62+
element={
63+
<AuthAndNav>
64+
<WorkspacePage />
65+
</AuthAndNav>
66+
}
67+
/>
68+
</Route>
69+
70+
{/* Using path="*"" means "match anything", so this route
71+
acts like a catch-all for URLs that we don't have explicit
72+
routes for. */}
73+
<Route path="*" element={<NotFoundPage />} />
74+
</Route>
75+
</Routes>
76+
)

‎site/src/Main.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react"
22
import ReactDOM from "react-dom"
3-
import { BrowserRouter as Router } from "react-router-dom"
43

54
import { App } from "./app"
65

@@ -9,12 +8,7 @@ import { App } from "./app"
98
// like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32
109
const main = () => {
1110
const element = document.getElementById("root")
12-
ReactDOM.render(
13-
<Router>
14-
<App />
15-
</Router>,
16-
element,
17-
)
11+
ReactDOM.render(<App />, element)
1812
}
1913

2014
main()

‎site/src/app.tsx

Lines changed: 29 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -3,107 +3,39 @@ import CssBaseline from "@material-ui/core/CssBaseline"
33
import ThemeProvider from "@material-ui/styles/ThemeProvider"
44
import { SWRConfig } from "swr"
55
import { light } from "./theme"
6-
import { Route, Routes } from "react-router-dom"
6+
import { BrowserRouter as Router } from "react-router-dom"
77

8-
import { CliAuthenticationPage } from "./pages/cli-auth"
9-
import { NotFoundPage } from "./pages/404"
10-
import { IndexPage } from "./pages/index"
11-
import { SignInPage } from "./pages/login"
12-
import { ProjectsPage } from "./pages/projects"
13-
import { ProjectPage } from "./pages/projects/[organization]/[project]"
14-
import { CreateWorkspacePage } from "./pages/projects/[organization]/[project]/create"
15-
import { WorkspacePage } from "./pages/workspaces/[workspace]"
16-
import { HealthzPage } from "./pages/healthz"
17-
import { AuthAndNav, RequireAuth } from "./components/Page"
188
import { XServiceProvider } from "./xServices/StateContext"
9+
import { AppRouter } from "./AppRouter"
1910

2011
export const App: React.FC = () => {
2112
return (
22-
<SWRConfig
23-
value={{
24-
// This code came from the SWR documentation:
25-
// https://swr.vercel.app/docs/error-handling#status-code-and-error-object
26-
fetcher: async (url: string) => {
27-
const res = await fetch(url)
28-
29-
// By default, `fetch` won't treat 4xx or 5xx response as errors.
30-
// However, we want SWR to treat these as errors - so if `res.ok` is false,
31-
// we want to throw an error to bubble that up to SWR.
32-
if (!res.ok) {
33-
const err = new Error((await res.json()).error?.message || res.statusText)
34-
throw err
35-
}
36-
return res.json()
37-
},
38-
}}
39-
>
40-
<XServiceProvider>
41-
<ThemeProvider theme={light}>
42-
<CssBaseline />
43-
44-
<Routes>
45-
<Route path="/">
46-
<Route
47-
index
48-
element={
49-
<RequireAuth>
50-
<IndexPage />
51-
</RequireAuth>
52-
}
53-
/>
54-
55-
<Route path="login" element={<SignInPage />} />
56-
<Route path="healthz" element={<HealthzPage />} />
57-
<Route path="cli-auth" element={<CliAuthenticationPage />} />
58-
59-
<Route path="projects">
60-
<Route
61-
index
62-
element={
63-
<AuthAndNav>
64-
<ProjectsPage />
65-
</AuthAndNav>
66-
}
67-
/>
68-
<Route path=":organization/:project">
69-
<Route
70-
index
71-
element={
72-
<AuthAndNav>
73-
<ProjectPage />
74-
</AuthAndNav>
75-
}
76-
/>
77-
<Route
78-
path="create"
79-
element={
80-
<RequireAuth>
81-
<CreateWorkspacePage />
82-
</RequireAuth>
83-
}
84-
/>
85-
</Route>
86-
</Route>
87-
88-
<Route path="workspaces">
89-
<Route
90-
path=":workspace"
91-
element={
92-
<AuthAndNav>
93-
<WorkspacePage />
94-
</AuthAndNav>
95-
}
96-
/>
97-
</Route>
98-
99-
{/* Using path="*"" means "match anything", so this route
100-
acts like a catch-all for URLs that we don't have explicit
101-
routes for. */}
102-
<Route path="*" element={<NotFoundPage />} />
103-
</Route>
104-
</Routes>
105-
</ThemeProvider>
106-
</XServiceProvider>
107-
</SWRConfig>
13+
<Router>
14+
<SWRConfig
15+
value={{
16+
// This code came from the SWR documentation:
17+
// https://swr.vercel.app/docs/error-handling#status-code-and-error-object
18+
fetcher: async (url: string) => {
19+
const res = await fetch(url)
20+
21+
// By default, `fetch` won't treat 4xx or 5xx response as errors.
22+
// However, we want SWR to treat these as errors - so if `res.ok` is false,
23+
// we want to throw an error to bubble that up to SWR.
24+
if (!res.ok) {
25+
const err = new Error((await res.json()).error?.message || res.statusText)
26+
throw err
27+
}
28+
return res.json()
29+
},
30+
}}
31+
>
32+
<XServiceProvider>
33+
<ThemeProvider theme={light}>
34+
<CssBaseline />
35+
<AppRouter />
36+
</ThemeProvider>
37+
</XServiceProvider>
38+
</SWRConfig>
39+
</Router>
10840
)
10941
}

0 commit comments

Comments
 (0)