Skip to content

Commit 9081359

Browse files
avenmiaavenmia
authored
Adding initial summary page (#215)
* Adding initial summary page * Fixing styling * Adding island and county areas * Code cleanup
1 parent c9eb858 commit 9081359

5 files changed

Lines changed: 201 additions & 1 deletion

File tree

‎src/components/ProgressBar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const ProgressBar = ({ completed }: ProgressBarProps) => {
1111
backgroundColor: "yellowGreen",
1212
borderRadius: "inherit",
1313
transition: "width 1s ease-in-out",
14+
minHeight: "100%",
1415
};
1516

1617
return (

‎src/components/SummaryQuestionAnswer.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Key } from "react";
2+
3+
interface SummaryQuestionAnswerProps {
4+
question: string;
5+
answer: string;
6+
key?: Key;
7+
}
8+
9+
export default function SummaryQuestionAnswer({
10+
question,
11+
answer,
12+
key,
13+
}: SummaryQuestionAnswerProps) {
14+
return (
15+
<li key={key} className="mt-2">
16+
<h3 className="font-medium text-gray">{question}</h3>
17+
<p className="text-black">{answer}</p>
18+
</li>
19+
);
20+
}

‎src/components/survey/demographicssurvey.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export default function DemographicsSurvey() {
172172
>
173173
Retake demographic survey
174174
</button>
175-
<Link href={{ pathname: "./polis" }}>
175+
<Link href={{ pathname: "./querysummary" }}>
176176
<button
177177
className="mb-1 mt-4 flex flex-row items-center justify-center gap-1 rounded-full border-2
178178
border-dashed border-lightGreen bg-yellowGreen px-6 py-1 text-right text-lg text-blue-darker no-underline shadow-xl transition ease-in-out

‎src/pages/querysummary.tsx‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { type NextPage } from "next";
2+
import ProgressBar from "../components/ProgressBar";
3+
import { useEffect, useState } from "react";
4+
import { SurveyData } from "../components/survey/demographicssurvey";
5+
import { api } from "../utils/api";
6+
import Link from "next/link";
7+
import SummaryQuestionAnswer from "../components/SummaryQuestionAnswer";
8+
9+
const QuerySummary: NextPage = () => {
10+
const [userCensusTract, setUserCensusTract] = useState<string>("");
11+
const [userZipCode, setUserZipCode] = useState<string>("");
12+
const [userPlanningRegion, setUserPlanningRegion] = useState<string>("");
13+
const [userIsland, setUserIsland] = useState<string>("");
14+
const [userCounty, setUserCounty] = useState<string>("");
15+
const [demographicQuestions, setDemographicQuestions] = useState<
16+
SurveyData[]
17+
>([]);
18+
const [userDemoSurveyAnswers, setUserDemoSurveyAnswers] = useState<string[]>(
19+
[]
20+
);
21+
22+
const userCensusTractDB = api.user.getCensusTract.useQuery();
23+
const userZipCodeDB = api.zipcode.getUserZipCode.useQuery();
24+
const planningRegionDB = api.user.getPlanningRegion.useQuery();
25+
const demographicQuestionsDB = api.survey.getSurveyData.useQuery();
26+
const userDemoSurveyAnswersDB = api.user.getDemoSurveyAnswers.useQuery();
27+
28+
useEffect(() => {
29+
if (userCensusTractDB && userCensusTractDB.data) {
30+
if (userCensusTractDB.data.censustract !== null) {
31+
setUserCensusTract(userCensusTractDB.data?.censustract);
32+
}
33+
}
34+
if (userZipCodeDB && userZipCodeDB.data) {
35+
if (userZipCodeDB.data.zipcode !== null) {
36+
setUserZipCode(userZipCodeDB.data?.zipcode);
37+
}
38+
}
39+
if (planningRegionDB && planningRegionDB.data) {
40+
if (planningRegionDB.data.planningRegion !== null) {
41+
const [islandData, countyData, planningRegionData] =
42+
planningRegionDB.data.planningRegion.split(",");
43+
setUserIsland(islandData ?? "");
44+
setUserCounty(countyData ?? "");
45+
setUserPlanningRegion(planningRegionData ?? "");
46+
}
47+
}
48+
}, [
49+
userCensusTractDB.data?.censustract,
50+
userZipCodeDB.data?.zipcode,
51+
planningRegionDB.data?.planningRegion,
52+
]);
53+
54+
const sortedDemoQuestions =
55+
demographicQuestionsDB.data?.sort((a, b) => {
56+
return a.position - b.position;
57+
}) ?? [];
58+
59+
const sortedAnswers = userDemoSurveyAnswersDB.data?.sort((a, b) => {
60+
const questionIdA = Number(a.questionId);
61+
const questionIdB = Number(b.questionId);
62+
return questionIdA - questionIdB;
63+
});
64+
65+
const answersResult = sortedAnswers?.reduce((acc, answer) => {
66+
if (acc[answer.questionId] === undefined) {
67+
acc[answer.questionId] = answer.answerValue;
68+
} else {
69+
acc[answer.questionId] += ", " + answer.answerValue;
70+
}
71+
return acc;
72+
}, {} as Record<string, string>);
73+
74+
return (
75+
<div className="flex h-screen flex-col items-center justify-center">
76+
<div className="flex h-full flex-col items-center">
77+
<h1 className="mb-8 text-lg font-semibold text-white md:mt-6 md:text-3xl">
78+
Demographic Information Summary
79+
</h1>
80+
<div>
81+
<ProgressBar completed={85} />
82+
</div>
83+
<Link href={{ pathname: "./polis" }}>
84+
<button
85+
className="mb-1 mt-4 flex flex-row items-center justify-center gap-1 rounded-full border-2
86+
border-dashed border-lightGreen bg-yellowGreen px-6 py-1 text-right text-lg text-blue-darker no-underline shadow-xl transition ease-in-out
87+
hover:translate-y-1 hover:bg-lightGreen"
88+
>
89+
Continue
90+
</button>
91+
</Link>
92+
<div className="mt-8 flex flex-col rounded-md bg-[#FFFFFF] px-8 py-8 shadow-xl sm:w-[300px] md:w-[500px] lg:w-[600px]">
93+
<div className="flex w-[80%] flex-col items-center">
94+
<div className="mb-4 self-start">
95+
<h2 className="text-lg font-semibold ">Location Questions</h2>
96+
<ul>
97+
<SummaryQuestionAnswer
98+
question={"Census tract"}
99+
answer={userCensusTract}
100+
/>
101+
<SummaryQuestionAnswer
102+
question={"ZIP Code"}
103+
answer={userZipCode}
104+
/>
105+
<SummaryQuestionAnswer
106+
question={"Island"}
107+
answer={userIsland}
108+
/>
109+
<SummaryQuestionAnswer
110+
question={"County"}
111+
answer={userCounty}
112+
/>
113+
<SummaryQuestionAnswer
114+
question={"Planning Region"}
115+
answer={userPlanningRegion}
116+
/>
117+
</ul>
118+
</div>
119+
<div>
120+
<h2 className="text-lg font-semibold ">Demographic Questions</h2>
121+
<ul className="">
122+
{sortedDemoQuestions.map((question, index) => {
123+
let userAnswer = "No Answer";
124+
if (answersResult) {
125+
userAnswer = answersResult[index + 1] ?? "No answer";
126+
}
127+
return (
128+
<SummaryQuestionAnswer
129+
question={question.question}
130+
answer={`Answer: ${userAnswer}`}
131+
key={`question-${index}`}
132+
/>
133+
);
134+
})}
135+
</ul>
136+
</div>
137+
</div>
138+
</div>
139+
<div className="grid grid-cols-1 pb-[50px] md:grid-cols-2">
140+
<div className="flex flex-col justify-start">
141+
<Link href={{ pathname: "./address" }}>
142+
<button className="mb-1 mt-4 flex flex-row items-center justify-center gap-1 rounded-full bg-white/70 px-4 py-1 text-lg text-blue-darker no-underline shadow-xl transition ease-in-out hover:translate-y-1 hover:bg-white">
143+
Re-enter Address
144+
</button>
145+
</Link>
146+
<Link href={{ pathname: "./survey" }}>
147+
<button className="mb-1 mt-4 flex flex-row items-center justify-center gap-1 rounded-full bg-white/70 px-4 py-1 text-lg text-blue-darker no-underline shadow-xl transition ease-in-out hover:translate-y-1 hover:bg-white">
148+
Retake Demographic Survey
149+
</button>
150+
</Link>
151+
</div>
152+
<div className="flex justify-end">
153+
<Link href={{ pathname: "./polis" }}>
154+
<button
155+
className="mb-1 mt-4 flex flex-row items-center justify-center gap-1 rounded-full border-2
156+
border-dashed border-lightGreen bg-yellowGreen px-6 py-1 text-right text-lg text-blue-darker no-underline shadow-xl transition ease-in-out
157+
hover:translate-y-1 hover:bg-lightGreen"
158+
>
159+
Continue
160+
</button>
161+
</Link>
162+
</div>
163+
</div>
164+
</div>
165+
</div>
166+
);
167+
};
168+
169+
export default QuerySummary;

‎src/server/api/routers/user.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,4 +104,14 @@ export const userRouter = createTRPCRouter({
104104
},
105105
});
106106
}),
107+
getDemoSurveyAnswers: publicProcedure.query(async ({ ctx }) => {
108+
if (!ctx.session) {
109+
console.log("Not authenticated");
110+
return null;
111+
}
112+
const { id: userId } = ctx.session.user;
113+
return ctx.prisma.userSurveyAnswers.findMany({
114+
where: { userId: userId },
115+
});
116+
}),
107117
});

0 commit comments

Comments
 (0)