More Settings

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2020-07-18 22:00:34 +01:00
parent 3e80586620
commit 7c055d6aff
17 changed files with 321 additions and 263 deletions

View File

@@ -7,12 +7,14 @@ import Quote from './components/Quote';
import Search from './components/Search';
import Credit from './components/Credit';
import Navbar from './components/Navbar';
import Settings from './components/Settings';
import Update from './components/Update';
import Toast from './components/Toast';
import Modal from 'react-modal';
import './scss/index.scss';
const Settings = React.lazy(() => import('./components/Settings'));
const Update = React.lazy(() => import('./components/Update'));
const renderLoader = () => <div></div>;
//* App
export default class App extends React.Component {
// Modal stuff
@@ -25,15 +27,34 @@ export default class App extends React.Component {
};
}
setDefaultSettings() {
localStorage.clear();
localStorage.setItem('time', true);
localStorage.setItem('greeting', true);
localStorage.setItem('background', true);
localStorage.setItem('quote', true);
localStorage.setItem('searchBar', true);
localStorage.setItem('blur', 0);
localStorage.setItem('copyButton', false);
localStorage.setItem('seconds', false);
localStorage.setItem('24hour', false);
localStorage.setItem('offlineMode', false);
localStorage.setItem('webp', false);
localStorage.setItem('events', true);
// Set theme depending on user preferred
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) localStorage.setItem('darkTheme', true);
else localStorage.setItem('darkTheme', false);
// Finally we set this to true so it doesn't run the function on every load
localStorage.setItem('firstRun', true);
window.location.reload();
}
// Render all the components
render() {
if (!localStorage.getItem('firstRun')) {
localStorage.setItem('time', true);
localStorage.setItem('greeting', true);
localStorage.setItem('background', true);
localStorage.setItem('quote', true);
localStorage.setItem('firstRun', true);
}
if (!localStorage.getItem('firstRun')) this.setDefaultSettings();
let modalClassList = 'Modal';
const darkTheme = localStorage.getItem('darkTheme');
@@ -43,20 +64,22 @@ export default class App extends React.Component {
<React.Fragment>
<div id='backgroundImage'></div>
<Background/>
<Search/>
<div id='center'>
<Search/>
<Navbar settingsModalOpen={() => this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
<Greeting/>
<Clock/>
<Quote />
<Credit/>
<Toast/>
<Modal isOpen={this.state.settingsModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
<Settings modalClose={() => this.setState({ settingsModal: false })} />
</Modal>
<Modal isOpen={this.state.updateModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
<Update modalClose={() => this.setState({ updateModal: false })} />
</Modal>
<React.Suspense fallback={renderLoader()}>
<Modal isOpen={this.state.settingsModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
<Settings modalClose={() => this.setState({ settingsModal: false })} setDefaultSettings={() => this.setDefaultSettings()} />
</Modal>
<Modal isOpen={this.state.updateModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
<Update modalClose={() => this.setState({ updateModal: false })} />
</Modal>
</React.Suspense>
</div>
</React.Fragment>
);