From 2d75368dbb23d1a79e87f6ee1b7db87c4df498fe Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jans.tuomi@gmail.com>
Date: Fri, 2 Jul 2021 12:22:32 +0300
Subject: Add some crude error display stuff

---
 frontend/components/Marquees/Marquee.module.css |  2 --
 frontend/pages/index.tsx                        | 18 +++++++++++++-----
 frontend/styles/Home.module.css                 | 13 +++++++++++++
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/frontend/components/Marquees/Marquee.module.css b/frontend/components/Marquees/Marquee.module.css
index 0fb8ece..40763f3 100644
--- a/frontend/components/Marquees/Marquee.module.css
+++ b/frontend/components/Marquees/Marquee.module.css
@@ -2,8 +2,6 @@
   height: 100vh;
   overflow: hidden;
   position: relative;
-  background: #fefefe;
-  color: #333;
   z-index: 10;
 }
 
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 6193488..633269f 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -9,6 +9,7 @@ const socket = io(config.backendUrl);
 
 const Home = (): ReactElement => {
     const [value, setValue] = useState<number | undefined>(undefined);
+    const [error, setError] = useState<string>("");
     const [papers, setPapers] = useState<MarqueeLink[]>([]);
 
     useEffect(() => {
@@ -16,7 +17,9 @@ const Home = (): ReactElement => {
             console.log("connected:", socket.id);
         });
         socket.on("disconnect", (reason: string) => {
-            console.log("disconnected, reason:", reason);
+            const err = `disconnected, reason: ${reason}`;
+            console.error(err);
+            setError(err);
         });
         socket.on("update", (arg: number) => {
             setValue(arg);
@@ -25,10 +28,14 @@ const Home = (): ReactElement => {
 
     useEffect(() => {
         async function fetchPapers() {
-            const resp = await fetch(`${config.backendUrl}/api/papers`);
-            const data = await resp.json();
-
-            setPapers(data);
+            try {
+                const resp = await fetch(`${config.backendUrl}/api/papers`);
+                const data = await resp.json();
+                setPapers(data);
+            } catch (err) {
+                console.error(err);
+                setError(String(err));
+            }
         }
         fetchPapers();
     }, []);
@@ -56,6 +63,7 @@ const Home = (): ReactElement => {
                     <img src="/tomi_sq.png" alt="" />
                 </div>
             </button>
+            <div id={styles.errorContainer}>{error}</div>
             <Marquees links={papers} />
         </div>
     );
diff --git a/frontend/styles/Home.module.css b/frontend/styles/Home.module.css
index 814ebba..b4a553f 100644
--- a/frontend/styles/Home.module.css
+++ b/frontend/styles/Home.module.css
@@ -41,3 +41,16 @@
   font-size: 175%;
   text-align: center;
 }
+
+#errorContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+
+  z-index: 15;
+  color: red;
+}
\ No newline at end of file
-- 
cgit v1.3