hospital portal
This commit is contained in:
pajri
77
frontend/hospital-portal/src/contexts/CollapseDrawerContext.tsx
Executable file
77
frontend/hospital-portal/src/contexts/CollapseDrawerContext.tsx
Executable file
@@ -0,0 +1,77 @@
|
||||
import { ReactNode, createContext, useState, useEffect } from 'react';
|
||||
// hooks
|
||||
import useResponsive from '../hooks/useResponsive';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export type CollapseDrawerContextProps = {
|
||||
isCollapse?: boolean;
|
||||
collapseClick: boolean;
|
||||
collapseHover: boolean;
|
||||
onToggleCollapse: VoidFunction;
|
||||
onHoverEnter: VoidFunction;
|
||||
onHoverLeave: VoidFunction;
|
||||
};
|
||||
|
||||
const initialState: CollapseDrawerContextProps = {
|
||||
collapseClick: false,
|
||||
collapseHover: false,
|
||||
onToggleCollapse: () => {},
|
||||
onHoverEnter: () => {},
|
||||
onHoverLeave: () => {}
|
||||
};
|
||||
|
||||
const CollapseDrawerContext = createContext(initialState);
|
||||
|
||||
type CollapseDrawerProviderProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
function CollapseDrawerProvider({ children }: CollapseDrawerProviderProps) {
|
||||
const isDesktop = useResponsive('up', 'lg');
|
||||
|
||||
const [collapse, setCollapse] = useState({
|
||||
click: false,
|
||||
hover: false
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDesktop) {
|
||||
setCollapse({
|
||||
click: false,
|
||||
hover: false
|
||||
});
|
||||
}
|
||||
}, [isDesktop]);
|
||||
|
||||
const handleToggleCollapse = () => {
|
||||
setCollapse({ ...collapse, click: !collapse.click });
|
||||
};
|
||||
|
||||
const handleHoverEnter = () => {
|
||||
if (collapse.click) {
|
||||
setCollapse({ ...collapse, hover: true });
|
||||
}
|
||||
};
|
||||
|
||||
const handleHoverLeave = () => {
|
||||
setCollapse({ ...collapse, hover: false });
|
||||
};
|
||||
|
||||
return (
|
||||
<CollapseDrawerContext.Provider
|
||||
value={{
|
||||
isCollapse: collapse.click && !collapse.hover,
|
||||
collapseClick: collapse.click,
|
||||
collapseHover: collapse.hover,
|
||||
onToggleCollapse: handleToggleCollapse,
|
||||
onHoverEnter: handleHoverEnter,
|
||||
onHoverLeave: handleHoverLeave
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</CollapseDrawerContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export { CollapseDrawerProvider, CollapseDrawerContext };
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Corporate } from '@/@types/corporates';
|
||||
import axios from '@/utils/axios';
|
||||
import { ReactNode, createContext, useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
// hooks
|
||||
import useResponsive from '../hooks/useResponsive';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export type ConfiguredCorporateContextProps = {
|
||||
currentCorporate?: Corporate | null;
|
||||
};
|
||||
|
||||
const initialState: ConfiguredCorporateContextProps = {
|
||||
currentCorporate: null,
|
||||
};
|
||||
|
||||
const ConfiguredCorporateContext = createContext(initialState);
|
||||
|
||||
type ConfiguredCorporateProviderProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
function ConfiguredCorporateProvider({ children }: ConfiguredCorporateProviderProps) {
|
||||
const { corporate_id } = useParams();
|
||||
const [corporate, setCorporate] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Load Corporate
|
||||
console.log('calling corporate' + corporate_id);
|
||||
|
||||
axios.get(`corporates/${corporate_id}`)
|
||||
.then((res) => {
|
||||
setCorporate(res.data)
|
||||
})
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ConfiguredCorporateContext.Provider
|
||||
value={{
|
||||
currentCorporate: corporate,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ConfiguredCorporateContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export { ConfiguredCorporateProvider, ConfiguredCorporateContext };
|
||||
202
frontend/hospital-portal/src/contexts/LaravelAuthContext.tsx
Executable file
202
frontend/hospital-portal/src/contexts/LaravelAuthContext.tsx
Executable file
@@ -0,0 +1,202 @@
|
||||
import { createContext, ReactNode, useEffect, useReducer } from 'react';
|
||||
// utils
|
||||
import axios from '../utils/axios';
|
||||
// import { isValidToken, setSession } from '../utils/jwt';
|
||||
import { setSession, getSession, getUser } from '../utils/token';
|
||||
// @types
|
||||
import { ActionMap, AuthState, AuthUser, JWTContextType } from '../@types/auth';
|
||||
// ----------------------------------------------------------------------
|
||||
import { Navigate, useLocation } from 'react-router-dom';
|
||||
|
||||
enum Types {
|
||||
Initial = 'INITIALIZE',
|
||||
Login = 'LOGIN',
|
||||
Logout = 'LOGOUT',
|
||||
Register = 'REGISTER',
|
||||
}
|
||||
|
||||
type JWTAuthPayload = {
|
||||
[Types.Initial]: {
|
||||
isAuthenticated: boolean;
|
||||
user: AuthUser;
|
||||
};
|
||||
[Types.Login]: {
|
||||
user: AuthUser;
|
||||
};
|
||||
[Types.Logout]: undefined;
|
||||
[Types.Register]: {
|
||||
user: AuthUser;
|
||||
};
|
||||
};
|
||||
|
||||
export type JWTActions = ActionMap<JWTAuthPayload>[keyof ActionMap<JWTAuthPayload>];
|
||||
|
||||
const initialState: AuthState = {
|
||||
isAuthenticated: false,
|
||||
isInitialized: false,
|
||||
user: null,
|
||||
};
|
||||
|
||||
const JWTReducer = (state: AuthState, action: JWTActions) => {
|
||||
switch (action.type) {
|
||||
case 'INITIALIZE':
|
||||
return {
|
||||
isAuthenticated: action.payload.isAuthenticated,
|
||||
isInitialized: true,
|
||||
user: action.payload.user,
|
||||
};
|
||||
case 'LOGIN':
|
||||
return {
|
||||
...state,
|
||||
isAuthenticated: true,
|
||||
user: action.payload.user,
|
||||
};
|
||||
case 'LOGOUT':
|
||||
return {
|
||||
...state,
|
||||
isAuthenticated: false,
|
||||
user: null,
|
||||
};
|
||||
|
||||
case 'REGISTER':
|
||||
return {
|
||||
...state,
|
||||
isAuthenticated: true,
|
||||
user: action.payload.user,
|
||||
};
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const AuthContext = createContext<JWTContextType | null>(null);
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type AuthProviderProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
function AuthProvider({ children }: AuthProviderProps) {
|
||||
const [state, dispatch] = useReducer(JWTReducer, initialState);
|
||||
let location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const initialize = async () => {
|
||||
try {
|
||||
const accessToken = getSession();
|
||||
if (accessToken) {
|
||||
setSession(accessToken);
|
||||
|
||||
const response = await axios.get('/user');
|
||||
const user = response.data;
|
||||
|
||||
dispatch({
|
||||
type: Types.Initial,
|
||||
payload: {
|
||||
isAuthenticated: true,
|
||||
user,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
dispatch({
|
||||
type: Types.Initial,
|
||||
payload: {
|
||||
isAuthenticated: false,
|
||||
user: null,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: Types.Initial,
|
||||
payload: {
|
||||
isAuthenticated: false,
|
||||
user: null,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
initialize();
|
||||
}, []);
|
||||
|
||||
const login = async (email: string, password: string) => axios
|
||||
.post('/login', { email, password })
|
||||
.then((response) => {
|
||||
const { user, token } = response.data;
|
||||
setSession(token);
|
||||
|
||||
dispatch({
|
||||
type: Types.Login,
|
||||
payload: {
|
||||
user,
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.response.status !== 404) throw error.response
|
||||
if (error.response.status !== 422) throw error.response
|
||||
});
|
||||
|
||||
const register = async (email: string, password: string, firstName: string, lastName: string) => {
|
||||
const response = await axios.post('/api/register', {
|
||||
email,
|
||||
password,
|
||||
firstName,
|
||||
lastName,
|
||||
});
|
||||
const { accessToken, user } = response.data;
|
||||
|
||||
window.localStorage.setItem('accessToken', accessToken);
|
||||
dispatch({
|
||||
type: Types.Register,
|
||||
payload: {
|
||||
user,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
setSession(null);
|
||||
dispatch({ type: Types.Logout });
|
||||
};
|
||||
|
||||
return (<AuthContext.Provider
|
||||
value={{
|
||||
...state,
|
||||
method: 'jwt',
|
||||
login,
|
||||
logout,
|
||||
register,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
|
||||
// if (state.isInitialized) {
|
||||
// return (!state.isAuthenticated && location.pathname !== '/auth/login') ?
|
||||
// (<Navigate to="/auth/login" replace={true} />)
|
||||
// : false && location.pathname == '/auth/login' ?
|
||||
// (<Navigate to="/dashboard" replace={true} />)
|
||||
// : (
|
||||
// <AuthContext.Provider
|
||||
// value={{
|
||||
// ...state,
|
||||
// method: 'jwt',
|
||||
// login,
|
||||
// logout,
|
||||
// register,
|
||||
// }}
|
||||
// >
|
||||
// {children}
|
||||
// </AuthContext.Provider>
|
||||
// );
|
||||
// } else {
|
||||
// return (<Navigate to="/auth/login" replace={true} />)
|
||||
// }
|
||||
}
|
||||
|
||||
export { AuthContext, AuthProvider };
|
||||
128
frontend/hospital-portal/src/contexts/SettingsContext.tsx
Executable file
128
frontend/hospital-portal/src/contexts/SettingsContext.tsx
Executable file
@@ -0,0 +1,128 @@
|
||||
import { ReactNode, createContext } from 'react';
|
||||
// hooks
|
||||
import useLocalStorage from '../hooks/useLocalStorage';
|
||||
// utils
|
||||
import getColorPresets, { colorPresets, defaultPreset } from '../utils/getColorPresets';
|
||||
// config
|
||||
import { defaultSettings } from '../config';
|
||||
// @type
|
||||
import {
|
||||
ThemeMode,
|
||||
ThemeLayout,
|
||||
ThemeDirection,
|
||||
ThemeColorPresets,
|
||||
SettingsContextProps,
|
||||
} from '../components/settings/type';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const initialState: SettingsContextProps = {
|
||||
...defaultSettings,
|
||||
onChangeMode: () => {},
|
||||
onToggleMode: () => {},
|
||||
onChangeDirection: () => {},
|
||||
onChangeColor: () => {},
|
||||
onToggleStretch: () => {},
|
||||
onChangeLayout: () => {},
|
||||
onResetSetting: () => {},
|
||||
setColor: defaultPreset,
|
||||
colorOption: [],
|
||||
};
|
||||
|
||||
const SettingsContext = createContext(initialState);
|
||||
|
||||
type SettingsProviderProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
function SettingsProvider({ children }: SettingsProviderProps) {
|
||||
const [settings, setSettings] = useLocalStorage('settings', {
|
||||
themeMode: initialState.themeMode,
|
||||
themeDirection: initialState.themeDirection,
|
||||
themeColorPresets: initialState.themeColorPresets,
|
||||
themeStretch: initialState.themeStretch,
|
||||
themeLayout: initialState.themeLayout,
|
||||
});
|
||||
|
||||
const onChangeMode = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSettings({
|
||||
...settings,
|
||||
themeMode: (event.target as HTMLInputElement).value as ThemeMode,
|
||||
});
|
||||
};
|
||||
|
||||
const onToggleMode = () => {
|
||||
setSettings({
|
||||
...settings,
|
||||
themeMode: settings.themeMode === 'light' ? 'dark' : 'light',
|
||||
});
|
||||
};
|
||||
|
||||
const onChangeDirection = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSettings({
|
||||
...settings,
|
||||
themeDirection: (event.target as HTMLInputElement).value as ThemeDirection,
|
||||
});
|
||||
};
|
||||
|
||||
const onChangeColor = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSettings({
|
||||
...settings,
|
||||
themeColorPresets: (event.target as HTMLInputElement).value as ThemeColorPresets,
|
||||
});
|
||||
};
|
||||
|
||||
const onChangeLayout = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSettings({
|
||||
...settings,
|
||||
themeLayout: (event.target as HTMLInputElement).value as ThemeLayout,
|
||||
});
|
||||
};
|
||||
|
||||
const onToggleStretch = () => {
|
||||
setSettings({
|
||||
...settings,
|
||||
themeStretch: !settings.themeStretch,
|
||||
});
|
||||
};
|
||||
|
||||
const onResetSetting = () => {
|
||||
setSettings({
|
||||
themeMode: initialState.themeMode,
|
||||
themeLayout: initialState.themeLayout,
|
||||
themeStretch: initialState.themeStretch,
|
||||
themeDirection: initialState.themeDirection,
|
||||
themeColorPresets: initialState.themeColorPresets,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsContext.Provider
|
||||
value={{
|
||||
...settings,
|
||||
// Mode
|
||||
onChangeMode,
|
||||
onToggleMode,
|
||||
// Direction
|
||||
onChangeDirection,
|
||||
// Color
|
||||
onChangeColor,
|
||||
setColor: getColorPresets(settings.themeColorPresets),
|
||||
colorOption: colorPresets.map((color) => ({
|
||||
name: color.name,
|
||||
value: color.main,
|
||||
})),
|
||||
// Stretch
|
||||
onToggleStretch,
|
||||
// Navbar Horizontal
|
||||
onChangeLayout,
|
||||
// Reset Setting
|
||||
onResetSetting,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</SettingsContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export { SettingsProvider, SettingsContext };
|
||||
Reference in New Issue
Block a user