Merge pull request codeBelt#13 from codeBelt/js/toasts

Js/toasts

Author: codeBelt

src/constants/RouteEnum.ts

@@ -1,6 +1,7 @@
 enum RouteEnum {
   Home = '/',
   Episodes = '/episodes',
+  About = '/about',
 }
 
 export default RouteEnum;

src/constants/ToastStatusEnum.ts

@@ -0,0 +1,7 @@
+enum ToastStatusEnum {
+  Error = 'error',
+  Warning = 'warning',
+  Success = 'success',
+}
+
+export default ToastStatusEnum;

src/environments/base.js

@@ -9,6 +9,7 @@ export default function(baseApi) {
       shows: `${baseApi}/shows/:showId`,
       episodes: `${baseApi}/shows/:showId/episodes`,
       cast: `${baseApi}/shows/:showId/cast`,
+      errorExample: 'https://httpstat.us/520',
     },
     isProduction: true,
     isDevelopment: false,

src/middlewares/errorToastMiddleware.js

@@ -0,0 +1,14 @@
+import ToastStatusEnum from '../constants/ToastStatusEnum';
+import ToastsAction from '../stores/toasts/ToastsAction';
+
+const errorToastMiddleware = () => (store) => (next) => (action) => {
+  if (action.error) {
+    const errorAction = action;
+
+    next(ToastsAction.add(errorAction.payload.message, ToastStatusEnum.Error));
+  }
+
+  next(action);
+};
+
+export default errorToastMiddleware;

src/stores/rootReducer.js

@@ -3,13 +3,15 @@ import { connectRouter } from 'connected-react-router';
 import RequestingReducer from './requesting/RequestingReducer';
 import ErrorReducer from './error/ErrorReducer';
 import ShowsReducer from './shows/ShowsReducer';
+import ToastsReducer from './toasts/ToastsReducer';
 
 export default (history) => {
   const reducerMap = {
     error: ErrorReducer.reducer,
     requesting: RequestingReducer.reducer,
     router: connectRouter(history),
     shows: new ShowsReducer().reducer,
+    toasts: new ToastsReducer().reducer,
   };
 
   return combineReducers(reducerMap);

src/stores/rootStore.js

@@ -5,9 +5,10 @@ import { routerMiddleware } from 'connected-react-router';
 import reduxFreeze from 'redux-freeze';
 import environment from 'environment';
 import rootReducer from './rootReducer';
+import errorToastMiddleware from '../middlewares/errorToastMiddleware';
 
 export default (initialState, history) => {
-  const middleware = [environment.isDevelopment ? reduxFreeze : null, routerMiddleware(history), thunk].filter(Boolean);
+  const middleware = [environment.isDevelopment ? reduxFreeze : null, thunk, routerMiddleware(history), errorToastMiddleware()].filter(Boolean);
 
   const store = createStore(rootReducer(history), initialState, composeWithDevTools(applyMiddleware(...middleware)));
 

src/stores/shows/ShowsAction.js

@@ -11,6 +11,9 @@ export default class ShowsAction {
   static REQUEST_CAST = 'ShowsAction.REQUEST_CAST';
   static REQUEST_CAST_FINISHED = 'ShowsAction.REQUEST_CAST_FINISHED';
 
+  static REQUEST_ERROR = 'ShowsAction.REQUEST_ERROR';
+  static REQUEST_ERROR_FINISHED = 'ShowsAction.REQUEST_ERROR_FINISHED';
+
   static requestShow() {
     return async (dispatch, getState) => {
       const showId = getState().shows.currentShowId;
@@ -34,4 +37,10 @@ export default class ShowsAction {
       await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_CAST, ShowsEffect.requestCast, showId);
     };
   }
+
+  static requestError() {
+    return async (dispatch, getState) => {
+      await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_ERROR, ShowsEffect.requestError);
+    };
+  }
 }

src/stores/shows/ShowsEffect.js

@@ -32,4 +32,18 @@ export default class ShowsEffect {
 
     return response.data.map((json) => new CastModel(json));
   }
+
+  /**
+   * This is only to trigger an error api response so we can use it for an example in the AboutPage
+   */
+  static async requestError() {
+    const endpoint = environment.api.errorExample;
+    const response = await HttpUtility.get(endpoint);
+
+    if (response instanceof HttpErrorResponseModel) {
+      return response;
+    }
+
+    return response.data;
+  }
 }

