From 043f814aaa8f874ea50649808ef36c445383155f Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 16 Apr 2024 00:50:38 -0400 Subject: [PATCH 1/5] created admin survey ui dashboard --- package-lock.json | 2 +- src/app/survey-info/surveyInfo.module.css | 61 +++++++++++++++++++++++ src/app/survey-info/surveyInfo.tsx | 49 ++++++++++++++++++ 3 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 src/app/survey-info/surveyInfo.module.css create mode 100644 src/app/survey-info/surveyInfo.tsx diff --git a/package-lock.json b/package-lock.json index b02c8b9..5b9a7db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9088,4 +9088,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/app/survey-info/surveyInfo.module.css b/src/app/survey-info/surveyInfo.module.css new file mode 100644 index 0000000..f0663e5 --- /dev/null +++ b/src/app/survey-info/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; +} \ No newline at end of file diff --git a/src/app/survey-info/surveyInfo.tsx b/src/app/survey-info/surveyInfo.tsx new file mode 100644 index 0000000..eeeb151 --- /dev/null +++ b/src/app/survey-info/surveyInfo.tsx @@ -0,0 +1,49 @@ +"use client"; +import Link from "next/link"; +import styles from "./surveyInfo.module.css" +import { useEffect, useState } from "react"; +import { db } from "@/lib/firebase/firebaseConfig"; +import { collection, getDocs } from "firebase/firestore"; +import { Survey } from "@/types/survey-types"; + +export default function SurveyInfoPage(): JSX.Element { + const [surveyList, setSurveyList] = useState([]); + + useEffect(() => { + const fetchSurveys = async () => { + try { + const surveyRef = collection(db, 'surveys'); + const querySnapshot = await getDocs(surveyRef); + const surveysData = querySnapshot.docs.map((doc) => doc.data() as Survey); + setSurveyList(surveysData); + } catch (error) { + console.error("Could not fetch surveys: ", error); + } + }; + + fetchSurveys(); + }, []); + + function handleCreateSurvey() { + /* Implement */ + } + + return ( +
+
+ + {surveyList.map((singleSurvey, i) => ( +
+ View +

{singleSurvey.info && singleSurvey.info.title}

+ +
+ ))} + +
+ +
+
+
+ ); +} \ No newline at end of file From 3c8914fb946e37623065b9a3589a67063870a804 Mon Sep 17 00:00:00 2001 From: Nitin Kanchinadam Date: Wed, 24 Apr 2024 21:33:25 -0400 Subject: [PATCH 2/5] created endpoint for getting all surveys --- src/app/api/surveys/route.ts | 11 ++++++++++- src/lib/firebase/database/surveys.ts | 16 +++++++++++++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/app/api/surveys/route.ts b/src/app/api/surveys/route.ts index c005187..41d09d0 100644 --- a/src/app/api/surveys/route.ts +++ b/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(); diff --git a/src/lib/firebase/database/surveys.ts b/src/lib/firebase/database/surveys.ts index ec9e16f..8419d0b 100644 --- a/src/lib/firebase/database/surveys.ts +++ b/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,20 @@ export async function updateSurvey(id: string) { } } +export async function getAllSurveys() { + try { + const surveySnapshot = await getDocs(collection(db, 'surveys')); + const allSurveys: Survey[] = []; + surveySnapshot.forEach((doc) => { + allSurveys.push(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)); From 402a77302bd86fcd57ba69d7e33afdccd4c25868 Mon Sep 17 00:00:00 2001 From: Nitin Kanchinadam Date: Thu, 25 Apr 2024 22:51:24 -0400 Subject: [PATCH 3/5] updated the SurveyInfoPage component to use fetch, open the correct link, and display a loading message --- ...o.module.css => SurveyInfoPage.module.css} | 0 src/app/survey-info/page.tsx | 59 +++++++++++++++++++ src/app/survey-info/surveyInfo.tsx | 49 --------------- 3 files changed, 59 insertions(+), 49 deletions(-) rename src/app/survey-info/{surveyInfo.module.css => SurveyInfoPage.module.css} (100%) create mode 100644 src/app/survey-info/page.tsx delete mode 100644 src/app/survey-info/surveyInfo.tsx diff --git a/src/app/survey-info/surveyInfo.module.css b/src/app/survey-info/SurveyInfoPage.module.css similarity index 100% rename from src/app/survey-info/surveyInfo.module.css rename to src/app/survey-info/SurveyInfoPage.module.css diff --git a/src/app/survey-info/page.tsx b/src/app/survey-info/page.tsx new file mode 100644 index 0000000..3672dbe --- /dev/null +++ b/src/app/survey-info/page.tsx @@ -0,0 +1,59 @@ +"use client"; +import Link from "next/link"; +import styles from "./surveyInfoPage.module.css"; +import { useEffect, useState } from "react"; +import { Survey } from "@/types/survey-types"; + +export default function SurveyInfoPage(): JSX.Element { + const [isLoading, setIsLoading] = useState(true); + const [surveyList, setSurveyList] = useState([]); + const [isCreateSurveyOpen, setIsCreateSurveyOpen] = useState(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 ( +
+
+ {isLoading ? ( +
+

Fetching Data!

+
+ ) : ( + surveyList.map((singleSurvey, i) => ( +
+ + View + +

+ {singleSurvey.info && singleSurvey.info.title} +

+ +
+ )) + )} + +
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/src/app/survey-info/surveyInfo.tsx b/src/app/survey-info/surveyInfo.tsx deleted file mode 100644 index eeeb151..0000000 --- a/src/app/survey-info/surveyInfo.tsx +++ /dev/null @@ -1,49 +0,0 @@ -"use client"; -import Link from "next/link"; -import styles from "./surveyInfo.module.css" -import { useEffect, useState } from "react"; -import { db } from "@/lib/firebase/firebaseConfig"; -import { collection, getDocs } from "firebase/firestore"; -import { Survey } from "@/types/survey-types"; - -export default function SurveyInfoPage(): JSX.Element { - const [surveyList, setSurveyList] = useState([]); - - useEffect(() => { - const fetchSurveys = async () => { - try { - const surveyRef = collection(db, 'surveys'); - const querySnapshot = await getDocs(surveyRef); - const surveysData = querySnapshot.docs.map((doc) => doc.data() as Survey); - setSurveyList(surveysData); - } catch (error) { - console.error("Could not fetch surveys: ", error); - } - }; - - fetchSurveys(); - }, []); - - function handleCreateSurvey() { - /* Implement */ - } - - return ( -
-
- - {surveyList.map((singleSurvey, i) => ( -
- View -

{singleSurvey.info && singleSurvey.info.title}

- -
- ))} - -
- -
-
-
- ); -} \ No newline at end of file From d75eb2f018b6bb182bed005ab85c0c37e9f4c27c Mon Sep 17 00:00:00 2001 From: Nitin Kanchinadam Date: Thu, 25 Apr 2024 22:52:08 -0400 Subject: [PATCH 4/5] used map instead of forEach in getAllSurveys --- src/lib/firebase/database/surveys.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/lib/firebase/database/surveys.ts b/src/lib/firebase/database/surveys.ts index 8419d0b..2855605 100644 --- a/src/lib/firebase/database/surveys.ts +++ b/src/lib/firebase/database/surveys.ts @@ -48,10 +48,7 @@ export async function updateSurvey(id: string) { export async function getAllSurveys() { try { const surveySnapshot = await getDocs(collection(db, 'surveys')); - const allSurveys: Survey[] = []; - surveySnapshot.forEach((doc) => { - allSurveys.push(doc.data() as Survey); - }); + const allSurveys: Survey[] = surveySnapshot.docs.map((doc) => doc.data() as Survey); return allSurveys; } catch (error) { console.error('unable to get all surveys'); From 4f4ee4799a07431b0ddf3db0943ef9d3b6f79882 Mon Sep 17 00:00:00 2001 From: Nitin Kanchinadam Date: Thu, 25 Apr 2024 22:54:31 -0400 Subject: [PATCH 5/5] moved SurveyInfo component to components folder --- .../SurveyInfo.module.css} | 0 src/{app/survey-info/page.tsx => components/SurveyInfo.tsx} | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/{app/survey-info/SurveyInfoPage.module.css => components/SurveyInfo.module.css} (100%) rename src/{app/survey-info/page.tsx => components/SurveyInfo.tsx} (93%) diff --git a/src/app/survey-info/SurveyInfoPage.module.css b/src/components/SurveyInfo.module.css similarity index 100% rename from src/app/survey-info/SurveyInfoPage.module.css rename to src/components/SurveyInfo.module.css diff --git a/src/app/survey-info/page.tsx b/src/components/SurveyInfo.tsx similarity index 93% rename from src/app/survey-info/page.tsx rename to src/components/SurveyInfo.tsx index 3672dbe..0575f89 100644 --- a/src/app/survey-info/page.tsx +++ b/src/components/SurveyInfo.tsx @@ -1,10 +1,10 @@ "use client"; import Link from "next/link"; -import styles from "./surveyInfoPage.module.css"; +import styles from "./SurveyInfo.module.css"; import { useEffect, useState } from "react"; import { Survey } from "@/types/survey-types"; -export default function SurveyInfoPage(): JSX.Element { +export default function SurveyInfo(): JSX.Element { const [isLoading, setIsLoading] = useState(true); const [surveyList, setSurveyList] = useState([]); const [isCreateSurveyOpen, setIsCreateSurveyOpen] = useState(false);