Release v0.1.14

Author: Niweera

Diff for: package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "niwder-ui",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.8.2",
@@ -44,6 +44,7 @@
     "redux-routines": "^3.0.6",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.5",
+    "socket.io-client": "^4.5.0",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "url": "^0.11.0",

Diff for: package.json

@@ -10,7 +10,15 @@ try {
     "https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js"
   );
 
-  firebase.initializeApp();
+  firebase.initializeApp({
+    apiKey: "AIzaSyBmfOnN-L1e8AyfDdrWbnzV9Z5Vv4W7wNE",
+    authDomain: "niwder-io.firebaseapp.com",
+    databaseURL: "https://niwder-io-default-rtdb.firebaseio.com",
+    projectId: "niwder-io",
+    storageBucket: "niwder-io.appspot.com",
+    messagingSenderId: "262286132985",
+    appId: "1:262286132985:web:0e54a950650e7513a8c428",
+  });
 }
 
 if (firebase.messaging.isSupported()) {

Diff for: public/firebase-messaging-sw.js

@@ -21,7 +21,9 @@ if (firebase.messaging.isSupported()) {
 }
 
 export const API_BASE =
-  process.env.NODE_ENV === "development" ? "" : "https://niwder-api.niweera.gq";
+  process.env.NODE_ENV === "development"
+    ? "http://localhost:9091"
+    : "https://niwder-api.niweera.gq";
 export const FCM_VAPID_KEY = process.env.REACT_APP_FCM_VAPID_KEY;
 export const messaging = firebaseMessaging;
 

Diff for: src/config/index.js

@@ -28,18 +28,20 @@ const Notification = ({
       {...rest}
     >
       {alertTitle && <AlertTitle>{alertTitle}</AlertTitle>}
-      <Typography
-        sx={{
-          display: "inline-block",
-          maxWidth: "40vw",
-        }}
-        component="span"
-        variant="body2"
-        color="text.primary"
-        noWrap
-      >
-        {message}
-      </Typography>
+      {message && (
+        <Typography
+          sx={{
+            display: "inline-block",
+            maxWidth: "40vw",
+          }}
+          component="span"
+          variant="body2"
+          color="text.primary"
+          noWrap
+        >
+          {message}
+        </Typography>
+      )}
     </Alert>
   </Snackbar>
 );

Diff for: src/helpers/Notification.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Home from "./components/Home";
 import Container from "@mui/material/Container";
@@ -37,6 +37,10 @@ import {
   TORRENTS_TO_GDRIVE_ROUTE,
   TORRENTS_TO_MEGA_ROUTE,
 } from "./config/Constants";
+import { io } from "socket.io-client";
+import { get } from "lodash";
+import { API_BASE } from "./config";
+import Message from "./helpers/Notification";
 
 const AuthIsLoaded = ({ children }) => {
   const profile = useSelector(({ firebase: { profile } }) => profile);
@@ -49,10 +53,64 @@ const AuthIsLoaded = ({ children }) => {
 };
 
 const RoutesComponent = () => {
+  const [time, setTime] = useState(0);
+  const [connected, setConnected] = useState(null);
+  const [disconnected, setDisconnected] = useState(null);
+
+  const accessToken = useSelector(({ firebase: { auth } }) =>
+    get(auth, "stsTokenManager.accessToken", "")
+  );
+
+  useEffect(() => {
+    if (accessToken) {
+      const socket = io(API_BASE, {
+        transports: ["websocket", "polling"],
+      });
+
+      socket.on("api-alive", () => {
+        setConnected(true);
+        setDisconnected(false);
+      });
+
+      socket.on("connect_error", () => {
+        setConnected(false);
+        setDisconnected(true);
+        setTime(1);
+      });
+    }
+  }, [accessToken]);
+
+  const onNotificationClose = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setConnected(null);
+    setDisconnected(null);
+  };
+
   return (
     <Router>
       <AuthIsLoaded>
         <Navbar />
+        {Boolean(time) && Boolean(connected) && (
+          <Message
+            severity={"success"}
+            alertTitle={`Connected to Niwder-API`}
+            onClose={onNotificationClose}
+            message={"Connection is restored to Niwder-API."}
+            open={connected}
+            autoHideDuration={5000}
+          />
+        )}
+        {Boolean(disconnected) && (
+          <Message
+            severity={"error"}
+            alertTitle={`Niwder-API is unreachable`}
+            message={"Either you are offline or Niwder-API is down."}
+            open={disconnected}
+            autoHideDuration={5000}
+          />
+        )}
         <Container maxWidth={false}>
           <Routes>
             <Route exact path={"/"} element={<Home />} />