src/stores/toasts/ToastsAction.js

@@ -0,0 +1,19 @@
+import ActionUtility from '../../utilities/ActionUtility';
+import uuid from 'uuid/v4';
+
+export default class ToastsAction {
+  static ADD_TOAST = 'ToastsAction.ADD_TOAST';
+  static REMOVE_TOAST = 'ToastsAction.REMOVE_TOAST';
+
+  static add(message, type) {
+    return ActionUtility.createAction(ToastsAction.ADD_TOAST, {
+      message,
+      type,
+      id: uuid(),
+    });
+  }
+
+  static removeById(toastId) {
+    return ActionUtility.createAction(ToastsAction.REMOVE_TOAST, toastId);
+  }
+}

src/stores/toasts/ToastsReducer.js

@@ -0,0 +1,24 @@
+import ToastsAction from './ToastsAction';
+import BaseReducer from '../../utilities/BaseReducer';
+
+export default class ToastsReducer extends BaseReducer {
+  initialState = {
+    items: [],
+  };
+
+  [ToastsAction.ADD_TOAST](state, action) {
+    return {
+      ...state,
+      items: [...state.items, action.payload],
+    };
+  }
+
+  [ToastsAction.REMOVE_TOAST](state, action) {
+    const toastId = action.payload;
+
+    return {
+      ...state,
+      items: state.items.filter((model) => model.id !== toastId),
+    };
+  }
+}

src/typings.d.ts

