cloud-portal/src/App.tsx

import './App.css'
import { useAuth, hasAuthParams } from "react-oidc-context";
import React, {useState} from 'react';
import {
    SettingOutlined,
    UserOutlined,
    DeploymentUnitOutlined,
} from '@ant-design/icons';
import {Breadcrumb, type MenuProps} from 'antd';
import { Layout, Menu, theme } from 'antd';
import Home from "./Home.tsx";
import {Route, Routes, useLocation, useNavigate} from "react-router";
import Profile from "./Profile.tsx";
import {type UserContextType} from './hooks/UserContext.ts';
import {UserContext} from './hooks/UserContext.ts';
import type {userObject} from "./hooks/UserContext.ts";

import Organisations from "./Organisations.tsx";
import {RefreshContext} from "./hooks/RefreshContext.ts";
import Bridges from "./Bridges.tsx";
import {OrgContext, type OrgContextType, type OrgObject} from "./hooks/OrgContext.ts";
import CreateOrgFlow from "./CreateOrgFlow.tsx";

const { Header, Content, Sider } = Layout;

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 location = useLocation();
    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: [],
            id: -1
        },
        setCurrentUser: () => {}
    }

    const defaultOrg: OrgContextType = {
        currentOrg: {
            name: "",
            status: "partial",
            root_user_email: "",
            billing_contact: {email: "", id: -1},
            owner_contact: {email: "", id: -1},
            security_contact: {email: "", id: -1},
            organisation_id: -1,
            intake_questionnaire: {
                question_one: "",
                question_two: "",
                question_three: "",
            },
        },
        setCurrentOrg: () => {}
    }

    const [currentUser, setCurrentUser] = useState<userObject>(defaultUser.currentUser);
    const [refreshKey, setRefreshKey] =  useState<number>(1);
    const [currentOrg, setCurrentOrg] = useState<OrgObject>(defaultOrg.currentOrg);


    /*****************************
     GETTING CURRENT USER FROM API
     *****************************/
   // const [current_user, setUser] = useState<User | null>(null);

    React.useEffect(() => {
        (async () => {
            if (!auth.user) { return }
            try {
                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, refreshKey]);


    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 'profile':
                navigate('/profile');
                break;
            case 'orgs':
                navigate('/create-org-flow');
                break;
            case 'logout':
                auth.removeUser().then(() => navigate('/profile'));
                break;
            case 'bridges':
                navigate('/bridges');
                break;
            default:
                console.log('Clicked item:', e.key);
        }
    };


    let side_nav_items: MenuItem[] = []

    const top_nav_items = [
        getItem(currentUser.first_name + " " +currentUser.last_name , 'account', <UserOutlined />, [getItem('Account details', 'profile'), getItem('Log out', 'logout')]),
    ];

    if (currentUser.organisations.length > 0) {

        side_nav_items = [ getItem('Onboarding', 'orgs', <SettingOutlined />),
                                             getItem('Bridges', 'bridges', <DeploymentUnitOutlined />),   ];

        const currentOrg = currentUser.organisations[0]['name']
        top_nav_items.push(getItem(currentOrg +" Settings", 'orgsettings', <SettingOutlined />));

    }

    return (
        <OrgContext.Provider value={{ currentOrg, setCurrentOrg }}>
        <UserContext.Provider value={{ currentUser, setCurrentUser }}>
            <RefreshContext.Provider value={{ refreshKey, setRefreshKey }}>
            <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: location.pathname.substring(1) }]}
                        style={{ margin: '16px 0' }}
                    />
                    <Content
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >

                        <Routes>
                            <Route path="/" element={<Home/>}/>
                            {currentUser && <Route path="/profile" element={<Profile/>}/> }
                            {currentUser && <Route path="/organisations" element={<Organisations/>}/> }
                            {currentUser && <Route path="/create" element={<CreateOrgFlow/>}/> }

                            {currentUser && <Route path="/bridges" element={<Bridges/>}/> }

                        </Routes>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
        </RefreshContext.Provider>
        </UserContext.Provider>
        </OrgContext.Provider>

    );

}


export default App