refactor(_official-realtime-app): use SSE utils from remix-utils instead of re-inventing the wheel (#87)

* Install Remix Utils

* Replace hooks and functions with Remix Utils versions

* Upgrade Remix Utils

* Fix lint errors

Author: sergiodxa

_official-realtime-app/app/event-stream.ts

@@ -4,15 +4,15 @@ import {
   Meta,
   Outlet,
   Scripts,
-  ScrollRestoration,
+  ScrollRestoration
 } from "@remix-run/react";
 import { useEffect } from "react";
+import { useEventSource } from "remix-utils";
 
-import { useEventSource } from "~/use-event-source";
 import { useRevalidator } from "~/use-revalidator";
 
-import styles from "./styles.processed.css";
 import icons from "./icons.svg";
+import styles from "./styles.processed.css";
 
 export const meta: MetaFunction = () => ({
   charset: "utf-8",

_official-realtime-app/app/root.tsx

@@ -1,12 +1,12 @@
 import { type DataFunctionArgs } from "@remix-run/node";
+import { eventStream } from "remix-utils";
 
-import { eventStream } from "../event-stream";
 import { emitter, EVENTS } from "../events";
 
 export const loader = ({ request }: DataFunctionArgs) => {
-  return eventStream(request, (send) => {
+  return eventStream(request.signal, (send) => {
     const handler = (message: string) => {
-      send("message", message);
+      send({ data: message });
     };
 
     emitter.addListener(EVENTS.ISSUE_CHANGED, handler);

_official-realtime-app/app/routes/issues-events.tsx

@@ -1,17 +1,9 @@
-import { useFetcher } from "@remix-run/react";
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
+import { useDataRefresh } from "remix-utils";
 
 // FIXME: This is unneeded after https://github.com/remix-run/remix/issues/4485
 export function useRevalidator() {
-  const fetcher = useFetcher();
+  const { refresh } = useDataRefresh();
 
-  const revalidate = useCallback(
-    () => {
-      fetcher.submit(null, { action: "/", method: "post" });
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  return useMemo(() => ({ revalidate }), [revalidate]);
+  return useMemo(() => ({ revalidate: refresh }), [refresh]);
 }

_official-realtime-app/app/use-event-source.tsx

@@ -22,6 +22,7 @@
     "isbot": "^3.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "remix-utils": "^4.2.1",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {