Add offline message

This commit is contained in:
James Hawkins 2021-07-16 18:31:26 +01:00
parent 275b83867e
commit 9f9564fc25
3 changed files with 36 additions and 2 deletions

View File

@ -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);
}

View File

@ -0,0 +1,10 @@
import React from 'react';
import './ErrorBanner.css';
export function ErrorBanner({children}) {
return (
<div class="errorBanner">
{children}
</div>
)
}

View File

@ -2,13 +2,13 @@ import React from 'react';
import { InputBox } from '../components/InputBox' import { InputBox } from '../components/InputBox'
import { Title } from '../components/Title' import { Title } from '../components/Title'
import { Card } from '../components/Card' import { Card } from '../components/Card'
import { ErrorBanner } from '../components/ErrorBanner'
import { MovieRow } from '../components/MovieRow' import { MovieRow } from '../components/MovieRow'
import { Arrow } from '../components/Arrow' import { Arrow } from '../components/Arrow'
import { Progress } from '../components/Progress' import { Progress } from '../components/Progress'
import { findContent, getStreamUrl } from '../lib/lookMovie' import { findContent, getStreamUrl, getEpisodes } from '../lib/lookMovie'
import { useMovie } from '../hooks/useMovie'; import { useMovie } from '../hooks/useMovie';
import { TypeSelector } from '../components/TypeSelector' import { TypeSelector } from '../components/TypeSelector'
import { getEpisodes } from '../lib/lookMovie'
import './Search.css' import './Search.css'
@ -21,6 +21,7 @@ export function SearchView() {
const [text, setText] = React.useState(""); const [text, setText] = React.useState("");
const [failed, setFailed] = React.useState(false); const [failed, setFailed] = React.useState(false);
const [showingOptions, setShowingOptions] = React.useState(false); const [showingOptions, setShowingOptions] = React.useState(false);
const [offlineStatus, setOfflineStatus] = React.useState(false);
const [type, setType] = React.useState("movie"); const [type, setType] = React.useState("movie");
const fail = (str) => { 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 ( return (
<div className="cardView"> <div className="cardView">
<Card> <Card>
{offlineStatus ? <ErrorBanner>{offlineStatus}</ErrorBanner> : ''}
<Title accent="Because watching content legally is boring"> <Title accent="Because watching content legally is boring">
What do you wanna watch? What do you wanna watch?
</Title> </Title>