refac(auth.context): refact auth context

Author: dalissongabriel

src/components/LoginBox/index.tsx

@@ -1,15 +1,16 @@
 import { VscGithubInverted } from 'react-icons/vsc';
+import { API_URL_GITHUB_AUTH } from '../../constants';
 import { useAuthContext } from '../../contexts/auth';
 import styles from './styles.module.scss';
 
 export function LoginBox() {
-  const {singInUrl, user} = useAuthContext();
+  const {user} = useAuthContext();
 
   console.log(user);
   return (
     <div className={styles.loginBoxWrapper}>
       <strong>Entre e compartilhe sua mensagem</strong>
-      <a href={singInUrl} className={styles.singInWithGithub}>
+      <a href={API_URL_GITHUB_AUTH} className={styles.singInWithGithub}>
         <VscGithubInverted size="24" />
         Entrar com o Github
       </a>

src/contexts/auth.tsx

@@ -1,18 +1,14 @@
 import { createContext, ReactNode, useContext, useEffect, useState } from "react";
-import { api } from "../services/api";
+import { LOCAL_STORAGE_TOKEN_USER_NAME } from "../constants";
+import { AuthService } from "../services/AuthService";
+import { UserService } from "../services/UserService";
 import { User } from "../types";
 
 interface AuthContextData {
   user: User | null;
-  singInUrl: string;
   singOut: () => void;
 }
 
-interface AuthResponse {
-  token: string;
-  user: User
-};
-
 interface AuthProvider {
   children: ReactNode;
 }
@@ -21,24 +17,8 @@ const AuthContext = createContext({} as AuthContextData);
 
 export function AuthProvider({children}: AuthProvider) {
   const [user, setUser] = useState<User | null>(null);
-  const singInUrl = 'http://localhost:4000/github';
-
-  async function singIn(githubCode: string) {
-    const response = await api.post<AuthResponse>('/authenticate', {
-      code: githubCode,
-    });
 
-    const {token, user} = response.data;
-    localStorage.setItem('@dowhile:token', token); 
-    setUser(user);
-  }
-
-  function singOut() {
-    setUser(null);
-    localStorage.removeItem('@dowhile:token')
-  }
-
-  useEffect(()=>{
+  function getGithubCodeFromQueryString() {
     const url = window.location.href;
     const hasGithubCode = url.includes('?code=');
 
@@ -47,27 +27,40 @@ export function AuthProvider({children}: AuthProvider) {
       window.history.pushState({}, '', urlWithoutCode);
       singIn(githubCode);
     }
-  }, []);
+  }
+
+  async function singIn(githubCode: string) {
+    try {
+      const response = await AuthService.singIn(githubCode);
+      const {token, user} = response.data;
+      localStorage.setItem(LOCAL_STORAGE_TOKEN_USER_NAME, token); 
+      setUser(user);
+    } catch (error) {
+      console.error(error);
+    }
+  }
 
-  useEffect(()=>{
-    const token = localStorage.getItem('@dowhile:token');
+  function loadUserFromLocalStorageWhenExists() {
+    const token = localStorage.getItem(LOCAL_STORAGE_TOKEN_USER_NAME);
     if (token) {
-      // all request before this, send authorization in header :)
-      api.defaults.headers.common.authorization = `Bearer ${token}`;
-      api.get<User>('/profile').then(response => {
-        setUser(response.data);
-      });
+      UserService.loadProfile(token)
+        .then(response => {
+          setUser(response.data);
+        });
     }
-  },[]) 
+  }
+
+  function singOut() {
+    setUser(null);
+    localStorage.removeItem('@dowhile:token')
+  }
+
+  useEffect(() => getGithubCodeFromQueryString(), []);
 
-  const providerValue = {
-    singInUrl: singInUrl,
-    singOut: singOut,
-    user: user,
-  };
+  useEffect(() => loadUserFromLocalStorageWhenExists(), []);
 
   return (
-    <AuthContext.Provider value={providerValue}>
+    <AuthContext.Provider value={{singOut: singOut, user: user,}}>
       {children}
     </AuthContext.Provider>
   );