Web: Studio: Homepage: Refactoring
This commit is contained in:
parent
464a5cd456
commit
0a53e3bd7d
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"GoodMorning": "Good morning",
|
"GoodMorning": "Good morning, {{name}}!",
|
||||||
"GoodAfternoon": "Good afternoon",
|
"GoodAfternoon": "Good afternoon, {{name}}!",
|
||||||
"GoodEvening": "Good evening"
|
"GoodEvening": "Good evening, {{name}}!"
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"GoodMorning": "Доброе утро",
|
"GoodMorning": "Доброе утро, {{name}}!",
|
||||||
"GoodAfternoon": "Добрый день",
|
"GoodAfternoon": "Добрый день, {{name}}!",
|
||||||
"GoodEvening": "Добрый вечер"
|
"GoodEvening": "Добрый вечер, {{name}}!"
|
||||||
}
|
}
|
||||||
|
@ -11,20 +11,19 @@ import { inject, observer } from "mobx-react";
|
|||||||
import { HomeIllustration, ModuleTile, HomeContainer } from "./sub-components";
|
import { HomeIllustration, ModuleTile, HomeContainer } from "./sub-components";
|
||||||
import Heading from "@appserver/components/heading";
|
import Heading from "@appserver/components/heading";
|
||||||
|
|
||||||
const Tiles = ({ availableModules, username, t }) => {
|
const Tiles = ({ availableModules, displayName, t }) => {
|
||||||
let index = 0;
|
let index = 0;
|
||||||
const { firstName, lastName } = username;
|
|
||||||
const fullName = `${firstName} ${lastName}`.trim();
|
|
||||||
|
|
||||||
const getGreeting = () => {
|
const getGreeting = (displayName) => {
|
||||||
const time = new Date().getHours();
|
const time = new Date().getHours();
|
||||||
|
|
||||||
if (time >= 5 && time <= 11) return t("GoodMorning");
|
if (time >= 5 && time <= 11) return t("GoodMorning", { name: displayName });
|
||||||
if (time >= 12 && time <= 16) return t("GoodAfternoon");
|
if (time >= 12 && time <= 16)
|
||||||
return t("GoodEvening");
|
return t("GoodAfternoon", { name: displayName });
|
||||||
|
return t("GoodEvening", { name: displayName });
|
||||||
};
|
};
|
||||||
|
|
||||||
const greetingMessage = `${getGreeting()}, ${fullName}!`;
|
const greetingMessage = getGreeting(displayName);
|
||||||
|
|
||||||
const modules = availableModules.filter(
|
const modules = availableModules.filter(
|
||||||
(module) => module.separator !== true && module.id !== "settings"
|
(module) => module.separator !== true && module.id !== "settings"
|
||||||
@ -53,7 +52,7 @@ Tiles.propTypes = {
|
|||||||
t: PropTypes.func,
|
t: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
const Body = ({ match, isLoaded, availableModules, username }) => {
|
const Body = ({ match, isLoaded, availableModules, displayName }) => {
|
||||||
const { t } = useTranslation(["Home", "translation"]);
|
const { t } = useTranslation(["Home", "translation"]);
|
||||||
const { error } = match.params;
|
const { error } = match.params;
|
||||||
setDocumentTitle();
|
setDocumentTitle();
|
||||||
@ -64,7 +63,11 @@ const Body = ({ match, isLoaded, availableModules, username }) => {
|
|||||||
<></>
|
<></>
|
||||||
) : (
|
) : (
|
||||||
<HomeContainer>
|
<HomeContainer>
|
||||||
<Tiles availableModules={availableModules} username={username} t={t} />
|
<Tiles
|
||||||
|
availableModules={availableModules}
|
||||||
|
displayName={displayName}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
|
||||||
<HomeIllustration />
|
<HomeIllustration />
|
||||||
|
|
||||||
@ -81,7 +84,7 @@ Body.propTypes = {
|
|||||||
availableModules: PropTypes.array.isRequired,
|
availableModules: PropTypes.array.isRequired,
|
||||||
isLoaded: PropTypes.bool,
|
isLoaded: PropTypes.bool,
|
||||||
match: PropTypes.object,
|
match: PropTypes.object,
|
||||||
username: PropTypes.object,
|
displayName: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
const Home = ({ defaultPage, ...rest }) => {
|
const Home = ({ defaultPage, ...rest }) => {
|
||||||
@ -100,21 +103,18 @@ Home.propTypes = {
|
|||||||
availableModules: PropTypes.array.isRequired,
|
availableModules: PropTypes.array.isRequired,
|
||||||
isLoaded: PropTypes.bool,
|
isLoaded: PropTypes.bool,
|
||||||
defaultPage: PropTypes.string,
|
defaultPage: PropTypes.string,
|
||||||
username: PropTypes.object,
|
displayName: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default inject(({ auth }) => {
|
export default inject(({ auth }) => {
|
||||||
const { isLoaded, settingsStore, availableModules, userStore } = auth;
|
const { isLoaded, settingsStore, availableModules, userStore } = auth;
|
||||||
const { defaultPage } = settingsStore;
|
const { defaultPage } = settingsStore;
|
||||||
const { firstName, lastName } = userStore.user;
|
const { displayName } = userStore.user;
|
||||||
const username = {
|
|
||||||
firstName,
|
|
||||||
lastName,
|
|
||||||
};
|
|
||||||
return {
|
return {
|
||||||
defaultPage,
|
defaultPage,
|
||||||
isLoaded,
|
isLoaded,
|
||||||
availableModules,
|
availableModules,
|
||||||
username,
|
displayName,
|
||||||
};
|
};
|
||||||
})(withRouter(observer(Home)));
|
})(withRouter(observer(Home)));
|
||||||
|
@ -23,14 +23,10 @@ const ModuleTile = (props) => {
|
|||||||
<div className="sub-title-image-container">
|
<div className="sub-title-image-container">
|
||||||
<img className="sub-title-image" src={imageUrl} />
|
<img className="sub-title-image" src={imageUrl} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<Text fontSize="18px" className="sub-title-text">
|
||||||
<div>
|
{title}
|
||||||
<Text fontSize="18px" className="sub-title-text">
|
{shouldRenderIcon && <StyledExternalLinkIcon color="#333333" />}
|
||||||
{title}
|
</Text>
|
||||||
{shouldRenderIcon && <StyledExternalLinkIcon color="#333333" />}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</StyledModuleTile>
|
</StyledModuleTile>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user