From 467adcdd859d8b3bbfbb16081b743d002788f606 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Mon, 27 Oct 2025 23:27:37 +0000 Subject: [PATCH] Refactor state updates for consistency and readability across components - Simplified state updates in Background, Favourite, PhotoInformation, GreetingOptions, Added, Browse, About, Overview, Navbar, Apps, Notes, QuickLinksOptions, Quote, and QuoteOptions components by consolidating multiple lines into single line updates. - Improved readability by reducing unnecessary line breaks and maintaining consistent formatting in JSX elements. - Enhanced maintainability by ensuring uniformity in how state is set and how JSX is structured. --- eslint.config.js | 20 +- src/features/background/Background.jsx | 42 +-- .../background/components/Favourite.jsx | 16 +- .../components/PhotoInformation.jsx | 7 +- .../greeting/options/GreetingOptions.jsx | 7 +- src/features/marketplace/views/Added.jsx | 51 +--- src/features/marketplace/views/Browse.jsx | 52 +--- src/features/misc/sections/About.jsx | 6 +- src/features/misc/sections/Overview.jsx | 21 +- src/features/navbar/Navbar.jsx | 4 +- src/features/navbar/components/Apps.jsx | 12 +- src/features/navbar/components/Notes.jsx | 20 +- .../quicklinks/options/QuickLinksOptions.jsx | 257 ++++++++++-------- src/features/quote/Quote.jsx | 174 ++++++------ src/features/quote/options/QuoteOptions.jsx | 24 +- src/features/time/Clock.jsx | 14 +- src/utils/marketplace/install.js | 5 +- vite.config.mjs | 44 +-- 18 files changed, 296 insertions(+), 480 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index 5e3f7a34..8490d2f6 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -24,11 +24,7 @@ export default [ languageOptions: { ecmaVersion: 2024, sourceType: 'module', - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - }, + parserOptions: { ecmaFeatures: { jsx: true } }, globals: { // Browser globals window: 'readonly', @@ -60,16 +56,8 @@ export default [ require: 'readonly', }, }, - plugins: { - react, - 'react-hooks': reactHooks, - 'jsx-a11y': jsxA11y, - }, - settings: { - react: { - version: 'detect', - }, - }, + plugins: { react, 'react-hooks': reactHooks, 'jsx-a11y': jsxA11y }, + settings: { react: { version: 'detect' } }, rules: { ...js.configs.recommended.rules, ...react.configs.recommended.rules, @@ -84,7 +72,7 @@ export default [ // General rules 'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], 'no-console': ['warn', { allow: ['warn', 'error'] }], - + // Modern JS 'prefer-const': 'warn', 'no-var': 'error', diff --git a/src/features/background/Background.jsx b/src/features/background/Background.jsx index a87d67b1..72b61474 100644 --- a/src/features/background/Background.jsx +++ b/src/features/background/Background.jsx @@ -1,4 +1,3 @@ - // todo: rewrite this mess import variables from 'config/variables'; import { PureComponent } from 'react'; @@ -24,12 +23,7 @@ export default class Background extends PureComponent { url: '', currentAPI: '', firstTime: false, - photoInfo: { - hidden: false, - offline: false, - photographerURL: '', - photoURL: '', - }, + photoInfo: { hidden: false, offline: false, photographerURL: '', photoURL: '' }, }; } @@ -164,22 +158,9 @@ export default class Background extends PureComponent { const setFavourited = ({ type, url, credit, location, camera, pun, offline }) => { if (type === 'random_colour' || type === 'random_gradient') { - return this.setState({ - type: 'colour', - style: `background:${url}`, - }); + return this.setState({ type: 'colour', style: `background:${url}` }); } - this.setState({ - url, - photoInfo: { - credit, - location, - camera, - pun, - offline, - url, - }, - }); + this.setState({ url, photoInfo: { credit, location, camera, pun, offline, url } }); }; const favourited = JSON.parse(localStorage.getItem('favourite')); @@ -195,7 +176,8 @@ export default class Background extends PureComponent { } // API background - const data = JSON.parse(localStorage.getItem('nextImage')) || (await this.getAPIImageData()); + const data = + JSON.parse(localStorage.getItem('nextImage')) || (await this.getAPIImageData()); localStorage.setItem('nextImage', null); if (data) { this.setState(data); @@ -263,9 +245,7 @@ export default class Background extends PureComponent { url: customBackground, type: 'custom', video: videoCheck(customBackground), - photoInfo: { - hidden: true, - }, + photoInfo: { hidden: true }, }; this.setState(object); @@ -363,15 +343,7 @@ export default class Background extends PureComponent { // this resets it so the fade in and getting background all works properly const refresh = () => { element.classList.remove('fade-in'); - this.setState({ - url: '', - style: '', - type: '', - video: false, - photoInfo: { - hidden: true, - }, - }); + this.setState({ url: '', style: '', type: '', video: false, photoInfo: { hidden: true } }); this.getBackground(); }; diff --git a/src/features/background/components/Favourite.jsx b/src/features/background/components/Favourite.jsx index af8d79ef..2f677705 100644 --- a/src/features/background/components/Favourite.jsx +++ b/src/features/background/components/Favourite.jsx @@ -20,9 +20,7 @@ class Favourite extends PureComponent { async favourite() { if (localStorage.getItem('favourite')) { localStorage.removeItem('favourite'); - this.setState({ - favourited: this.buttons.unfavourited, - }); + this.setState({ favourited: this.buttons.unfavourited }); this.props.tooltipText(variables.getMessage('widgets.quote.favourite')); variables.stats.postEvent('feature', 'Background favourite'); } else { @@ -62,13 +60,7 @@ class Favourite extends PureComponent { } if (type === 'custom') { - localStorage.setItem( - 'favourite', - JSON.stringify({ - type, - url, - }), - ); + localStorage.setItem('favourite', JSON.stringify({ type, url })); } else { // photo information now hides information if it isn't sent, unless if photoinformation hover is hidden const location = document.getElementById('infoLocation'); @@ -92,9 +84,7 @@ class Favourite extends PureComponent { } } - this.setState({ - favourited: this.buttons.favourited, - }); + this.setState({ favourited: this.buttons.favourited }); this.props.tooltipText(variables.getMessage('widgets.quote.unfavourite')); variables.stats.postEvent('feature', 'Background unfavourite'); } diff --git a/src/features/background/components/PhotoInformation.jsx b/src/features/background/components/PhotoInformation.jsx index c66d99c4..c417153e 100644 --- a/src/features/background/components/PhotoInformation.jsx +++ b/src/features/background/components/PhotoInformation.jsx @@ -170,12 +170,7 @@ function PhotoInformation({ info, url, api }) { {info.photoURL ? ( - + {api.charAt(0).toUpperCase() + api.slice(1)} ) : ( diff --git a/src/features/greeting/options/GreetingOptions.jsx b/src/features/greeting/options/GreetingOptions.jsx index a55ede5b..bd137257 100644 --- a/src/features/greeting/options/GreetingOptions.jsx +++ b/src/features/greeting/options/GreetingOptions.jsx @@ -50,12 +50,7 @@ const GreetingOptions = () => { const customEvents = JSON.parse(localStorage.getItem('customEvents')) || []; // Create a new event - const newEvent = { - id: 'widgets.greeting.halloween', - name: '', - month: 1, - date: 1, - }; + const newEvent = { id: 'widgets.greeting.halloween', name: '', month: 1, date: 1 }; // Add the new event to the array const updatedEvents = [...customEvents, newEvent]; diff --git a/src/features/marketplace/views/Added.jsx b/src/features/marketplace/views/Added.jsx index 626fa195..b4541254 100644 --- a/src/features/marketplace/views/Added.jsx +++ b/src/features/marketplace/views/Added.jsx @@ -62,18 +62,13 @@ export default class Added extends PureComponent { } if (failedReason !== '' && this.state.showFailed === false) { - return this.setState({ - failedReason, - showFailed: true, - }); + return this.setState({ failedReason, showFailed: true }); } install(input.type, input, true, false); toast(variables.getMessage('toasts.installed')); variables.stats.postEvent('marketplace', 'Sideload'); - this.setState({ - installed: JSON.parse(localStorage.getItem('installed')), - }); + this.setState({ installed: JSON.parse(localStorage.getItem('installed')) }); } getSideloadButton() { @@ -91,9 +86,7 @@ export default class Added extends PureComponent { toggle(type, data) { if (type === 'item') { const installed = JSON.parse(localStorage.getItem('installed')); - const info = { - data: installed.find((i) => i.name === data.name), - }; + const info = { data: installed.find((i) => i.name === data.name) }; this.setState({ item: { @@ -110,9 +103,7 @@ export default class Added extends PureComponent { }); variables.stats.postEvent('marketplace', 'ItemPage viewed'); } else { - this.setState({ - item: {}, - }); + this.setState({ item: {} }); } } @@ -157,9 +148,7 @@ export default class Added extends PureComponent { break; } - this.setState({ - installed, - }); + this.setState({ installed }); if (sendEvent) { variables.stats.postEvent('marketplace', 'Sort'); @@ -178,11 +167,7 @@ export default class Added extends PureComponent { }); if (updates > 0) { - toast( - variables.getMessage('modals.main.addons.updates_available', { - amount: updates, - }), - ); + toast(variables.getMessage('modals.main.addons.updates_available', { amount: updates })); } else { toast(variables.getMessage('modals.main.addons.no_updates')); } @@ -201,9 +186,7 @@ export default class Added extends PureComponent { toast(variables.getMessage('toasts.uninstalled_all')); - this.setState({ - installed: [], - }); + this.setState({ installed: [] }); this.forceUpdate(); } @@ -301,22 +284,10 @@ export default class Added extends PureComponent { name="sortAddons" onChange={(value) => this.sortAddons(value)} items={[ - { - value: 'newest', - text: variables.getMessage('modals.main.addons.sort.newest'), - }, - { - value: 'oldest', - text: variables.getMessage('modals.main.addons.sort.oldest'), - }, - { - value: 'a-z', - text: variables.getMessage('modals.main.addons.sort.a_z'), - }, - { - value: 'z-a', - text: variables.getMessage('modals.main.addons.sort.z_a'), - }, + { value: 'newest', text: variables.getMessage('modals.main.addons.sort.newest') }, + { value: 'oldest', text: variables.getMessage('modals.main.addons.sort.oldest') }, + { value: 'a-z', text: variables.getMessage('modals.main.addons.sort.a_z') }, + { value: 'z-a', text: variables.getMessage('modals.main.addons.sort.z_a') }, ]} /> this.changeSort(value)} items={[ - { - value: 'a-z', - text: variables.getMessage('modals.main.addons.sort.a_z'), - }, - { - value: 'z-a', - text: variables.getMessage('modals.main.addons.sort.z_a'), - }, + { value: 'a-z', text: variables.getMessage('modals.main.addons.sort.a_z') }, + { value: 'z-a', text: variables.getMessage('modals.main.addons.sort.z_a') }, ]} /> diff --git a/src/features/misc/sections/About.jsx b/src/features/misc/sections/About.jsx index da6cf1ef..df3a32e0 100644 --- a/src/features/misc/sections/About.jsx +++ b/src/features/misc/sections/About.jsx @@ -345,11 +345,7 @@ class About extends PureComponent {
{variables.getMessage('modals.main.settings.sections.about.photographers')} diff --git a/src/features/misc/sections/Overview.jsx b/src/features/misc/sections/Overview.jsx index e1b0c16f..623e7591 100644 --- a/src/features/misc/sections/Overview.jsx +++ b/src/features/misc/sections/Overview.jsx @@ -40,10 +40,7 @@ const widget_name = { const SortableItem = ({ id }) => { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id }); - const style = { - transform: CSS.Transform.toString(transform), - transition, - }; + const style = { transform: CSS.Transform.toString(transform), transition }; return (
  • @@ -77,9 +74,7 @@ const Overview = () => { const sensors = useSensors( useSensor(PointerSensor), - useSensor(KeyboardSensor, { - coordinateGetter: sortableKeyboardCoordinates, - }), + useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), ); const handleDragEnd = (event) => { @@ -135,11 +130,7 @@ const Overview = () => { const data = await response.json(); data.date = new window.Date(data.date).toLocaleDateString( variables.languagecode.replace('_', '-'), - { - year: 'numeric', - month: 'long', - day: 'numeric', - }, + { year: 'numeric', month: 'long', day: 'numeric' }, ); setNews(data); setNewsDone(true); @@ -187,7 +178,11 @@ const Overview = () => { {variables.getMessage('modals.main.settings.sections.order.title')} - +
      {items.map((value) => { diff --git a/src/features/navbar/Navbar.jsx b/src/features/navbar/Navbar.jsx index d997e15c..b0718627 100644 --- a/src/features/navbar/Navbar.jsx +++ b/src/features/navbar/Navbar.jsx @@ -51,9 +51,7 @@ class Navbar extends PureComponent { break; } - this.setState({ - refreshText, - }); + this.setState({ refreshText }); } componentDidMount() { diff --git a/src/features/navbar/components/Apps.jsx b/src/features/navbar/components/Apps.jsx index c27c1e96..bee909d8 100644 --- a/src/features/navbar/components/Apps.jsx +++ b/src/features/navbar/components/Apps.jsx @@ -45,15 +45,11 @@ class Apps extends PureComponent { } showApps() { - this.setState({ - showApps: true, - }); + this.setState({ showApps: true }); } hideApps() { - this.setState({ - showApps: localStorage.getItem('AppsPinned') === 'true', - }); + this.setState({ showApps: localStorage.getItem('AppsPinned') === 'true' }); } render() { @@ -137,9 +133,7 @@ function AppsWrapper() { const { x, y, refs, strategy } = useFloating({ placement: 'bottom', middleware: [shift()], - elements: { - reference, - }, + elements: { reference }, }); return ( diff --git a/src/features/navbar/components/Notes.jsx b/src/features/navbar/components/Notes.jsx index 1b1cc369..34b2f890 100644 --- a/src/features/navbar/components/Notes.jsx +++ b/src/features/navbar/components/Notes.jsx @@ -47,30 +47,22 @@ class Notes extends PureComponent { setNotes = (e) => { localStorage.setItem('notes', e.target.value); - this.setState({ - notes: e.target.value, - }); + this.setState({ notes: e.target.value }); }; showNotes() { - this.setState({ - showNotes: true, - }); + this.setState({ showNotes: true }); } hideNotes() { - this.setState({ - showNotes: localStorage.getItem('notesPinned') === 'true', - }); + this.setState({ showNotes: localStorage.getItem('notesPinned') === 'true' }); } pin() { variables.stats.postEvent('feature', 'Notes pin'); const notesPinned = localStorage.getItem('notesPinned') === 'true'; localStorage.setItem('notesPinned', !notesPinned); - this.setState({ - showNotes: !notesPinned, - }); + this.setState({ showNotes: !notesPinned }); } copy() { @@ -156,9 +148,7 @@ function NotesWrapper() { const { x, y, refs, strategy } = useFloating({ placement: 'bottom', middleware: [shift()], - elements: { - reference, - }, + elements: { reference }, }); return ( diff --git a/src/features/quicklinks/options/QuickLinksOptions.jsx b/src/features/quicklinks/options/QuickLinksOptions.jsx index 6c3efd52..ff5e31fa 100644 --- a/src/features/quicklinks/options/QuickLinksOptions.jsx +++ b/src/features/quicklinks/options/QuickLinksOptions.jsx @@ -59,7 +59,10 @@ const SortableItem = ({ value, enabled, startEditLink, deleteLink }) => { }; const getIconUrl = (item) => { - return item.icon || 'https://icon.horse/icon/' + item.url.replace('https://', '').replace('http://', ''); + return ( + item.icon || + 'https://icon.horse/icon/' + item.url.replace('https://', '').replace('http://', '') + ); }; return ( @@ -115,14 +118,8 @@ const SortableItem = ({ value, enabled, startEditLink, deleteLink }) => { const SortableList = ({ items, enabled, onDragEnd, startEditLink, deleteLink }) => { const sensors = useSensors( - useSensor(PointerSensor, { - activationConstraint: { - distance: 6, - }, - }), - useSensor(KeyboardSensor, { - coordinateGetter: sortableKeyboardCoordinates, - }), + useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), + useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), ); return ( @@ -162,85 +159,88 @@ class QuickLinksOptions extends PureComponent { } setContainerDisplay(enabled) { - if (!this.quicklinksContainer || !this.quicklinksContainer.current) return; - const el = this.quicklinksContainer.current; - el.classList.toggle('disabled', !enabled); - if (!enabled) { - el.setAttribute('aria-hidden', 'true'); - } else { - el.removeAttribute('aria-hidden'); + if (!this.quicklinksContainer || !this.quicklinksContainer.current) return; + const el = this.quicklinksContainer.current; + el.classList.toggle('disabled', !enabled); + if (!enabled) { + el.setAttribute('aria-hidden', 'true'); + } else { + el.removeAttribute('aria-hidden'); + } } -} deleteLink(key, event) { - event.preventDefault(); - - const stored = readQuicklinks(); - const data = stored.filter((i) => i.key !== key); - this.silenceEvent = true; - localStorage.setItem('quicklinks', JSON.stringify(data)); - this.setState({ items: data }, () => { - variables.stats.postEvent('feature', 'Quicklink delete'); - EventBus.emit('refresh', 'quicklinks'); - setTimeout(() => { this.silenceEvent = false; }, 0); - }); -} + event.preventDefault(); + const stored = readQuicklinks(); + const data = stored.filter((i) => i.key !== key); + this.silenceEvent = true; + localStorage.setItem('quicklinks', JSON.stringify(data)); + this.setState({ items: data }, () => { + variables.stats.postEvent('feature', 'Quicklink delete'); + EventBus.emit('refresh', 'quicklinks'); + setTimeout(() => { + this.silenceEvent = false; + }, 0); + }); + } async addLink(name, url, icon) { - const data = readQuicklinks(); + const data = readQuicklinks(); - if (!url.startsWith('http://') && !url.startsWith('https://')) { - url = 'https://' + url; + if (!url.startsWith('http://') && !url.startsWith('https://')) { + url = 'https://' + url; + } + + if (url.length <= 0 || isValidUrl(url) === false) { + return this.setState({ urlError: variables.getMessage('widgets.quicklinks.url_error') }); + } + + if (icon.length > 0 && isValidUrl(icon) === false) { + return this.setState({ iconError: variables.getMessage('widgets.quicklinks.url_error') }); + } + + const newItem = { + name: name || (await getTitleFromUrl(url)), + url, + icon: icon || '', + key: Date.now().toString() + Math.random().toString(36).substring(2), + }; + + data.push(newItem); + + this.silenceEvent = true; + localStorage.setItem('quicklinks', JSON.stringify(data)); + this.setState({ items: data, showAddModal: false, urlError: '', iconError: '' }, () => { + variables.stats.postEvent('feature', 'Quicklink add'); + EventBus.emit('refresh', 'quicklinks'); + setTimeout(() => { + this.silenceEvent = false; + }, 0); + }); } - if (url.length <= 0 || isValidUrl(url) === false) { - return this.setState({ urlError: variables.getMessage('widgets.quicklinks.url_error') }); - } - - if (icon.length > 0 && isValidUrl(icon) === false) { - return this.setState({ iconError: variables.getMessage('widgets.quicklinks.url_error') }); - } - - const newItem = { - name: name || (await getTitleFromUrl(url)), - url, - icon: icon || '', - key: Date.now().toString() + Math.random().toString(36).substring(2), - }; - - data.push(newItem); - - this.silenceEvent = true; - localStorage.setItem('quicklinks', JSON.stringify(data)); - this.setState({ items: data, showAddModal: false, urlError: '', iconError: '' }, () => { - variables.stats.postEvent('feature', 'Quicklink add'); - EventBus.emit('refresh', 'quicklinks'); - setTimeout(() => { this.silenceEvent = false; }, 0); - }); -} - - startEditLink(data) { this.setState({ edit: true, editData: data, showAddModal: true }); } async editLink(og, name, url, icon) { - const data = readQuicklinks(); - const dataobj = data.find((i) => i.key === og.key); - if (!dataobj) return; + const data = readQuicklinks(); + const dataobj = data.find((i) => i.key === og.key); + if (!dataobj) return; - dataobj.name = name || (await getTitleFromUrl(url)); - dataobj.url = url; - dataobj.icon = icon || ''; - - this.silenceEvent = true; - localStorage.setItem('quicklinks', JSON.stringify(data)); - this.setState({ items: data, showAddModal: false, edit: false }, () => { - EventBus.emit('refresh', 'quicklinks'); - setTimeout(() => { this.silenceEvent = false; }, 0); - }); -} + dataobj.name = name || (await getTitleFromUrl(url)); + dataobj.url = url; + dataobj.icon = icon || ''; + this.silenceEvent = true; + localStorage.setItem('quicklinks', JSON.stringify(data)); + this.setState({ items: data, showAddModal: false, edit: false }, () => { + EventBus.emit('refresh', 'quicklinks'); + setTimeout(() => { + this.silenceEvent = false; + }, 0); + }); + } arrayMove = (array, oldIndex, newIndex) => { const result = Array.from(array); @@ -251,7 +251,7 @@ class QuickLinksOptions extends PureComponent { handleDragEnd = (event) => { const { active, over } = event; - + if (!over || !this.state.enabled) return; if (active.id === over.id) return; @@ -272,51 +272,48 @@ class QuickLinksOptions extends PureComponent { }); }; - componentDidMount() { - this.setContainerDisplay(this.state.enabled); + this.setContainerDisplay(this.state.enabled); - this.handleRefresh = (data) => { - if (data !== 'quicklinks') return; - if (this.silenceEvent) return; + this.handleRefresh = (data) => { + if (data !== 'quicklinks') return; + if (this.silenceEvent) return; - const enabled = localStorage.getItem('quicklinksenabled') !== 'false'; - const newItems = readQuicklinks(); - const oldItems = this.state.items || []; - const oldKeys = new Set(oldItems.map(i => i.key)); - const newKeys = new Set(newItems.map(i => i.key)); + const enabled = localStorage.getItem('quicklinksenabled') !== 'false'; + const newItems = readQuicklinks(); + const oldItems = this.state.items || []; + const oldKeys = new Set(oldItems.map((i) => i.key)); + const newKeys = new Set(newItems.map((i) => i.key)); - const keysEqual = - oldItems.length === newItems.length && - oldItems.every(i => newKeys.has(i.key)); + const keysEqual = + oldItems.length === newItems.length && oldItems.every((i) => newKeys.has(i.key)); - if (enabled !== this.state.enabled || !keysEqual) { - this.setContainerDisplay(enabled); - this.setState({ items: newItems, enabled }); - } - }; - - EventBus.on('refresh', this.handleRefresh); -} + if (enabled !== this.state.enabled || !keysEqual) { + this.setContainerDisplay(enabled); + this.setState({ items: newItems, enabled }); + } + }; + EventBus.on('refresh', this.handleRefresh); + } componentDidUpdate(prevProps, prevState) { - if (prevState.enabled !== this.state.enabled) { - this.setContainerDisplay(this.state.enabled); - } -} - - componentWillUnmount() { - if (this.handleRefresh) { - EventBus.off('refresh', this.handleRefresh); - } else { - try { - EventBus.off('refresh'); - } catch { - // Ignore errors + if (prevState.enabled !== this.state.enabled) { + this.setContainerDisplay(this.state.enabled); + } + } + + componentWillUnmount() { + if (this.handleRefresh) { + EventBus.off('refresh', this.handleRefresh); + } else { + try { + EventBus.off('refresh'); + } catch { + // Ignore errors + } } } -} render() { const QUICKLINKS_SECTION = 'modals.main.settings.sections.quicklinks'; const { enabled } = this.state; @@ -328,8 +325,16 @@ class QuickLinksOptions extends PureComponent { subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)} /> - - + + ); @@ -338,7 +343,9 @@ class QuickLinksOptions extends PureComponent { @@ -395,9 +405,18 @@ class QuickLinksOptions extends PureComponent {
      - {variables.getMessage(`${QUICKLINKS_SECTION}.no_quicklinks`)} - {variables.getMessage('modals.main.settings.sections.message.add_some')} -
      )} @@ -432,7 +451,9 @@ class QuickLinksOptions extends PureComponent { editLink={(og, name, url, icon) => this.editLink(og, name, url, icon)} edit={this.state.edit} editData={this.state.editData} - closeModal={() => this.setState({ showAddModal: false, urlError: '', iconError: '', edit: false })} + closeModal={() => + this.setState({ showAddModal: false, urlError: '', iconError: '', edit: false }) + } /> @@ -440,4 +461,4 @@ class QuickLinksOptions extends PureComponent { } } -export { QuickLinksOptions as default, QuickLinksOptions }; \ No newline at end of file +export { QuickLinksOptions as default, QuickLinksOptions }; diff --git a/src/features/quote/Quote.jsx b/src/features/quote/Quote.jsx index 5a3ec2b4..df1752db 100644 --- a/src/features/quote/Quote.jsx +++ b/src/features/quote/Quote.jsx @@ -122,10 +122,7 @@ class Quote extends PureComponent { async getAuthorImg(author) { if (localStorage.getItem('authorImg') === 'false') { - return { - authorimg: null, - authorimglicense: null, - }; + return { authorimg: null, authorimglicense: null }; } const authorimgdata = await ( @@ -185,10 +182,7 @@ class Quote extends PureComponent { authorimglicense = null; } - return { - authorimg, - authorimglicense, - }; + return { authorimg, authorimglicense }; } async getQuote() { @@ -237,9 +231,7 @@ class Quote extends PureComponent { noQuote: false, }); } else { - this.setState({ - noQuote: true, - }); + this.setState({ noQuote: true }); } break; } @@ -330,14 +322,10 @@ class Quote extends PureComponent { favourite() { if (localStorage.getItem('favouriteQuote')) { localStorage.removeItem('favouriteQuote'); - this.setState({ - favourited: this.buttons.unfavourited, - }); + this.setState({ favourited: this.buttons.unfavourited }); } else { localStorage.setItem('favouriteQuote', this.state.quote + ' - ' + this.state.author); - this.setState({ - favourited: this.buttons.favourited, - }); + this.setState({ favourited: this.buttons.favourited }); } variables.stats.postEvent('feature', 'Quote favourite'); @@ -438,85 +426,91 @@ class Quote extends PureComponent { {localStorage.getItem('widgetStyle') === 'legacy' ? ( <> - { this.authorDetails && ( + {this.authorDetails && ( <> - -
      - {this.state.copy} {this.state.share} {this.state.favourited} -
      - - )} + +
      + {this.state.copy} {this.state.share} {this.state.favourited} +
      + + )} ) : ( <> - { this.authorDetails && ( - <> -
      -
      - {localStorage.getItem('authorImg') !== 'false' ? ( -
      - {this.state.authorimg === undefined || this.state.authorimg ? '' : } -
      - ) : null} - {this.state.author !== null ? ( -
      - {this.state.author} - {this.state.authorOccupation !== 'Unknown' && ( - {this.state.authorOccupation} - )} - - {this.state.authorimglicense && - this.state.authorimglicense.substring(0, 40) + - (this.state.authorimglicense.length > 40 ? '…' : '')} - -
      - ) : ( -
      - {/* these are placeholders for skeleton and as such don't need translating */} - loading - loading -
      - )} - {(this.state.authorOccupation !== 'Unknown' && this.state.authorlink !== null) || - this.state.copy || - this.state.share || - this.state.favourited ? ( -
      - {this.state.authorOccupation !== 'Unknown' && this.state.authorlink !== null ? ( - - +
      +
      + {localStorage.getItem('authorImg') !== 'false' ? ( +
      - - {' '} - - ) : null} - {this.state.copy} {this.state.share} {this.state.favourited} + {this.state.authorimg === undefined || this.state.authorimg ? ( + '' + ) : ( + + )} +
      + ) : null} + {this.state.author !== null ? ( +
      + {this.state.author} + {this.state.authorOccupation !== 'Unknown' && ( + {this.state.authorOccupation} + )} + + {this.state.authorimglicense && + this.state.authorimglicense.substring(0, 40) + + (this.state.authorimglicense.length > 40 ? '…' : '')} + +
      + ) : ( +
      + {/* these are placeholders for skeleton and as such don't need translating */} + loading + loading +
      + )} + {(this.state.authorOccupation !== 'Unknown' && + this.state.authorlink !== null) || + this.state.copy || + this.state.share || + this.state.favourited ? ( +
      + {this.state.authorOccupation !== 'Unknown' && + this.state.authorlink !== null ? ( + + + + {' '} + + ) : null} + {this.state.copy} {this.state.share} {this.state.favourited} +
      + ) : null} +
      - ) : null} -
      -
      - - )} + + )} )}
      diff --git a/src/features/quote/options/QuoteOptions.jsx b/src/features/quote/options/QuoteOptions.jsx index 917a4395..43ebb878 100644 --- a/src/features/quote/options/QuoteOptions.jsx +++ b/src/features/quote/options/QuoteOptions.jsx @@ -29,14 +29,7 @@ class QuoteOptions extends PureComponent { resetCustom = () => { localStorage.setItem('customQuote', '[{"quote": "", "author": ""}]'); - this.setState({ - customQuote: [ - { - quote: '', - author: '', - }, - ], - }); + this.setState({ customQuote: [{ quote: '', author: '' }] }); toast(variables.getMessage('toasts.reset')); EventBus.emit('refresh', 'background'); }; @@ -46,9 +39,7 @@ class QuoteOptions extends PureComponent { const customQuote = this.state.customQuote; customQuote[index][type] = result; - this.setState({ - customQuote, - }); + this.setState({ customQuote }); this.forceUpdate(); localStorage.setItem('customQuote', JSON.stringify(customQuote)); @@ -59,17 +50,12 @@ class QuoteOptions extends PureComponent { modifyCustomQuote(type, index) { const customQuote = this.state.customQuote; if (type === 'add') { - customQuote.push({ - quote: '', - author: '', - }); + customQuote.push({ quote: '', author: '' }); } else { customQuote.splice(index, 1); } - this.setState({ - customQuote, - }); + this.setState({ customQuote }); this.forceUpdate(); localStorage.setItem('customQuote', JSON.stringify(customQuote)); @@ -153,7 +139,7 @@ class QuoteOptions extends PureComponent { name="authorLink" text={variables.getMessage(`${QUOTE_SECTION}.author_link`)} element=".other" - disabled={localStorage.getItem('authorDetails' )=== 'false'} + disabled={localStorage.getItem('authorDetails') === 'false'} /> 11 ? 'PM' : 'AM', - }); + this.setState({ time, ampm: now.getHours() > 11 ? 'PM' : 'AM' }); } break; } diff --git a/src/utils/marketplace/install.js b/src/utils/marketplace/install.js index c2fb7ce7..99e5a5a4 100644 --- a/src/utils/marketplace/install.js +++ b/src/utils/marketplace/install.js @@ -17,10 +17,7 @@ export function install(type, input, sideload, collection) { const oldSettings = []; Object.keys(localStorage).forEach((key) => { - oldSettings.push({ - name: key, - value: localStorage.getItem(key), - }); + oldSettings.push({ name: key, value: localStorage.getItem(key) }); }); localStorage.setItem('backup_settings', JSON.stringify(oldSettings)); diff --git a/vite.config.mjs b/vite.config.mjs index 68f86a7d..28792e27 100644 --- a/vite.config.mjs +++ b/vite.config.mjs @@ -29,9 +29,7 @@ const prepareBuilds = () => ({ fs.cpSync( path.resolve(__dirname, './manifest/_locales'), path.resolve(__dirname, './build/chrome/_locales'), - { - recursive: true, - }, + { recursive: true }, ); fs.cpSync(path.resolve(__dirname, './dist'), path.resolve(__dirname, './build/chrome/'), { recursive: true, @@ -39,17 +37,13 @@ const prepareBuilds = () => ({ fs.cpSync( path.resolve(__dirname, './src/assets/icons'), path.resolve(__dirname, './build/chrome/icons'), - { - recursive: true, - }, + { recursive: true }, ); fs.mkdirSync(path.resolve(__dirname, './build/chrome/src/assets'), { recursive: true }); fs.cpSync( path.resolve(__dirname, './src/assets'), path.resolve(__dirname, './build/chrome/src/assets'), - { - recursive: true, - }, + { recursive: true }, ); // firefox @@ -68,16 +62,12 @@ const prepareBuilds = () => ({ fs.cpSync( path.resolve(__dirname, './src/assets/icons'), path.resolve(__dirname, './build/firefox/icons'), - { - recursive: true, - }, + { recursive: true }, ); fs.cpSync( path.resolve(__dirname, './src/assets'), path.resolve(__dirname, './build/firefox/src/assets'), - { - recursive: true, - }, + { recursive: true }, ); // create zip @@ -94,9 +84,7 @@ const prepareBuilds = () => ({ fs.cpSync( path.resolve(__dirname, './src/assets'), path.resolve(__dirname, './dist/src/assets'), - { - recursive: true, - }, + { recursive: true }, ); } }, @@ -105,17 +93,9 @@ const prepareBuilds = () => ({ export default defineConfig(({ command, mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { - define: { - __APP_ENV__: JSON.stringify(env.APP_ENV), - }, + define: { __APP_ENV__: JSON.stringify(env.APP_ENV) }, plugins: [react(), prepareBuilds(), progress()], - server: { - open: true, - hmr: { - protocol: 'ws', - host: 'localhost', - }, - }, + server: { open: true, hmr: { protocol: 'ws', host: 'localhost' } }, build: { target: 'esnext', // Use modern JavaScript features minify: isProd ? 'esbuild' : false, @@ -151,12 +131,6 @@ export default defineConfig(({ command, mode }) => { utils: path.resolve(__dirname, './src/utils'), }, }, - css: { - preprocessorOptions: { - scss: { - api: 'modern-compiler', - }, - }, - }, + css: { preprocessorOptions: { scss: { api: 'modern-compiler' } } }, }; });