-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #111 from cs3216-a3-group-4/chloe/we-are-so-screwed
feat: workflow 2
- Loading branch information
Showing
13 changed files
with
2,061 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,179 @@ | ||
"use client"; | ||
|
||
import Link from "next/link"; | ||
import { useQuery } from "@tanstack/react-query"; | ||
import { | ||
BookOpenTextIcon, | ||
FileSymlinkIcon, | ||
SparkleIcon, | ||
ZapIcon, | ||
} from "lucide-react"; | ||
|
||
import Chip from "@/components/display/chip"; | ||
import { | ||
Accordion, | ||
AccordionContent, | ||
AccordionItem, | ||
AccordionTrigger, | ||
} from "@/components/ui/accordion"; | ||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; | ||
import { Button } from "@/components/ui/button"; | ||
import { LoadingSpinner } from "@/components/ui/loading-spinner"; | ||
import { getAnswer } from "@/queries/user-question"; | ||
|
||
const AnswerPage = ({ params }: { params: { id: string } }) => { | ||
const id = parseInt(params.id); | ||
const { data, isFetching } = useQuery(getAnswer(id)); | ||
|
||
if (isFetching) { | ||
return ( | ||
<div className="flex justify-center items-center w-full"> | ||
<LoadingSpinner className="w-24 h-24" /> | ||
</div> | ||
); | ||
} | ||
return ( | ||
// TODO: @seeleng scroll to top | ||
data && ( | ||
<div className="flex flex-col bg-muted w-full h-full max-h-full px-4 md:px-8 xl:px-24 overflow-y-auto"> | ||
<div className="flex flex-col pb-4 mb-4 py-8 xl:py-16 max-w-6xl md:mx-8 lg:mx-16 xl:mx-auto"> | ||
<h1 className="px-8 md:px-0 text-2xl lg:text-3x xl:text-4xl font-semibold text-text mb-10 2xl:mb-12"> | ||
{data.question} | ||
</h1> | ||
<div className="flex flex-col"> | ||
<Accordion className="flex flex-col gap-y-4" type="multiple"> | ||
{/* TODO @seeleng: sort by position? for arguments first? */} | ||
{data.answer.points.map((point) => { | ||
const pointHasAnalysis = point.point_analysises.length > 0; | ||
return ( | ||
<AccordionItem | ||
className="border border-primary/15 rounded-lg px-8 py-2 2xl:px-12 2xl:py-6 bg-background" | ||
key={point.id} | ||
value={point.id.toString()} | ||
> | ||
<AccordionTrigger | ||
chevronClassName="h-6 w-6 stroke-[2.5] ml-4" | ||
className="text-lg lg:text-xl 2xl:text-2xl text-primary font-medium text-start hover:no-underline pt-4 pb-6" | ||
> | ||
<div className="flex flex-col"> | ||
<Chip | ||
// TODO @seeleng: my tag not centered pls fix thanku :clown: | ||
className="flex mb-4 w-fit max-w-full 2xl:text-xl" | ||
label={point.positive ? "For" : "Against"} | ||
size="lg" | ||
variant={point.positive ? "secondary" : "accent"} | ||
/> | ||
<span className="inline-block text-primary-900 hover:text-primary-900/80"> | ||
{point.title} | ||
</span> | ||
</div> | ||
</AccordionTrigger> | ||
<AccordionContent> | ||
<div className="border-t-[0.5px] border-primary-600 mt-2 pt-4 2xl:pt-8"> | ||
<span className="flex items-center text-lg 2xl:text-2xl px-6 2xl:px-10 pb-2 2xl:pb-0 pt-2"> | ||
<BookOpenTextIcon | ||
className="inline-flex mr-3" | ||
size={20} | ||
strokeWidth={1.6} | ||
/> | ||
<h2>Jippy Examples</h2> | ||
</span> | ||
|
||
{pointHasAnalysis ? ( | ||
<Accordion className="" type="multiple"> | ||
{/* TODO: get confidence score, sort and bucket */} | ||
{point.point_analysises.map( | ||
(point_analysis, index) => { | ||
const { analysis, elaboration } = | ||
point_analysis; | ||
const { id: analysisId, event } = analysis; | ||
return ( | ||
<AccordionItem | ||
className="py-2 2xl:py-4 px-6 2xl:px-10" | ||
key={analysisId} | ||
value={analysisId.toString()} | ||
> | ||
<AccordionTrigger | ||
chevronClassName="ml-4" | ||
className="text-start text-lg xl:text-xl 3xl:text-2xl text-primary-alt-800 font-medium" | ||
> | ||
{index + 1}. {event.title} | ||
</AccordionTrigger> | ||
<AccordionContent className="flex flex-col gap-y-8 2xl:gap-y-12 text-lg 2xl:text-xl 3xl:text-2xl py-2 2xl:py-4"> | ||
<div className="flex flex-col gap-y-4 text-text-muted/80"> | ||
<div className="flex justify-between items-baseline"> | ||
<span className="font-medium text-lg 2xl:text-xl text-text-muted/80"> | ||
<ZapIcon | ||
className="inline-flex mr-3" | ||
size={20} | ||
/> | ||
Event summary | ||
</span> | ||
<Link | ||
href={`/events/${point_analysis.analysis.event.id}`} | ||
> | ||
<Button | ||
className="h-8 w-fit text-text-muted mt-2" | ||
size="sm" | ||
variant="outline" | ||
> | ||
<FileSymlinkIcon className="h-4 w-4 mr-2" /> | ||
Read more | ||
</Button> | ||
</Link> | ||
</div> | ||
<blockquote className="border-l-2 pl-6 italic text-text-muted 2xl:text-2xl tracking-wide"> | ||
{event.description} | ||
</blockquote> | ||
</div> | ||
|
||
<div className="flex flex-col gap-y-4 mb-4"> | ||
<span className="font-medium text-lg 2xl:text-xl text-text-muted/80"> | ||
<SparkleIcon | ||
className="inline-flex mr-3" | ||
size={20} | ||
/> | ||
Possible argument | ||
</span> | ||
<p className="tracking-wide"> | ||
{elaboration} | ||
</p> | ||
</div> | ||
</AccordionContent> | ||
</AccordionItem> | ||
); | ||
}, | ||
)} | ||
</Accordion> | ||
) : ( | ||
<Alert className="p-8 bg-accent-100/20"> | ||
<AlertTitle className="font-medium text-lg"> | ||
Jippy couldn't find relevant examples but has | ||
some pointers! | ||
</AlertTitle> | ||
<AlertDescription className="flex flex-col gap-4 text-lg mt-6"> | ||
<h1 className=""> | ||
{point.fallback?.general_argument ?? | ||
"No relevant analysis found"} | ||
</h1> | ||
<h1> | ||
{point.fallback?.alt_approach ?? | ||
"No relevant analysis found"} | ||
</h1> | ||
</AlertDescription> | ||
</Alert> | ||
)} | ||
</div> | ||
</AccordionContent> | ||
</AccordionItem> | ||
); | ||
})} | ||
</Accordion> | ||
</div> | ||
</div> | ||
</div> | ||
) | ||
); | ||
}; | ||
|
||
export default AnswerPage; |
Oops, something went wrong.