@@ -4,9 +4,10 @@ declare module 'lodash.groupby';
 declare module 'environment' {
   const value: {
     api: {
-      shows;
-      episodes;
-      cast;
+      shows: string;
+      episodes: string;
+      cast: string;
+      errorExample: string;
     };
     isDevelopment: boolean;
     isProduction: boolean;

src/views/App.jsx

@@ -4,10 +4,12 @@ import { Route, Switch } from 'react-router-dom';
 import RouteEnum from '../constants/RouteEnum';
 import MainNav from './components/main-nav/MainNav';
 import LoadingIndicator from './components/loading-indicator/LoadingIndicator';
+import Toasts from './components/toasts/Toasts';
 
 const HomePage = lazy(() => import('./home-page/HomePage'));
-const NotFoundPage = lazy(() => import('./not-found-page/NotFoundPage'));
 const EpisodesPage = lazy(() => import('./episodes-page/EpisodesPage'));
+const AboutPage = lazy(() => import('./about-page/AboutPage'));
+const NotFoundPage = lazy(() => import('./not-found-page/NotFoundPage'));
 
 export default class App extends React.Component {
   render() {
@@ -18,8 +20,10 @@ export default class App extends React.Component {
           <Switch>
             <Route exact={true} path={RouteEnum.Home} component={HomePage} />
             <Route path={RouteEnum.Episodes} component={EpisodesPage} />
+            <Route path={RouteEnum.About} component={AboutPage} />
             <Route component={NotFoundPage} />
           </Switch>
+          <Toasts />
         </Suspense>
       </ConnectedRouter>
     );

src/views/about-page/AboutPage.jsx

@@ -0,0 +1,42 @@
+import styles from './AboutPage.module.scss';
+
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { selectErrorText } from '../../selectors/error/ErrorSelector';
+import ShowsAction from '../../stores/shows/ShowsAction';
+import { selectRequesting } from '../../selectors/requesting/RequestingSelector';
+import LoadingIndicator from '../components/loading-indicator/LoadingIndicator';
+import { Header, Message, Container } from 'semantic-ui-react';
+
+const mapStateToProps = (state, ownProps) => ({
+  isRequesting: selectRequesting(state, [ShowsAction.REQUEST_ERROR]),
+  requestErrorText: selectErrorText(state, [ShowsAction.REQUEST_ERROR_FINISHED]),
+});
+
+class AboutPage extends React.Component {
+  componentDidMount() {
+    this.props.dispatch(ShowsAction.requestError());
+  }
+
+  render() {
+    const { isRequesting, requestErrorText } = this.props;
+
+    return (
+      <div className={styles.wrapper}>
+        <Header as="h2">About</Header>
+        <LoadingIndicator isActive={isRequesting}>
+          <Container>
+            <p>
+              This page is only to show how to handle API errors on the page. You will also notice a popup indicator with the actual error text. Below
+              we create a custom error message.
+            </p>
+          </Container>
+          {requestErrorText && <Message info={true} header="Error" content="Sorry there was an error requesting this content." />}
+        </LoadingIndicator>
+      </div>
+    );
+  }
+}
+
+export { AboutPage as Unconnected };
+export default connect(mapStateToProps)(AboutPage);

src/views/about-page/AboutPage.module.scss

@@ -0,0 +1,2 @@
+.wrapper {
+}

src/views/components/main-nav/MainNav.jsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { Menu, Segment } from 'semantic-ui-react';
 import MenuNavLink from './components/MenuNavLink';
+import RouteEnum from '../../../constants/RouteEnum';
 
 export default class MainNav extends React.PureComponent {
   render() {
     return (
       <Segment inverted={true}>
         <Menu inverted={true} pointing={true} secondary={true}>
-          <Menu.Item as={MenuNavLink} to="/" name="home" />
-          <Menu.Item as={MenuNavLink} to="/episodes" name="Episodes" />
+          <Menu.Item as={MenuNavLink} to={RouteEnum.Home} name="Home" />
+          <Menu.Item as={MenuNavLink} to={RouteEnum.Episodes} name="Episodes" />
+          <Menu.Item as={MenuNavLink} to={RouteEnum.About} name="About" />
         </Menu>
       </Segment>
     );

src/views/components/toasts/Toasts.jsx

@@ -0,0 +1,56 @@
+import styles from './Toasts.module.scss';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import ToastsAction from '../../../stores/toasts/ToastsAction';
+import { Card, Button } from 'semantic-ui-react';
+import ToastStatusEnum from '../../../constants/ToastStatusEnum';
+
+const mapStateToProps = (state, ownProps) => ({
+  toasts: state.toasts.items,
+});
+
+class Toasts extends React.Component {
+  buttonColorMap = {
+    [ToastStatusEnum.Error]: 'red',
+    [ToastStatusEnum.Warning]: 'orange',
+    [ToastStatusEnum.Success]: 'green',
+  };
+
+  render() {
+    const { toasts } = this.props;
+
+    if (toasts.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className={styles.wrapper}>
+        {toasts.map((item) => {
+          const buttonColor = this.buttonColorMap[item.type];
+
+          return (
+            <Card key={item.id}>
+              <Card.Content>
+                <Card.Header content={item.type} />
+                <Card.Description content={item.message} />
+              </Card.Content>
+              <Card.Content extra={true}>
+                <Button color={buttonColor} onClick={this._onClickRemoveNotification(item.id)}>
+                  Close
+                </Button>
+              </Card.Content>
+            </Card>
+          );
+        })}
+      </div>
+    );
+  }
+
+  _onClickRemoveNotification = (id) => (event, data) => {
+    this.props.dispatch(ToastsAction.removeById(id));
+  };
+}
+
+export { Toasts as Unconnected };
+export default connect(mapStateToProps)(Toasts);

src/views/components/toasts/Toasts.module.scss

@@ -0,0 +1,10 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 16px;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}

tslint.json

@@ -2,7 +2,8 @@
   "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"],
   "jsRules": {
     "object-literal-sort-keys": false,
-    "no-console": [true, "log"]
+    "no-console": [true, "log"],
+    "variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case", "allow-leading-underscore"]
   },
   "rules": {
     "array-type": [true, "array"],