Skip to content
This repository has been archived by the owner on Dec 14, 2022. It is now read-only.

Commit

Permalink
Merge pull request #13 from reactioncommerce/feat-12-mikemurray-notis…
Browse files Browse the repository at this point in the history
…tack

feat: Add notistack
  • Loading branch information
mikemurray authored Apr 8, 2020
2 parents cb78663 + 690d48e commit 8b7633e
Show file tree
Hide file tree
Showing 11 changed files with 162 additions and 16 deletions.
16 changes: 16 additions & 0 deletions package/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
"i18next-multiload-backend-adapter": "^1.0.0",
"i18next-sprintf-postprocessor": "^0.2.2",
"jest": "^25.1.0",
"notistack": "^0.9.9",
"oidc-client": "~1.10.1",
"prop-types": "^15.7.2",
"raf": "^3.4.1",
Expand Down
30 changes: 22 additions & 8 deletions package/src/App/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { defaultTheme } from "@reactioncommerce/catalyst";
import { BrowserRouter } from "react-router-dom";
import { AuthenticationProvider, OidcSecure } from "@axa-fr/react-oidc-context";
import { ApolloProvider } from "react-apollo";
import { SnackbarProvider } from "notistack";
import Dashboard from "../Dashboard";

/**
Expand All @@ -18,23 +19,35 @@ function App(props) {
apolloClient,
authenticationProviderProps,
dashboardComponentProps,
plugins
plugins,
snackbarProviderProps: snackbarProps
} = props;

const DashboardComponent = DashboardComponentProp || Dashboard;

const snackbarProviderProps = {
maxSnack: 3,
anchorOrigin: {
vertical: "bottom",
horizontal: "center"
},
...snackbarProps
};

return (
<Suspense fallback={null}>
<ApolloProvider client={apolloClient}>
<BrowserRouter>
<AuthenticationProvider {...authenticationProviderProps}>
<ThemeProvider theme={defaultTheme}>
<OidcSecure>
<DashboardComponent
{...dashboardComponentProps}
plugins={plugins}
/>
</OidcSecure>
<SnackbarProvider {...snackbarProviderProps}>
<OidcSecure>
<DashboardComponent
{...dashboardComponentProps}
plugins={plugins}
/>
</OidcSecure>
</SnackbarProvider>
</ThemeProvider>
</AuthenticationProvider>
</BrowserRouter>
Expand All @@ -48,7 +61,8 @@ App.propTypes = {
apolloClient: PropTypes.object,
authenticationProviderProps: PropTypes.object,
dashboardComponentProps: PropTypes.object,
plugins: PropTypes.arrayOf(PropTypes.object)
plugins: PropTypes.arrayOf(PropTypes.object),
snackbarProviderProps: PropTypes.object
};

export default App;
4 changes: 2 additions & 2 deletions package/src/ContentLayoutTwoColumn/ContentLayoutTwoColumn.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ function ContentLayoutTwoColumn(props) {
} = props;

const classes = useStyles();
const { isPrimarySidebarOpen, isDetailDrawerOpen } = useContext(UIContext);
const { isNavigationDrawerOpen, isDetailDrawerOpen } = useContext(UIContext);
const isMobile = useMediaQuery("mobile");

const closeDrawer = () => {
Expand All @@ -101,7 +101,7 @@ function ContentLayoutTwoColumn(props) {
<div
className={
clsx(classes.root, {
[classes.leadingDrawerOpen]: isPrimarySidebarOpen && !isMobile,
[classes.leadingDrawerOpen]: isNavigationDrawerOpen && !isMobile,
[classes.trailingDrawerOpen]: isDetailDrawerOpen && !isMobile
})
}
Expand Down
2 changes: 1 addition & 1 deletion package/src/Dashboard/Dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function Dashboard() {
const contextValue = useMemo(() => ({
isDetailDrawerOpen,
isMobile,
isNavigationDrawerOpen: (isMobile && isNavigationDrawerOpen) || isNavigationDrawerOpen,
isNavigationDrawerOpen: (isMobile && isNavigationDrawerOpen) || !isMobile,
onCloseNavigationDrawer,
onToggleNavigationDrawer,
onCloseDetailDrawer,
Expand Down
16 changes: 14 additions & 2 deletions package/src/Dashboard/__snapshots__/Dashboard.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`should render the Dashboard component with a single route 1`] = `
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary mui-fixed MuiPaper-elevation0"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
class="MuiToolbar-root MuiToolbar-regular makeStyles-navigationDrawerOpen-4 MuiToolbar-gutters"
>
<h1
class="MuiTypography-root makeStyles-title-6 MuiTypography-h3"
Expand Down Expand Up @@ -73,7 +73,19 @@ exports[`should render the Dashboard component with a single route 1`] = `
>
<div
class="MuiListItemIcon-root makeStyles-icon-104"
/>
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</svg>
</div>
<div
class="MuiListItemText-root makeStyles-listItemText-108"
/>
Expand Down
3 changes: 2 additions & 1 deletion package/src/NavigationDrawer/NavigationDrawer.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
} from "@material-ui/core";
import CloseIcon from "mdi-material-ui/Close";
import { useTranslation } from "react-i18next";
import FolderIcon from "mdi-material-ui/Folder";
import ShopLogo from "../ShopLogo";
import UIContext from "../context/UIContext";
import useRoutes from "../hooks/useRoutes";
Expand Down Expand Up @@ -161,7 +162,7 @@ function NavigationDrawer() {
}}
>
<ListItemIcon className={classes.icon}>
{IconComponent && <IconComponent />}
{(IconComponent && <IconComponent />) || <FolderIcon />}
</ListItemIcon>
<ListItemText
disableTypography
Expand Down
5 changes: 4 additions & 1 deletion package/src/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
// Export API
// Export internal API
export { getOidcProps } from "./lib/core/authentication";
export { plugins, registerPlugin } from "./lib/core/plugins";
export { Reaction } from "./lib/core/reaction";

// Export APIs from other packages
export * from "notistack";

// Export React components
export { default as App } from "./App";
export { default as AppBar } from "./AppBar";
Expand Down
4 changes: 3 additions & 1 deletion package/src/lib/core/reaction.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ export async function Reaction(props) {
SettingsDashboardComponent = SettingsDashboard,
dashboardComponentProps,
settingsRouteProps,
shouldShowSettingsInNavigation = true
shouldShowSettingsInNavigation = true,
snackbarProviderProps
} = props;

// Initialize apollo client to be used for the ApolloProvider in the AppComponent
Expand Down Expand Up @@ -80,6 +81,7 @@ export async function Reaction(props) {
authenticationProviderProps={authenticationProviderProps}
dashboardComponentProps={dashboardComponentProps}
plugins={plugins}
snackbarProviderProps={snackbarProviderProps}
/>
), document.getElementById("app")
);
Expand Down
2 changes: 2 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import config from "./config";
import ExamplePluginProducts from "./plugins/ExamplePluginProducts";
import ExamplePluginTags from "./plugins/ExamplePluginTags";
import ExampleLayouts from "./plugins/ExampleLayouts";
import ExampleSnackbars from "./plugins/ExampleSnackbars";

/**
* Register plugins for testing.
Expand All @@ -17,6 +18,7 @@ import ExampleLayouts from "./plugins/ExampleLayouts";
registerPlugin(ExamplePluginProducts);
registerPlugin(ExamplePluginTags);
registerPlugin(ExampleLayouts);
registerPlugin(ExampleSnackbars);

// Configure and "start" the Reaction webapp
Reaction({
Expand Down
95 changes: 95 additions & 0 deletions src/plugins/ExampleSnackbars/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/* eslint-disable react/display-name */
/* eslint-disable react/no-multi-comp */
import React from "react";
import TagIcon from "mdi-material-ui/Tag";
import { Box, Card, CardContent, CardHeader } from "@material-ui/core";
import { Button } from "@reactioncommerce/catalyst";
import { useSnackbar } from "../../../package/src";

