refactor(AuthContext): Refactor to TypeScript and change dir

components/moonstone/staff/utils/Base/index.jsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { Dialog, Transition } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { useAuth } from "/components/Auth";
+import { useAuth } from "@context/Auth";
 import Return from "/components/moonstone/utils/Return";
 
 function classNames(...classes) {

components/moonstone/staff/utils/Dashboard/index.jsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { Dialog, Transition } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { useAuth } from "/components/Auth";
+import { useAuth } from "@context/Auth";
 import Return from "/components/moonstone/utils/Return";
 
 const navigation = ["redeem prizes", "scan qr"];

components/moonstone/user/utils/Dashboard/index.jsx

@@ -5,7 +5,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { classNames } from "/lib/css";
-import { useAuth } from "/components/Auth";
+import { useAuth } from "@context/Auth";
 import Return from "/components/moonstone/utils/Return";
 
 const navigation = [

components/website/home/Hero/index.jsx

@@ -1,6 +1,6 @@
 import dynamic from "next/dynamic";
 
-import { useAuth } from "/components/Auth";
+import { useAuth } from "@context/Auth";
 
 import Social from "/components/website/utils/Social";
 

components/website/utils/Navbar/index.jsx

@@ -8,7 +8,7 @@ import { Disclosure, Menu, Transition } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";
 
-import { useAuth } from "/components/Auth";
+import { useAuth } from "@context/Auth";
 import JoinUs from "/components/website/utils/JoinUs";
 import styles from "./style.module.css";
 

components/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);
@@ -144,26 +178,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";

components/Auth/withAuth.js → context/Auth/withAuth.js

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

components/Auth/withoutAuth.js → 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 "./AuthContext";
 
 export function withoutAuth(WrappedComponent) {
   // eslint-disable-next-line react/display-name

pages/_app.tsx

@@ -1,4 +1,4 @@
-import { AuthProvider } from "@components/Auth";
+import { AuthProvider } from "@context/Auth";
 import Header from "@components/utils/Header";
 
 import "../styles/globals.css";

pages/attendee/badgedex.js

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
-import { withAuth } from "/components/Auth";
-import { useAuth } from "/components/Auth";
+import { useAuth, withAuth } from "@context/Auth";
 
 import { getAllBadges } from "/lib/api";
 

pages/attendee/leaderboard.js

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 
-import { withAuth } from "/components/Auth";
-import { useAuth } from "/components/Auth/useAuth";
+import { useAuth, withAuth } from "@context/Auth";
 
 import Dashboard from "/components/moonstone/user/utils/Dashboard";
 import Table from "/components/moonstone/user/leaderboard/Table";

pages/attendee/profile.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { withAuth, useAuth } from "/components/Auth";
+import { withAuth, useAuth } from "@context/Auth";
 
 import Form from "/components/moonstone/utils/Form";
 import Input from "/components/moonstone/utils/Input";

pages/attendee/store.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-import { withAuth, useAuth } from "/components/Auth";
+import { withAuth, useAuth } from "@context/Auth";
 
 import * as api from "/lib/api";
 

pages/attendee/vault.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-import { withAuth, useAuth } from "/components/Auth";
+import { withAuth, useAuth } from "@context/Auth";
 
 import * as api from "/lib/api";
 

pages/attendee/wheel.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { withAuth, useAuth } from "/components/Auth";
+import { withAuth, useAuth } from "@context/Auth";
 
 import Heading from "/components/moonstone/utils/Heading";
 

pages/attendees/[uuid].js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
-import { withAuth, useAuth } from "/components/Auth";
+import { withAuth } from "@context/Auth";
 
 import Dashboard from "/components/moonstone/user/utils/Dashboard";
 import Heading from "/components/moonstone/utils/Heading";

pages/badge/[slug].js

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
-import { withAuth, useAuth } from "/components/Auth";
+import { withAuth, useAuth } from "@context/Auth";
 
 import { getBadge } from "/lib/api";
 

pages/index.tsx

@@ -1,4 +1,4 @@
-import { withoutAuth } from "@components/Auth";
+import { withoutAuth } from "@context/Auth";
 import Hero from "@components/website/home/Hero";
 import Sponsors from "@components/website/home/Sponsors";
 import Hackathon from "@components/website/home/Hackathon";

pages/login.tsx

@@ -3,7 +3,7 @@
 import { useRef } from "react";
 import { motion as Motion } from "framer-motion";
 
-import { useAuth, withoutAuth } from "@components/Auth";
+import { useAuth, withoutAuth } from "@context/Auth";
 
 import Button from "@components/utils/Button";
 import Card from "@components/utils/Card";

pages/manager/prizes/[uuid].js

@@ -1,16 +1,13 @@
 import { useState, useEffect } from "react";
 
-import { withAuth, useAuth } from "/components/Auth";
+import { withAuth, useAuth } from "@context/Auth";
 import { useRouter } from "next/router";
 
 import * as api from "/lib/api";
 
 import Base from "/components/moonstone/staff/utils/Base";
-import Prizes from "/components/moonstone/user/vault/wheel/Prizes";
 import Button from "/components/moonstone/utils/Button";
 
-import Balance from "/components/moonstone/user/store/Balance";
-
 const navigation = ["badges", "prizes", "identifier"];
 
 function ManagerRedeemables() {

pages/manager/prizes/index.js

@@ -6,7 +6,7 @@ import { giveBadge } from "/lib/api";
 
 import Base from "/components/moonstone/staff/utils/Base";
 import QRScanner, { FEEDBACK } from "/components/moonstone/utils/QRScanner";
-import { useAuth } from "/components/Auth/useAuth";
+import { useAuth } from "@context/Auth";
 import { useRouter } from "next/router";
 
 const navigation = ["badges", "prizes", "identifier"];

pages/product/[slug].js

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 
-import { withAuth, useAuth } from "/components/Auth";
+import { withAuth, useAuth } from "@context/Auth";
 
 import { getProduct, buyProduct } from "/lib/api";
 

pages/register/[uuid].js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
-import { withoutAuth, useAuth } from "/components/Auth";
+import { withoutAuth, useAuth } from "@context/Auth";
 import { motion as Motion } from "framer-motion";
 
 import Button from "/components/utils/Button";

pages/signup.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef } from "react";
 
-import { withoutAuth, useAuth } from "@components/Auth";
+import { withoutAuth, useAuth } from "@context/Auth";
 import { motion as Motion } from "framer-motion";
 
 import Button from "@components/utils/Button";

pages/sponsor/scanner.js

@@ -6,7 +6,7 @@ import { giveBadge } from "/lib/api";
 
 import Base from "/components/moonstone/staff/utils/Base";
 import QRScanner, { FEEDBACK } from "/components/moonstone/utils/QRScanner";
-import { useAuth } from "../../components/Auth/useAuth";
+import { useAuth } from "@context/Auth";
 
 const navigation = ["badges"];
 

tsconfig.json

@@ -16,6 +16,7 @@
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {
+      "@context/*": ["context/*"],
       "@components/*": ["components/*"],
       "@data/*": ["data/*"],
       "@lib/*": ["lib/*"]