Add basic recent debates page

site/src/app/components/ShortDebate.tsx

@@ -0,0 +1,61 @@
+import { Group, Stack } from "@mantine/core";
+import StandardCardTitle from "@/app/components/StandardCardTitle";
+import moment from "moment";
+import StandardCardDescription from "@/app/components/StandardCardDescription";
+import Markdown from "react-markdown";
+import SummaryAiDisclaimer from "@/app/components/SummaryAiDisclaimer";
+import SummaryNotAvailableApology from "@/app/components/SummaryNotAvailableApology";
+import StandardButton from "@/app/components/StandardButton";
+import StandardCard from "@/app/components/StandardCard";
+
+export default function ShortDebate({
+  debate,
+}: {
+  debate: {
+    id: number;
+    title: string;
+    summary: string | null;
+    sitting: {
+      sitting_date: {
+        sitting_date: string;
+      } | null;
+    } | null;
+  };
+}) {
+  return (
+    <StandardCard>
+      <Group justify="space-between">
+        <StandardCardTitle>{debate.title}</StandardCardTitle>
+      </Group>
+
+      <StandardCardDescription>
+        {moment(debate.sitting!.sitting_date!.sitting_date).format(
+          "D MMM YYYY",
+        )}
+      </StandardCardDescription>
+
+      <StandardCardDescription>
+        {debate.summary ? (
+          <Stack>
+            <Markdown>{debate.summary}</Markdown>
+            <SummaryAiDisclaimer />
+          </Stack>
+        ) : (
+          <SummaryNotAvailableApology />
+        )}
+      </StandardCardDescription>
+
+      <Group grow mt="md">
+        <StandardButton colour="blue" href={`/debates/${debate.id}`}>
+          Overview
+        </StandardButton>
+        <StandardButton
+          colour="gray"
+          href={`https://sprs.parl.gov.sg/search/#/fullreport?sittingdate=${moment(debate.sitting!.sitting_date!.sitting_date).format("DD-MM-YYYY")}`}
+        >
+          Original source
+        </StandardButton>
+      </Group>
+    </StandardCard>
+  );
+}

site/src/app/components/SummaryAiDisclaimer.tsx

@@ -4,7 +4,7 @@ export default function SummaryAiDisclaimer() {
   return (
     <AiDisclaimer
       shortExplainer="Summary written by AI"
-      explainer="This summary was written by a cute little robot, but it may not be fully accurate. Please read the original PDF for the most accurate information. Hopefully, this summary helps you get the gist of it!"
+      explainer="This summary was written by a cute little robot, but it may not be fully accurate. Please read the original source for the most accurate information. Hopefully, this summary helps you get the gist of it!"
     ></AiDisclaimer>
   );
 }

site/src/app/debates/page.tsx

@@ -9,6 +9,7 @@ import StandardCardTitle from "@/app/components/StandardCardTitle";
 import StandardCardDescription from "@/app/components/StandardCardDescription";
 import StandardButton from "@/app/components/StandardButton";
 import { Group } from "@mantine/core";
+import ShortDebate from "@/app/components/ShortDebate";
 
 export const runtime = "edge";
 
@@ -33,9 +34,16 @@ function calculatePaginationOffset(page: number) {
 async function getRecentDebates(page: number) {
   const supabase = createClient();
   const [first, last] = calculatePaginationOffset(page);
-  const { error, data } = await supabase
+  const { data, error } = await supabase
     .from("debate")
-    .select("title")
+    .select(
+      "id, title, order_no, summary, sitting ( sitting_date ( sitting_date ) )",
+    )
+    .order("sitting_date", {
+      ascending: false,
+      referencedTable: "sitting.sitting_date",
+    })
+    .order("order_no", { ascending: false })
     .range(first, last);
   if (error) throw error;
   return data;
@@ -67,10 +75,7 @@ export default async function RecentDebates({
         <PageTitle title={title} subtitle={subtitle} />
 
         {(await getRecentDebates(page)).map((debate) => (
-          <StandardCard>
-            <StandardCardTitle>{debate.title}</StandardCardTitle>
-            <StandardCardDescription>Hello world</StandardCardDescription>
-          </StandardCard>
+          <ShortDebate key={debate.id} debate={debate} />
         ))}
 
         {isLastPage && (