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 (
+type MenuItem = Required<MenuProps>['items'][number];
-    <>
+
-        <h1>HELLOOOO</h1>
+
-    </>
+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

src/UserContext.tsx

@@ -0,0 +1,24 @@
+import React, { createContext, useContext } from 'react';
+
+
+export interface userObject {
+    first_name: string;
+    last_name: string;
+    email: string;
+    organisations: string[];
+}
+
+export interface UserContextType {
+    currentUser: userObject;
+    setCurrentUser: React.Dispatch<React.SetStateAction<userObject>>;
+}
+
+export const UserContext = createContext<UserContextType | undefined>(undefined);
+
+export const useUserContext = () => {
+    const context: UserContextType | undefined = useContext(UserContext);
+    if (context === undefined) {
+        throw new Error('jhfhgtfhgfghfhgf not found');
+    }
+    return context;
+};

src/home.tsx

@@ -0,0 +1,24 @@
+import {Breadcrumb, theme} from "antd";
+import React from "react";
+
+const Home: React.FC = () => {
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
+
+    return (<>
+        <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
+    <div
+        style={{
+            padding: 24,
+            minHeight: 360,
+            background: colorBgContainer,
+            borderRadius: borderRadiusLG,
+        }}
+    >
+        Bill is a cat.
+    </div>
+  </>)
+}
+
+export default Home;

src/main.tsx

@@ -2,9 +2,34 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import {AuthProvider, type AuthProviderProps} from "react-oidc-context";
+import {type User, WebStorageStateStore} from "oidc-client-ts";
+import { BrowserRouter } from "react-router";
+
+const onSigninCallback = (_user: User | void): void => {
+    window.history.replaceState(
+        {},
+         document.title,
+         window.location.pathname
+     )
+}
+
+const oidcConfig: AuthProviderProps = {
+    authority: "https://sso.sr2.uk/realms/sr2",
+    client_id: "chris-dev",
+    redirect_uri: "http://localhost:5173",
+    onSigninCallback: onSigninCallback,
+    userStore: new WebStorageStateStore({ store: window.localStorage }),
+};
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+   <AuthProvider {...oidcConfig}>
+       <BrowserRouter>
+
+       <App />
+           </BrowserRouter>
+
+   </AuthProvider>
   </StrictMode>,
 )

src/profile.tsx

@@ -0,0 +1,22 @@
+// src/Posts.jsx
+
+import {useUserContext} from './UserContext';
+
+const Profile = () => {
+    const { currentUser } = useUserContext();
+
+    if (!currentUser) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <>
+        <p>User: {currentUser.first_name} {currentUser.last_name}</p>
+        <p>Email: {currentUser.email}</p>
+        <p>Orgs: {currentUser.organisations}</p>
+        </>
+
+);
+};
+
+export default Profile;