Use context for current logged in user
This commit is contained in:
parent
5e5c7e8964
commit
2a399fc397
6 changed files with 293 additions and 7 deletions
203
src/App.tsx
203
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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
24
src/home.tsx
24
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;
|
||||
27
src/main.tsx
27
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>,
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue