From 1d671374c2864a1fa3726da841c42cc11d7b2536 Mon Sep 17 00:00:00 2001
From: Clumsy-Coder <19594044+Clumsy-Coder@users.noreply.github.com>
Date: Sun, 31 Dec 2023 10:53:20 -0700
Subject: [PATCH] feat(page:home): fetch live submissions and display it

  ## what
  - fetch live submissions and display it
    - fetch data
    - display `loading` when fetching data
    - display `error` when fetching has failed
    - display live submissions after fetching data
    - refetch data after `5000ms`

  ## how
    - store the initial pollId to 0 using React `useRef`
    - fetch the data using hook `useFetchLiveSubmission`
      - requires pollId
      - refetch data after `5000ms`
    - store the pollId to the latest submission ID after a successfully
      fetching data
    - display `Loading data` when initially fetching data
    - display `Error fetching data` when there's an error fetching data
    - display the fetched data using `LiveSubmissionTable` component

  ## why
  - to display live submissions data

  ## where
  - ./src/app/page.tsx

  ## usage
---
 src/app/page.tsx | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 529e1c1..e4d3e13 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,33 @@
+"use client";
+
+import { useRef } from "react";
+
+import { useFetchLiveSubmission } from "@/hooks";
+import LiveSubmissionTable from "./LiveSubmissionTable";
+
 export default function Home() {
-  return <div>home page</div>;
+  // used for setting the pollId.
+  // not using useState, because that will force a re-render every time it's set
+  //    then it will fetch the new data, which will set the state, which will render the page
+  //    which will refetch the from the server. Causing an infinite loop
+  let pollIdRef = useRef(0);
+  const { data, isLoading, isError, isSuccess } = useFetchLiveSubmission(pollIdRef.current);
+
+  if (isLoading || !data) {
+    return <div>Fetching data</div>;
+  }
+
+  if (isError) {
+    return <div>Error fetching data</div>;
+  }
+
+  if (isSuccess) {
+    pollIdRef.current = data[0].msg.sid;
+  }
+
+  return (
+    <div>
+      <LiveSubmissionTable data={data} />
+    </div>
+  );
 }