Merge pull request #33 from Hack4Impact-UMD/student-dashboard

UI for Student dashboard

package.json

@@ -13,6 +13,7 @@
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@google-cloud/pubsub": "^4.3.3",
     "@googleapis/forms": "^2.0.5",
+    "@headlessui/react": "^1.7.18",
     "@types/nodemailer": "^6.4.14",
     "canvas": "^2.11.2",
     "firebase": "^10.8.1",

src/app/api/surveys/[surveyId]/route.ts

@@ -8,7 +8,7 @@ export async function GET(
   const { surveyId } = params;
   try {
     const survey = await getSurveyByID(surveyId);
-    return NextResponse.json({ data: survey }, { status: 200 });
+    return NextResponse.json(survey, { status: 200 });
   } catch (err) {
     return NextResponse.json(
       { error: "error getting survey by id" },

src/app/api/users/[userId]/route.ts

@@ -10,8 +10,8 @@ export async function GET(
   const userid = params.userId;
 
   try {
-    const result = await getAccountById(userid);
-    return NextResponse.json({ result }, { status: 200 });
+    const user = await getAccountById(userid);
+    return NextResponse.json(user, { status: 200 });
   } catch {
     return NextResponse.json(
       { error: "Error with Getting the Account Via the Given ID" },

src/app/student-dashboard/StudentDashboard.module.css

@@ -0,0 +1,122 @@
+.container {
+    display: flex;
+    min-height: 100vh;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.sidebar {
+    flex: 0 0 22%;
+    display: flex;
+    background-color: #D0D12A;
+    flex-direction: column;
+    min-height: 100%;
+    position: relative;
+    min-width: 300px;
+    max-width: 300px;
+}
+
+.img {
+    height: 100px;
+    width: 300px;
+    display: block;
+    margin: 10% auto;
+}
+
+.info {
+    display: block;
+    margin-left: 10%;
+    margin-right: 10%;
+    text-decoration: none;
+    color: black;
+    font-size: 20px;
+}
+
+.settingButton {
+    background-color: #D9D9D9;
+    border: none;
+    border-radius: 15px;
+    text-align: center;
+    font-size: 20px;
+    display: block;
+    padding: 10px 15px;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.logOut {
+    text-decoration: none;
+    color: black;
+    font-size: 20px;
+    display: block;
+    margin: 0 10%;
+    margin-bottom: 10%;
+    position: absolute;
+    bottom: 0;
+}
+
+.mainContent {
+    flex: 1;
+    background-color: #295972;
+    min-width: 320px;
+    box-sizing: border-box;
+    padding: 20px 5%;
+}
+
+.surveyTitle {
+    color: white;
+    font-size: 30px;
+    margin-bottom: 5px;
+}
+
+.horizontalLine {
+    border: 1px solid white;
+    width: auto;
+}
+
+.surveyContainer {
+    background-color: white;
+    color: black;
+    border-radius: 25px;
+    padding: 0px;
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.assignedSurveyButton, .completedSurveyButton {
+    border: none;
+    border-radius: 25px;
+    width: 100%;
+    padding: 10px;
+    padding-left: 25px;
+    display: inline-block;
+    font-size: 18px;
+    text-align: left;
+    position: relative;
+}
+
+.vector {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.completedSurveyButton {
+    background-color: #D0D12A;
+    width: 96%;
+    margin-bottom: 10px;
+}
+
+.assignedSurveyPanel {
+    width: 100%;
+}
+
+.form {
+    margin-top: 1%;
+    width: 95%;
+    height: 600px;
+}

src/app/student-dashboard/page.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import styles from "./StudentDashboard.module.css";
+import CompanyLogo from "@/../public/images/logo.svg";
+import UpArrow from '@/../public/icons/up-arrow-icon.png'
+import DownArrow from '@/../public/icons/down-arrow-icon.png'
+import Image from "next/image"
+import Link from "next/link"
+import React, { useState, useEffect } from "react";
+import { User } from "@/types/user-types";
+import { Survey, Response } from '@/types/survey-types';
+import { auth } from '@/lib/firebase/firebaseConfig';
+
+export default function StudentDashboard() {
+    const [user, setUser] = useState<User | null>(null);
+    const [surveys, setSurveys] = useState<Survey[]>([]);
+    const [responses, setResponses] = useState<string[]>([]);
+    const [openSurvey, setOpenSurvey] = useState('');
+
+    const fetchCurrentUserData = async (userId: string) => {
+      try {
+        const res = await fetch(`/api/users/${userId}`);
+        const user: User = await res.json();
+        setUser(user);
+
+        Promise.all(user.assignedSurveys.map(surveyId => fetch(`/api/surveys/${surveyId}`))).then(responses => {
+          Promise.all(responses.map(res => res.json())).then((surveys: Survey[]) => {
+            setSurveys(surveys);
+          })
+        })
+
+        Promise.all(user.completedResponses.map(responseId => fetch(`/api/responses/${responseId}`))).then(responses => {
+          Promise.all(responses.map(res => res.json())).then((responses: Response[]) => {
+            setResponses(responses.map(response => response.formTitle))
+          })
+        })
+      } catch (error) {
+        console.error(error);
+        throw new Error('unable to fetch data for student dashboard');
+      }
+    }
+
+    useEffect(() => {
+        const user = auth.currentUser;
+        if (user) {
+            fetchCurrentUserData(user.uid);
+        } else {
+            console.log('no signed-in user');
+        }
+    }, []);
+
+    const handleSurveyButtonClick = (surveyId: string) => {
+        setOpenSurvey(surveyId === openSurvey ? '' : surveyId);
+    };
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.sidebar}>
+          <Image src={CompanyLogo} alt="Company Logo" className={styles.img} />
+          <p className={styles.info}>
+            Student ID: {user?.id || "No user ID found"}
+          </p>
+          <button className={styles.settingButton}>Settings</button>
+          <Link href="/" className={styles.logOut}>
+            Log Out
+          </Link>
+        </div>
+        <div className={styles.mainContent}>
+          <p className={styles.surveyTitle}>Available Surveys</p>
+          <hr className={styles.horizontalLine} />
+          {surveys.map((survey) => (
+            <div key={survey.formId} className={styles.surveyContainer}>
+              <button
+                onClick={() => handleSurveyButtonClick(survey.formId)}
+                className={styles.assignedSurveyButton}
+              >
+                {survey.info.title}
+                <Image
+                  src={openSurvey === survey.formId ? DownArrow : UpArrow}
+                  alt={openSurvey === survey.formId ? "DownArrow" : "UpArrow"}
+                  className={styles.vector}
+                />
+              </button>
+              {openSurvey === survey.formId && (
+                <iframe
+                  key={survey.formId}
+                  src={survey.responderUri}
+                  title={survey.info.title}
+                  allowFullScreen={true}
+                  className={styles.form}
+                />
+              )}
+            </div>
+          ))}
+          <p className={styles.surveyTitle}>Completed Surveys</p>
+          <hr className={styles.horizontalLine} />
+          {responses.map((response) => (
+            <span key={response} className={styles.completedSurveyButton}>
+              {response}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+}

src/types/survey-types.ts

@@ -29,6 +29,7 @@ export interface GoogleFormResponse {
 
 export interface Response extends GoogleFormResponse {
   userId: string;
+  formTitle: string;
 }
 
 // Info and settings