mirror of https://github.com/mue/mue.git
refactor(modal): Change state to use word and switch case
This commit is contained in:
alexsparkes
parent
16639c4b94
commit
48b919ebea
|
|
@ -65,7 +65,7 @@ dependencies:
|
|||
devDependencies:
|
||||
'@commitlint/cli':
|
||||
specifier: ^18.6.0
|
||||
version: 18.6.0(@types/node@20.11.16)(typescript@5.3.3)
|
||||
version: 18.6.0(@types/node@20.11.17)(typescript@5.3.3)
|
||||
'@commitlint/config-conventional':
|
||||
specifier: ^18.6.0
|
||||
version: 18.6.0
|
||||
|
|
@ -107,7 +107,7 @@ devDependencies:
|
|||
version: 6.1.0(stylelint@16.2.1)
|
||||
vite:
|
||||
specifier: 5.1.0
|
||||
version: 5.1.0(@types/node@20.11.16)(sass@1.70.0)
|
||||
version: 5.1.0(@types/node@20.11.17)(sass@1.70.0)
|
||||
vite-plugin-progress:
|
||||
specifier: ^0.0.7
|
||||
version: 0.0.7(vite@5.1.0)
|
||||
|
|
@ -1541,14 +1541,14 @@ packages:
|
|||
'@babel/helper-validator-identifier': 7.22.20
|
||||
to-fast-properties: 2.0.0
|
||||
|
||||
/@commitlint/cli@18.6.0(@types/node@20.11.16)(typescript@5.3.3):
|
||||
/@commitlint/cli@18.6.0(@types/node@20.11.17)(typescript@5.3.3):
|
||||
resolution: {integrity: sha512-FiH23cr9QG8VdfbmvJJZmdfHGVMCouOOAzoXZ3Cd7czGC52RbycwNt8YCI7SA69pAl+t30vh8LMaO/N+kcel6w==}
|
||||
engines: {node: '>=v18'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@commitlint/format': 18.6.0
|
||||
'@commitlint/lint': 18.6.0
|
||||
'@commitlint/load': 18.6.0(@types/node@20.11.16)(typescript@5.3.3)
|
||||
'@commitlint/load': 18.6.0(@types/node@20.11.17)(typescript@5.3.3)
|
||||
'@commitlint/read': 18.6.0
|
||||
'@commitlint/types': 18.6.0
|
||||
execa: 5.1.1
|
||||
|
|
@ -1619,7 +1619,7 @@ packages:
|
|||
'@commitlint/types': 18.6.0
|
||||
dev: true
|
||||
|
||||
/@commitlint/load@18.6.0(@types/node@20.11.16)(typescript@5.3.3):
|
||||
/@commitlint/load@18.6.0(@types/node@20.11.17)(typescript@5.3.3):
|
||||
resolution: {integrity: sha512-RRssj7TmzT0bowoEKlgwg8uQ7ORXWkw7lYLsZZBMi9aInsJuGNLNWcMxJxRZbwxG3jkCidGUg85WmqJvRjsaDA==}
|
||||
engines: {node: '>=v18'}
|
||||
dependencies:
|
||||
|
|
@ -1629,7 +1629,7 @@ packages:
|
|||
'@commitlint/types': 18.6.0
|
||||
chalk: 4.1.2
|
||||
cosmiconfig: 8.3.6(typescript@5.3.3)
|
||||
cosmiconfig-typescript-loader: 5.0.0(@types/node@20.11.16)(cosmiconfig@8.3.6)(typescript@5.3.3)
|
||||
cosmiconfig-typescript-loader: 5.0.0(@types/node@20.11.17)(cosmiconfig@8.3.6)(typescript@5.3.3)
|
||||
lodash.isplainobject: 4.0.6
|
||||
lodash.merge: 4.6.2
|
||||
lodash.uniq: 4.5.0
|
||||
|
|
@ -2765,8 +2765,8 @@ packages:
|
|||
resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
|
||||
dev: true
|
||||
|
||||
/@types/node@20.11.16:
|
||||
resolution: {integrity: sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==}
|
||||
/@types/node@20.11.17:
|
||||
resolution: {integrity: sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==}
|
||||
dependencies:
|
||||
undici-types: 5.26.5
|
||||
dev: true
|
||||
|
|
@ -2957,7 +2957,7 @@ packages:
|
|||
vite: ^4 || ^5
|
||||
dependencies:
|
||||
'@swc/core': 1.4.0
|
||||
vite: 5.1.0(@types/node@20.11.16)(sass@1.70.0)
|
||||
vite: 5.1.0(@types/node@20.11.17)(sass@1.70.0)
|
||||
transitivePeerDependencies:
|
||||
- '@swc/helpers'
|
||||
dev: true
|
||||
|
|
@ -3298,7 +3298,7 @@ packages:
|
|||
hasBin: true
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001585
|
||||
electron-to-chromium: 1.4.661
|
||||
electron-to-chromium: 1.4.662
|
||||
node-releases: 2.0.14
|
||||
update-browserslist-db: 1.0.13(browserslist@4.22.3)
|
||||
dev: true
|
||||
|
|
@ -3457,7 +3457,7 @@ packages:
|
|||
browserslist: 4.22.3
|
||||
dev: true
|
||||
|
||||
/cosmiconfig-typescript-loader@5.0.0(@types/node@20.11.16)(cosmiconfig@8.3.6)(typescript@5.3.3):
|
||||
/cosmiconfig-typescript-loader@5.0.0(@types/node@20.11.17)(cosmiconfig@8.3.6)(typescript@5.3.3):
|
||||
resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
|
||||
engines: {node: '>=v16'}
|
||||
peerDependencies:
|
||||
|
|
@ -3465,7 +3465,7 @@ packages:
|
|||
cosmiconfig: '>=8.2'
|
||||
typescript: '>=4'
|
||||
dependencies:
|
||||
'@types/node': 20.11.16
|
||||
'@types/node': 20.11.17
|
||||
cosmiconfig: 8.3.6(typescript@5.3.3)
|
||||
jiti: 1.21.0
|
||||
typescript: 5.3.3
|
||||
|
|
@ -3657,8 +3657,8 @@ packages:
|
|||
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
|
||||
dev: true
|
||||
|
||||
/electron-to-chromium@1.4.661:
|
||||
resolution: {integrity: sha512-AFg4wDHSOk5F+zA8aR+SVIOabu7m0e7BiJnigCvPXzIGy731XENw/lmNxTySpVFtkFEy+eyt4oHhh5FF3NjQNw==}
|
||||
/electron-to-chromium@1.4.662:
|
||||
resolution: {integrity: sha512-gfl1XVWTQmPHhqEG0kN77SpUxaqPpMb9r83PT4gvKhg7P3irSxru3lW85RxvK1uI1j2CAcTWPjG/HbE0IP/Rtg==}
|
||||
dev: true
|
||||
|
||||
/embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22):
|
||||
|
|
@ -6431,10 +6431,10 @@ packages:
|
|||
picocolors: 1.0.0
|
||||
progress: 2.0.3
|
||||
rd: 2.0.1
|
||||
vite: 5.1.0(@types/node@20.11.16)(sass@1.70.0)
|
||||
vite: 5.1.0(@types/node@20.11.17)(sass@1.70.0)
|
||||
dev: true
|
||||
|
||||
/vite@5.1.0(@types/node@20.11.16)(sass@1.70.0):
|
||||
/vite@5.1.0(@types/node@20.11.17)(sass@1.70.0):
|
||||
resolution: {integrity: sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==}
|
||||
engines: {node: ^18.0.0 || >=20.0.0}
|
||||
hasBin: true
|
||||
|
|
@ -6462,7 +6462,7 @@ packages:
|
|||
terser:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/node': 20.11.16
|
||||
'@types/node': 20.11.17
|
||||
esbuild: 0.19.12
|
||||
postcss: 8.4.35
|
||||
rollup: 4.9.6
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
import variables from 'modules/variables';
|
||||
import { Suspense, lazy, useState, memo } from 'react';
|
||||
|
||||
import { MdClose } from 'react-icons/md';
|
||||
|
||||
import './scss/index.scss';
|
||||
import Tooltip from 'components/helpers/tooltip/Tooltip';
|
||||
|
||||
// Lazy load all the tabs instead of the modal itself
|
||||
const Settings = lazy(() => import('./tabs/Settings'));
|
||||
const Addons = lazy(() => import('./tabs/Addons'));
|
||||
const Marketplace = lazy(() => import('./tabs/Marketplace'));
|
||||
|
|
@ -30,27 +28,22 @@ const renderLoader = () => (
|
|||
);
|
||||
|
||||
function MainModal({ modalClose }) {
|
||||
const [currentTab, setCurrentTab] = useState(0);
|
||||
const [currentTab, setCurrentTab] = useState('settings');
|
||||
|
||||
const changeTab = (type) => {
|
||||
switch (type) {
|
||||
case 'settings':
|
||||
setCurrentTab(<Settings changeTab={changeTab} />);
|
||||
break;
|
||||
case 'addons':
|
||||
setCurrentTab(<Addons changeTab={changeTab} />);
|
||||
break;
|
||||
case 'marketplace':
|
||||
setCurrentTab(<Marketplace changeTab={changeTab} />);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
setCurrentTab(type);
|
||||
};
|
||||
|
||||
if (currentTab === 0) {
|
||||
setCurrentTab(<Settings changeTab={changeTab} />);
|
||||
}
|
||||
const renderTab = () => {
|
||||
switch (currentTab) {
|
||||
case 'addons':
|
||||
return <Addons changeTab={changeTab} />;
|
||||
case 'marketplace':
|
||||
return <Marketplace changeTab={changeTab} />;
|
||||
default:
|
||||
return <Settings changeTab={changeTab} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="frame">
|
||||
|
|
@ -63,7 +56,7 @@ function MainModal({ modalClose }) {
|
|||
<MdClose />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Suspense fallback={renderLoader()}>{currentTab}</Suspense>
|
||||
<Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue