Merge pull request #42 from delta-reporter/realtime-notifications

Realtime notifications for launches and projects

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

components/templates/eventNotification.tsx

@@ -0,0 +1,56 @@
+// This file is not currently used, it is a failed attempt to create a notification component
+import React from "react"
+import Snackbar, { SnackbarOrigin } from '@material-ui/core/Snackbar';
+import { useRouter } from 'next/router'
+import Button from '@material-ui/core/Button';
+import ReplayIcon from '@material-ui/icons/Replay';
+import Tooltip from '@material-ui/core/Tooltip';
+
+export interface State extends SnackbarOrigin {
+    open: boolean;
+  }
+
+export const EventNotification = function(message: string) {
+
+    const router = useRouter()
+
+    const [notificationState, setNotificationState] = React.useState<State>({
+      open: true,
+      vertical: 'top',
+      horizontal: 'right',
+    });
+    const { vertical, horizontal, open } = notificationState;
+
+    const handleReload = () => {
+      setNotificationState({ ...notificationState, open: false });
+      router.reload();
+    };
+
+    const handleClose = () => {
+        setNotificationState({ ...notificationState, open: false });
+      };
+    console.log(open)
+    console.log("Hola DOS")
+
+  return (
+    <div>
+    <Snackbar
+      anchorOrigin={{ vertical, horizontal }}
+      open={open}
+      onClose={handleClose}
+      message={message}
+      autoHideDuration={3000}
+      action={
+        <React.Fragment>
+          <Tooltip title="Reload page">
+          <Button color="secondary" size="small" onClick={handleReload}>
+          <ReplayIcon fontSize="small" />
+          </Button>
+          </Tooltip>
+        </React.Fragment>
+      }
+      key={vertical + horizontal}
+    />
+  </div>
+  )
+}

components/templates/index.ts

@@ -11,3 +11,4 @@ export * from "./TestResolution"
 export * from "./ListOfSuites"
 export * from "./TestHistory"
 export * from "./DeltaViewForLaunches"
+export * from "./eventNotification"

hooks/useSocket.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+import io from 'socket.io-client'
+
+const socket = io(process.env.publicDeltaWebsockets)
+
+export default function useSocket(eventName, cb) {
+  useEffect(() => {
+    socket.on(eventName, cb)
+
+    return function useSocketCleanup() {
+      socket.off(eventName, cb)
+    }
+  }, [eventName, cb])
+
+  return socket
+}

next.config.js

@@ -5,5 +5,6 @@ module.exports = withCSS({
     env: {
       deltaCore: process.env.DELTA_CORE_URL,
       publicDeltaCore: process.env.PUBLIC_DELTA_CORE_URL,
+      publicDeltaWebsockets: process.env.PUBLIC_DELTA_WEBSOCKETS_URL,
     },
   })