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 ? (
-
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')}
-
-
-
- this.setState({ resetModal: true })}>
- {variables.getMessage('modals.main.settings.buttons.reset')}
-
-
- exportSettings()}>
- {variables.getMessage('modals.main.settings.buttons.export')}
-
-
- document.getElementById('file-input').click()}>
- {variables.getMessage('modals.main.settings.buttons.import')}
-
-
-
+ 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')}
+
- )}
-
-
-
+ )}
+
+
+
+ {time_zones.map((timezone) => (
+
- {time_zones.map((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' && }
+
>
);
}