Skip to content

Commit a4e993d

Browse files
chris-laplantechris-laplante
committed
test browser router
1 parent 3fe7a9f commit a4e993d

File tree

13 files changed

+232
-13
lines changed

13 files changed

+232
-13
lines changed

‎BBDatastorePlaygroundLogo.svg renamed to ‎assets/images/BBDatastorePlaygroundLogo.svg

File renamed without changes.

‎package-lock.json

Lines changed: 70 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@
8989
"react-dom": "^18.2.0",
9090
"react-error-boundary": "^4.0.13",
9191
"react-redux": "^9.1.2",
92+
"react-router-dom": "^6.23.1",
93+
"react-router-typesafe-routes": "^1.2.2",
9294
"react-use-comlink": "^2.0.1",
9395
"sass-rem": "^4.0.0",
9496
"swr": "^2.2.5",

‎src/main/api/authSlice.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { createSlice } from '@reduxjs/toolkit'
2+
import type { PayloadAction } from '@reduxjs/toolkit'
3+
import {User} from "./services/auth";
4+
import {RootState} from "./store";
5+
6+
type AuthState = {
7+
user: User | null
8+
token: string | null
9+
}
10+
11+
const slice = createSlice({
12+
name: 'auth',
13+
initialState: { user: null, token: null } as AuthState,
14+
reducers: {
15+
setCredentials: (
16+
state,
17+
{
18+
payload: { user, token },
19+
}: PayloadAction<{ user: User; token: string }>,
20+
) => {
21+
state.user = user
22+
state.token = token
23+
},
24+
},
25+
})
26+
27+
export const { setCredentials } = slice.actions
28+
29+
export default slice.reducer
30+
31+
export const selectCurrentUser = (state: RootState) => state.auth.user

‎src/main/api/services/auth.ts

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
2+
import { RootState } from '../store'
3+
4+
export interface User {
5+
first_name: string
6+
last_name: string
7+
}
8+
9+
export interface UserResponse {
10+
user: User
11+
token: string
12+
}
13+
14+
export interface LoginRequest {
15+
username: string
16+
password: string
17+
}
18+
19+
export const api = createApi({
20+
baseQuery: fetchBaseQuery({
21+
baseUrl: '/',
22+
prepareHeaders: (headers, { getState }) => {
23+
// By default, if we have a token in the store, let's use that for authenticated requests
24+
const token = (getState() as RootState).auth.token
25+
if (token) {
26+
headers.set('authorization', `Bearer ${token}`)
27+
}
28+
return headers
29+
},
30+
}),
31+
endpoints: (builder) => ({
32+
login: builder.mutation<UserResponse, void>({
33+
query: (credentials) => ({
34+
url: 'login',
35+
method: 'POST',
36+
body: credentials,
37+
}),
38+
}),
39+
protected: builder.mutation<{ message: string }, void>({
40+
query: () => 'protected',
41+
}),
42+
}),
43+
})
44+
45+
export const { useLoginMutation, useProtectedMutation } = api

‎src/main/api/store.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22

33
import {configureStore} from '@reduxjs/toolkit';
44
import workerReducer from './webWorkerApiSlice';
5+
import authSlice from "./authSlice";
56

67
const store = configureStore({
78
reducer: {
89
worker: workerReducer,
10+
auth: authSlice,
911
},
1012
});
1113

‎src/main/api/webWorkerApiSlice.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@ const workerSlice = createSlice({
2020
},
2121
});
2222

23-
export const {setWorker} = workerSlice.actions;
23+
export const {setWorker: setWorkerReducer} = workerSlice.actions;
2424
export default workerSlice.reducer;

‎src/main/components/App.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {MyWorker} from "../../pyodide-worker/worker";
88

99
import * as comlink from "comlink";
1010
import {Remote} from "comlink";
11+
import {setWorkerReducer} from "../api/webWorkerApiSlice";
12+
import {useDispatch} from "react-redux";
1113

1214

1315
const w = new Worker(new URL("../../pyodide-worker/worker.ts", import.meta.url));
@@ -28,17 +30,19 @@ export const App: React.FC = () => {
2830
}
2931
}, [])
3032

33+
const dispatch = useDispatch();
34+
3135
useEffect(() => {
3236
(async () => {
3337
if (worker) {
3438
await worker.test();
39+
//dispatch(setWorkerReducer(worker));
3540
}
3641
})();
37-
}, [worker])
42+
}, [dispatch, worker])
3843

3944
return (
4045
<div>
41-
<MainNavbar/>
4246
<ButtonToolbar>
4347
<ButtonGroup>
4448
<Button>1</Button>

‎src/main/components/MainNavbar.tsx

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,59 @@
11
import React from "react";
22
import {Container, Navbar} from "react-bootstrap";
3+
import {useLoginMutation} from "../api/services/auth";
4+
import {setCredentials} from "../api/authSlice";
5+
import {useDispatch} from "react-redux";
6+
import {Link} from "react-router-dom";
37

48
export const MainNavbar: React.FC = () => {
9+
const [login, { isLoading }] = useLoginMutation()
10+
const dispatch = useDispatch()
11+
512
return (
613
<Navbar className="bg-body-tertiary">
714
<Container fluid>
815
<Navbar.Brand href="#home" className="align-items-center d-flex">
9-
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
10-
className="bi bi-play-fill" viewBox="0 0 16 16">
11-
<path
12-
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/>
16+
<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" className="pe-3">
17+
<image href="assets/images/BBDatastorePlaygroundLogo.svg" height="64" width="64"/>
1318
</svg>
1419
{' '}
1520
BB Datastore Playground
1621
</Navbar.Brand>
22+
<div className="text-end">
23+
<Link
24+
className="btn btn-outline-dark"
25+
role="button"
26+
to="/about"
27+
>
28+
about
29+
</Link>
30+
<button
31+
type="button"
32+
className="btn btn-dark me-2"
33+
onClick={async () => {
34+
try {
35+
const user = await login().unwrap()
36+
dispatch(setCredentials(user))
37+
} catch (err) {
38+
// toast({
39+
// status: 'error',
40+
// title: 'Error',
41+
// description: 'Oh no, there was an error!',
42+
// isClosable: true,
43+
// })
44+
}
45+
}}
46+
>
47+
<div className="align-items-center d-flex gap-2">
48+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
49+
className="bi bi-github" viewBox="0 0 16 16">
50+
<path
51+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
52+
</svg>
53+
Login
54+
</div>
55+
</button>
56+
</div>
1757
</Container>
1858
</Navbar>
1959
);

‎src/main/components/statusPanel/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {useSelector} from "react-redux";
33
import {RootState} from "../../api/store";
44
import {useImmer} from "use-immer";
55

6+
import * as comlink from "comlink";
7+
68
const wat = (str: string) => {
79
console.error(str);
810
}
@@ -15,10 +17,8 @@ export const StatusPanel: React.FC = () => {
1517
(async () => {
1618
if (worker) {
1719
console.error("INSTALLLLLLING");
18-
// await worker.setProgressCallback((str) => {
19-
// console.log(`>>>>> ${str}`)
20-
// });
21-
// console.error("installed");
20+
await worker.setProgressCallback(comlink.proxy(wat));
21+
console.error("installed");
2222
await worker.runPython("print(1 + 2)", new URL("../../../../assets/bitbake-2.8.0.zip", import.meta.url).toString());
2323
console.error("ran python");
2424
}

0 commit comments

Comments
 (0)