From 16639c4b940cfa15e430cef3921fbe801985be93 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Thu, 8 Feb 2024 18:34:44 +0000 Subject: [PATCH] refactor: partition of quote settings for increased readability --- package.json | 4 +- pnpm-lock.yaml | 70 +++---- .../modals/main/settings/Section.jsx | 5 +- .../modals/main/settings/sections/Quote.jsx | 181 ++++++++---------- 4 files changed, 125 insertions(+), 135 deletions(-) diff --git a/package.json b/package.json index ec198941..b62ed0f5 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@fontsource/montserrat": "5.0.16", "@muetab/react-color-gradient-picker": "0.1.2", "@muetab/react-sortable-hoc": "^2.0.1", - "@mui/material": "5.15.7", + "@mui/material": "5.15.9", "@sentry/react": "^7.100.1", "embla-carousel-autoplay": "8.0.0-rc22", "embla-carousel-react": "8.0.0-rc22", @@ -47,7 +47,7 @@ "stylelint": "^16.2.1", "stylelint-config-standard-scss": "^13.0.0", "stylelint-scss": "^6.1.0", - "vite": "5.0.12", + "vite": "5.1.0", "vite-plugin-progress": "^0.0.7" }, "scripts": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 245dfcf0..62040b2c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,8 +26,8 @@ dependencies: specifier: ^2.0.1 version: 2.0.1(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0) '@mui/material': - specifier: 5.15.7 - version: 5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) + specifier: 5.15.9 + version: 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) '@sentry/react': specifier: ^7.100.1 version: 7.100.1(react@18.2.0) @@ -74,7 +74,7 @@ devDependencies: version: 0.0.2 '@vitejs/plugin-react-swc': specifier: ^3.6.0 - version: 3.6.0(vite@5.0.12) + version: 3.6.0(vite@5.1.0) adm-zip: specifier: ^0.5.10 version: 0.5.10 @@ -106,11 +106,11 @@ devDependencies: specifier: ^6.1.0 version: 6.1.0(stylelint@16.2.1) vite: - specifier: 5.0.12 - version: 5.0.12(@types/node@20.11.16)(sass@1.70.0) + specifier: 5.1.0 + version: 5.1.0(@types/node@20.11.16)(sass@1.70.0) vite-plugin-progress: specifier: ^0.0.7 - version: 0.0.7(vite@5.0.12) + version: 0.0.7(vite@5.1.0) packages: @@ -2227,8 +2227,8 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@mui/base@5.0.0-beta.34(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-e2mbTGTtReD/y5RFwnhkl1Tgl3XwgJhY040IlfkTVaU9f5LWrVhEnpRsYXu3B1CtLrwiWs4cu7aMHV9yRd4jpw==} + /@mui/base@5.0.0-beta.36(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2241,7 +2241,7 @@ packages: '@babel/runtime': 7.23.9 '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0) '@mui/types': 7.2.13 - '@mui/utils': 5.15.8(react@18.2.0) + '@mui/utils': 5.15.9(react@18.2.0) '@popperjs/core': 2.11.8 clsx: 2.1.0 prop-types: 15.8.1 @@ -2249,12 +2249,12 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@mui/core-downloads-tracker@5.15.8: - resolution: {integrity: sha512-W6R1dZJgbYfLmQKf7Es2WUw0pkDkEVUf2jA22DYu0JOa9M3pjvOqoC9HgOPGNNJTu6SCWLSWh3euv1Jn2NmeQA==} + /@mui/core-downloads-tracker@5.15.9: + resolution: {integrity: sha512-CSDpVevGaxsvMkiYBZ8ztki1z/eT0mM2MqUT21eCRiMz3DU4zQw5rXG5ML/yTuJF9Z2Wv9SliIeaRAuSR/9Nig==} dev: false - /@mui/material@5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-l6+AiKZH3iOJmZCnlpel8ghYQe9Lq0BEuKP8fGj3g5xz4arO9GydqYAtLPMvuHKtArj8lJGNuT2yHYxmejincA==} + /@mui/material@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-kbHTZDcFmN8GHKzRpImUEl9AJfFWI/0Kl+DsYVT3kHzQWUuHiKm3uHXR1RCOqr7H8IgHFPdbxItmCSQ/mj7zgg==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2273,11 +2273,11 @@ packages: '@babel/runtime': 7.23.9 '@emotion/react': 11.11.3(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(react@18.2.0) - '@mui/base': 5.0.0-beta.34(react-dom@18.2.0)(react@18.2.0) - '@mui/core-downloads-tracker': 5.15.8 - '@mui/system': 5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0) + '@mui/base': 5.0.0-beta.36(react-dom@18.2.0)(react@18.2.0) + '@mui/core-downloads-tracker': 5.15.9 + '@mui/system': 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0) '@mui/types': 7.2.13 - '@mui/utils': 5.15.8(react@18.2.0) + '@mui/utils': 5.15.9(react@18.2.0) '@types/react-transition-group': 4.4.10 clsx: 2.1.0 csstype: 3.1.3 @@ -2288,8 +2288,8 @@ packages: react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0) dev: false - /@mui/private-theming@5.15.8(react@18.2.0): - resolution: {integrity: sha512-HMDPO416iMZPqs8nGUL3GJMDNpJtE1Uefw/Aw+zTKJHX5JnT+Bms41e2065BUT/zR5dYcKjFP4gQMwW5QX7nvA==} + /@mui/private-theming@5.15.9(react@18.2.0): + resolution: {integrity: sha512-/aMJlDOxOTAXyp4F2rIukW1O0anodAMCkv1DfBh/z9vaKHY3bd5fFf42wmP+0GRmwMinC5aWPpNfHXOED1fEtg==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2299,13 +2299,13 @@ packages: optional: true dependencies: '@babel/runtime': 7.23.9 - '@mui/utils': 5.15.8(react@18.2.0) + '@mui/utils': 5.15.9(react@18.2.0) prop-types: 15.8.1 react: 18.2.0 dev: false - /@mui/styled-engine@5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0): - resolution: {integrity: sha512-31ZKPGsS0OiSwuzi8RWoTiWRdUWXPRiOQkyG9bRYX/zvoYeBXEdbsLEgbryug5mVRsPpvwbH5q/i/t6MkjQ71g==} + /@mui/styled-engine@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0): + resolution: {integrity: sha512-NRKtYkL5PZDH7dEmaLEIiipd3mxNnQSO+Yo8rFNBNptY8wzQnQ+VjayTq39qH7Sast5cwHKYFusUrQyD+SS4Og==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.4.1 @@ -2326,8 +2326,8 @@ packages: react: 18.2.0 dev: false - /@mui/system@5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0): - resolution: {integrity: sha512-BUMJvlz1UqIqDPyrvc+MwjOUkWKskUPAOUuRh2KMAworiXuuUmtIivxSfdGll2ex6RHSylu4yc5dJZByOI8EcQ==} + /@mui/system@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0): + resolution: {integrity: sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2345,10 +2345,10 @@ packages: '@babel/runtime': 7.23.9 '@emotion/react': 11.11.3(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(react@18.2.0) - '@mui/private-theming': 5.15.8(react@18.2.0) - '@mui/styled-engine': 5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0) + '@mui/private-theming': 5.15.9(react@18.2.0) + '@mui/styled-engine': 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0) '@mui/types': 7.2.13 - '@mui/utils': 5.15.8(react@18.2.0) + '@mui/utils': 5.15.9(react@18.2.0) clsx: 2.1.0 csstype: 3.1.3 prop-types: 15.8.1 @@ -2364,8 +2364,8 @@ packages: optional: true dev: false - /@mui/utils@5.15.8(react@18.2.0): - resolution: {integrity: sha512-Q6Z/xSxi1Z6xQ5Qj9p4ZTHudwfrrwFALtU6H1O222pXudg9Qm0zHdiwJQiHT9L6jMIN78ZujEfGHserMoHUrQw==} + /@mui/utils@5.15.9(react@18.2.0): + resolution: {integrity: sha512-yDYfr61bCYUz1QtwvpqYy/3687Z8/nS4zv7lv/ih/6ZFGMl1iolEvxRmR84v2lOYxlds+kq1IVYbXxDKh8Z9sg==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2951,13 +2951,13 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitejs/plugin-react-swc@3.6.0(vite@5.0.12): + /@vitejs/plugin-react-swc@3.6.0(vite@5.1.0): resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==} peerDependencies: vite: ^4 || ^5 dependencies: '@swc/core': 1.4.0 - vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0) + vite: 5.1.0(@types/node@20.11.16)(sass@1.70.0) transitivePeerDependencies: - '@swc/helpers' dev: true @@ -6422,7 +6422,7 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /vite-plugin-progress@0.0.7(vite@5.0.12): + /vite-plugin-progress@0.0.7(vite@5.1.0): resolution: {integrity: sha512-zyvKdcc/X+6hnw3J1HVV1TKrlFKC4Rh8GnDnWG/2qhRXjqytTcM++xZ+SAPnoDsSyWl8O93ymK0wZRgHAoglEQ==} engines: {node: '>=14', pnpm: '>=7.0.0'} peerDependencies: @@ -6431,11 +6431,11 @@ packages: picocolors: 1.0.0 progress: 2.0.3 rd: 2.0.1 - vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0) + vite: 5.1.0(@types/node@20.11.16)(sass@1.70.0) dev: true - /vite@5.0.12(@types/node@20.11.16)(sass@1.70.0): - resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==} + /vite@5.1.0(@types/node@20.11.16)(sass@1.70.0): + resolution: {integrity: sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: diff --git a/src/components/modals/main/settings/Section.jsx b/src/components/modals/main/settings/Section.jsx index 186e9070..f802d336 100644 --- a/src/components/modals/main/settings/Section.jsx +++ b/src/components/modals/main/settings/Section.jsx @@ -1,6 +1,7 @@ import { MdOutlineKeyboardArrowRight } from 'react-icons/md'; +import React from 'react'; -export default function Section({ title, subtitle, icon, onClick }) { +export default function Section({ title, subtitle, icon, onClick, children }) { return (
@@ -11,7 +12,7 @@ export default function Section({ title, subtitle, icon, onClick }) {
- + {React.Children.count(children) === 0 ? : children}
); diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx index 3293e446..dbfa9df2 100644 --- a/src/components/modals/main/settings/sections/Quote.jsx +++ b/src/components/modals/main/settings/sections/Quote.jsx @@ -13,6 +13,8 @@ import Header from '../Header'; import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; import SettingsItem from '../SettingsItem'; +import Section from '../Section'; +import PreferencesWrapper from '../PreferencesWrapper'; import { toast } from 'react-toastify'; import EventBus from 'modules/helpers/eventbus'; @@ -94,6 +96,69 @@ export default class QuoteSettings extends PureComponent { render() { const QUOTE_SECTION = 'modals.main.settings.sections.quote'; + const ButtonOptions = () => { + return ( + + + + + + ); + }; + + const SourceDropdown = () => { + return ( + this.setState({ quoteType: value })} + category="quote" + > + {this.marketplaceType()} + + + + ); + }; + + const AdditionalOptions = () => { + return ( + + + + + ); + }; + let customSettings; if (this.state.quoteType === 'custom' && this.state.sourceSection === true) { customSettings = ( @@ -189,104 +254,28 @@ export default class QuoteSettings extends PureComponent { switch={true} /> )} -
this.setState({ sourceSection: true })}> -
- -
- - {variables.getMessage('modals.main.settings.sections.background.source.title')} - - - {variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)} - -
-
-
- this.setState({ quoteType: value })} - category="quote" - > - {this.marketplaceType()} - - - -
-
+ {this.state.sourceSection && ( + + + + )} {!this.state.sourceSection && ( - <> - +
} + title={variables.getMessage('modals.main.settings.sections.background.source.title')} + subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)} + onClick={() => this.setState({ sourceSection: true })} > - - - - - - - {/* - - - - - - - - - */} - - - - + +
+ + + )} {customSettings}