Web: Refactoring: simplified moduleStore
This commit is contained in:
parent
91d07ca362
commit
2f60d7f355
@ -7,14 +7,6 @@ import ProfileActions from "./profile-actions";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { utils } from "asc-web-components";
|
||||
const { tablet } = utils.device;
|
||||
//import { logout } from "../../../store/auth/actions";
|
||||
//import store from "../../../store/index";
|
||||
// import {
|
||||
// //getCurrentUser,
|
||||
// getLanguage,
|
||||
// getIsolateModules,
|
||||
// getIsLoaded,
|
||||
// } from "../../../store/auth/selectors";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
const StyledNav = styled.nav`
|
||||
@ -93,17 +85,22 @@ const HeaderNav = ({
|
||||
//console.log("HeaderNav render");
|
||||
return (
|
||||
<StyledNav>
|
||||
{modules.map((module) => (
|
||||
<NavItem
|
||||
key={module.id}
|
||||
iconName={module.iconName}
|
||||
iconUrl={module.iconUrl}
|
||||
badgeNumber={module.notifications}
|
||||
onClick={module.onClick}
|
||||
onBadgeClick={module.onBadgeClick}
|
||||
noHover={true}
|
||||
/>
|
||||
))}
|
||||
{modules
|
||||
.filter((m) => m.isolateMode)
|
||||
.map((m) => (
|
||||
<NavItem
|
||||
key={m.id}
|
||||
iconName={m.iconName}
|
||||
iconUrl={m.iconUrl}
|
||||
badgeNumber={m.notifications}
|
||||
onClick={(e) => {
|
||||
window.open(m.link, "_self");
|
||||
e.preventDefault();
|
||||
}}
|
||||
onBadgeClick={(e) => console.log(m.iconName + "Badge Clicked", e)}
|
||||
noHover={true}
|
||||
/>
|
||||
))}
|
||||
|
||||
{isAuthenticated && user ? (
|
||||
<ProfileActions userActions={getCurrentUserActions()} user={user} />
|
||||
@ -139,6 +136,7 @@ export default inject(({ store }) => {
|
||||
const { homepage, defaultPage } = settingsStore;
|
||||
const { user } = userStore;
|
||||
const { modules } = moduleStore;
|
||||
|
||||
return {
|
||||
user,
|
||||
homepage,
|
||||
|
@ -10,6 +10,7 @@ import Loaders from "../../Loaders/index";
|
||||
import { ReactSVG } from "react-svg";
|
||||
|
||||
import { utils } from "asc-web-components";
|
||||
import { useTranslation } from "react-i18next";
|
||||
// import { connect } from "react-redux";
|
||||
// import {
|
||||
// getCurrentProductId,
|
||||
@ -85,9 +86,11 @@ const HeaderComponent = ({
|
||||
isNavOpened,
|
||||
currentProductId,
|
||||
toggleAside,
|
||||
isAdmin,
|
||||
...props
|
||||
}) => {
|
||||
//console.log("Header render");
|
||||
const { t } = useTranslation();
|
||||
|
||||
const isNavAvailable = mainModules.length > 0;
|
||||
const onLogoClick = () => {
|
||||
@ -103,6 +106,42 @@ const HeaderComponent = ({
|
||||
if (item) item.onBadgeClick(e);
|
||||
};
|
||||
|
||||
const onItemClick = (e) => {
|
||||
if (!e) return;
|
||||
const link = e.currentTarget.dataset.link;
|
||||
window.open(link, "_self");
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const getCustomModules = () => {
|
||||
if (!isAdmin) {
|
||||
return [];
|
||||
} // Temporarily hiding the settings module
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavItem
|
||||
separator={true}
|
||||
key={"nav-modules-separator"}
|
||||
data-id={"nav-modules-separator"}
|
||||
/>
|
||||
<NavItem
|
||||
separator={false}
|
||||
key={"settings"}
|
||||
data-id={"settings"}
|
||||
data-link="/settings"
|
||||
opened={isNavOpened}
|
||||
active={"settings" == currentProductId}
|
||||
iconName={"SettingsIcon"}
|
||||
onClick={onItemClick}
|
||||
url="/settings"
|
||||
>
|
||||
{t("Settings")}
|
||||
</NavItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header module={currentProductName}>
|
||||
@ -140,6 +179,11 @@ const HeaderComponent = ({
|
||||
onMouseLeave={onNavMouseLeave}
|
||||
>
|
||||
<NavLogoItem opened={isNavOpened} onClick={onLogoClick} />
|
||||
<NavItem
|
||||
separator={true}
|
||||
key={"nav-products-separator"}
|
||||
data-id={"nav-products-separator"}
|
||||
/>
|
||||
{mainModules.map(
|
||||
({
|
||||
id,
|
||||
@ -147,27 +191,28 @@ const HeaderComponent = ({
|
||||
iconName,
|
||||
iconUrl,
|
||||
notifications,
|
||||
onClick,
|
||||
url,
|
||||
link,
|
||||
title,
|
||||
}) => (
|
||||
<NavItem
|
||||
separator={!!separator}
|
||||
key={id}
|
||||
data-id={id}
|
||||
data-link={link}
|
||||
opened={isNavOpened}
|
||||
active={id == currentProductId}
|
||||
iconName={iconName}
|
||||
iconUrl={iconUrl}
|
||||
badgeNumber={notifications}
|
||||
onClick={onClick}
|
||||
onClick={onItemClick}
|
||||
onBadgeClick={onBadgeClick}
|
||||
url={url}
|
||||
url={link}
|
||||
>
|
||||
{title}
|
||||
</NavItem>
|
||||
)
|
||||
)}
|
||||
{getCustomModules()}
|
||||
</Nav>
|
||||
)}
|
||||
</>
|
||||
@ -190,6 +235,7 @@ HeaderComponent.propTypes = {
|
||||
logoUrl: PropTypes.string,
|
||||
isLoaded: PropTypes.bool,
|
||||
isAuthenticated: PropTypes.bool,
|
||||
isAdmin: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default inject(({ store }) => {
|
||||
@ -198,11 +244,16 @@ export default inject(({ store }) => {
|
||||
moduleStore,
|
||||
isLoaded,
|
||||
isAuthenticated,
|
||||
isAdmin,
|
||||
product,
|
||||
} = store;
|
||||
const { logoUrl, defaultPage, currentProductId } = settingsStore;
|
||||
const { modules: mainModules, totalNotifications } = moduleStore;
|
||||
const { modules, totalNotifications } = moduleStore;
|
||||
|
||||
const mainModules = modules.filter((m) => !m.isolateMode);
|
||||
|
||||
return {
|
||||
isAdmin,
|
||||
defaultPage,
|
||||
logoUrl,
|
||||
mainModules,
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { action, computed, makeObservable, observable } from "mobx";
|
||||
import api from "../api";
|
||||
import { makeAutoObservable } from "mobx";
|
||||
|
||||
class ModuleStore {
|
||||
isLoading = false;
|
||||
@ -7,42 +7,12 @@ class ModuleStore {
|
||||
modules = [];
|
||||
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
isLoading: observable,
|
||||
isLoaded: observable,
|
||||
modules: observable,
|
||||
totalNotificationsCount: computed,
|
||||
getModules: action,
|
||||
init: action,
|
||||
setIsLoading: action,
|
||||
setIsLoaded: action,
|
||||
});
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
getModules = async () => {
|
||||
const list = await api.modules.getModulesList();
|
||||
|
||||
this.modules = list.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
iconName: item.iconName, // || iconName || "PeopleIcon", //TODO: Change to URL
|
||||
iconUrl: item.iconUrl,
|
||||
notifications: item.notifications,
|
||||
url: item.link,
|
||||
link: item.link,
|
||||
isPrimary: item.isPrimary,
|
||||
description: item.description,
|
||||
imageUrl: item.imageUrl,
|
||||
onClick: (e) => {
|
||||
if (e) {
|
||||
window.open(item.link, "_self");
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
onBadgeClick: (e) => console.log("Badge Clicked", e),
|
||||
};
|
||||
});
|
||||
this.setModules(list);
|
||||
};
|
||||
|
||||
get totalNotificationsCount() {
|
||||
@ -70,6 +40,10 @@ class ModuleStore {
|
||||
setIsLoaded = (isLoaded) => {
|
||||
this.isLoaded = isLoaded;
|
||||
};
|
||||
|
||||
setModules = (modules) => {
|
||||
this.modules = modules;
|
||||
};
|
||||
}
|
||||
|
||||
export default ModuleStore;
|
||||
|
Loading…
Reference in New Issue
Block a user