Rebase (squashed Enzo's commits)

context/Auth/AuthProvider.js → context/Auth/AuthContext.tsx

@@ -1,13 +1,47 @@
-import { createContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import API from "/lib/api";
-import * as api from "/lib/api";
-import * as USER from "/lib/user";
+import API from "../../lib/api";
+import * as api from "../../lib/api";
+import * as USER from "../../lib/user";
 
-export const AuthContext = createContext();
+interface ILoginDTO {
+  email: string;
+  password: string;
+}
+
+// FIXME: Change this types from any
+type IAttendee = any;
+type ISopnsor = any;
+type IManager = any;
+
+type IUser = IAttendee | ISopnsor | IManager;
+
+interface IAuthContext {
+  user: IUser;
+  errors?: string;
+
+  // Booleans
+  isAuthenticated: boolean;
+  isLoading: boolean;
+
+  // Updates user in state
+  updateUser: (user: IUser) => void;
+  refetchUser: () => void;
+
+  // Api calls
+  login: (params: ILoginDTO) => void;
+  logout: () => void;
+  editUser: (username: string) => void;
+  sign_up: (fields: any) => void;
+}
+
+export const AuthContext = createContext({} as IAuthContext);
 
 const TOKEN_KEY_NAME = "safira_token";
 
+// Function that consumes the context
+export const useAuth = () => useContext(AuthContext);
+
 export function AuthProvider({ children }) {
   const router = useRouter();
   const [user, setUser] = useState(null);
@@ -84,6 +118,7 @@ export function AuthProvider({ children }) {
 
   function login({ email, password }) {
     setLoading(true);
+
     api
       .sign_in({ email, password })
       .then(({ jwt }) => {
@@ -107,8 +142,10 @@ export function AuthProvider({ children }) {
         });
       })
       .catch((errors) => {
-        if (errors.response) {
-          setErrors("Invalid credentials");
+        if (errors.response?.data?.error) {
+          setErrors(errors.response.data.error);
+        } else if (errors.response) {
+          setErrors("Request denied by the server");
         } else if (errors.request) {
           setErrors(
             "No connection to the server. Please check your internet connection and try again later"
@@ -118,7 +155,6 @@ export function AuthProvider({ children }) {
             "Something went wrong :/ Please check your internet connection and try again later"
           );
         }
-
         setUser(undefined);
         setLoading(false);
       });
@@ -132,11 +168,11 @@ export function AuthProvider({ children }) {
     router.push("/");
   }
 
-  function editUser(formData) {
+  function editUser(nickname) {
     setLoading(true);
 
     api
-      .editUser(user.id, formData)
+      .editUser(user.id, nickname)
       .then((at) => {
         setUser((oldUser) => ({ ...oldUser, ...at }));
       })
@@ -152,26 +188,25 @@ export function AuthProvider({ children }) {
     setRefetch((needsRefetch) => !needsRefetch);
   }
 
-  // Make the provider update only when it should
-  const values = useMemo(
-    () => ({
-      user,
-      isAuthenticated,
-      isLoading,
-      setUser,
-      errors,
-      login,
-      logout,
-      editUser,
-      refetchUser,
-      sign_up,
-    }),
-    // eslint-disable-next-line
-    [user, isAuthenticated, isLoading, errors]
-  );
+  function updateUser(updatedUser: IUser) {
+    setUser(updatedUser);
+  }
 
   return (
-    <AuthContext.Provider value={values}>
+    <AuthContext.Provider
+      value={{
+        user,
+        isAuthenticated,
+        isLoading,
+        updateUser: updateUser,
+        errors,
+        login,
+        logout,
+        editUser,
+        refetchUser,
+        sign_up,
+      }}
+    >
       {!isFirstLoading && children}
     </AuthContext.Provider>
   );

context/Auth/index.ts

@@ -0,0 +1,4 @@
+export { AuthProvider } from "./AuthContext";
+export { useAuth } from "./AuthContext";
+export { withAuth } from "./withAuth";
+export { withoutAuth } from "./withoutAuth";

context/Auth/withAuth.js

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { useAuth } from "./useAuth";
+import { useAuth } from ".";
 import * as USER from "/lib/user";
 
 export function withAuth(WrappedComponent) {

context/Auth/withoutAuth.js

@@ -1,6 +1,6 @@
 import { faUserAstronaut } from "@fortawesome/free-solid-svg-icons";
 import { Router, useRouter } from "next/router";
-import { useAuth } from "./useAuth";
+import { useAuth } from ".";
 
 export function withoutAuth(WrappedComponent) {
   // eslint-disable-next-line react/display-name