Fix build errors

Author: rickkoh

frontend/src/app/profile/_components/ProfileCard.tsx

@@ -1,29 +1,19 @@
-
 import UserAvatar from "@/components/UserAvatar";
 import { Card } from "@/components/ui/card";
 import { Zap } from "lucide-react";
 import { UserProfile } from "@/types/User";
 
 interface ProfileCardProps {
-  userProfile: UserProfile
+  userProfile: UserProfile;
 }
 
-export function ProfileCard({userProfile}: ProfileCardProps) {
+export function ProfileCard({ userProfile }: ProfileCardProps) {
   return (
     <Card className="p-5">
       <div className="flex flex-col gap-5">
         <div className="flex items-center gap-4">
           <UserAvatar
-            userProfile={{
-              username: "jmsandiegoo",
-              email: "[email protected]",
-              displayName: "Jm San Diego",
-              proficiency: "Advanced",
-              languages: ["Python"],
-              isOnboarded: true,
-              roles: ["user"],
-              //profilePictureUrl: "testlink.com",
-            }}
+            userProfile={userProfile}
             isHoverEnabled={false}
             className="w-16 h-16"
           />

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/CollaboratorsColumn.tsx

@@ -5,6 +5,7 @@ import { UserProfile } from "@/types/User";
 
 const mockCollaborators: UserProfile[] = [
   {
+    id: "1",
     username: "jmsandiegoo",
     email: "[email protected]",
     displayName: "Jm San Diego",
@@ -14,6 +15,7 @@ const mockCollaborators: UserProfile[] = [
     roles: ["user"],
   },
   {
+    id: "2",
     username: "charliebrown",
     email: "[email protected]",
     displayName: "Charlie Brown",

frontend/src/app/reset-password/_components/ResetPasswordForm.tsx

@@ -12,59 +12,79 @@ import Link from "next/link";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { confirmResetPassword, verifyCode } from "@/services/authService";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useToast } from "@/hooks/use-toast";
 import { TextInput } from "@/components/form/TextInput";
 import { LoadingSpinner } from "@/components/LoadingSpinner";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
 import { Lock } from "lucide-react";
+import { useCallback } from "react";
 
-
-const FormSchema = z.object({
-  newPassword: z.string().min(6, "Password must be at least 6 characters"),
-  confirmPassword: z.string().min(6, "Password must be at least 6 characters"),
-}).refine(data => data.newPassword === data.confirmPassword, {
-  message: "Passwords do not match",
-  path: ["confirmPassword"],
-});
+const FormSchema = z
+  .object({
+    newPassword: z.string().min(6, "Password must be at least 6 characters"),
+    confirmPassword: z
+      .string()
+      .min(6, "Password must be at least 6 characters"),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
 
 export default function ResetPassword() {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { toast } = useToast();
+
   const methods = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
   });
   const { handleSubmit, formState } = methods;
 
-  const { searchParams } = new URL(window.location.href);
   const token = searchParams.get("token");
 
-  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
-    if (!token) {
-      toast({ title: "Error!", description: "Invalid token." });
-      return;
-    }
+  const onSubmit = useCallback(
+    async (data: z.infer<typeof FormSchema>) => {
+      if (!token) {
+        toast({ title: "Error!", description: "Invalid token." });
+        return;
+      }
 
-    try {
-      const verificationResponse = await verifyCode(token);
+      try {
+        const verificationResponse = await verifyCode(token);
 
-      if (verificationResponse.statusCode === 201) {
-        const resetPasswordResponse = await confirmResetPassword(token, data.newPassword);
+        if (verificationResponse.statusCode === 201) {
+          const resetPasswordResponse = await confirmResetPassword(
+            token,
+            data.newPassword
+          );
 
-        if (resetPasswordResponse.statusCode === 201) {
-          toast({ title: "Success!", description: "Your password has been reset." });
-          router.push('/forgotpassword/passwordupdated');
+          if (resetPasswordResponse.statusCode === 201) {
+            toast({
+              title: "Success!",
+              description: "Your password has been reset.",
+            });
+            router.push("/forgotpassword/passwordupdated");
+          } else {
+            toast({
+              title: "Error!",
+              description: resetPasswordResponse.message,
+            });
+          }
         } else {
-          toast({ title: "Error!", description: resetPasswordResponse.message });
+          toast({ title: "Error!", description: verificationResponse.message });
         }
-      } else {
-        toast({ title: "Error!", description: verificationResponse.message });
+      } catch (error) {
+        toast({
+          title: "Error!",
+          description: "An error occurred. Please try again.",
+        });
       }
-    } catch (error) {
-      toast({ title: "Error!", description: "An error occurred. Please try again." });
-    }
-  };
+    },
+    [router, toast, token]
+  );
 
   return (
     <Card className="p-2 mt-3">
@@ -81,7 +101,7 @@ export default function ResetPassword() {
               <div className="flex flex-col gap-y-4">
                 <TextInput
                   label={""}
-                  name="newPassword" 
+                  name="newPassword"
                   placeholder="New Password"
                   type="password"
                   Icon={Lock}
@@ -101,18 +121,17 @@ export default function ResetPassword() {
                 disabled={formState.isSubmitting}
                 className="w-full py-2 mt-5 rounded-md bg-primary"
               >
-                {formState.isSubmitting ? (
-                  <LoadingSpinner />
-                ) : (
-                  "Reset Password"
-                )}
+                {formState.isSubmitting ? <LoadingSpinner /> : "Reset Password"}
               </Button>
             </form>
           </Form>
           <div className="justify-center mt-6 text-sm text-center">
             <p>
               Back to{" "}
-              <Link href="/auth/signin" className="hover:underline text-primary">
+              <Link
+                href="/auth/signin"
+                className="hover:underline text-primary"
+              >
                 Sign in
               </Link>
             </p>

frontend/src/app/reset-password/page.tsx

@@ -1,10 +1,15 @@
-import ResetPassword from "../reset-password/_components/ResetPasswordForm";
+"use client";
 
-export default function SigninPage() {
+import { Suspense } from "react";
+import ResetPassword from "./_components/ResetPasswordForm";
+
+export default function Page() {
   return (
-    <div className="min-h-screen flex items-center justify-center">
+    <div className="flex items-center justify-center min-h-screen">
       <div className="max-w-sm mx-auto">
-        <ResetPassword />
+        <Suspense fallback={<div>Loading...</div>}>
+          <ResetPassword />
+        </Suspense>
       </div>
     </div>
   );

frontend/src/components/form/UserAvatarInput.tsx

@@ -33,6 +33,7 @@ export function UserAvatarInput<TFieldValues extends FieldValues>({
               <UserAvatar
                 isHoverEnabled={false}
                 userProfile={{
+                  id: "1",
                   username: "_",
                   email: "_",
                   displayName: "_",