From 9f9564fc256e380318fb778dac4f433c410d0f44 Mon Sep 17 00:00:00 2001
From: James Hawkins <jhawki2005@gmail.com>
Date: Fri, 16 Jul 2021 18:31:26 +0100
Subject: [PATCH] Add offline message

---
 src/components/ErrorBanner.css | 11 +++++++++++
 src/components/ErrorBanner.js  | 10 ++++++++++
 src/views/Search.js            | 17 +++++++++++++++--
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ErrorBanner.css
 create mode 100644 src/components/ErrorBanner.js

diff --git a/src/components/ErrorBanner.css b/src/components/ErrorBanner.css
new file mode 100644
index 00000000..8c9666a1
--- /dev/null
+++ b/src/components/ErrorBanner.css
@@ -0,0 +1,11 @@
+.errorBanner {
+	margin-top: 0.5rem;
+    border-inline-start: none;
+    font-size: 16px;
+    font-weight: normal;
+    letter-spacing: -.01em;
+    padding: .5rem 1rem .5rem .75rem;
+    border-radius: .25rem;
+	background-color: var(--button);
+	color: var(--button-text);
+}
\ No newline at end of file
diff --git a/src/components/ErrorBanner.js b/src/components/ErrorBanner.js
new file mode 100644
index 00000000..60d8b42d
--- /dev/null
+++ b/src/components/ErrorBanner.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import './ErrorBanner.css';
+
+export function ErrorBanner({children}) {
+	return (
+		<div class="errorBanner">
+			{children}
+		</div>
+	)
+}
\ No newline at end of file
diff --git a/src/views/Search.js b/src/views/Search.js
index c4ef950e..c0232aea 100644
--- a/src/views/Search.js
+++ b/src/views/Search.js
@@ -2,13 +2,13 @@ import React from 'react';
 import { InputBox } from '../components/InputBox'
 import { Title } from '../components/Title'
 import { Card } from '../components/Card'
+import { ErrorBanner } from '../components/ErrorBanner'
 import { MovieRow } from '../components/MovieRow'
 import { Arrow } from '../components/Arrow'
 import { Progress } from '../components/Progress'
-import { findContent, getStreamUrl } from '../lib/lookMovie'
+import { findContent, getStreamUrl, getEpisodes } from '../lib/lookMovie'
 import { useMovie } from '../hooks/useMovie';
 import { TypeSelector } from '../components/TypeSelector'
-import { getEpisodes } from '../lib/lookMovie'
 
 import './Search.css'
 
@@ -21,6 +21,7 @@ export function SearchView() {
     const [text, setText] = React.useState("");
     const [failed, setFailed] = React.useState(false);
     const [showingOptions, setShowingOptions] = React.useState(false);
+    const [offlineStatus, setOfflineStatus] = React.useState(false);
     const [type, setType] = React.useState("movie");
 
     const fail = (str) => {
@@ -103,9 +104,21 @@ export function SearchView() {
         }
     }
 
+    React.useEffect(() => {
+        async function fetchHealth() {
+            const HOME_URL = "https://hidden-inlet-27205.herokuapp.com/https://lookmovie.io/"
+            await fetch(HOME_URL).catch(() => {
+                // Request failed; source likely offline
+                setOfflineStatus(`Our content provider is currently offline, apologies.`)
+            })
+        }
+        fetchHealth()
+    }, [])
+
     return (
         <div className="cardView">
             <Card>
+                {offlineStatus ? <ErrorBanner>{offlineStatus}</ErrorBanner> : ''}
                 <Title accent="Because watching content legally is boring">
                     What do you wanna watch?
                 </Title>