Merge pull request tryyang2001#35 from tryyang2001/tryyang/fix_fronte…

…nd_build_error

Fix frontend build error existing in the master branch

frontend/src/app/__tests__/pages.test.tsx

@@ -1,68 +1,67 @@
-import LandingPage from '../login/page'
-import LoginPage from '../login/page'
-import SignUpPage from '../sign-up/page'
-import UserPage from '../user/page'
-import AssignmentPage from '../(pages)/assignments/[id]/page'
-import AssignmentService from '@/helpers/assignment-service/api-wrapper'
+import LandingPage from "../login/page";
+import LoginPage from "../login/page";
+import SignUpPage from "../sign-up/page";
+import UserPage from "../user/page";
+import AssignmentPage from "../assignments/[id]/page";
+import AssignmentService from "@/helpers/assignment-service/api-wrapper";
 
-import {render} from '@testing-library/react'
+import { render } from "@testing-library/react";
 
 // Place all page's Snapshot tests here
 
-jest.mock('next/navigation', () => {
+jest.mock("next/navigation", () => {
   return {
     __esModule: true,
     useRouter: () => ({
       replace: jest.fn(),
-      prefetch: jest.fn()
+      prefetch: jest.fn(),
     }),
     useSearchParams: () => ({
-      get: () => {}
+      get: () => {},
     }),
-    notFound: () => ({
+    notFound: () => ({}),
+  };
+});
 
-    })
-  }
-})
-
-jest.mock('@tanstack/react-query', () => {
+jest.mock("@tanstack/react-query", () => {
   return {
     __esModule: true,
     useQuery: () => {
-      const assignment = AssignmentService.getAssignmentById({assignmentId: "1"})
+      const assignment = AssignmentService.getAssignmentById({
+        assignmentId: "1",
+      });
       return {
         data: assignment,
-        isLoading: assignment.then(() => false)
-      }
-    }
-  }
-})
+        isLoading: assignment.then(() => false),
+      };
+    },
+  };
+});
 
-describe('Page Snapshot tests', () => {
-    it('Landing Page Snapshot test', () => {
-      const { container } = render(<LandingPage />)
-      expect(container).toMatchSnapshot()
-    })
+describe("Page Snapshot tests", () => {
+  it("Landing Page Snapshot test", () => {
+    const { container } = render(<LandingPage />);
+    expect(container).toMatchSnapshot();
+  });
 
-    it('Login Snapshot test', () => {
-      const { container } = render(<LoginPage />)
-      expect(container).toMatchSnapshot()
-    })
+  it("Login Snapshot test", () => {
+    const { container } = render(<LoginPage />);
+    expect(container).toMatchSnapshot();
+  });
 
-    it('Sign-up Snapshot test', () => {
-      const { container } = render(<SignUpPage />)
-      expect(container).toMatchSnapshot()
-    })
+  it("Sign-up Snapshot test", () => {
+    const { container } = render(<SignUpPage />);
+    expect(container).toMatchSnapshot();
+  });
 
-    it('User Page Snapshot test', async () => {
-      const Page = await UserPage()
-      const { container } = render(Page)
-      expect(container).toMatchSnapshot()
-    })
+  it("User Page Snapshot test", async () => {
+    const { container } = render(<UserPage />);
+    expect(container).toMatchSnapshot();
+  });
 
-    it('Loading Assignment Page Snapshot test', () => {
-      const id = "1"
-      const { container } = render(<AssignmentPage id={id} />)
-      expect(container).toMatchSnapshot()
-    })
-})
+  it("Loading Assignment Page Snapshot test", () => {
+    const id = "1";
+    const { container } = render(<AssignmentPage params={{ id: id }} />);
+    expect(container).toMatchSnapshot();
+  });
+});

frontend/src/app/(pages)/assignments/[id]/layout.tsx → frontend/src/app/assignments/[id]/layout.tsx

@@ -1,7 +1,7 @@
 import AssignmentService from "@/helpers/assignment-service/api-wrapper";
-import { Metadata } from "next";
+import { Metadata, ResolvingMetadata } from "next";
 
-type Props = {
+type PageProps = {
   params: {
     id: string;
   };
@@ -13,7 +13,9 @@ export default function AssignmentPageLayout({
   return <div>{children}</div>;
 }
 
-export async function generateMetadata({ params }: Props) {
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
   const assignmentTitle = (
     await AssignmentService.getAssignmentById({
       assignmentId: params.id,

frontend/src/app/(pages)/assignments/[id]/page.tsx → frontend/src/app/assignments/[id]/page.tsx

@@ -7,19 +7,21 @@ import { useQuery } from "@tanstack/react-query";
 import { notFound } from "next/navigation";
 
 interface Props {
-  id: string;
+  params: {
+    id: string;
+  };
 }
 
-const page = ({ id }: Props) => {
+export default function Page({ params }: Props) {
   const {
     data: assignment,
     isLoading,
     isError,
   } = useQuery({
-    queryKey: ["get-assignment", id],
+    queryKey: ["get-assignment", params.id],
     queryFn: async () => {
       const assignment = await AssignmentService.getAssignmentById({
-        assignmentId: id,
+        assignmentId: params.id,
       });
 
       return assignment;
@@ -35,6 +37,4 @@ const page = ({ id }: Props) => {
       {isLoading ? <LogoLoading /> : <AssignmentPage assignment={assignment} />}
     </div>
   );
-};
-
-export default page;
+}

frontend/src/app/user/page.tsx

@@ -1,26 +1,43 @@
-import { ReadOnlyFullUserCard, UserInfo } from "../../components/common/ReadOnlyUserCard";
+"use client";
+
+import { UserInfo } from "../../components/common/ReadOnlyUserCard";
 import ProfileEditor from "../../components/forms/ProfileEditor";
 import AccountEditor from "../../components/forms/AccountEditor";
+import { useEffect, useState } from "react";
+import LogoLoading from "@/components/common/LogoLoading";
+
+export default function Page() {
+  const [userInfo, setUserInfo] = useState<UserInfo>({} as UserInfo);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const getUserData = async () => {
+    const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
+    const userInfo: UserInfo = await res.json();
 
-export default async function Home() {
-    const userInfo = await getUserData();
+    setUserInfo(userInfo);
+    setIsLoading(false);
+  };
 
-    return (
-      <div className="flex flex-col items-center p-12">
-        <div className="flex w-full justify-around gap-12 pt-10">
+  useEffect(() => {
+    getUserData();
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center p-2">
+      {isLoading ? (
+        <LogoLoading />
+      ) : (
+        <div className="w-full">
+          <div className="flex w-full justify-around gap-12 pt-10">
             <div> Your Account </div>
-          <ProfileEditor userInfo={userInfo} />
-        </div>
-        <div className="flex w-full justify-around gap-12 pt-10">
+            <ProfileEditor userInfo={userInfo} />
+          </div>
+          <div className="flex w-full justify-around gap-12 pt-10">
             <div> Your Profile </div>
             <AccountEditor userInfo={userInfo} />
+          </div>
         </div>
-      </div>
-    );
-  }
-
-export const getUserData = async () => {
-  const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
-  const userInfo: UserInfo = await res.json();
-  return userInfo
-};
+      )}
+    </div>
+  );
+}

frontend/src/components/common/ITSLogo.tsx

@@ -9,6 +9,7 @@ const ITSLogo = ({ width = "100%", height = "100%" }: Props) => {
   return (
     <Image
       src="/logo.svg"
+      alt="ITS Logo"
       className="bg-logo mx-auto -mb-4 z-0"
       width={width}
       height={height}