mirror of https://github.com/mue/mue.git
chore: cleanup modal variable names
This commit is contained in:
parent
03a55a21bd
commit
90092a80ea
|
@ -10,10 +10,10 @@ const Marketplace = lazy(() => import('./tabs/Marketplace'));
|
||||||
|
|
||||||
const renderLoader = () => (
|
const renderLoader = () => (
|
||||||
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
||||||
<ul className="sidebar">
|
<div className="modalSidebar">
|
||||||
<span className="mainTitle">Mue</span>
|
<span className="mainTitle">Mue</span>
|
||||||
</ul>
|
</div>
|
||||||
<div className="tab-content">
|
<div className="modalTabContent">
|
||||||
<div className="emptyItems">
|
<div className="emptyItems">
|
||||||
<div className="emptyMessage">
|
<div className="emptyMessage">
|
||||||
<div className="loaderHolder">
|
<div className="loaderHolder">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
@import 'scss/variables';
|
@import 'scss/variables';
|
||||||
@import 'modules/sidebar';
|
@import 'modules/sidebar';
|
||||||
@import 'modules/navbar';
|
@import 'modules/navbar';
|
||||||
@import 'modules/tab-content';
|
@import 'modules/modalTabContent';
|
||||||
@import 'modules/links';
|
@import 'modules/links';
|
||||||
@import 'modules/scrollbars';
|
@import 'modules/scrollbars';
|
||||||
@import 'settings/main';
|
@import 'settings/main';
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
@import 'scss/variables';
|
@import 'scss/variables';
|
||||||
|
|
||||||
.tab-content {
|
.modalTabContent {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
|
||||||
/* button {
|
/* button {
|
|
@ -1,6 +1,6 @@
|
||||||
@import 'scss/variables';
|
@import 'scss/variables';
|
||||||
|
|
||||||
.sidebar {
|
.modalSidebar {
|
||||||
@include themed {
|
@include themed {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
|
||||||
import { TextareaAutosize } from '@mui/material';
|
import { TextareaAutosize } from '@mui/material';
|
||||||
|
|
||||||
import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
|
import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
|
||||||
|
import { Button } from 'components/Elements';
|
||||||
import EventBus from 'utils/eventbus';
|
import EventBus from 'utils/eventbus';
|
||||||
|
|
||||||
export default class Message extends PureComponent {
|
export default class Message extends PureComponent {
|
||||||
|
@ -72,9 +73,12 @@ export default class Message extends PureComponent {
|
||||||
<Row final={true}>
|
<Row final={true}>
|
||||||
<Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
|
<Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
|
||||||
<Action>
|
<Action>
|
||||||
<button onClick={() => this.modifyMessage('add')}>
|
<Button
|
||||||
{variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
|
type="settings"
|
||||||
</button>
|
onClick={() => this.modifyMessage('add')}
|
||||||
|
icon={<MdAdd />}
|
||||||
|
label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
|
||||||
|
/>
|
||||||
</Action>
|
</Action>
|
||||||
</Row>
|
</Row>
|
||||||
<div className="messagesContainer">
|
<div className="messagesContainer">
|
||||||
|
@ -123,10 +127,12 @@ export default class Message extends PureComponent {
|
||||||
<span className="subtitle">
|
<span className="subtitle">
|
||||||
{variables.getMessage(`${MESSAGE_SECTION}.add_some`)}
|
{variables.getMessage(`${MESSAGE_SECTION}.add_some`)}
|
||||||
</span>
|
</span>
|
||||||
<button onClick={() => this.modifyMessage('add')}>
|
<Button
|
||||||
{variables.getMessage(`${MESSAGE_SECTION}.add`)}
|
type="settings"
|
||||||
<MdAdd />
|
onClick={() => this.modifyMessage('add')}
|
||||||
</button>
|
icon={<MdAdd />}
|
||||||
|
label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -78,7 +78,7 @@ class Tabs extends PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
||||||
<ul className="sidebar">
|
<div className="modalSidebar">
|
||||||
{this.props.children.map((tab, index) => (
|
{this.props.children.map((tab, index) => (
|
||||||
<Tab
|
<Tab
|
||||||
currentTab={this.state.currentTab}
|
currentTab={this.state.currentTab}
|
||||||
|
@ -89,8 +89,8 @@ class Tabs extends PureComponent {
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{reminderInfo}
|
{reminderInfo}
|
||||||
</ul>
|
</div>
|
||||||
<div className="tab-content">
|
<div className="modalTabContent">
|
||||||
<div className="modalNavbar">
|
<div className="modalNavbar">
|
||||||
{navbarButtons.map(({ tab, icon }) => (
|
{navbarButtons.map(({ tab, icon }) => (
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
// Importing necessary libraries and components
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import variables from 'config/variables';
|
import variables from 'config/variables';
|
||||||
import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-icons/md';
|
import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-icons/md';
|
||||||
|
@ -20,12 +21,16 @@ import {
|
||||||
Final,
|
Final,
|
||||||
} from './Sections';
|
} from './Sections';
|
||||||
|
|
||||||
|
// WelcomeModal component
|
||||||
function WelcomeModal({ modalClose, modalSkip }) {
|
function WelcomeModal({ modalClose, modalSkip }) {
|
||||||
|
// State variables
|
||||||
const [currentTab, setCurrentTab] = useState(0);
|
const [currentTab, setCurrentTab] = useState(0);
|
||||||
const [buttonText, setButtonText] = useState(variables.getMessage('modals.welcome.buttons.next'));
|
const [buttonText, setButtonText] = useState(variables.getMessage('modals.welcome.buttons.next'));
|
||||||
const finalTab = 6;
|
const finalTab = 6;
|
||||||
|
|
||||||
|
// useEffect hook to handle tab changes and event bus listener
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// Get the current welcome tab from local storage
|
||||||
const welcomeTab = localStorage.getItem('welcomeTab');
|
const welcomeTab = localStorage.getItem('welcomeTab');
|
||||||
if (welcomeTab) {
|
if (welcomeTab) {
|
||||||
const tab = Number(welcomeTab);
|
const tab = Number(welcomeTab);
|
||||||
|
@ -37,6 +42,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Listener for the 'refresh' event
|
||||||
const refreshListener = (data) => {
|
const refreshListener = (data) => {
|
||||||
if (data === 'welcomeLanguage') {
|
if (data === 'welcomeLanguage') {
|
||||||
localStorage.setItem('welcomeTab', currentTab);
|
localStorage.setItem('welcomeTab', currentTab);
|
||||||
|
@ -45,13 +51,16 @@ function WelcomeModal({ modalClose, modalSkip }) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Subscribe to the 'refresh' event
|
||||||
EventBus.on('refresh', refreshListener);
|
EventBus.on('refresh', refreshListener);
|
||||||
|
|
||||||
|
// Cleanup function to unsubscribe from the 'refresh' event
|
||||||
return () => {
|
return () => {
|
||||||
EventBus.off('refresh', refreshListener);
|
EventBus.off('refresh', refreshListener);
|
||||||
};
|
};
|
||||||
}, [currentTab, finalTab]);
|
}, [currentTab, finalTab]);
|
||||||
|
|
||||||
|
// Function to update the current tab and button text
|
||||||
const updateTabAndButtonText = (newTab) => {
|
const updateTabAndButtonText = (newTab) => {
|
||||||
setCurrentTab(newTab);
|
setCurrentTab(newTab);
|
||||||
setButtonText(
|
setButtonText(
|
||||||
|
@ -64,6 +73,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
|
||||||
localStorage.removeItem('welcomeTab');
|
localStorage.removeItem('welcomeTab');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Functions to navigate to the previous and next tabs
|
||||||
const prevTab = () => {
|
const prevTab = () => {
|
||||||
updateTabAndButtonText(currentTab - 1);
|
updateTabAndButtonText(currentTab - 1);
|
||||||
};
|
};
|
||||||
|
@ -76,10 +86,12 @@ function WelcomeModal({ modalClose, modalSkip }) {
|
||||||
updateTabAndButtonText(currentTab + 1);
|
updateTabAndButtonText(currentTab + 1);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Function to switch to a specific tab
|
||||||
const switchToTab = (tab) => {
|
const switchToTab = (tab) => {
|
||||||
updateTabAndButtonText(tab);
|
updateTabAndButtonText(tab);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Navigation component
|
||||||
const Navigation = () => {
|
const Navigation = () => {
|
||||||
return (
|
return (
|
||||||
<div className="welcomeButtons">
|
<div className="welcomeButtons">
|
||||||
|
@ -109,6 +121,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Mapping of tab numbers to components
|
||||||
const tabComponents = {
|
const tabComponents = {
|
||||||
0: <Intro />,
|
0: <Intro />,
|
||||||
1: <ChooseLanguage />,
|
1: <ChooseLanguage />,
|
||||||
|
@ -119,8 +132,10 @@ function WelcomeModal({ modalClose, modalSkip }) {
|
||||||
6: <Final currentTab={currentTab} switchTab={switchToTab} />,
|
6: <Final currentTab={currentTab} switchTab={switchToTab} />,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Current tab component
|
||||||
let CurrentTab = tabComponents[currentTab] || <Intro />;
|
let CurrentTab = tabComponents[currentTab] || <Intro />;
|
||||||
|
|
||||||
|
// Render the WelcomeModal component
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Panel type="aside">
|
<Panel type="aside">
|
||||||
|
@ -140,4 +155,5 @@ function WelcomeModal({ modalClose, modalSkip }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Export the WelcomeModal component
|
||||||
export default WelcomeModal;
|
export default WelcomeModal;
|
||||||
|
|
Loading…
Reference in New Issue