mirror of https://github.com/mue/mue.git
91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
import { PureComponent, Fragment, Suspense, lazy } from 'react';
|
|
|
|
import Clock from './time/Clock';
|
|
import Greeting from './greeting/Greeting';
|
|
import Quote from './quote/Quote';
|
|
import Search from './search/Search';
|
|
import QuickLinks from './quicklinks/QuickLinks';
|
|
import Date from './time/Date';
|
|
import Message from './message/Message';
|
|
import { WidgetsLayout } from 'components/Layout';
|
|
|
|
import EventBus from 'utils/eventbus';
|
|
|
|
// weather is lazy loaded due to the size of the weather icons module
|
|
// since we're using react-icons this might not be accurate,
|
|
// however, when we used the original module https://bundlephobia.com/package/weather-icons-react@1.2.0
|
|
// as seen here it is ridiculously large
|
|
const Weather = lazy(() => import('./weather/Weather'));
|
|
|
|
export default class Widgets extends PureComponent {
|
|
online = localStorage.getItem('offlineMode') === 'false';
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
order: JSON.parse(localStorage.getItem('order')),
|
|
welcome: localStorage.getItem('showWelcome'),
|
|
};
|
|
// widgets we can re-order
|
|
this.widgets = {
|
|
time: this.enabled('time') && <Clock />,
|
|
greeting: this.enabled('greeting') && <Greeting />,
|
|
quote: this.enabled('quote') && <Quote />,
|
|
date: this.enabled('date') && <Date />,
|
|
quicklinks: this.enabled('quicklinksenabled') && this.online ? <QuickLinks /> : null,
|
|
message: this.enabled('message') && <Message />,
|
|
};
|
|
}
|
|
|
|
enabled(key) {
|
|
return localStorage.getItem(key) === 'true';
|
|
}
|
|
|
|
componentDidMount() {
|
|
EventBus.on('refresh', (data) => {
|
|
switch (data) {
|
|
case 'widgets':
|
|
return this.setState({
|
|
order: JSON.parse(localStorage.getItem('order')),
|
|
});
|
|
case 'widgetsWelcome':
|
|
this.setState({
|
|
welcome: localStorage.getItem('showWelcome'),
|
|
});
|
|
localStorage.setItem('showWelcome', true);
|
|
window.onbeforeunload = () => {
|
|
localStorage.clear();
|
|
};
|
|
break;
|
|
case 'widgetsWelcomeDone':
|
|
this.setState({
|
|
welcome: localStorage.getItem('showWelcome'),
|
|
});
|
|
return (window.onbeforeunload = null);
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
EventBus.off('refresh');
|
|
}
|
|
|
|
render() {
|
|
// don't show when welcome is there
|
|
return this.state.welcome !== 'false' ? (
|
|
<WidgetsLayout />
|
|
) : (
|
|
<WidgetsLayout>
|
|
<Suspense fallback={<></>}>
|
|
{this.enabled('searchBar') && <Search />}
|
|
{this.state.order.map((element, key) => (
|
|
<Fragment key={key}>{this.widgets[element]}</Fragment>
|
|
))}
|
|
{this.enabled('weatherEnabled') && this.online ? <Weather /> : null}
|
|
</Suspense>
|
|
</WidgetsLayout>
|
|
);
|
|
}
|
|
}
|