Use context for current logged in user

src/App.tsx

@@ -1,13 +1,204 @@
 
 import './App.css'
+import { useAuth, hasAuthParams } from "react-oidc-context";
+import React, {useState} from 'react';
+import {
+    SettingOutlined,
+    UserOutlined,
+} from '@ant-design/icons';
+import {Breadcrumb, type MenuProps} from 'antd';
+import { Layout, Menu, theme } from 'antd';
+import Home from "./Home.tsx";
+import { Route, Routes, useNavigate} from "react-router";
+import Profile from "./Profile.tsx";
+import {type UserContextType} from './UserContext.tsx';
+import {UserContext} from './UserContext.tsx';
+import type {userObject} from "./UserContext.tsx";
 
-function App() {
+const { Header, Content, Sider } = Layout;
 
-  return (
-    <>
-        <h1>HELLOOOO</h1>
-    </>
-  )
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+function getItem(
+    label: React.ReactNode,
+    key: React.Key,
+    icon?: React.ReactNode,
+    children?: MenuItem[],
+): MenuItem {
+    return {
+        key,
+        icon,
+        children,
+        label,
+    } as MenuItem;
 }
 
+
+const App: React.FC = () => {
+    const navigate = useNavigate();
+    const {
+        token: {colorBgContainer, borderRadiusLG},
+    } = theme.useToken();
+    /*******************
+    SIGNING IN WITH OIDC
+    *******************/
+    const auth = useAuth();
+    const hasTriedSignin = React.useRef(false);
+    // automatically sign-in
+    React.useEffect(() => {
+        if (!hasAuthParams() &&
+            !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading &&
+            !hasTriedSignin.current
+        ) {
+            auth.signinRedirect();
+            hasTriedSignin.current = true;
+        }
+    }, [auth]);
+
+    const defaultUser: UserContextType = {
+        currentUser: {
+            first_name: "",
+            last_name: "",
+            email: "",
+            organisations: []
+        },
+        setCurrentUser: () => {}
+    }
+
+    const [currentUser, setCurrentUser] = useState<userObject>(defaultUser.currentUser);
+    /*****************************
+     GETTING CURRENT USER FROM API
+     *****************************/
+   // const [current_user, setUser] = useState<User | null>(null);
+
+    React.useEffect(() => {
+        (async () => {
+            if (!auth.user) { return }
+            try {
+                console.log(auth.user);
+                const token = auth.user.access_token;
+                const response = await fetch("/api/v1/user/self/db", {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    },
+                });
+                setCurrentUser(await response.json());
+            } catch (e) {
+                console.error(e);
+            }
+        })();
+    }, [auth]);
+
+   // const [current_orgs, set_current_orgs] = useState<Organisation | null>(null);
+
+
+    if (!currentUser) {
+        return(
+            <UserContext.Provider value={{ currentUser, setCurrentUser }}>
+                <div>Determining your existing user...</div>;
+            </UserContext.Provider>
+        );
+    }
+
+    if (auth.isLoading) {
+        return(
+            <UserContext.Provider value={{ currentUser, setCurrentUser }}>
+                <div>Signing you in/out...</div>;
+            </UserContext.Provider>
+        );
+    }
+
+    if (!auth.isAuthenticated) {
+        return(
+            <UserContext.Provider value={{ currentUser, setCurrentUser }}>
+                <div>Unable to log in</div>;
+            </UserContext.Provider>
+        );
+    }
+
+
+
+    const onClick: MenuProps['onClick'] = (e) => {
+        switch (e.key) {
+            case 'account':
+                navigate('/profile');
+                break;
+            case 'logout':
+                auth.removeUser().then(r => navigate('/profile'));
+                break;
+            default:
+                console.log('Clicked item:', e.key);
+        }
+    };
+
+
+    //const organisations: [] = current_user.organisations;
+
+    const side_nav_items: MenuItem[] = currentUser.organisations && [
+        getItem('Files', '9', <SettingOutlined />),
+    ];
+
+    const top_nav_items = [
+        getItem(currentUser.first_name + " " +currentUser.last_name , 'account1', <UserOutlined />, [getItem('Account details', 'account'), getItem('Log out', 'logout')]),
+        getItem("Organisation Settings", 'orgsettings', <SettingOutlined />),
+    ];
+    return (
+        <UserContext.Provider value={{ currentUser, setCurrentUser }}>
+        <Layout>
+            <Header style={{ display: 'flex', alignItems: 'right' }}>
+                <div className="demo-logo" >
+                    <h1>SR22</h1>
+                 </div>
+                <Menu
+                    theme="dark"
+                    mode="horizontal"
+                    defaultSelectedKeys={['2']}
+                    items={top_nav_items}
+                    onClick={onClick}
+                    style={{ flex: 1, minWidth: 0, justifyContent:"flex-end" }}
+                />
+            </Header>
+            <Layout>
+                <Sider width={200} style={{ background: colorBgContainer }}>
+                    <Menu
+                        mode="inline"
+                        defaultSelectedKeys={['1']}
+                        defaultOpenKeys={['sub1']}
+                        style={{ height: '100%', borderInlineEnd: 0 }}
+                        items={side_nav_items}
+                        onClick={onClick}
+                    />
+                </Sider>
+                <Layout style={{ padding: '0 24px 24px' }}>
+                    <Breadcrumb
+                        items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
+                        style={{ margin: '16px 0' }}
+                    />
+                    <Content
+                        style={{
+                            padding: 24,
+                            margin: 0,
+                            minHeight: 280,
+                            background: colorBgContainer,
+                            borderRadius: borderRadiusLG,
+                        }}
+                    >
+
+                        <Routes>
+                            <Route path="/" element={<Home/>}/>
+                            {currentUser && <Route path="/account" element={<Profile/>}/> }
+
+                        </Routes>
+                    </Content>
+                </Layout>
+            </Layout>
+        </Layout>
+        </UserContext.Provider>
+
+    );
+
+}
+
+
 export default App