Skip to content
Snippets Groups Projects
Commit 89928bc6 authored by Cross, Liam (UG - Comp Sci & Elec Eng)'s avatar Cross, Liam (UG - Comp Sci & Elec Eng)
Browse files

Perform logout and fix double auth call

parent c681903e
No related branches found
No related tags found
No related merge requests found
import { useEffect, useState } from 'react'; import { useEffect } from 'react';
import { useLoaderData } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth'; import { useAuth } from '../../hooks/useAuth';
import Spinner from '../Spinner/Spinner';
import './Logout.scss'; import './Logout.scss';
function Logout() { function Logout() {
const [loading, setLoading] = useState(true); const { removeAuth } = useAuth();
const { isAuth, removeAuth } = useAuth(); const error = useLoaderData();
useEffect(() => { useEffect(() => {
// TODO: do logout api call removeAuth();
if (isAuth) {
removeAuth();
setLoading(false);
} else {
setLoading(false);
}
}, []); }, []);
return ( return (
<> <>
{ <div className='logout'>
loading ? <div className='card logout-card'>
<div className='full-main'> {
<Spinner></Spinner> error ?
</div> : <div className='logout-content'>
<div className='logout'> <span>Logout failed</span>
<div className='card logout-card'> <span>Use the Header to navigate!</span>
</div> :
<div className='logout-content'> <div className='logout-content'>
<span>Sucessfully logged out!</span> <span>Sucessfully logged out!</span>
<span>Use the Header to navigate!</span> <span>Use the Header to navigate!</span>
</div> </div>
</div> }
</div> </div>
} </div>
</> </>
); );
} }
......
...@@ -9,6 +9,8 @@ import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute.tsx'; ...@@ -9,6 +9,8 @@ import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute.tsx';
import CustomerDashboard from './components/CustomerDashboard/CustomerDashboard.tsx'; import CustomerDashboard from './components/CustomerDashboard/CustomerDashboard.tsx';
import BookingQuery from './components/BookingQuery/BookingQuery.tsx'; import BookingQuery from './components/BookingQuery/BookingQuery.tsx';
import BookingList from './components/BookingList/BookingList.tsx'; import BookingList from './components/BookingList/BookingList.tsx';
import { AuthoriseUser } from './services/Authorise/Authorise.ts';
import { LogoutUser } from './services/Logout/Logout.ts';
import { GetCustomerDashboardData } from './services/CustomerDashboard/CustomerDashboard.ts'; import { GetCustomerDashboardData } from './services/CustomerDashboard/CustomerDashboard.ts';
import { GetBookingList } from './services/BookingList/BookingList.ts'; import { GetBookingList } from './services/BookingList/BookingList.ts';
import './index.scss'; import './index.scss';
...@@ -16,6 +18,7 @@ import './index.scss'; ...@@ -16,6 +18,7 @@ import './index.scss';
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
path: '/', path: '/',
loader: AuthoriseUser,
element: <App></App>, element: <App></App>,
children: [ children: [
{ {
...@@ -28,6 +31,7 @@ const router = createBrowserRouter([ ...@@ -28,6 +31,7 @@ const router = createBrowserRouter([
}, },
{ {
path: 'logout', path: 'logout',
loader: LogoutUser,
element: <Logout></Logout> element: <Logout></Logout>
}, },
{ {
......
import { ReactNode, useEffect, useState } from 'react'; import { ReactNode, useEffect, useState } from 'react';
import { useLoaderData } from 'react-router-dom';
import { AuthContext } from '../contexts/AuthContext'; import { AuthContext } from '../contexts/AuthContext';
import Spinner from '../components/Spinner/Spinner';
import { authoriseUser } from '../services/Authorise/Authorise';
export interface IUser { export interface IUser {
id: number; id: number;
...@@ -11,23 +10,15 @@ export interface IUser { ...@@ -11,23 +10,15 @@ export interface IUser {
} }
function AuthProvider({ children }: { children: ReactNode }) { function AuthProvider({ children }: { children: ReactNode }) {
const [loading, setLoading] = useState(true);
const [auth, setAuth] = useState(false); const [auth, setAuth] = useState(false);
const [user, setUser] = useState<IUser>(); const [user, setUser] = useState<IUser>();
const data = useLoaderData() as IUser | null;
useEffect(() => { useEffect(() => {
async function authUser() { if (data) {
try { giveAuth();
const result = await authoriseUser(); setUser(data);
giveAuth();
updateUser(result.data);
setLoading(false);
} catch (error) {
setLoading(false);
}
} }
authUser();
}, []); }, []);
const giveAuth = () => { const giveAuth = () => {
...@@ -42,17 +33,9 @@ function AuthProvider({ children }: { children: ReactNode }) { ...@@ -42,17 +33,9 @@ function AuthProvider({ children }: { children: ReactNode }) {
setUser(newUser); setUser(newUser);
} }
if (loading) {
return (
<div className='full'>
<Spinner></Spinner>
</div>
);
}
return ( return (
<AuthContext.Provider value={{ isAuth: auth, giveAuth, removeAuth, user, updateUser }}> <AuthContext.Provider value={{ isAuth: auth, giveAuth, removeAuth, user, updateUser }}>
{!loading && children} {children}
</AuthContext.Provider> </AuthContext.Provider>
); );
} }
......
...@@ -2,6 +2,11 @@ import { AxiosResponse } from 'axios'; ...@@ -2,6 +2,11 @@ import { AxiosResponse } from 'axios';
import Api from '../../helpers/Api'; import Api from '../../helpers/Api';
import { IUser } from '../../providers/AuthProvider'; import { IUser } from '../../providers/AuthProvider';
export async function authoriseUser(): Promise<AxiosResponse<IUser>> { export async function AuthoriseUser(): Promise<AxiosResponse<IUser> | null> {
return Api.post('User/authorize', {}, { withCredentials: true }); try {
const result = await Api.post('User/authorize', {}, { withCredentials: true });
return result.data;
} catch (error) {
return null;
}
} }
import { AxiosError } from 'axios';
import Api from '../../helpers/Api';
export async function LogoutUser(): Promise<AxiosError | null> {
try {
await Api.post('User/logout', {}, { withCredentials: true });
return null;
} catch (error) {
return error as AxiosError;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment