Introduce UserContext

context/UserContext.tsx

@@ -0,0 +1,31 @@
+import React, { useState, FC } from "react";
+
+interface User {
+  email: string;
+  id: number;
+  name: string;
+  team: string;
+}
+
+interface UserContextInterface {
+  user?: User;
+  logged: boolean;
+  setLogged: React.Dispatch<React.SetStateAction<boolean>>;
+  setUser: React.Dispatch<React.SetStateAction<User | undefined>>;
+}
+
+export const UserContext = React.createContext<UserContextInterface | null>(
+  null
+);
+
+const UserContextProvider: FC = ({ children }) => {
+  const [user, setUser] = useState<User>();
+  const [logged, setLogged] = useState<boolean>(false);
+  return (
+    <UserContext.Provider value={{ user, setUser, logged, setLogged }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserContextProvider;

hooks/useForm.ts

@@ -11,30 +11,47 @@ type FormMessage = {
   message: string;
 };
 
-const useForm = ({ path, method, query }: useFormProps) => {
+type SuccessFormData = {
+  [k: string]: FormDataEntryValue;
+};
+
+type SubmitHandler = FormEventHandler<HTMLFormElement>;
+
+type UseForm = {
+  error?: FormMessage;
+  loading: boolean;
+  submitHandler: SubmitHandler;
+  success?: FormMessage;
+  successFormData?: SuccessFormData;
+};
+
+const useForm = ({ path, method, query }: useFormProps): UseForm => {
   const [error, setError] = useState<FormMessage>();
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState<FormMessage>();
+  const [successFormData, setSuccessFormData] = useState<SuccessFormData>();
 
   const submitHandler: FormEventHandler<HTMLFormElement> = async (event) => {
     event.preventDefault();
     setLoading(true);
     const formData = new FormData(event.currentTarget);
+    const body = Object.fromEntries(formData.entries());
     const { error, message } = await fetchApi({
       path,
       query,
       method,
-      body: Object.fromEntries(formData.entries()),
+      body,
     });
     if (error) {
       setLoading(false);
       setError({ message: error });
     } else {
+      setSuccessFormData(body);
       setLoading(false);
       setSuccess({ message: message || "Success!" });
     }
   };
-  return { error, loading, success, submitHandler };
+  return { error, loading, success, submitHandler, successFormData };
 };
 
 export default useForm;

pages/_app.tsx

@@ -1,8 +1,14 @@
-import "../styles/globals.css";
 import type { AppProps } from "next/app";
+import UserContextProvider from "../context/UserContext";
+
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <UserContextProvider>
+      <Component {...pageProps} />
+    </UserContextProvider>
+  );
 }
 
 export default MyApp;

pages/api/user/[id].ts

@@ -14,12 +14,9 @@ const userUpdate: NextApiHandler = async (req, res) => {
     if (axios.isAxiosError(e)) {
       res.status(e.response?.status || 500).json(e.response?.data);
     } else {
-      res
-        .status(500)
-        .json({
-          message:
-            "There was an error processing the request, please try again.",
-        });
+      res.status(500).json({
+        message: "There was an error processing the request, please try again.",
+      });
     }
   }
 };

pages/login.tsx

@@ -1,14 +1,24 @@
 import { NextPage } from "next";
+import { useContext, useEffect } from "react";
 import Layout from "../components/Layout";
+import { UserContext } from "../context/UserContext";
 import useForm from "../hooks/useForm";
 import { ApiMethods, ApiPaths } from "../utils/api";
 
 const Login: NextPage = () => {
-  const { error, submitHandler } = useForm({
+  const context = useContext(UserContext);
+
+  const { error, submitHandler, success } = useForm({
     path: ApiPaths.Login,
     method: ApiMethods.POST,
   });
 
+  useEffect(() => {
+    if (success && context) {
+      context.setLogged(true);
+    }
+  }, [success, context]);
+
   return (
     <Layout>
       <form className="form" onSubmit={submitHandler}>