Merge branch 'develop'

src/OfflineStatus.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react";
+
+function OfflineStatus(props) {
+  const [isOnline, setOnlineStatus] = useState(true);
+
+  useEffect(() => {
+    const setFromEvent = function (event) {
+      if (event.type === "online") {
+        setOnlineStatus(true);
+      } else if (event.type === "offline") {
+        setOnlineStatus(false);
+      }
+    };
+
+    window.addEventListener("online", setFromEvent);
+    window.addEventListener("offline", setFromEvent);
+
+    return () => {
+      window.removeEventListener("online", setFromEvent);
+      window.removeEventListener("offline", setFromEvent);
+    };
+  });
+
+  return !isOnline ? (
+    <>
+      <h5 className="pwa-warning">
+        Estás sin internet. <br /> Sus datos se sincronizaran cuando vuelva la
+        conexión.
+      </h5>
+      <style jsx>{`
+        .pwa-warning {
+          background-color: orange;
+          color: black;
+          text-align: center;
+          padding: 10px;
+        }
+      `}</style>
+    </>
+  ) : null;
+}
+
+export default OfflineStatus;

src/index.js

@@ -1,11 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import OfflineStatus from "./OfflineStatus";
 
 ReactDOM.render(
   <React.StrictMode>
+    <OfflineStatus />
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );