From 8bf70eff817a34da375a7424646346b7e5439e84 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Tue, 27 Feb 2024 12:46:07 +0000 Subject: [PATCH] refactor(settings): Continue moving to feature focused organisation --- .../main/settings/sections/Greeting.jsx | 100 ---------- .../modals/main/settings/sections/Search.jsx | 172 ------------------ src/features/modals/main/tabs/Settings.jsx | 66 +++++-- src/features/widgets/navbar/Navbar.jsx | 2 +- src/features/widgets/navbar/index.jsx | 2 + .../navbar/options/NavbarOptions.jsx} | 11 +- src/features/widgets/navbar/options/index.jsx | 1 + src/features/widgets/quote/Quote.jsx | 4 +- src/features/widgets/quote/index.jsx | 2 + .../quote/options/QuoteOptions.jsx} | 4 +- src/features/widgets/quote/options/index.jsx | 1 + src/features/widgets/time/index.jsx | 1 + .../time/options/TimeOptions.jsx} | 4 +- src/features/widgets/time/options/index.jsx | 1 + src/features/widgets/weather/Weather.jsx | 2 +- .../widgets/weather/components/Expanded.jsx | 10 +- src/features/widgets/weather/weather.scss | 25 ++- 17 files changed, 93 insertions(+), 315 deletions(-) delete mode 100644 src/features/modals/main/settings/sections/Greeting.jsx delete mode 100644 src/features/modals/main/settings/sections/Search.jsx create mode 100644 src/features/widgets/navbar/index.jsx rename src/features/{modals/main/settings/sections/Navbar.jsx => widgets/navbar/options/NavbarOptions.jsx} (96%) create mode 100644 src/features/widgets/navbar/options/index.jsx create mode 100644 src/features/widgets/quote/index.jsx rename src/features/{modals/main/settings/sections/Quote.jsx => widgets/quote/options/QuoteOptions.jsx} (99%) create mode 100644 src/features/widgets/quote/options/index.jsx create mode 100644 src/features/widgets/time/index.jsx rename src/features/{modals/main/settings/sections/Time.jsx => widgets/time/options/TimeOptions.jsx} (98%) create mode 100644 src/features/widgets/time/options/index.jsx diff --git a/src/features/modals/main/settings/sections/Greeting.jsx b/src/features/modals/main/settings/sections/Greeting.jsx deleted file mode 100644 index e4489309..00000000 --- a/src/features/modals/main/settings/sections/Greeting.jsx +++ /dev/null @@ -1,100 +0,0 @@ -import variables from 'config/variables'; -import { useState } from 'react'; - -import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings'; -import { Checkbox, Switch, Text } from 'components/Form/Settings'; - -const GreetingSettings = () => { - const [birthday, setBirthday] = useState( - new Date(localStorage.getItem('birthday')) || new Date(), - ); - - const changeDate = (e) => { - const newDate = e.target.value ? new Date(e.target.value) : new Date(); - localStorage.setItem('birthday', newDate); - setBirthday(newDate); - }; - - const GREETING_SECTION = 'modals.main.settings.sections.greeting'; - - const AdditionalOptions = () => { - return ( - - - - - - - - - ); - }; - - const BirthdayOptions = () => { - return ( - - - - - -

- {variables.getMessage(`${GREETING_SECTION}.birthday_date`)} -

- - - - ); - }; - - return ( - <> -
- - - {BirthdayOptions()} - - - ); -}; - -export default GreetingSettings; diff --git a/src/features/modals/main/settings/sections/Search.jsx b/src/features/modals/main/settings/sections/Search.jsx deleted file mode 100644 index f64f39c1..00000000 --- a/src/features/modals/main/settings/sections/Search.jsx +++ /dev/null @@ -1,172 +0,0 @@ -import variables from 'config/variables'; -import { PureComponent } from 'react'; -import { toast } from 'react-toastify'; -import { MenuItem, TextField } from '@mui/material'; - -import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings'; -import { Dropdown, Checkbox } from 'components/Form/Settings'; - -import EventBus from 'utils/eventbus'; - -import searchEngines from 'features/widgets/search/search_engines.json'; - -export default class SearchSettings extends PureComponent { - constructor() { - super(); - this.state = { - customEnabled: false, - customValue: localStorage.getItem('customSearchEngine') || '', - }; - } - - resetSearch() { - localStorage.removeItem('customSearchEngine'); - this.setState({ - customValue: '', - }); - - toast(variables.getMessage('toasts.reset')); - } - - componentDidMount() { - if (localStorage.getItem('searchEngine') === 'custom') { - this.setState({ - customEnabled: true, - }); - } else { - localStorage.removeItem('customSearchEngine'); - } - } - - componentDidUpdate() { - if (this.state.customEnabled === true && this.state.customValue !== '') { - localStorage.setItem('customSearchEngine', this.state.customValue); - } - - EventBus.emit('refresh', 'search'); - } - - setSearchEngine(input) { - if (input === 'custom') { - this.setState({ - customEnabled: true, - }); - } else { - this.setState({ - customEnabled: false, - }); - localStorage.setItem('searchEngine', input); - } - - EventBus.emit('refresh', 'search'); - } - - render() { - const SEARCH_SECTION = 'modals.main.settings.sections.search'; - - const AdditionalOptions = () => { - return ( - - - - {/* not supported on firefox */} - {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? ( - - ) : null} - - - - - - ); - }; - - const SearchEngineSelection = () => { - return ( - - - - this.setSearchEngine(value)} - items={[ - searchEngines.map((engine) => ({ - value: engine.settingsName, - text: engine.name, - })), - { - value: 'custom', - text: variables.getMessage(`${SEARCH_SECTION}.custom`), - }, - ]} - /> - - - ); - }; - - const CustomOptions = () => { - return ( - - - - this.setState({ customValue: e.target.value })} - varient="outlined" - InputLabelProps={{ shrink: true }} - /> -

