adding realtime connection functionality to document view

src/contexts/DocumentContext.js

@@ -4,9 +4,12 @@ const DocumentAnnotationsContext = React.createContext();
 const DocumentContext = React.createContext();
 const DocumentFiltersContext = React.createContext();
 const DocumentActiveAnnotationsContext = React.createContext();
+const WebsocketContext = React.createContext();
+
 export {
   DocumentAnnotationsContext,
   DocumentContext,
   DocumentFiltersContext,
   DocumentActiveAnnotationsContext,
+  WebsocketContext,
 };

src/pages/_app.jsx

@@ -1,6 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { useState } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
 import { SessionProvider } from 'next-auth/react';
+import {
+  WebsocketContext
+} from '../contexts/DocumentContext';
 import Router from 'next/router';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
@@ -17,9 +21,47 @@ Router.events.on('routeChangeError', () => NProgress.done());
 
 export default function AnnotationStudio({ Component, pageProps }) {
   const [session, setSession] = useState(pageProps.session);
+
+  const [socketUrl, setSocketUrl] = useState('wss://wq5pn518mf.execute-api.us-east-2.amazonaws.com/dev/');
+  const [messageHistory, setMessageHistory] = useState([]);
+
+  const {
+    sendMessage,
+    sendJsonMessage,
+    lastMessage,
+    lastJsonMessage,
+    readyState,
+    getWebSocket,
+  } = useWebSocket(socketUrl, {
+    onOpen: () => console.log('opened'),
+    //Will attempt to reconnect on all close events, such as server shutting down
+    shouldReconnect: (closeEvent) => true,
+  });
+
+  const connectionStatus = {
+    [ReadyState.CONNECTING]: 'Connecting',
+    [ReadyState.OPEN]: 'Open',
+    [ReadyState.CLOSING]: 'Closing',
+    [ReadyState.CLOSED]: 'Closed',
+    [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
+  }[readyState];
+
+
+  const handleSendJsonMessage = useCallback((json) => sendJsonMessage(json), []);
+
+
+  useEffect(() => {
+    if (lastJsonMessage !== null) {
+      // console.log('lastJsonMessage: ', lastJsonMessage)
+      setMessageHistory((prev) => prev.concat(lastJsonMessage));
+    }
+  }, [lastJsonMessage, setMessageHistory]);
+
   return (
     <SessionProvider session={pageProps.session}>
-      <Component {...pageProps} statefulSession={session} updateSession={setSession} />
+      <WebsocketContext.Provider value={[messageHistory, setMessageHistory, handleSendJsonMessage, lastJsonMessage, readyState, connectionStatus, getWebSocket]}>
+        <Component {...pageProps} statefulSession={session} updateSession={setSession} />
+      </WebsocketContext.Provider>
     </SessionProvider>
   );
 }

src/pages/api/document/[id].js

@@ -197,7 +197,7 @@ const handler = async (req, res) => {
         .findOne({ _id: ObjectID(token.sub) });
       const findCondition = {
         $and: [
-          { _id: ObjectID(req.query.id) }
+          { _id: ObjectID(req.query.id) },
         ],
       };
       if (userObj.role !== 'admin') findCondition.$and.push({ owner: token.sub });