created admin survey ui dashboard

src/app/api/surveys/route.ts

@@ -1,5 +1,14 @@
 import { NextRequest, NextResponse } from "next/server";
-import { createSurvey } from "@/lib/firebase/database/surveys";
+import { createSurvey, getAllSurveys } from "@/lib/firebase/database/surveys";
+
+export async function GET() {
+  try {
+    const allSurveys = await getAllSurveys();
+    return NextResponse.json({ surveys: allSurveys }, { status: 200 });
+  } catch (error) {
+    return NextResponse.json({ error: 'error getting all surveys' }, { status: 500 })
+  }
+}
 
 export async function POST(req: NextRequest) {
   const body = await req.json();

src/components/SurveyInfo.module.css

@@ -0,0 +1,61 @@
+.mainContainer {
+    padding: 5px;
+    background-color:#D9D9D9;
+    height: fit-content;
+}
+
+.container {
+    background-color: #35627A;
+    padding: 30px;
+    border-radius: 15px;
+    margin: 25px;
+}
+
+.box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background-color:#D9D9D9;
+    margin-top: 20px;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.view {
+    width: calc(100%/3);
+    font-weight: 600;
+}
+
+.survey {
+    width: calc(100%/3);
+}
+
+.export {
+    width: calc(100%/3);
+    border-style: none;
+    background-color: transparent;
+    font-weight: 600;
+}
+
+.btnContainer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.createSurvey {
+    font-weight: 600;
+    border-radius: 10px;
+    width: fit-content;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    font-size: 20px;
+    margin-top: 30px;
+    border-style: none;
+}
+
+.createSurvey:hover, .export:hover {
+    cursor: pointer;
+}

src/components/SurveyInfo.tsx

@@ -0,0 +1,59 @@
+"use client";
+import Link from "next/link";
+import styles from "./SurveyInfo.module.css";
+import { useEffect, useState } from "react";
+import { Survey } from "@/types/survey-types";
+
+export default function SurveyInfo(): JSX.Element {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [surveyList, setSurveyList] = useState<Survey[]>([]);
+  const [isCreateSurveyOpen, setIsCreateSurveyOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    fetch("/api/surveys").then((res) => {
+      res.json().then((data) => {
+        setSurveyList(data.surveys);
+        setIsLoading(false);
+      });
+    });
+  }, []);
+
+  function handleCreateSurvey() {
+    setIsCreateSurveyOpen(true);
+    /* TODO: integrate Create Survey component here */
+  }
+
+  return (
+    <div className={styles.mainContainer}>
+      <div className={styles.container}>
+        {isLoading ? (
+          <div className={styles.box}>
+            <p className={styles.survey}>Fetching Data!</p>
+          </div>
+        ) : (
+          surveyList.map((singleSurvey, i) => (
+            <div key={i} className={styles.box}>
+              <Link
+                href={singleSurvey.responderUri}
+                target="_blank"
+                className={styles.view}
+              >
+                View
+              </Link>
+              <p className={styles.survey}>
+                {singleSurvey.info && singleSurvey.info.title}
+              </p>
+              <button className={styles.export}>Export</button>
+            </div>
+          ))
+        )}
+
+        <div className={styles.btnContainer}>
+          <button className={styles.createSurvey} onClick={handleCreateSurvey}>
+            Create Survey +
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/lib/firebase/database/surveys.ts

@@ -1,7 +1,7 @@
 import { Survey } from '@/types/survey-types';
 import { forms } from '../../googleAuthorization';
 import { db } from "../firebaseConfig";
-import { doc, getDoc, setDoc } from 'firebase/firestore';
+import { collection, doc, getDoc, getDocs, setDoc } from 'firebase/firestore';
 
 export async function createSurvey(body: {title: string, documentTitle: string}) {
   let form = null;
@@ -45,6 +45,17 @@ export async function updateSurvey(id: string) {
   }
 }
 
+export async function getAllSurveys() {
+  try {
+    const surveySnapshot = await getDocs(collection(db, 'surveys'));
+    const allSurveys: Survey[] = surveySnapshot.docs.map((doc) => doc.data() as Survey);
+    return allSurveys;
+  } catch (error) {
+    console.error('unable to get all surveys');
+    throw new Error('unable to get surveys');
+  }
+}
+
 export async function getSurveyByID(id: string) {
   try {
     const snapshot = await getDoc(doc(db, 'surveys', id));