globalState.tsx

import { createContext, Dispatch, ReactNode, useContext, useReducer } from "react";

export interface GlobalContextProps {
	loggedIn: boolean;
	background: boolean;
}

export interface GlobalContextAction {
	type: string;
	value: any;
}

export const globalContextReducer = (state: GlobalContextProps, action: GlobalContextAction) => {
	switch (action.type) {
		case "background":
			state.background = action.value;
			return state;
		default:
			return state;
	}
};

export const initialState = { loggedIn: false, background: true };
const dispatch: Dispatch<GlobalContextAction> = () => null;
export const GlobalContext = createContext([initialState, dispatch]);

export const useGlobalContext = () => {
	return useContext(GlobalContext);
};

interface GlobalProviderProps {
	children: ReactNode;
}

export const GlobalProvider = ({ children }: GlobalProviderProps) => {
	const reducer = useReducer(globalContextReducer, initialState);

	return <GlobalContext.Provider value={reducer}>{children}</GlobalContext.Provider>;
};