diff --git a/src/components/modals/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx index 07a1edf2..072cc2ab 100644 --- a/src/components/modals/ErrorBoundary.jsx +++ b/src/components/modals/ErrorBoundary.jsx @@ -1,7 +1,7 @@ import variables from 'modules/variables'; import { PureComponent } from 'react'; -import { MdErrorOutline } from 'react-icons/md'; +import { MdErrorOutline, MdRefresh } from 'react-icons/md'; import { captureException } from '@sentry/react'; class ErrorBoundary extends PureComponent { @@ -49,16 +49,18 @@ class ErrorBoundary extends PureComponent {
{this.state.showReport ? ( - ) : ( {variables.getMessage('modals.main.error_boundary.sent')} )} -
diff --git a/src/components/modals/main/settings/Header.jsx b/src/components/modals/main/settings/Header.jsx index 5a39fb51..7c74bea9 100644 --- a/src/components/modals/main/settings/Header.jsx +++ b/src/components/modals/main/settings/Header.jsx @@ -27,9 +27,11 @@ class Header extends PureComponent { if (localStorage.getItem(this.props.setting) === 'true') { localStorage.setItem(this.props.setting, false); this.setState({ [this.props.setting]: false }); + EventBus.emit('toggle', this.props.setting); } else { localStorage.setItem(this.props.setting, true); this.setState({ [this.props.setting]: true }); + EventBus.emit('toggle', this.props.setting); } variables.stats.postEvent( @@ -91,24 +93,6 @@ class Header extends PureComponent { - {this.props.zoomSetting && ( - - - - )} ); } diff --git a/src/components/modals/main/settings/PreferencesWrapper.jsx b/src/components/modals/main/settings/PreferencesWrapper.jsx new file mode 100644 index 00000000..14d97afd --- /dev/null +++ b/src/components/modals/main/settings/PreferencesWrapper.jsx @@ -0,0 +1,43 @@ +import React, { useState } from 'react'; +import SettingsItem from './SettingsItem'; +import variables from 'modules/variables'; +import Slider from './Slider'; + +import { values } from 'modules/helpers/settings/modals'; +import EventBus from 'modules/helpers/eventbus'; + +const PreferencesWrapper = ({ children, ...props }) => { + const [shown, setShown] = useState(localStorage.getItem(props.setting) === 'true'); + + EventBus.on('toggle', (setting) => { + if (setting === props.setting) { + setShown(!shown); + } + }); + + return ( +
+ {props.zoomSetting && ( + + + + )} + {children} +
+ ); +}; + +export default PreferencesWrapper; diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx index 87e7a0a6..79352b71 100644 --- a/src/components/modals/main/settings/sections/Advanced.jsx +++ b/src/components/modals/main/settings/sections/Advanced.jsx @@ -1,5 +1,5 @@ import variables from 'modules/variables'; -import { PureComponent } from 'react'; +import { useState } from 'react'; import Modal from 'react-modal'; import { MenuItem } from '@mui/material'; import { @@ -19,115 +19,103 @@ import SettingsItem from '../SettingsItem'; import time_zones from 'components/widgets/time/timezones.json'; -export default class AdvancedSettings extends PureComponent { - constructor() { - super(); - this.state = { - resetModal: false, - }; - } +export default function AdvancedSettings() { + const [resetModal, setResetModal] = useState(false); + const ADVANCED_SECTION = 'modals.main.settings.sections.advanced'; - render() { - return ( - <> - - {variables.getMessage('modals.main.settings.sections.advanced.title')} - - - - - {localStorage.getItem('welcomePreview') !== 'true' && ( -
-
- - {variables.getMessage('modals.main.settings.sections.advanced.data')} - - - {variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')} - -
-
- - - -
+ return ( + <> + {variables.getMessage(`${ADVANCED_SECTION}.title`)} + + + + {localStorage.getItem('welcomePreview') !== 'true' && ( +
+
+ + {variables.getMessage('modals.main.settings.sections.advanced.data')} + + + {variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')} +
- )} - - - - {variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')} +
+ + + +
+
+ )} + + + + {variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')} + + {time_zones.map((timezone) => ( + + {timezone} - {time_zones.map((timezone) => ( - - {timezone} - - ))} - - - - - - importSettings(e)} + ))} + + + + + + importSettings(e)} + /> + + + + + - - - - - - - this.setState({ resetModal: false })} - isOpen={this.state.resetModal} - className="Modal resetmodal mainModal" - overlayClassName="Overlay resetoverlay" - ariaHideApp={false} - > - this.setState({ resetModal: false })} /> - - - ); - } + + setResetModal(false)} + isOpen={resetModal} + className="Modal resetmodal mainModal" + overlayClassName="Overlay resetoverlay" + ariaHideApp={false} + > + setResetModal(false)} /> + + + ); } diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx index fdf8e1ed..39dab531 100644 --- a/src/components/modals/main/settings/sections/Date.jsx +++ b/src/components/modals/main/settings/sections/Date.jsx @@ -1,126 +1,121 @@ import variables from 'modules/variables'; -import { PureComponent } from 'react'; +import { useState } from 'react'; import Header from '../Header'; import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; import SettingsItem from '../SettingsItem'; -export default class DateSettings extends PureComponent { - constructor() { - super(); - this.state = { - dateType: localStorage.getItem('dateType') || 'long', - }; - } +export default function Date() { + const [dateType, setDateType] = useState(localStorage.getItem('dateType') || 'long'); + const longSettings = ( + <> + + + + + + + + + ); - render() { - const longSettings = ( - <> + const shortSettings = ( + <> + + + + + + + + + + + + + + ); + + return ( + <> +
+ { + setDateType(value); + localStorage.setItem('dateType', value); + }} category="date" > - - - + + + + + {dateType === 'long' ? longSettings : shortSettings} - - ); - - const shortSettings = ( - <> - - - - - - - - - - - - - - ); - - return ( - <> -
- - this.setState({ dateType: value })} - category="date" - > - - - - - - {this.state.dateType === 'long' ? longSettings : shortSettings} - - - - - ); - } + + + ); } diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx index ef7864d9..129c69b9 100644 --- a/src/components/modals/main/settings/sections/Time.jsx +++ b/src/components/modals/main/settings/sections/Time.jsx @@ -28,6 +28,33 @@ export default class TimeSettings extends PureComponent { const TIME_SECTION = 'modals.main.settings.sections.time'; + const WidgetType = () => { + return ( + + this.setState({ timeType: value })} + category="clock" + > + + + + + + + ); + }; + const digitalSettings = ( - - this.setState({ timeType: value })} - category="clock" - > - - - - - - + {timeSettings} ); diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx index fee1bfac..ceb09e30 100644 --- a/src/components/modals/main/settings/sections/Weather.jsx +++ b/src/components/modals/main/settings/sections/Weather.jsx @@ -9,6 +9,7 @@ import Dropdown from '../Dropdown'; import Checkbox from '../Checkbox'; import { TextField } from '@mui/material'; import SettingsItem from '../SettingsItem'; +import PreferencesWrapper from '../PreferencesWrapper'; export default class TimeSettings extends PureComponent { constructor() { @@ -194,11 +195,18 @@ export default class TimeSettings extends PureComponent { zoomCategory="weather" switch={true} /> - - {/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */} - {LocationSetting()} - - {weatherType === '4' && } + + + {/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */} + {LocationSetting()} + + {weatherType === '4' && } + ); }