mirror of
https://github.com/mue/mue.git
synced 2026-07-13 04:02:32 +02:00
Massive Update
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com> Co-authored-by: Wessel Tip <discord@go2it.eu> Co-authored-by: Isaac Saunders <contact@eartharoid.me>
This commit is contained in:
69
src/App.jsx
69
src/App.jsx
@@ -1,4 +1,3 @@
|
||||
//* Imports
|
||||
import React from 'react';
|
||||
import Background from './components/Background';
|
||||
import Clock from './components/Clock';
|
||||
@@ -7,50 +6,34 @@ import Quote from './components/Quote';
|
||||
import Search from './components/Search';
|
||||
import Credit from './components/Credit';
|
||||
import Navbar from './components/Navbar';
|
||||
import Toast from './components/Toast';
|
||||
import { ToastContainer } from 'react-toastify';
|
||||
import Modal from 'react-modal';
|
||||
import './scss/index.scss';
|
||||
|
||||
import './scss/index.scss';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
const defaultSettings = require('./modules/defaultSettings.json');
|
||||
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
|
||||
export default class App extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
settingsModal: false,
|
||||
this.state = {
|
||||
settingsModal: false,
|
||||
updateModal: false
|
||||
};
|
||||
}
|
||||
|
||||
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);
|
||||
localStorage.setItem('customBackgroundColour', '');
|
||||
localStorage.setItem('customBackground', '');
|
||||
localStorage.setItem('greetingName', '');
|
||||
localStorage.setItem('defaultGreetingMessage', true);
|
||||
defaultSettings.forEach(element => localStorage.setItem(element.name, element.value));
|
||||
|
||||
// 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);
|
||||
localStorage.setItem('darkTheme', false);
|
||||
// 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);
|
||||
@@ -62,27 +45,31 @@ export default class App extends React.Component {
|
||||
if (!localStorage.getItem('firstRun')) this.setDefaultSettings();
|
||||
|
||||
let modalClassList = 'Modal';
|
||||
const darkTheme = localStorage.getItem('darkTheme');
|
||||
if (darkTheme === 'true') modalClassList = 'Modal dark';
|
||||
|
||||
if (localStorage.getItem('darkTheme') === 'true') modalClassList = 'Modal dark';
|
||||
|
||||
let overlayClassList = 'Overlay';
|
||||
if (localStorage.getItem('animations') === 'true') overlayClassList = 'Overlay modal-animation';
|
||||
|
||||
let language = require(`./translations/${localStorage.getItem('language')}.json`);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div id='backgroundImage'></div>
|
||||
<Background/>
|
||||
<ToastContainer className='toast' position='bottom-right' autoClose={2500} hideProgressBar={false} newestOnTop={true} closeOnClick rtl={false} pauseOnFocusLoss />
|
||||
<div id='center'>
|
||||
<Search/>
|
||||
<Search language={language.search} />
|
||||
<Navbar settingsModalOpen={() => this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
|
||||
<Greeting/>
|
||||
<Clock/>
|
||||
<Quote />
|
||||
<Credit/>
|
||||
<Toast/>
|
||||
<Greeting language={language.greeting} />
|
||||
<Clock/>
|
||||
<Quote/>
|
||||
<Credit language={language.credit} />
|
||||
<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 id={'modal'} onRequestClose={() => this.setState({ settingsModal: false })} isOpen={this.state.settingsModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
|
||||
<Settings language={language.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 onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
|
||||
<Update language={language.update} modalClose={() => this.setState({ updateModal: false })} />
|
||||
</Modal>
|
||||
</React.Suspense>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user