test browser router

package.json

@@ -89,6 +89,8 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
     "react-redux": "^9.1.2",
+    "react-router-dom": "^6.23.1",
+    "react-router-typesafe-routes": "^1.2.2",
     "react-use-comlink": "^2.0.1",
     "sass-rem": "^4.0.0",
     "swr": "^2.2.5",

src/main/api/authSlice.ts

@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import {User} from "./services/auth";
+import {RootState} from "./store";
+
+type AuthState = {
+    user: User | null
+    token: string | null
+}
+
+const slice = createSlice({
+    name: 'auth',
+    initialState: { user: null, token: null } as AuthState,
+    reducers: {
+        setCredentials: (
+            state,
+            {
+                payload: { user, token },
+            }: PayloadAction<{ user: User; token: string }>,
+        ) => {
+            state.user = user
+            state.token = token
+        },
+    },
+})
+
+export const { setCredentials } = slice.actions
+
+export default slice.reducer
+
+export const selectCurrentUser = (state: RootState) => state.auth.user

src/main/api/services/auth.ts

@@ -0,0 +1,45 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { RootState } from '../store'
+
+export interface User {
+    first_name: string
+    last_name: string
+}
+
+export interface UserResponse {
+    user: User
+    token: string
+}
+
+export interface LoginRequest {
+    username: string
+    password: string
+}
+
+export const api = createApi({
+    baseQuery: fetchBaseQuery({
+        baseUrl: '/',
+        prepareHeaders: (headers, { getState }) => {
+            // By default, if we have a token in the store, let's use that for authenticated requests
+            const token = (getState() as RootState).auth.token
+            if (token) {
+                headers.set('authorization', `Bearer ${token}`)
+            }
+            return headers
+        },
+    }),
+    endpoints: (builder) => ({
+        login: builder.mutation<UserResponse, void>({
+            query: (credentials) => ({
+                url: 'login',
+                method: 'POST',
+                body: credentials,
+            }),
+        }),
+        protected: builder.mutation<{ message: string }, void>({
+            query: () => 'protected',
+        }),
+    }),
+})
+
+export const { useLoginMutation, useProtectedMutation } = api

src/main/api/store.ts

@@ -2,10 +2,12 @@
 
 import {configureStore} from '@reduxjs/toolkit';
 import workerReducer from './webWorkerApiSlice';
+import authSlice from "./authSlice";
 
 const store = configureStore({
     reducer: {
         worker: workerReducer,
+        auth: authSlice,
     },
 });
 

src/main/api/webWorkerApiSlice.ts

@@ -20,5 +20,5 @@ const workerSlice = createSlice({
     },
 });
 
-export const {setWorker} = workerSlice.actions;
+export const {setWorker: setWorkerReducer} = workerSlice.actions;
 export default workerSlice.reducer;

src/main/components/App.tsx

@@ -8,6 +8,8 @@ import {MyWorker} from "../../pyodide-worker/worker";
 
 import * as comlink from "comlink";
 import {Remote} from "comlink";
+import {setWorkerReducer} from "../api/webWorkerApiSlice";
+import {useDispatch} from "react-redux";
 
 
 const w = new Worker(new URL("../../pyodide-worker/worker.ts", import.meta.url));
@@ -28,17 +30,19 @@ export const App: React.FC = () => {
         }
     }, [])
 
