From e84f4664513dd9fa52a9a437aaa8416799dbe2c9 Mon Sep 17 00:00:00 2001 From: Manuel Calavera Date: Wed, 2 Oct 2019 21:16:23 -0700 Subject: [PATCH] feat: action bars --- package.json | 1 + src/AppV2.js | 163 ++++++++++++++----------- src/v2/components/TourDeSol/index.jsx | 8 +- src/v2/components/UI/CopyBtn/index.jsx | 16 ++- yarn.lock | 10 ++ 5 files changed, 124 insertions(+), 74 deletions(-) diff --git a/package.json b/package.json index bd34dfed..cfa47947 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "mobx": "^5.14.0", "mobx-react-lite": "^1.4.1", "nocache": "^2.1.0", + "notistack": "^0.9.2", "pem": "^1.14.3", "promise.allsettled": "^1.0.1", "prop-types": "^15.7.2", diff --git a/src/AppV2.js b/src/AppV2.js index 92076876..db5a9963 100644 --- a/src/AppV2.js +++ b/src/AppV2.js @@ -1,6 +1,7 @@ import {CssBaseline, makeStyles} from '@material-ui/core'; import {MuiThemeProvider} from '@material-ui/core/styles'; import {observer} from 'mobx-react-lite'; +import {SnackbarProvider} from 'notistack'; import React, {lazy, Suspense} from 'react'; import {hot} from 'react-hot-loader/root'; import {Route, Switch} from 'react-router-dom'; @@ -9,6 +10,7 @@ import Footer from 'v2/components/Footer'; import theme from 'v2/theme'; import FailedPanel from 'v2/components/UI/FailedPanel'; import Socket from 'v2/stores/socket'; +import getColor from 'v2/utils/getColor'; try { Socket.init(); @@ -33,41 +35,47 @@ const ApplicationDetail = lazy(() => ); const Favorites = lazy(() => import('v2/components/Favorites')); -const useStyles = makeStyles(theme => ({ - root: { - display: 'flex', - overflow: 'hidden', - minHeight: '100vh', - }, - content: { - marginLeft: 50, - minWidth: '1px', - padding: '50px 24px 0 24px', - maxWidth: 'calc(100% - 50px)', - width: '100%', - display: 'flex', - flexDirection: 'column', - [theme.breakpoints.down('sm')]: { - marginLeft: 0, - padding: 0, - paddingTop: 80, - maxWidth: '100%', +const useStyles = makeStyles(() => { + return { + root: { + display: 'flex', + overflow: 'hidden', + minHeight: '100vh', }, - }, - toolbar: { - display: 'flex', - alignItems: 'center', - justifyContent: 'flex-end', - padding: '0 8px', - ...theme.mixins.toolbar, - [theme.breakpoints.down('md')]: { - minHeight: 85, + content: { + marginLeft: 50, + minWidth: '1px', + padding: '50px 24px 0 24px', + maxWidth: 'calc(100% - 50px)', + width: '100%', + display: 'flex', + flexDirection: 'column', + [theme.breakpoints.down('sm')]: { + marginLeft: 0, + padding: 0, + paddingTop: 80, + maxWidth: '100%', + }, }, - [theme.breakpoints.up('md')]: { - minHeight: 50, + toolbar: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + [theme.breakpoints.down('md')]: { + minHeight: 85, + }, + [theme.breakpoints.up('md')]: { + minHeight: 50, + }, }, - }, -})); + success: { + backgroundColor: getColor('grey2')(theme), + color: getColor('white')(theme), + }, + }; +}); const App = () => { const classes = useStyles(); @@ -75,46 +83,61 @@ const App = () => { return ( -
- -
+ +
+ +
-
-
- {hasError && } - Loading...
}> - - - - - - - - - - - - - - - - - -
+
+
+ {hasError && } + Loading...
}> + + + + + + + + + + + + + + + + + +
+
-
+ ); }; diff --git a/src/v2/components/TourDeSol/index.jsx b/src/v2/components/TourDeSol/index.jsx index a2dc4330..53129c09 100644 --- a/src/v2/components/TourDeSol/index.jsx +++ b/src/v2/components/TourDeSol/index.jsx @@ -16,7 +16,13 @@ import Table from './Table'; import Cards from './Cards'; import useStyles from './styles'; -const TourDeSol = ({history, location}: {history: RouterHistory, location: Location}) => { +const TourDeSol = ({ + history, + location, +}: { + history: RouterHistory, + location: Location, +}) => { const {endpointName} = socketActions; const queryParams = queryParse(location.search); useEffect(() => { diff --git a/src/v2/components/UI/CopyBtn/index.jsx b/src/v2/components/UI/CopyBtn/index.jsx index a2dabcc6..fe016dcd 100644 --- a/src/v2/components/UI/CopyBtn/index.jsx +++ b/src/v2/components/UI/CopyBtn/index.jsx @@ -1,14 +1,24 @@ // @flow import React from 'react'; +import {withSnackbar, WithSnackbarProps} from 'notistack'; import {CopyToClipboard} from 'react-copy-to-clipboard'; import {ReactComponent as CopyIcon} from 'v2/assets/icons/copy.svg'; import useStyles from './styles'; -const CopyBtn = ({text}: {text: string | number}) => { +const CopyBtn = ({ + text, + enqueueSnackbar, +}: {text: string | number} & WithSnackbarProps) => { const classes = useStyles(); + const onCopy = () => { + enqueueSnackbar('Successfully copied to clipboard', { + variant: 'success', + autoHideDuration: 2000, + }); + }; return ( - +
@@ -16,4 +26,4 @@ const CopyBtn = ({text}: {text: string | number}) => { ); }; -export default CopyBtn; +export default withSnackbar(CopyBtn); diff --git a/yarn.lock b/yarn.lock index 8307b466..ea38a25d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11207,6 +11207,16 @@ normalize-url@^4.0.0: resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.1.0.tgz#307e74c87473efa81969ad1b4bb91f1990178904" integrity sha512-X781mkWeK6PDMAZJfGn/wnwil4dV6pIdF9euiNqtA89uJvZuNDJO2YyJxiwpPhTQcF5pYUU1v+kcOxzYV6rZlA== +notistack@^0.9.2: + version "0.9.2" + resolved "https://registry.yarnpkg.com/notistack/-/notistack-0.9.2.tgz#333ca7e08e85ae10867b1e8be5d82b149676aad6" + integrity sha512-Z2zi3ankqvwmrQvUx7SHM2X3P8llbPA/O1nM1hqn2fGuffn40Fi8isw701pdxczxA6S7huSyfOE/ZPgeTpWmrQ== + dependencies: + classnames "^2.2.6" + hoist-non-react-statics "^3.3.0" + prop-types "^15.7.2" + react-is "^16.8.6" + npm-audit-report@^1.3.1: version "1.3.2" resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-1.3.2.tgz#303bc78cd9e4c226415076a4f7e528c89fc77018"