Feature/react toastify

generators/app/templates/package.json

@@ -33,7 +33,7 @@
     "react-i18next": "^10.1.2",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^3.0.1",
-    "react-toast-notifications": "^1.3.1",
+    "react-toastify": "^5.3.0",
     "solid-auth-client": "^2.3.0",
     "styled-components": "^4.1.3"
   },

generators/app/templates/src/App.js

@@ -1,32 +1,41 @@
 import React, { Fragment, Suspense } from 'react';
-import { ToastProvider } from 'react-toast-notifications';
-import { ToasterNotification, Loader } from '@util-components';
+import { toast, Slide } from 'react-toastify';
+import { Loader } from '@util-components';
 import { ThemeProvider } from 'styled-components';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import Routes from './routes';
 import theme from './utils/theme';
+import 'react-toastify/dist/ReactToastify.css';
 import 'flag-icon-css/css/flag-icon.min.css';
 import 'normalize.css';
 import './index.css';
 import '@inrupt/solid-style-guide';
+import { Toaster } from './App.styled';
 
 library.add(fas);
 library.add(faGithub);
 const App = () => (
   <Suspense fallback={<Loader />}>
     <ThemeProvider theme={theme}>
-      <ToastProvider
-        components={{ Toast: ToasterNotification }}
-        placement="top-center"
-        autoDismissTimeout={3000}
-        autoDismiss
-      >
-        <Fragment>
-          <Routes />
-        </Fragment>
-      </ToastProvider>
+      <Fragment>
+        <Routes />
+        <Toaster
+          {...{
+            autoClose: 3000,
+            position: toast.POSITION.TOP_CENTER,
+            newestOnTop: true,
+            closeOnClick: true,
+            pauseOnVisibilityChange: true,
+            draggable: true,
+            className: 'solid-toaster-container',
+            toastClassName: 'solid-toaster',
+            bodyClassName: 'solid-toaster-body',
+            transition: Slide
+          }}
+        />
+      </Fragment>
     </ThemeProvider>
   </Suspense>
 );

generators/app/templates/src/App.styled.js

@@ -0,0 +1,40 @@
+import { ToastContainer } from 'react-toastify';
+import styled from 'styled-components';
+
+export const Toaster = styled(ToastContainer)`
+  &.solid-toaster-container {
+    min-width: 410px;
+    margin-left: 0;
+    transform: translateX(-50%);
+    padding: 0;
+    & .toaster-error {
+      color: #fff;
+      background: rgba(213, 0, 0, 0.9);
+    }
+
+    & .toaster-success {
+      color: #fff;
+      background: rgba(124, 77, 255, 0.9);
+    }
+  }
+
+  & .solid-toaster {
+    border-radius: 4px;
+    min-width: 410px;
+    color: #fff;
+    display: flex;
+    align-content: center;
+    min-height: 72px;
+    margin: 0;
+
+    & > .solid-toaster-body {
+      margin: 0;
+      display: flex;
+    }
+
+    & > button {
+      color: #fff;
+      opacity: 0.8;
+    }
+  }
+`;

generators/app/templates/src/components/AuthNavBar/auth-nav-bar.container.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { UpdateContext, withWebId } from '@inrupt/solid-react-components';
 import { withTranslation } from 'react-i18next';
 import data from '@solid/query-ldflex';
-import { withToastManager } from 'react-toast-notifications';
 import AuthNavBar from './auth-nav-bar.component';
+import { errorToaster } from '@utils';
 
 let beforeContext = {};
 
@@ -46,11 +46,7 @@ class AuthNavBarContainer extends Component {
         image
       });
     } catch (error) {
-      const { toastManager } = this.props;
-      toastManager.add(['Error', error.message], {
-        appearance: 'error',
-        autoDismiss: false
-      });
+      errorToaster(error.message, 'Error');
     }
   };
 
@@ -61,4 +57,4 @@ class AuthNavBarContainer extends Component {
 }
 AuthNavBarContainer.contextType = UpdateContext;
 
-export default withTranslation()(withToastManager(withWebId(AuthNavBarContainer)));
+export default withTranslation()(withWebId(AuthNavBarContainer));

generators/app/templates/src/components/Utils/LanguageDropdown/language-dropdown.component.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Dropdown } from '@util-components';
-import { withToastManager } from 'react-toast-notifications';
+import { toast } from 'react-toastify';
 
 const languages = {
   en: {
@@ -19,7 +19,6 @@ const languages = {
 
 type Props = {
   i18n: Object,
-  toastManager: Object,
   t: Function
 };
 
@@ -32,8 +31,8 @@ class LanguageDropdown extends Component<Props> {
   getLanguage = () => localStorage.getItem('i18nextLng') || 'en';
 
   onLanguageSelect = nextLanguage => {
-    const { i18n, toastManager } = this.props;
-    toastManager.toasts.forEach(toast => toastManager.remove(toast.id));
+    const { i18n } = this.props;
+    toast.dismiss();
     i18n.changeLanguage(nextLanguage);
     this.setState({
       language: this.getLanguage()
@@ -69,4 +68,4 @@ class LanguageDropdown extends Component<Props> {
   }
 }
 
-export default withToastManager(LanguageDropdown);
+export default LanguageDropdown;

generators/app/templates/src/components/Utils/ToasterNotification/index.js

@@ -1,3 +1,3 @@
-import ToasterNotification from './toaster-notification.component';
+import Toaster from './toaster.component';
 
-export default ToasterNotification;
+export default Toaster;

generators/app/templates/src/components/Utils/ToasterNotification/toaster.component.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  title: String,
+  content: String
+};
+
+const Toastr = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  flex: 1 1 auto;
+
+  & > span {
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  & > p {
+    margin: 0;
+    padding: 2px 0;
+    color: inherit;
+  }
+`;
+
+const Toaster = (props: Props) => {
+  const { title, content } = props;
+  return (
+    <Toastr>
+      <span>{title}</span>
+      <p>{content}</p>
+    </Toastr>
+  );
+};
+
+export default Toaster;

generators/app/templates/src/components/Utils/ToasterNotification/toaster.test.js

@@ -0,0 +1,27 @@
+/* eslint-disable react/no-children-prop */
+import React from 'react';
+
+import { render, cleanup } from 'react-testing-library';
+import Toaster from './toaster.component';
+
+afterAll(cleanup);
+
+const defaultTitle = 'error';
+
+const defaultContent = 'Something happened';
+
+const { container, getByText } = render(<Toaster title={defaultTitle} content={defaultContent} />);
+
+describe('Toaster Notification Component', () => {
+  it('Toaster Notification renders without crashing', () => {
+    expect(container).toBeTruthy();
+  });
+
+  it('render title', () => {
+    expect(getByText(defaultTitle).textContent).toBe(defaultTitle);
+  });
+
+  it('render content', () => {
+    expect(getByText(defaultContent).textContent).toBe(defaultContent);
+  });
+});