AuthProvider.tsx

import { ReactNode, useEffect, useState } from 'react';
import { AuthContext } from '../contexts/AuthContext';
import Spinner from '../components/Spinner/Spinner';
import { authoriseUser } from '../services/Authorise/Authorise';

export interface IUser {
  id: number;
  email: string;
  username: string;
  type: number;
}

function AuthProvider({ children }: { children: ReactNode }) {
  const [loading, setLoading] = useState(true);
  const [auth, setAuth] = useState(false);
  const [user, setUser] = useState<IUser>();

  useEffect(() => {
    async function authUser() {
      try {
        const result = await authoriseUser();
        giveAuth();
        updateUser(result.data);
        setLoading(false);
      } catch (error) {
        setLoading(false);
      }
    }

    authUser();
  }, []);

  const giveAuth = () => {
    setAuth(true);
  };

  const removeAuth = () => {
    setAuth(false);
  };

  const updateUser = (newUser: IUser) => {
    setUser(newUser);
  }

  if (loading) {
    return (
      <div className='full'>
        <Spinner></Spinner>
      </div>
    );
  }

  return (
    <AuthContext.Provider value={{ isAuth: auth, giveAuth, removeAuth, user, updateUser }}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

export default AuthProvider;