From e19b5f99377ec7046ffd90693b4fe41f97015ee9 Mon Sep 17 00:00:00 2001
From: ZeendaBean24 <liuzeen999@gmail.com>
Date: Thu, 16 Jan 2025 20:56:30 -0500
Subject: [PATCH] refactor: fix faq not loading and use static data instead

---
 src/routes/(other)/faq/+page.svelte | 184 ++++++++++++++++------------
 1 file changed, 105 insertions(+), 79 deletions(-)

diff --git a/src/routes/(other)/faq/+page.svelte b/src/routes/(other)/faq/+page.svelte
index 72aaf9fc..c1ab5fd9 100644
--- a/src/routes/(other)/faq/+page.svelte
+++ b/src/routes/(other)/faq/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import LargeAccordion from "$lib/components/LargeAccordion.svelte";
 	import DOMPurify from "dompurify";
 
+	// Static FAQ data
 	interface FAQRecord {
 		question: string;
 		answer: string;
@@ -12,28 +12,76 @@
 		[category: string]: FAQRecord[];
 	};
 
-	let faqByCategories: FAQCategories | null = null;
-	let loading = true;
-	let error = "";
-
-	onMount(async () => {
-		try {
-			const response = await fetch("./faqData.json");
-			if (!response.ok) {
-				throw new Error("Failed to load FAQ data");
+	const faqByCategories: FAQCategories = {
+		"General": [
+			{
+				question: "What is WAC?",
+				answer: "The World Affairs Conference (WAC) is Canada’s oldest annual student-run conference on current affairs. WAC annually connects over 2000 students, with a common interest in current affairs, from across the globe."
+			},
+			{
+				question: "Where is WAC?",
+				answer: "WAC is held at Upper Canada College (200 Lonsdale Road) in Toronto, Canada."
+			},
+			{
+				question: "Who makes WAC happen?",
+				answer: "A team of around 100 dedicated high school students from Upper Canada College and Branksome Hall voluntarily work for many months leading up to the day of the conference to ensure that WAC is a success and that everyone who attends has a positive and valuable experience."
+			},
+			{
+				question: "When is WAC?",
+				answer: "WAC 2025 will be held on Wednesday, March 5th, 2025. It is an event that runs all day, filled with exciting and thoughtful discussions as well as networking opportunities."
+			},
+			{
+				question: "Who can attend WAC?",
+				answer: "Any high school student can attend WAC. If you are interested in attending the conference, please contact a school teacher and ask them to reach out to wac@ucc.on.ca."
+			}
+		],
+		"Registration": [
+			{
+				question: "How much does WAC cost?",
+				answer: "More details will be shared soon!"
+			},
+			{
+				question: "When is registration due?",
+				answer: "More details will be shared soon!"
+			},
+			{
+				question: "How can I register my school?",
+				answer: "More details will be shared soon!"
+			},
+			{
+				question: "What should I do if I encounter problems during registration?",
+				answer: "More details will be shared soon!"
+			}
+		],
+		"Keynote Address": [
+			{
+				question: "What happens during the Keynote Address?",
+				answer: "On the day of the conference, there will be an Opening and Closing Keynote address, and a prominent member of the community will give a keynote on current affairs. The Keynote Address will also feature a Q&A session."
+			},
+			{
+				question: "When does the Keynote Address start?",
+				answer: "The registration dashboard will show keynote and plenary times, locations, and speaker details."
+			},
+			{
+				question: "Who can attend the Keynote Address?",
+				answer: "Everybody is invited to come to the Opening and Closing Keynotes."
 			}
-			const data: FAQCategories = await response.json();
-			faqByCategories = data;
-		} catch (err: unknown) {
-			if (err instanceof Error) {
-				error = err.message;
-			} else {
-				error = "An unknown error occurred";
+		],
+		"Plenaries": [
+			{
+				question: "What happens during the Plenary Address?",
+				answer: "Plenary sessions include a variety of speaking formats, including fireside chats and presentations where speakers will discuss their topics and participants will be able to ask the speakers questions at the end of each session."
+			},
+			{
+				question: "Who can attend the Plenary Address?",
+				answer: "During each plenary session, attendees have the option to choose to attend one plenary out of the 4 offered during the same time. We'll try our best to assign each participant's first choices as their plenaries on the day of WAC. Further information about participants’ chosen plenaries will be shared as the conference date approaches."
+			},
+			{
+				question: "When do Plenary sessions start?",
+				answer: "The conference schedule, which will be shared at a later time, will outline the times for plenary sessions, lunch, and networking."
 			}
-		} finally {
-			loading = false;
-		}
-	});
+		]
+	};
 
 	const sanitizeHtml = (html: string) => DOMPurify.sanitize(html);
 </script>
@@ -42,74 +90,52 @@
 	<title>FAQ - World Affairs Conference</title>
 </svelte:head>
 
-<section
-	class="faq-section pt-[5rem] md:pt-[7.5rem] lg:pt-[9rem] pb-[5rem] lg:pb-[7rem]"
->
+<section class="faq-section pt-[5rem] md:pt-[7.5rem] lg:pt-[9rem] pb-[5rem] lg:pb-[7rem]">
 	<div class="max-w-screen-xl mx-auto px-6 lg:px-16">
 		<div class="mb-10 lg:mb-20 mt-6 text-center">
-			<h3
-				class="mb-1 md:mb-2 block md:text-lg font-semibold text-primary"
-			>
+			<h3 class="mb-1 md:mb-2 block md:text-lg font-semibold text-primary">
 				FAQ
 			</h3>
-			<h1
-				class="font-bold text-white text-4xl md:text-5xl tracking-tight"
-			>
+			<h1 class="font-bold text-white text-4xl md:text-5xl tracking-tight">
 				Any Questions?
 			</h1>
 		</div>
 
-		{#if loading}
-			<p class="text-white">Loading...</p>
-		{:else if error}
-			<p class="text-red-500">{error}</p>
-		{:else if faqByCategories}
-			<div class="flex flex-col gap-16">
-				{#each Object.entries(faqByCategories) as [categoryName, records]}
-					<div>
-						<h3
-							class="text-2xl md:text-3xl font-semibold text-white mb-4 md:mb-8 text-center"
-						>
-							{categoryName}
-						</h3>
+		<div class="flex flex-col gap-16">
+			{#each Object.entries(faqByCategories) as [categoryName, records]}
+				<div>
+					<h3 class="text-2xl md:text-3xl font-semibold text-white mb-4 md:mb-8 text-center">
+						{categoryName}
+					</h3>
 
-						<div class="flex gap-4 w-full flex-col lg:flex-row">
-							<div class="flex flex-col gap-4 w-full lg:w-1/2">
-								{#each records as record, i}
-									{#if i % 2 === 0}
-										<LargeAccordion
-											header={record.question}
-										>
-											<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-											<div class="markdown">
-												{@html sanitizeHtml(
-													record.answer
-												)}
-											</div>
-										</LargeAccordion>
-									{/if}
-								{/each}
-							</div>
-							<div class="flex flex-col gap-4 w-full lg:w-1/2">
-								{#each records as record, i}
-									{#if i % 2 === 1}
-										<LargeAccordion
-											header={record.question}
-										>
-											<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-											<div class="text-zinc-300 markdown">
-												{@html sanitizeHtml(
-													record.answer
-												)}
-											</div>
-										</LargeAccordion>
-									{/if}
-								{/each}
-							</div>
+					<div class="flex gap-4 w-full flex-col lg:flex-row">
+						<div class="flex flex-col gap-4 w-full lg:w-1/2">
+							{#each records as record, i}
+								{#if i % 2 === 0}
+									<LargeAccordion header={record.question}>
+										<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+										<div class="markdown">
+											{@html sanitizeHtml(record.answer)}
+										</div>
+									</LargeAccordion>
+								{/if}
+							{/each}
+						</div>
+						<div class="flex flex-col gap-4 w-full lg:w-1/2">
+							{#each records as record, i}
+								{#if i % 2 === 1}
+									<LargeAccordion header={record.question}>
+										<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+										<div class="text-zinc-300 markdown">
+											{@html sanitizeHtml(record.answer)}
+										</div>
+									</LargeAccordion>
+								{/if}
+							{/each}
 						</div>
 					</div>
-				{/each}
-			</div>
-		{/if}
+				</div>
+			{/each}
+		</div>
 	</div>
 </section>