Skip to content

Commit

Permalink
Add notifications feature (#1350)
Browse files Browse the repository at this point in the history
* Add notifications feature

* Hide notification on cypress tests

* Fix ts errors
  • Loading branch information
dmtrKovalenko authored Oct 14, 2019
1 parent b56d184 commit 761282c
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 12 deletions.
9 changes: 5 additions & 4 deletions docs/_shared/Example.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import CodeIcon from '@material-ui/icons/Code';
import CopyIcon from '@material-ui/icons/FileCopy';
import GithubIcon from '_shared/svgIcons/GithubIcon';
import { copy } from 'utils/helpers';
import { useSnackbar } from 'notistack';
import { GITHUB_EDIT_URL } from '_constants';
import { replaceGetFormatStrings } from 'utils/utilsService';
import { withSnackbar, InjectedNotistackProps } from 'notistack';
import { withUtilsService, UtilsContext } from './UtilsServiceContext';
import { makeStyles, IconButton, Collapse, Tooltip } from '@material-ui/core';

interface Props extends InjectedNotistackProps {
interface ExampleProps {
testId: string;
paddingBottom?: boolean;
source: { raw: string; relativePath: string; default: React.FC<any> };
Expand Down Expand Up @@ -65,14 +65,15 @@ const useStyles = makeStyles(theme => ({
},
}));

function Example({ source, testId, paddingBottom, enqueueSnackbar }: Props) {
function Example({ source, testId, paddingBottom }: ExampleProps) {
if (!source.default || !source.raw || !source.relativePath) {
throw new Error(
'Missing component or raw component code, you likely forgot to .example to your example extension'
);
}

const classes = useStyles();
const { enqueueSnackbar } = useSnackbar();
const currentLib = React.useContext(UtilsContext).lib;
const [expanded, setExpanded] = React.useState(false);

Expand Down Expand Up @@ -139,4 +140,4 @@ function Example({ source, testId, paddingBottom, enqueueSnackbar }: Props) {
);
}

export default withSnackbar(Example);
export default Example;
2 changes: 2 additions & 0 deletions docs/layout/PageWithContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { setPrismTheme } from '../utils/prism';
import { PageContext } from '../utils/getPageContext';
import { UtilsContext } from '../_shared/UtilsServiceContext';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import { NotificationManager } from 'utils/NotificationManager';
import { Theme, createMuiTheme, CssBaseline } from '@material-ui/core';
import { ThemeProvider, jssPreset, StylesProvider } from '@material-ui/styles';
import { createUtilsService, UtilsLib, utilsMap } from '../utils/utilsService';
Expand Down Expand Up @@ -102,6 +103,7 @@ export const PageWithContexts: React.SFC<Props> = ({
<ThemeContext.Provider value={theme}>
<UtilsContext.Provider value={createUtilsService(lib)}>
<CssBaseline />
<NotificationManager />

<Layout
children={children}
Expand Down
6 changes: 6 additions & 0 deletions docs/notifications.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
[
{
"id": "52f96d17-8316-4fba-bd3e-dfd237c5fb39",
"title": "We plan to significantly improve this package. [Share you thoughts in our survey](https://www.surveymonkey.com/r/5XHDL76)"
}
]
3 changes: 2 additions & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,15 @@
"next-cookies": "1.1.0",
"next-images": "^1.0.4",
"next-transpile-modules": "^2.0.0",
"notistack": "^0.4.3",
"notistack": "^0.9.4",
"prismjs": "^1.15.0",
"raw-loader": "^1.0.0",
"react": "^16.8.2",
"react-docgen-typescript": "^1.12.3",
"react-dom": "^16.8.2",
"react-jss": "^8.6.1",
"react-kawaii": "^0.12.0",
"react-markdown": "^4.2.2",
"react-redux": "^7.1.0",
"redux": "^4.0.4",
"redux-form": "^8.2.4",
Expand Down
58 changes: 58 additions & 0 deletions docs/utils/NotificationManager.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import * as React from 'react';
import ReactMarkdown from 'react-markdown';
import notifications from '../notifications.json';
import { useSnackbar } from 'notistack';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
notificationContainer: {
'& > p': {
margin: 4,
},
},
});

export function useNotification() {
const styles = useStyles();
const { enqueueSnackbar } = useSnackbar();

React.useEffect(() => {
// @ts-ignore
if (window.Cypress) {
return; // hide for visual regression and tests
}

const viewedNotifications: string[] = JSON.parse(
localStorage.getItem('viewedNotifications') || '[]'
);

const notificationToShow = notifications.find(
notification => !viewedNotifications.some(viewedId => viewedId === notification.id)
);

if (notificationToShow) {
enqueueSnackbar(
<ReactMarkdown
className={styles.notificationContainer}
source={notificationToShow.title}
/>,
{
anchorOrigin: {
vertical: 'top',
horizontal: 'center',
},
}
);

localStorage.setItem(
'viewedNotifications',
JSON.stringify([...viewedNotifications, notificationToShow.id])
);
}
}, [enqueueSnackbar, styles.notificationContainer]);
}

export const NotificationManager: React.FC = () => {
useNotification();
return null;
};
83 changes: 76 additions & 7 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4447,7 +4447,7 @@ dom-helpers@^5.0.1:
"@babel/runtime" "^7.5.5"
csstype "^2.6.6"

dom-serializer@0:
dom-serializer@0, dom-serializer@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.1.tgz#13650c850daffea35d8b626a4cfc4d3a17643fdb"
integrity sha512-sK3ujri04WyjwQXVoK4PU3y8ula1stq10GJZpqHIUgoGZdsGzAGu65BnU3d08aTVSvO7mGPZUc0wTEDL+qGE0Q==
Expand Down Expand Up @@ -4492,6 +4492,13 @@ domhandler@^2.3.0:
dependencies:
domelementtype "1"

domhandler@^3.0, domhandler@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9"
integrity sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==
dependencies:
domelementtype "^2.0.1"

domutils@1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
Expand All @@ -4508,6 +4515,15 @@ domutils@^1.5.1, domutils@^1.7.0:
dom-serializer "0"
domelementtype "1"

domutils@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.0.0.tgz#15b8278e37bfa8468d157478c58c367718133c08"
integrity sha512-n5SelJ1axbO636c2yUtOGia/IcJtVtlhQbFiVDBZHKV5ReJO1ViX7sFEemtuyoAnBxk5meNSYgA8V4s0271efg==
dependencies:
dom-serializer "^0.2.1"
domelementtype "^2.0.1"
domhandler "^3.0.0"

dot-case@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.1.tgz#34dcf37f50a8e93c2b3bca8bb7fb9155c7da3bee"
Expand Down Expand Up @@ -5976,6 +5992,16 @@ html-entities@^1.2.0:
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=

html-to-react@^1.3.4:
version "1.4.2"
resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.4.2.tgz#7b628ab56cd63a52f2d0b79d0fa838a51f088a57"
integrity sha512-TdTfxd95sRCo6QL8admCkE7mvNNrXtGoVr1dyS+7uvc8XCqAymnf/6ckclvnVbQNUo2Nh21VPwtfEHd0khiV7g==
dependencies:
domhandler "^3.0"
htmlparser2 "^4.0"
lodash.camelcase "^4.3.0"
ramda "^0.26"

htmlparser2@^3.9.1:
version "3.10.1"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
Expand All @@ -5988,6 +6014,16 @@ htmlparser2@^3.9.1:
inherits "^2.0.1"
readable-stream "^3.1.1"

htmlparser2@^4.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-4.0.0.tgz#6034658db65b7713a572a9ebf79f650832dceec8"
integrity sha512-cChwXn5Vam57fyXajDtPXL1wTYc8JtLbr2TN76FYu05itVVVealxLowe2B3IEznJG4p9HAYn/0tJaRlGuEglFQ==
dependencies:
domelementtype "^2.0.1"
domhandler "^3.0.0"
domutils "^2.0.0"
entities "^2.0.0"

http-errors@1.7.2:
version "1.7.2"
resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
Expand Down Expand Up @@ -7972,6 +8008,13 @@ md5.js@^1.3.4:
inherits "^2.0.1"
safe-buffer "^5.1.2"

mdast-add-list-metadata@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz#95e73640ce2fc1fa2dcb7ec443d09e2bfe7db4cf"
integrity sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==
dependencies:
unist-util-visit-parents "1.1.2"

mdast-squeeze-paragraphs@^3.0.0:
version "3.0.5"
resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-3.0.5.tgz#f428b6b944f8faef454db9b58f170c4183cb2e61"
Expand Down Expand Up @@ -8594,13 +8637,15 @@ normalize-url@^3.0.0:
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==

notistack@^0.4.3:
version "0.4.3"
resolved "https://registry.yarnpkg.com/notistack/-/notistack-0.4.3.tgz#0387f2d2b399474339c7de8552e4090e432baa99"
integrity sha512-YVG4IqA7+eCmMRH42UE+KZOIXTPg/3HEWU+pE1S+Tc8mUNSTQlZMdLy7XwDF1+WimyLiA7Glm+y+ClSu/4t+WA==
notistack@^0.9.4:
version "0.9.4"
resolved "https://registry.yarnpkg.com/notistack/-/notistack-0.9.4.tgz#20226ccc9ef7ee5aa16f6693c4e4ddff92e0de24"
integrity sha512-rtGZqznIlIbZH+wfHMhIGMFMqeJX4N/7CQikJ+XrCsGnZNL9gZyhifxLYrts0tUl+dKNpy7npswfRfiM7Soixg==
dependencies:
classnames "^2.2.6"
prop-types "^15.6.2"
hoist-non-react-statics "^3.3.0"
prop-types "^15.7.2"
react-is "^16.8.6"

npm-bundled@^1.0.1:
version "1.0.6"
Expand Down Expand Up @@ -9893,6 +9938,11 @@ ramda@0.24.1:
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
integrity sha1-w7d1UZfzW43DUCIoJixMkd22uFc=

ramda@^0.26:
version "0.26.1"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==

randexp@0.4.6:
version "0.4.6"
resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
Expand Down Expand Up @@ -10007,6 +10057,20 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==

react-markdown@^4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-4.2.2.tgz#b378774fcffb354653db8749153fc8740f9ed2f1"
integrity sha512-/STJiRFmJuAIUdeBPp/VyO5bcenTIqP3LXuC3gYvregmYGKjnszGiFc2Ph0LsWC17Un3y/CT8TfxnwJT7v9EJw==
dependencies:
html-to-react "^1.3.4"
mdast-add-list-metadata "1.0.1"
prop-types "^15.7.2"
react-is "^16.8.6"
remark-parse "^5.0.0"
unified "^6.1.5"
unist-util-visit "^1.3.0"
xtend "^4.0.1"

react-redux@^7.1.0:
version "7.1.1"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.1.tgz#ce6eee1b734a7a76e0788b3309bf78ff6b34fa0a"
Expand Down Expand Up @@ -11922,7 +11986,7 @@ unicode-property-aliases-ecmascript@^1.0.4:
resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
integrity sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==

unified@^6.1.6:
unified@^6.1.5, unified@^6.1.6:
version "6.2.0"
resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba"
integrity sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==
Expand Down Expand Up @@ -12009,6 +12073,11 @@ unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
integrity sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==

unist-util-visit-parents@1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz#f6e3afee8bdbf961c0e6f028ea3c0480028c3d06"
integrity sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q==

unist-util-visit-parents@^2.0.0:
version "2.1.2"
resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz#25e43e55312166f3348cae6743588781d112c1e9"
Expand Down

0 comments on commit 761282c

Please sign in to comment.