Merge pull request #88 from ComputerSocietyVITC/feat/fileUpload

MinIO connection, file upload

Author: a2ys

app/admincontrols/page.tsx

@@ -9,11 +9,25 @@ import React from "react";
 const AdminControls = () => {
   const router = useRouter();
 
+  const handleBack = () => {
+    if (typeof window !== "undefined") {
+      const currentLocation = window.location.href;
+
+      router.back();
+
+      setTimeout(() => {
+        if (window.location.href === currentLocation) {
+          router.push("/");
+        }
+      }, 100);
+    }
+  };
+
   return (
     <div className="bg-[#09090b] w-full h-screen flex flex-col text-white">
       <header className="w-full bg-[#121212] flex items-center justify-between px-6 py-3 border-b border-gray-700">
         <h1 className="text-lg font-bold">Admin Controls</h1>
-        <DangerButton buttonText="Go Back" onClick={() => router.push("/")} />
+        <DangerButton buttonText="Go Back" onClick={handleBack} />
       </header>
       <div className="flex-grow flex items-center justify-center">
         <div className="flex flex-col gap-4 items-center">

app/allprojects/page.tsx

@@ -4,13 +4,13 @@ import DangerButton from "@/components/ui/DangerButton";
 import FooterSection from "@/components/ui/FooterSection";
 import React, { useEffect, useState } from "react";
 import ProjectList from "@/components/project/ProjectList";
-import Link from "next/link";
 import api from "@/api";
 import axios from "axios";
 import { Project } from "@/types";
 import { useAuth } from "@/context/AuthContext";
 import Error from "@/components/ui/Error";
 import Loading from "@/components/ui/Loading";
+import { useRouter } from "next/navigation";
 
 const Page = () => {
   const [projects, setProjects] = useState<Project[]>([]);
@@ -21,6 +21,7 @@ const Page = () => {
   const [unauthorizedError, setUnauthorizedError] = useState(false);
 
   const { user, getUser } = useAuth();
+  const router = useRouter();
 
   useEffect(() => {
     if (!user) {
@@ -29,6 +30,20 @@ const Page = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleBack = () => {
+    if (typeof window !== "undefined") {
+      const currentLocation = window.location.href;
+
+      router.back();
+
+      setTimeout(() => {
+        if (window.location.href === currentLocation) {
+          router.push("/");
+        }
+      }, 100);
+    }
+  };
+
   const getAllProjects = async () => {
     try {
       const response = await api.get("/project/all");
@@ -102,11 +117,7 @@ const Page = () => {
           onChange={(e) => setSearchQuery(e.target.value)}
           className="px-3 py-1 rounded-md bg-gray-800 text-white border border-gray-600 focus:outline-none focus:ring focus:ring-gray-500"
         />
-        <Link
-          href={`${user?.role === "EVALUATOR" ? "/evaluatorcontrols" : "/admincontrols"}`}
-        >
-          <DangerButton buttonText="Go Back" onClick={() => {}} />
-        </Link>
+        <DangerButton buttonText="Go Back" onClick={handleBack} />
       </header>
       <main className="flex-grow w-[95%] mx-auto py-8 bg-[#09090b]">
         <ProjectList

app/allteams/page.tsx

@@ -6,20 +6,21 @@ import DangerButton from "@/components/ui/DangerButton";
 import SelectedTeamInfo from "@/components/allteams/SelectedTeamInfo";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
-import Link from "next/link";
 import { Team } from "@/types";
 import { useAuth } from "@/context/AuthContext";
 import Loading from "@/components/ui/Loading";
 import Error from "@/components/ui/Error";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const [selectedTeamInfo, setSelectedTeamInfo] = useState<Team | null>(null);
-  const [teams2, setTeams] = useState<Team[]>([]);
+  const [teams, setTeams] = useState<Team[]>([]);
   const [error, setError] = useState("");
   const [searchTerm, setSearchTerm] = useState("");
   const [unauthorizedUser, setUnauthorizedUser] = useState(false);
 
   const { user, getUser, loading } = useAuth();
+  const router = useRouter();
 
   useEffect(() => {
     if (!user) {
@@ -59,14 +60,26 @@ export default function Page() {
     fetchTeams();
   }, []);
 
-  const filteredTeams = teams2.filter((team) =>
+  const filteredTeams = teams.filter((team) =>
     team.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  const teams = filteredTeams.map(({ id, name }) => ({ id, name }));
+  const handleBack = () => {
+    if (typeof window !== "undefined") {
+      const currentLocation = window.location.href;
+
+      router.back();
+
+      setTimeout(() => {
+        if (window.location.href === currentLocation) {
+          router.push("/");
+        }
+      }, 100);
+    }
+  };
 
   const handleTeamClick = (teamId: string) => {
-    const teamData = teams2.find((team) => team.id === teamId) || null;
+    const teamData = teams.find((team) => team.id === teamId) || null;
     setSelectedTeamInfo(teamData);
   };
 
@@ -81,9 +94,7 @@ export default function Page() {
       setSelectedTeamInfo((prevSelected) =>
         prevSelected?.id === deletedTeamId ? null : prevSelected
       );
-    } catch (error) {
-      console.error("Error deleting team:", error);
-    }
+    } catch {}
   };
 
   if (loading) {
@@ -113,15 +124,11 @@ export default function Page() {
           }}
           className="px-3 py-1 rounded-md bg-gray-800 text-white border border-gray-600 focus:outline-none focus:ring focus:ring-gray-500"
         />
-        <Link
-          href={`${user?.role === "EVALUATOR" ? "/evaluatorcontrols" : "/admincontrols"}`}
-        >
-          <DangerButton buttonText="Go Back" onClick={() => {}} />
-        </Link>
+        <DangerButton buttonText="Go Back" onClick={handleBack} />
       </header>
       <div className="flex-grow w-full flex flex-row gap-4 p-4 bg-[#09090b]">
         <AllTeams
-          teams={teams}
+          teams={filteredTeams}
           onClickUpdate={handleTeamClick}
           customStyle="flex-[1]"
         />

app/allusers/page.tsx

@@ -6,11 +6,12 @@ import FooterSection from "@/components/ui/FooterSection";
 import { TeamMemberListItemModified } from "@/components/team/TeamMemberListItemModified";
 import React, { useEffect, useState } from "react";
 import axios from "axios";
-import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
 import { User } from "@/types";
 import Error from "@/components/ui/Error";
 import Loading from "@/components/ui/Loading";
+import { getImageUrl } from "@/lib/utils";
+import { useRouter } from "next/navigation";
 
 const Page = () => {
   const [users, setUsers] = useState<User[]>([]);
@@ -23,6 +24,7 @@ const Page = () => {
   const [error, setError] = useState<string | null>(null);
 
   const { user, getUser } = useAuth();
+  const router = useRouter();
 
   useEffect(() => {
     if (!user) {
@@ -92,6 +94,20 @@ const Page = () => {
     );
   }, [searchQuery, users]);
 
+  const handleBack = () => {
+    if (typeof window !== "undefined") {
+      const currentLocation = window.location.href;
+
+      router.back();
+
+      setTimeout(() => {
+        if (window.location.href === currentLocation) {
+          router.push("/");
+        }
+      }, 100);
+    }
+  };
+
   const handleUserDelete = (userId: string) => {
     setUsers((prevUsers) => prevUsers.filter((user) => user.id !== userId));
   };
@@ -115,9 +131,7 @@ const Page = () => {
           onChange={(e) => setSearchQuery(e.target.value)}
           className="px-3 py-1 rounded-md bg-gray-800 text-white border border-gray-600 focus:outline-none focus:ring focus:ring-gray-500"
         />
-        <Link href="/admincontrols">
-          <DangerButton buttonText="Go Back" onClick={() => {}} />
-        </Link>
+        <DangerButton buttonText="Go Back" onClick={handleBack} />
       </header>
       <main className="flex-grow w-[95%] mx-auto py-8 bg-[#09090b]">
         <div className="flex flex-col">
@@ -128,7 +142,8 @@ const Page = () => {
               name={filteredUser.name}
               teamName={teamNames[filteredUser.teamId || ""] || "No Team"}
               avatarSrc={
-                (filteredUser.github && `${filteredUser.github}.png`) || ""
+                getImageUrl(filteredUser.imageId, filteredUser.mimeType) ||
+                (filteredUser.github ? `${filteredUser.github}.png` : "")
               }
               userId={filteredUser.id}
               currentUserId={user?.id}

app/api/upload/route.ts

@@ -0,0 +1,128 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Client } from "minio";
+import { writeFile, unlink } from "fs/promises";
+import { join } from "path";
+import { mkdir } from "fs/promises";
+import { v4 as uuidv4 } from "uuid";
+import { existsSync } from "fs";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024;
+const ALLOWED_FILE_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+  "image/svg+xml",
+];
+
+const minioClient = new Client({
+  endPoint: process.env.NEXT_PUBLIC_MINIO_ENDPOINT || "localhost",
+  port: parseInt(process.env.NEXT_PUBLIC_MINIO_PORT || "9000"),
+  useSSL: process.env.NEXT_PUBLIC_MINIO_USE_SSL === "true",
+  accessKey: process.env.NEXT_PUBLIC_MINIO_ACCESS_KEY || "your_access_key",
+  secretKey: process.env.NEXT_PUBLIC_MINIO_SECRET_KEY || "your_secret_key",
+});
+
+const bucketName =
+  process.env.NEXT_PUBLIC_MINIO_BUCKET_NAME || "nextjs-uploads";
+
+const ensureBucket = async () => {
+  const exists = await minioClient.bucketExists(bucketName);
+  if (!exists) {
+    await minioClient.makeBucket(bucketName, "us-east-1");
+  }
+};
+
+const ensureTempDir = async () => {
+  const tempDir = join(process.cwd(), "tmp", "uploads");
+  if (!existsSync(tempDir)) {
+    await mkdir(tempDir, { recursive: true });
+  }
+  return tempDir;
+};
+
+const validateFile = (file: File) => {
+  if (file.size > MAX_FILE_SIZE) {
+    return {
+      valid: false,
+      error: `File size exceeds the maximum limit of 5MB`,
+    };
+  }
+
+  if (!ALLOWED_FILE_TYPES.includes(file.type)) {
+    return {
+      valid: false,
+      error: `File type ${file.type} is not allowed. Allowed types: PNG, JPEG, GIF, WEBP, SVG`,
+    };
+  }
+
+  return { valid: true, error: null };
+};
+
+export async function POST(request: NextRequest) {
+  let filePath = "";
+
+  try {
+    await ensureBucket();
+    const tempDir = await ensureTempDir();
+
+    const formData = await request.formData();
+    const file = formData.get("file") as File | null;
+
+    if (!file) {
+      return NextResponse.json({ error: "No file provided" }, { status: 400 });
+    }
+
+    const validation = validateFile(file);
+    if (!validation.valid) {
+      return NextResponse.json({ error: validation.error }, { status: 400 });
+    }
+
+    const fileExt = file.name.split(".").pop() || "";
+    const fileName = `${uuidv4()}.${fileExt}`;
+
+    filePath = join(tempDir, fileName);
+
+    const bytes = await file.arrayBuffer();
+    const buffer = Buffer.from(bytes);
+    await writeFile(filePath, buffer);
+
+    await minioClient.fPutObject(bucketName, fileName, filePath, {
+      "Content-Type": file.type,
+    });
+
+    await unlink(filePath);
+
+    const fileUrl = `${fileName}`;
+
+    return NextResponse.json({
+      success: true,
+      fileUrl,
+      fileName: file.name,
+      size: file.size,
+      type: file.type,
+      uploadedAt: new Date().toISOString(),
+      message: "File uploaded successfully",
+    });
+  } catch {
+    if (filePath) {
+      try {
+        await unlink(filePath).catch(() => {});
+      } catch {}
+    }
+
+    return NextResponse.json(
+      {
+        success: false,
+        error: "File upload failed",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};