forked from tanner/qotnews
130 lines
3.8 KiB
JavaScript
130 lines
3.8 KiB
JavaScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
|
|
import localForage from 'localforage';
|
|
import './Style-light.css';
|
|
import './Style-dark.css';
|
|
import './Style-black.css';
|
|
import './Style-red.css';
|
|
import './fonts/Fonts.css';
|
|
import { BackwardDot, ForwardDot } from './utils.js';
|
|
import Feed from './Feed.js';
|
|
import Article from './Article.js';
|
|
import Comments from './Comments.js';
|
|
import Search from './Search.js';
|
|
import Submit from './Submit.js';
|
|
import Results from './Results.js';
|
|
import ScrollToTop from './ScrollToTop.js';
|
|
|
|
function App() {
|
|
const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
|
|
const cache = useRef({});
|
|
const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
|
|
|
|
const updateCache = useCallback((key, value) => {
|
|
cache.current[key] = value;
|
|
}, []);
|
|
|
|
const light = () => {
|
|
setTheme('');
|
|
localStorage.setItem('theme', '');
|
|
};
|
|
|
|
const dark = () => {
|
|
setTheme('dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
};
|
|
|
|
const black = () => {
|
|
setTheme('black');
|
|
localStorage.setItem('theme', 'black');
|
|
};
|
|
|
|
const red = () => {
|
|
setTheme('red');
|
|
localStorage.setItem('theme', 'red');
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (Object.keys(cache.current).length === 0) {
|
|
localForage.iterate((value, key) => {
|
|
updateCache(key, value);
|
|
}).then(() => {
|
|
console.log('loaded cache from localforage');
|
|
});
|
|
}
|
|
}, [updateCache]);
|
|
|
|
const goFullScreen = () => {
|
|
if ('wakeLock' in navigator) {
|
|
navigator.wakeLock.request('screen');
|
|
}
|
|
document.body.requestFullscreen({ navigationUI: 'hide' });
|
|
};
|
|
|
|
const exitFullScreen = () => {
|
|
document.exitFullscreen();
|
|
};
|
|
|
|
useEffect(() => {
|
|
const onFullScreenChange = () => setIsFullScreen(!!document.fullscreenElement);
|
|
document.addEventListener('fullscreenchange', onFullScreenChange);
|
|
return () => document.removeEventListener('fullscreenchange', onFullScreenChange);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (theme === 'dark') {
|
|
document.body.style.backgroundColor = '#1a1a1a';
|
|
} else if (theme === 'black') {
|
|
document.body.style.backgroundColor = '#000';
|
|
} else if (theme === 'red') {
|
|
document.body.style.backgroundColor = '#000';
|
|
} else {
|
|
document.body.style.backgroundColor = '#eeeeee';
|
|
}
|
|
}, [theme]);
|
|
|
|
const fullScreenAvailable = document.fullscreenEnabled ||
|
|
document.mozFullscreenEnabled ||
|
|
document.webkitFullscreenEnabled ||
|
|
document.msFullscreenEnabled;
|
|
|
|
return (
|
|
<div className={theme}>
|
|
<Router>
|
|
<div className='container menu'>
|
|
<p>
|
|
<Link to='/'>QotNews</Link>
|
|
|
|
<span className='theme'><a href='#' onClick={() => light()}>Light</a> - <a href='#' onClick={() => dark()}>Dark</a> - <a href='#' onClick={() => black()}>Black</a> - <a href='#' onClick={() => red()}>Red</a></span>
|
|
<br />
|
|
<span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
|
|
</p>
|
|
{fullScreenAvailable &&
|
|
<Route path='/(|search)' render={() => !isFullScreen ?
|
|
<button className='fullscreen' onClick={() => goFullScreen()}>Enter Fullscreen</button>
|
|
:
|
|
<button className='fullscreen' onClick={() => exitFullScreen()}>Exit Fullscreen</button>
|
|
} />
|
|
}
|
|
<Route path='/(|search)' component={Search} />
|
|
<Route path='/(|search)' component={Submit} />
|
|
</div>
|
|
|
|
<Route path='/' exact render={(props) => <Feed {...props} updateCache={updateCache} />} />
|
|
<Switch>
|
|
<Route path='/search' component={Results} />
|
|
<Route path='/:id' exact render={(props) => <Article {...props} cache={cache.current} />} />
|
|
</Switch>
|
|
<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={cache.current} />} />
|
|
|
|
<BackwardDot />
|
|
<ForwardDot />
|
|
|
|
<ScrollToTop />
|
|
</Router>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|