/**
* Register sample tags plugin
* @param {Object} params Params provided by `registerPlugin`
* @returns {undefined}
*/
export default function ({ registerRoute }) {
// Register routes
registerRoute({
path: "/snackbars",
group: "navigation",
navigationItemLabel: "Snackbars",
IconComponent: TagIcon,
MainComponent: () => {
const { enqueueSnackbar } = useSnackbar();

const handleSuccess = () => {
enqueueSnackbar("Success", {
variant: "success"
});
};

const handleError = () => {
enqueueSnackbar("Error", {
variant: "error"
});
};

const handleWarning = () => {
enqueueSnackbar("Error", {
variant: "warning"
});
};

const handleInfo = () => {
enqueueSnackbar("Error", {
variant: "info"
});
};

return (
<Card>
<CardHeader title="Snackbar examples" />
<CardContent>
<Box paddingBottom={1}>
<Button
color="primary"
variant="contained"
onClick={handleSuccess}
>
Open success snackbar
</Button>
</Box>

<Box paddingBottom={1}>
<Button
color="error"
variant="contained"
onClick={handleError}
>
Open error snackbar
</Button>
</Box>

<Box paddingBottom={1}>
<Button
color="primary"
onClick={handleWarning}
>
Open warning snackbar
</Button>
</Box>

<Box paddingBottom={1}>
<Button
color="primary"
onClick={handleInfo}
>
Open info snackbar
</Button>
</Box>

</CardContent>
</Card>
);
}
});
}

0 comments on commit 8b7633e

Please sign in to comment.