+    const dispatch = useDispatch();
+
     useEffect(() => {
         (async () => {
             if (worker) {
                 await worker.test();
+                //dispatch(setWorkerReducer(worker));
             }
         })();
-    }, [worker])
+    }, [dispatch, worker])
 
     return (
         <div>
-            <MainNavbar/>
             <ButtonToolbar>
                 <ButtonGroup>
                     <Button>1</Button>

src/main/components/MainNavbar.tsx

@@ -1,19 +1,59 @@
 import React from "react";
 import {Container, Navbar} from "react-bootstrap";
+import {useLoginMutation} from "../api/services/auth";
+import {setCredentials} from "../api/authSlice";
+import {useDispatch} from "react-redux";
+import {Link} from "react-router-dom";
 
 export const MainNavbar: React.FC = () => {
+    const [login, { isLoading }] = useLoginMutation()
+    const dispatch = useDispatch()
+
     return (
         <Navbar className="bg-body-tertiary">
             <Container fluid>
                 <Navbar.Brand href="#home" className="align-items-center d-flex">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
-                         className="bi bi-play-fill" viewBox="0 0 16 16">
-                        <path
-                            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"/>
+                    <svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" className="pe-3">
+                        <image href="assets/images/BBDatastorePlaygroundLogo.svg" height="64" width="64"/>
                     </svg>
                     {' '}
                     BB Datastore Playground
                 </Navbar.Brand>
+                <div className="text-end">
+                    <Link
+                        className="btn btn-outline-dark"
+                        role="button"
+                        to="/about"
+                    >
+                        about
+                    </Link>
+                    <button
+                        type="button"
+                        className="btn btn-dark me-2"
+                        onClick={async () => {
+                            try {
+                                const user = await login().unwrap()
+                                dispatch(setCredentials(user))
+                            } catch (err) {
+                                // toast({
+                                //     status: 'error',
+                                //     title: 'Error',
+                                //     description: 'Oh no, there was an error!',
+                                //     isClosable: true,
+                                // })
+                            }
+                        }}
+                    >
+                        <div className="align-items-center d-flex gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                             className="bi bi-github" viewBox="0 0 16 16">
+                            <path
+                                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"/>
+                        </svg>
+                        Login
+                        </div>
+                    </button>
+                </div>
             </Container>
         </Navbar>
     );

src/main/components/statusPanel/index.tsx

@@ -3,6 +3,8 @@ import {useSelector} from "react-redux";
 import {RootState} from "../../api/store";
 import {useImmer} from "use-immer";
 
+import * as comlink from "comlink";
+
 const wat = (str: string) => {
     console.error(str);
 }
@@ -15,10 +17,8 @@ export const StatusPanel: React.FC = () => {
         (async () => {
             if (worker) {
                 console.error("INSTALLLLLLING");
-                // await worker.setProgressCallback((str) => {
-                //     console.log(`>>>>> ${str}`)
-                // });
-                // console.error("installed");
+                await worker.setProgressCallback(comlink.proxy(wat));
+                console.error("installed");
                 await worker.runPython("print(1 + 2)", new URL("../../../../assets/bitbake-2.8.0.zip", import.meta.url).toString());
                 console.error("ran python");
             }

src/main/index.tsx

@@ -5,14 +5,36 @@ import {App} from "./components/App";
 import React, {StrictMode} from "react";
 import store from "./api/store";
 import {Provider} from "react-redux";
+import {BrowserRouter as Router, Routes, Route, createBrowserRouter, Outlet, RouterProvider} from 'react-router-dom';
+import {MainNavbar} from "./components/MainNavbar";
+
+const Root: React.FC = () => {
+    return(<div>
+        <MainNavbar/>
+        <Outlet/>
+    </div>);
+}
+
+const router = createBrowserRouter([
+    {
+        element: <Root />,
+        children: [
+            {
+                path: "/",
+                element: <App />,
+            },
+        ],
+    },
+]);
+
 
 
 const container = document.getElementById("root");
 const root = createRoot(container!);
 root.render(
     <StrictMode>
         <Provider store={store}>
-            <App/>
+            <RouterProvider router={router} />
         </Provider>
     </StrictMode>
 );

src/pyodide-worker/worker.ts

@@ -43,6 +43,7 @@ export class MyWorker {
 
     async test() {
         console.log("OK");
+        await printAll("callback!");
     }
 
     async runPython(python: string, u: string) {

webpack.config.ts

@@ -139,6 +139,8 @@ module.exports = (env: any, argv: any) => {
         externals: {
             pyodide: 'pyodide'
         },
-
+        devServer: {
+            historyApiFallback: true,
+        }
     }
 }