feat(front): enable notification in statsApp

parent cac8aa6a
......@@ -5,10 +5,7 @@ import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { SnackbarProvider } from "notistack"; // provider to easily handle notifications across the app
import green from "@material-ui/core/colors/green";
import amber from "@material-ui/core/colors/amber";
import CssBaseline from "@material-ui/core/CssBaseline";
import { makeStyles } from "@material-ui/styles";
import App from "../components/app/App";
import ThemeProvider from "../components/common/theme/ThemeProvider";
import SnackbarCloseButton from "../components/app/SnackbarCloseButton";
......@@ -18,33 +15,7 @@ import AlertServiceComponent from "../components/services/AlertServiceComponent"
import FullScreenDialogServiceComponent from "../components/services/FullScreenDialogServiceComponent";
import NotificationServiceComponent from "../components/services/NotificationServiceComponent";
import NotifierImportantInformation from "../components/app/NotifierImportantInformation";
/**
* Get the correct style for a color of notistack (not enough contrast some times with default settings)
* @param color
* @param theme
*/
function getStyle(color, theme) {
return {
backgroundColor: color,
color: theme.palette.getContrastText(color),
};
}
const useStylesNotiStack = makeStyles((theme) => ({
variantSuccess: {
...getStyle(green[600], theme),
},
variantError: {
...getStyle(theme.palette.error.dark, theme),
},
variantInfo: {
...getStyle("#2979ff", theme),
},
variantWarning: {
...getStyle(amber[700], theme),
},
}));
import { useStylesNotiStack } from "./shared";
function SubEntry() {
// to ba able to use the theme from here
......
import { makeStyles } from "@material-ui/styles";
import green from "@material-ui/core/colors/green";
import amber from "@material-ui/core/colors/amber";
/**
* Get the correct style for a color of notistack (not enough contrast some times with default settings)
* @param color
* @param theme
*/
export function getStyle(color, theme) {
return {
backgroundColor: color,
color: theme.palette.getContrastText(color),
};
}
export const useStylesNotiStack = makeStyles((theme) => ({
variantSuccess: {
...getStyle(green[600], theme),
},
variantError: {
...getStyle(theme.palette.error.dark, theme),
},
variantInfo: {
...getStyle("#2979ff", theme),
},
variantWarning: {
...getStyle(amber[700], theme),
},
}));
import React from "react";
import ReactDOM from "react-dom";
import { SnackbarProvider } from "notistack";
import CssBaseline from "@material-ui/core/CssBaseline";
import OfflineThemeProvider from "../components/common/theme/OfflineThemeProvider";
import Logo from "../components/app/Logo";
import BaseTemplate from "../components/app/BaseTemplate";
import PageStats from "../components/pages/PageStats";
import SnackbarCloseButton from "../components/app/SnackbarCloseButton";
import { useStylesNotiStack } from "./shared";
import NotificationServiceComponent from "../components/services/NotificationServiceComponent";
function SubEntry() {
const classesNotistack = useStylesNotiStack();
function MainReactEntry() {
const toolbarContent = (
<div style={{ flex: 1 }}>
<Logo />
......@@ -14,15 +20,32 @@ function MainReactEntry() {
);
return (
<OfflineThemeProvider>
<SnackbarProvider
maxSnack={3}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
action={(key) => <SnackbarCloseButton notiKey={key} />}
classes={{ ...classesNotistack }}
>
<>
<CssBaseline />
<main>
<BaseTemplate toolbarContent={toolbarContent}>
<NotificationServiceComponent />
<PageStats />
</BaseTemplate>
</main>
</>
</SnackbarProvider>
);
}
function MainReactEntry() {
return (
<OfflineThemeProvider>
<SubEntry />
</OfflineThemeProvider>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment