Feat: NextJS user api

services/web-app/src/app/profile/page.tsx

@@ -1,38 +1,24 @@
 "use client";
 import Image from "next/image";
-import { User } from "next-auth";
 import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 
 import { ReturnToHome } from "../../components/cards/returnToHome";
 import UpdateAPIKey from "../../components/dialog/updateApiKey";
 import Loading from "../../components/loading/loading";
 import { RepoTable } from "../../components/tables/repoTable";
-import useAxios from "../../lib/hooks/useAxios";
+import { UserBody } from "../../lib/types";
+import { useUserApi } from "../../pages/api/user/useUser";
 
-const containsUserDataFields = (input: object): boolean =>
-  "email" in input &&
-  typeof input.email === "string" &&
-  "userId" in input &&
-  typeof input.userId === "string" &&
-  "apiKey" in input &&
-  typeof input.apiKey === "string" &&
-  "name" in input &&
-  typeof input.name === "string";
-
-const isValidUserData = (input: unknown): input is User =>
-  typeof input === "object" && input !== null && containsUserDataFields(input);
-
-export default async function Profile(): Promise<JSX.Element> {
-  let user: User;
+export default function Profile(): JSX.Element {
   const { data: session, status } = useSession();
-  const { axiosInstance } = await useAxios();
-  const [data, setData] = useState<string | null>(null);
+  const [user, setUser] = useState<UserBody | null>(null);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
+      const { getUser } = useUserApi();
       try {
         if (
           session === null ||
@@ -41,23 +27,20 @@ export default async function Profile(): Promise<JSX.Element> {
         ) {
           throw new Error("Session data not fetched correctly.");
         }
-        const response = await axiosInstance.get(
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          `/getUser?userId=${session.user.userId}`
-        );
-        //We need response.data to be of type string so that it can be parsed into user data
-        if (typeof response.data !== "string") {
-          throw new Error("Session data not fetched correctly.");
-        }
-        setData(response.data);
+        const userId = session.user.userId;
+        const parsedUser = await getUser({ userId });
+        setUser(parsedUser);
       } catch (err) {
         console.error("Failed to getUser, due to the following error ", err);
       } finally {
         setLoading(false);
       }
     };
-    void fetchData();
-  }, [session?.user]);
+
+    if (!user) {
+      void fetchData();
+    }
+  }, [session?.user?.userId, user]);
 
   if (status === "loading" || loading) {
     return <Loading />;
@@ -67,25 +50,19 @@ export default async function Profile(): Promise<JSX.Element> {
     return <ReturnToHome message="You are not logged in" />;
   }
 
-  if (!data) {
+  // Check this error
+  if (!user) {
     return <ReturnToHome message="Could not retrieve User data." />;
-  } else {
-    const parsedData: unknown = JSON.parse(data);
-    if (!isValidUserData(parsedData)) {
-      return <ReturnToHome message="Could not retrieve valid User data." />;
-    } else {
-      user = parsedData;
-    }
   }
 
   const handleUpdateApiKey = async (newApiKey: string) => {
     try {
-      const response = await axiosInstance.post(`/updateUser`, {
+      const { updateUser } = useUserApi();
+      await updateUser({
         apiKey: newApiKey,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         userId: user.userId,
       });
-      console.log("API key updated successfully:", response.data);
+      console.log("API key updated successfully");
     } catch (error) {
       console.error("Failed to update API key:", error);
     }

services/web-app/src/components/buttons/basicButton.tsx

@@ -1,20 +1,22 @@
-import React from "react";
-
+import React, { forwardRef } from "react";
 export interface ButtonProps {
   text: string;
   onClick?: () => void;
   styling?: string;
 }
-
-const BasicButton: React.FC<ButtonProps> = ({ text, onClick, styling }) => {
-  return (
-    <button
-      className={`bg-black text-white sm:font-light font-extralight py-2 px-4 rounded ${styling ?? ""}`}
-      onClick={onClick}
-    >
-      {text}
-    </button>
-  );
-};
-
-export default BasicButton;
+const BasicButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ text, onClick, styling }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={`bg-black text-white sm:font-light font-extralight py-2 px-4 rounded ${
+          styling ?? ""
+        }`}
+        onClick={onClick}
+      >
+        {text}
+      </button>
+    );
+  }
+);
+export default BasicButton;

services/web-app/src/lib/hooks/useAxios.tsx

@@ -1,30 +1,12 @@
 import axios, { type AxiosInstance } from "axios";
-import { getSession } from "next-auth/react";
 
 import { BASE_URL } from "../constants";
 
 const axiosInstance = axios.create({
   baseURL: `${BASE_URL}`,
 });
 
-const useAxios = async (): Promise<{ axiosInstance: AxiosInstance }> => {
-  const session = await getSession();
-
-  if (session === null || !('token' in session)) {
-    throw new Error(
-      "Error: logged in user's session data not fetched correctly."
-    );
-  }
-
-  axiosInstance.interceptors.request.clear();
-  axiosInstance.interceptors.request.use(
-    (config) => {
-      config.headers["Authorization"] = `Bearer ${session.token ?? ""}`;
-
-      return config;
-    }
-  );
-
+export const useAxios = (): { axiosInstance: AxiosInstance } => {
   return { axiosInstance };
 };
 

services/web-app/src/lib/types.ts

@@ -1,8 +1,22 @@
-export interface User {
+export interface UserBody {
     email: string ,
     userId: string,
     apiKey: string,
     name: string,
     pictureUrl?: string,
     repos?: [],
-}
+}
+
+export type GetUserProps = {
+    userId: string;
+};
+
+export type UpdateUserProps = {
+    apiKey: string;
+    userId: string;
+};
+
+export type UseUserApiResponse = {
+    updateUser: (updateUserProps: UpdateUserProps) => Promise<void>; 
+    getUser: (getUserProps: GetUserProps) => Promise<UserBody>; 
+  }

services/web-app/src/pages/api/auth/[...nextauth].ts

@@ -55,7 +55,6 @@ const authOptions: NextAuthOptions = {
     async session({ session, token }) {
       if (session.user) {
         session.user.userId = token.sub;
-        session.token = token.token;
       }
 
       return session;

services/web-app/src/pages/api/user/getUser.ts

@@ -0,0 +1,12 @@
+import { type AxiosInstance } from "axios";
+
+import { GetUserProps, UserBody } from "../../../lib/types";
+
+export const getUser = async (
+  getUserProps : GetUserProps,
+  axiosInstance: AxiosInstance,
+): Promise<UserBody> => {
+  const { data } = await axiosInstance.get<string>(`/getUser?userId=${getUserProps.userId}`);
+
+  return JSON.parse(data) as UserBody;
+};

services/web-app/src/pages/api/user/updateUser.ts

@@ -0,0 +1,9 @@
+import { type AxiosInstance } from "axios";
+
+import { UpdateUserProps } from "../../../lib/types";
+
+export const updateUser = async (
+  userUpdatableProps: UpdateUserProps,
+  axiosInstance: AxiosInstance
+): Promise<void> =>
+  axiosInstance.post(`/updateUser`, userUpdatableProps);

services/web-app/src/pages/api/user/useUser.ts

@@ -0,0 +1,19 @@
+import { getUser } from "./getUser";
+import { updateUser } from "./updateUser";
+import { useAxios } from "../../../lib/hooks/useAxios";
+import {
+  GetUserProps,
+  UpdateUserProps,
+  UseUserApiResponse,
+} from "../../../lib/types";
+
+export const useUserApi = (): UseUserApiResponse => {
+  const { axiosInstance } = useAxios();
+
+  return {
+    updateUser: async (updateUserProps: UpdateUserProps) =>
+      await updateUser(updateUserProps, axiosInstance),
+    getUser: async (getUserProps: GetUserProps) =>
+      await getUser(getUserProps, axiosInstance),
+  };
+};

services/web-app/types/next-auth.d.ts

@@ -2,7 +2,7 @@ import { JWT } from "next-auth/jwt";
 
 declare module "next-auth" {
   interface Session {
-    token?: string;
+    token?: JWT;
     user?: User;
     expires?: ISODateString;
   }