- this.resetSearch()}> - {variables.getMessage('modals.main.settings.buttons.reset')} - -

- - - ); - }; - - return ( - <> -
- - - - {this.state.customEnabled && CustomOptions()} - - - ); - } -} diff --git a/src/features/modals/main/tabs/Settings.jsx b/src/features/modals/main/tabs/Settings.jsx index 461c9d75..ae9c2312 100644 --- a/src/features/modals/main/tabs/Settings.jsx +++ b/src/features/modals/main/tabs/Settings.jsx @@ -4,11 +4,11 @@ import { memo } from 'react'; import Tabs from './backend/Tabs'; import Overview from '../settings/sections/Overview'; -import Navbar from '../settings/sections/Navbar'; +import { NavbarOptions } from 'features/widgets/navbar'; import { GreetingOptions } from 'features/widgets/greeting'; -import Time from '../settings/sections/Time'; +import { TimeOptions } from 'features/widgets/time'; import { QuickLinksOptions } from 'features/widgets/quicklinks'; -import Quote from '../settings/sections/Quote'; +import { QuoteOptions } from 'features/widgets/quote'; import Date from '../settings/sections/Date'; import { MessageOptions } from 'features/widgets/message'; import Background from '../settings/sections/background/Background'; @@ -24,22 +24,58 @@ import About from '../settings/sections/About'; const sections = [ { label: 'modals.main.marketplace.product.overview', name: 'order', component: Overview }, - { label: 'modals.main.settings.sections.appearance.navbar.title', name: 'navbar', component: Navbar }, - { label: 'modals.main.settings.sections.greeting.title', name: 'greeting', component: GreetingOptions }, - { label: 'modals.main.settings.sections.time.title', name: 'time', component: Time }, - { label: 'modals.main.settings.sections.quicklinks.title', name: 'quicklinks', component: QuickLinksOptions }, - { label: 'modals.main.settings.sections.quote.title', name: 'quote', component: Quote }, + { + label: 'modals.main.settings.sections.appearance.navbar.title', + name: 'navbar', + component: NavbarOptions, + }, + { + label: 'modals.main.settings.sections.greeting.title', + name: 'greeting', + component: GreetingOptions, + }, + { label: 'modals.main.settings.sections.time.title', name: 'time', component: TimeOptions }, + { + label: 'modals.main.settings.sections.quicklinks.title', + name: 'quicklinks', + component: QuickLinksOptions, + }, + { label: 'modals.main.settings.sections.quote.title', name: 'quote', component: QuoteOptions }, { label: 'modals.main.settings.sections.date.title', name: 'date', component: Date }, - { label: 'modals.main.settings.sections.message.title', name: 'message', component: MessageOptions }, - { label: 'modals.main.settings.sections.background.title', name: 'background', component: Background }, + { + label: 'modals.main.settings.sections.message.title', + name: 'message', + component: MessageOptions, + }, + { + label: 'modals.main.settings.sections.background.title', + name: 'background', + component: Background, + }, { label: 'modals.main.settings.sections.search.title', name: 'search', component: SearchOptions }, - { label: 'modals.main.settings.sections.weather.title', name: 'weather', component: WeatherOptions }, - { label: 'modals.main.settings.sections.appearance.title', name: 'appearance', component: Appearance }, + { + label: 'modals.main.settings.sections.weather.title', + name: 'weather', + component: WeatherOptions, + }, + { + label: 'modals.main.settings.sections.appearance.title', + name: 'appearance', + component: Appearance, + }, { label: 'modals.main.settings.sections.language.title', name: 'language', component: Language }, { label: 'modals.main.settings.sections.advanced.title', name: 'advanced', component: Advanced }, { label: 'modals.main.settings.sections.stats.title', name: 'stats', component: Stats }, - { label: 'modals.main.settings.sections.experimental.title', name: 'experimental', component: Experimental }, - { label: 'modals.main.settings.sections.changelog.title', name: 'changelog', component: Changelog }, + { + label: 'modals.main.settings.sections.experimental.title', + name: 'experimental', + component: Experimental, + }, + { + label: 'modals.main.settings.sections.changelog.title', + name: 'changelog', + component: Changelog, + }, { label: 'modals.main.settings.sections.about.title', name: 'about', component: About }, ]; @@ -55,4 +91,4 @@ function Settings(props) { ); } -export default memo(Settings); \ No newline at end of file +export default memo(Settings); diff --git a/src/features/widgets/navbar/Navbar.jsx b/src/features/widgets/navbar/Navbar.jsx index 60d0ae10..7ce46198 100644 --- a/src/features/widgets/navbar/Navbar.jsx +++ b/src/features/widgets/navbar/Navbar.jsx @@ -159,4 +159,4 @@ class Navbar extends PureComponent { } } -export default Navbar; +export { Navbar as default, Navbar }; diff --git a/src/features/widgets/navbar/index.jsx b/src/features/widgets/navbar/index.jsx new file mode 100644 index 00000000..b53a922d --- /dev/null +++ b/src/features/widgets/navbar/index.jsx @@ -0,0 +1,2 @@ +export * from './options'; +export * from './Navbar'; diff --git a/src/features/modals/main/settings/sections/Navbar.jsx b/src/features/widgets/navbar/options/NavbarOptions.jsx similarity index 96% rename from src/features/modals/main/settings/sections/Navbar.jsx rename to src/features/widgets/navbar/options/NavbarOptions.jsx index 36abfb94..2372d253 100644 --- a/src/features/modals/main/settings/sections/Navbar.jsx +++ b/src/features/widgets/navbar/options/NavbarOptions.jsx @@ -7,16 +7,15 @@ import { MdAddLink } from 'react-icons/md'; import { AddModal } from 'components/Elements/AddModal'; -import Checkbox from '../../../../../components/Form/Settings/Checkbox/Checkbox'; -import Dropdown from '../../../../../components/Form/Settings/Dropdown/Dropdown'; +import { Checkbox, Dropdown } from 'components/Form'; import { Button } from 'components/Elements'; -import { Row, Content, Action } from '../../../../../components/Layout/Settings/Item/SettingsItem'; +import { Row, Content, Action } from 'components/Layout/Settings'; import { Header } from 'components/Layout/Settings'; import { getTitleFromUrl, isValidUrl } from 'utils/links'; import { QuickLinks } from 'features/widgets/quicklinks'; -function Navbar() { +function NavbarOptions() { const [showRefreshOptions, setShowRefreshOptions] = useState( localStorage.getItem('refresh') === 'true', ); @@ -274,4 +273,6 @@ function Navbar() { ); } -export default memo(Navbar); +const MemoizedNavbarOptions = memo(NavbarOptions); + +export { MemoizedNavbarOptions as default, MemoizedNavbarOptions as NavbarOptions }; diff --git a/src/features/widgets/navbar/options/index.jsx b/src/features/widgets/navbar/options/index.jsx new file mode 100644 index 00000000..23ffd775 --- /dev/null +++ b/src/features/widgets/navbar/options/index.jsx @@ -0,0 +1 @@ +export * from './NavbarOptions'; diff --git a/src/features/widgets/quote/Quote.jsx b/src/features/widgets/quote/Quote.jsx index 7a1fcc40..c21ff156 100644 --- a/src/features/widgets/quote/Quote.jsx +++ b/src/features/widgets/quote/Quote.jsx @@ -22,7 +22,7 @@ import EventBus from 'utils/eventbus'; import './quote.scss'; -export default class Quote extends PureComponent { +class Quote extends PureComponent { buttons = { share: ( @@ -514,3 +514,5 @@ export default class Quote extends PureComponent { ); } } + +export { Quote as default, Quote }; diff --git a/src/features/widgets/quote/index.jsx b/src/features/widgets/quote/index.jsx new file mode 100644 index 00000000..d78effef --- /dev/null +++ b/src/features/widgets/quote/index.jsx @@ -0,0 +1,2 @@ +export * from './options'; +export * from './Quote'; diff --git a/src/features/modals/main/settings/sections/Quote.jsx b/src/features/widgets/quote/options/QuoteOptions.jsx similarity index 99% rename from src/features/modals/main/settings/sections/Quote.jsx rename to src/features/widgets/quote/options/QuoteOptions.jsx index 750e68a5..a5444b8f 100644 --- a/src/features/modals/main/settings/sections/Quote.jsx +++ b/src/features/widgets/quote/options/QuoteOptions.jsx @@ -16,7 +16,7 @@ import { Checkbox, Dropdown } from 'components/Form/Settings'; import { toast } from 'react-toastify'; import EventBus from 'utils/eventbus'; -export default class QuoteSettings extends PureComponent { +class QuoteOptions extends PureComponent { constructor() { super(); this.state = { @@ -289,3 +289,5 @@ export default class QuoteSettings extends PureComponent { ); } } + +export { QuoteOptions as default, QuoteOptions }; diff --git a/src/features/widgets/quote/options/index.jsx b/src/features/widgets/quote/options/index.jsx new file mode 100644 index 00000000..e0308de6 --- /dev/null +++ b/src/features/widgets/quote/options/index.jsx @@ -0,0 +1 @@ +export * from './QuoteOptions'; diff --git a/src/features/widgets/time/index.jsx b/src/features/widgets/time/index.jsx new file mode 100644 index 00000000..5f30ef38 --- /dev/null +++ b/src/features/widgets/time/index.jsx @@ -0,0 +1 @@ +export * from './options'; diff --git a/src/features/modals/main/settings/sections/Time.jsx b/src/features/widgets/time/options/TimeOptions.jsx similarity index 98% rename from src/features/modals/main/settings/sections/Time.jsx rename to src/features/widgets/time/options/TimeOptions.jsx index 473e3205..340d4944 100644 --- a/src/features/modals/main/settings/sections/Time.jsx +++ b/src/features/widgets/time/options/TimeOptions.jsx @@ -6,7 +6,7 @@ import { Checkbox, Dropdown, Radio } from 'components/Form/Settings'; import { MdRefresh } from 'react-icons/md'; -const TimeSettings = () => { +const TimeOptions = () => { const [timeType, setTimeType] = useState(localStorage.getItem('timeType') || 'digital'); const [hourColour, setHourColour] = useState(localStorage.getItem('hourColour') || '#ffffff'); const [minuteColour, setMinuteColour] = useState( @@ -218,4 +218,4 @@ const TimeSettings = () => { ); }; -export default TimeSettings; +export { TimeOptions as default, TimeOptions }; diff --git a/src/features/widgets/time/options/index.jsx b/src/features/widgets/time/options/index.jsx new file mode 100644 index 00000000..dad2d727 --- /dev/null +++ b/src/features/widgets/time/options/index.jsx @@ -0,0 +1 @@ +export * from './TimeOptions'; diff --git a/src/features/widgets/weather/Weather.jsx b/src/features/widgets/weather/Weather.jsx index 0f5c283f..68e168bc 100644 --- a/src/features/widgets/weather/Weather.jsx +++ b/src/features/widgets/weather/Weather.jsx @@ -53,7 +53,7 @@ class WeatherWidget extends PureComponent { return (
- {this.state.done === false ?

cheese

:

loading finished

} + {/*{this.state.done === false ?

cheese

:

loading finished

}*/}
diff --git a/src/features/widgets/weather/components/Expanded.jsx b/src/features/widgets/weather/components/Expanded.jsx index 18edb242..16309f8b 100644 --- a/src/features/widgets/weather/components/Expanded.jsx +++ b/src/features/widgets/weather/components/Expanded.jsx @@ -77,15 +77,17 @@ function Expanded({ state: { weather, icon }, weatherType, variables }) { return ( anyTooltipEnabled && ( -
+
{weatherType >= 3 && ( {variables.getMessage('widgets.weather.extra_information')} )} - {Object.keys(weatherTypes).map((type) => ( - - ))} +
+ {Object.keys(weatherTypes).map((type) => ( + + ))} +
) ); diff --git a/src/features/widgets/weather/weather.scss b/src/features/widgets/weather/weather.scss index 05616333..b630adfe 100644 --- a/src/features/widgets/weather/weather.scss +++ b/src/features/widgets/weather/weather.scss @@ -18,16 +18,6 @@ transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1); } - .expanded-info { - display: flex; - flex-direction: column; - align-items: flex-start; - - .tooltipTitle { - max-height: 12px; - } - } - .extra-info { width: 100%; font-size: 18px; @@ -97,12 +87,21 @@ } } -.expanded-info { - display: none; +.weatherExpandedInfo { + padding: 0 25px 25px 25px; + text-align: left; +} + +.weatherExpandedInfoItems { font-size: 18px; text-transform: capitalize; gap: 10px; - padding: 15px 25px 25px 25px; + display: grid; + grid-template-columns: repeat(2, 1fr); + + .tooltipTitle { + max-height: 12px; + } span { display: flex;