feat/realtimedb

prisma/migrations/20230603000300_add_trigger/migration.sql

@@ -0,0 +1,26 @@
+CREATE OR REPLACE FUNCTION public.notify_insert_submission()
+ RETURNS trigger
+ LANGUAGE plpgsql
+AS $function$
+	BEGIN
+		perform pg_notify('submit', new.id::text);
+		return new;
+	END;
+$function$;
+
+CREATE OR REPLACE FUNCTION public.notify_update_submission()
+ RETURNS trigger
+ LANGUAGE plpgsql
+AS $function$
+	declare 
+	payload text;
+	begin
+		payload := row_to_json(new.*)::text;
+		perform pg_notify('update', payload);
+		return new;
+	END;
+$function$;
+
+CREATE TRIGGER on_update AFTER update ON public.submission FOR EACH ROW EXECUTE FUNCTION notify_update_submission();
+
+CREATE TRIGGER on_submit AFTER insert ON public.submission FOR EACH ROW EXECUTE FUNCTION notify_insert_submission();

src/components/Submission/Submission.tsx

@@ -25,7 +25,7 @@ const Submission = ({
   task: Task
   submissionID: number
 }) => {
-  const { submission, isLoading, mutate } = useSSESubmissionData(submissionID)
+  const { submission, isLoading } = useSSESubmissionData(submissionID)
 
   if (isLoading || task === undefined) {
     return <Loading />
@@ -34,12 +34,6 @@ const Submission = ({
   return (
     <div className="w-full min-w-0">
       <Header />
-      <button
-        onClick={() => mutate()}
-        className="bg-prog-gray-500 text-white dark:hover:bg-slate-600"
-      >
-        Refresh
-      </button>
       {submission && <Card sub={submission} task={task} />}
       <Suspense fallback={<CodeSkeleton />}>
         <DynamicCode

src/lib/useSubmissionData.ts

@@ -1,5 +1,7 @@
 'use client'
 
+import { useEffect } from 'react'
+
 import useSWR from 'swr'
 
 import { IGeneralSubmission } from '@/types/submissions'
@@ -17,45 +19,44 @@ export const useSSESubmissionData = (id: number) => {
     fetcher
   )
 
-  // useEffect(() => {
-  //   const eventSource = new EventSource(
-  //     `${process.env.NEXT_PUBLIC_REALTIME_URL}?id=${id}`
-  //   )
+  useEffect(() => {
+    const eventSource = new EventSource(
+      `${process.env.NEXT_PUBLIC_REALTIME_URL}/${id}`
+    )
 
-  //   eventSource.onmessage = event => {
-  //     const realtimeData = JSON.parse(`${event.data}`)
+    eventSource.onmessage = event => {
+      const realtimeData = JSON.parse(`${event.data}`)
 
-  //     if (
-  //       realtimeData.status === JUDGE_COMPLETED ||
-  //       realtimeData.status === JUDGE_ERROR ||
-  //       realtimeData.status === JUDGE_COMPILATION_ERROR
-  //     ) {
-  //       mutate()
-  //       eventSource.close()
-  //     } else {
-  //       mutate(
-  //         async submission => {
-  //           return submission
-  //             ? Object.assign({}, submission, realtimeData)
-  //             : submission
-  //         },
-  //         {
-  //           revalidate: false
-  //         }
-  //       )
-  //     }
-  //   }
+      if (
+        realtimeData.status === JUDGE_COMPLETED ||
+        realtimeData.status === JUDGE_ERROR ||
+        realtimeData.status === JUDGE_COMPILATION_ERROR
+      ) {
+        mutate()
+        eventSource.close()
+      } else {
+        mutate(
+          async submission => {
+            return submission
+              ? Object.assign({}, submission, realtimeData)
+              : submission
+          },
+          {
+            revalidate: false
+          }
+        )
+      }
+    }
 
-  //   return () => {
-  //     eventSource.close()
-  //   }
-  // }, [id, mutate])
+    return () => {
+      eventSource.close()
+    }
+  }, [id, mutate])
 
   return {
     submission: data,
     isLoading: !error && !data,
-    isError: error,
-    mutate
+    isError: error
   }
 }