Implement simple toast

Author: velopert

velog-frontend/src/components/base/NotifyToast/NotifyToast.js

@@ -0,0 +1,66 @@
+// @flow
+import React, { Component } from 'react';
+import cx from 'classnames';
+import './NotifyToast.scss';
+
+type Props = {
+  toast: {
+    type: ?string,
+    message: ?string,
+    visible: boolean,
+  },
+  onHide: () => void,
+};
+
+type State = {
+  animating: boolean,
+};
+
+class NotifyToast extends Component<Props, State> {
+  state = {
+    animating: false,
+  };
+  autoHideTimeout = null;
+  animateTimeout = null;
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    // false -> true
+    if (!prevProps.toast.visible && this.props.toast.visible) {
+      if (this.autoHideTimeout) {
+        clearTimeout(this.autoHideTimeout);
+        this.autoHideTimeout = null;
+      }
+      this.autoHideTimeout = setTimeout(() => {
+        this.props.onHide();
+        this.autoHideTimeout = null;
+      }, 1500);
+    }
+
+    if (prevProps.toast.visible !== this.props.toast.visible) {
+      this.setState({
+        animating: true,
+      });
+      if (this.animateTimeout) {
+        clearTimeout(this.animateTimeout);
+        this.animateTimeout = null;
+      }
+      this.animateTimeout = setTimeout(() => {
+        this.setState({
+          animating: false,
+        });
+      }, 150);
+    }
+  }
+  render() {
+    const { type, message, visible } = this.props.toast;
+    const { animating } = this.state;
+    const transition = (() => {
+      if (!animating) return '';
+      return visible ? 'appear' : 'disappear';
+    })();
+    if (!animating && !visible) return null;
+    if (!type || !message) return null;
+    return <div className={cx('NotifyToast', type, transition)}>{message}</div>;
+  }
+}
+
+export default NotifyToast;

velog-frontend/src/components/base/NotifyToast/NotifyToast.scss

@@ -0,0 +1,50 @@
+@import "utils";
+@keyframes notifyToastAppear {
+  0% {
+    transform: translateY(calc(100% + 1rem));
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes notifyToastDisappear {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(calc(100% + 1rem));
+  }
+}
+
+.NotifyToast {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  &.default {
+  }
+  &.success {
+    border-radius: 1.40625rem;
+    background: $oc-green-4;
+    color: white;
+    min-width: 200px;
+    padding: 0.75rem;
+    padding-left: 1rem;
+    display: flex;
+    justify-content: center;
+    padding-right: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.3125rem;
+    font-weight: 600;
+  }
+  &.error {
+  }
+  &.appear {
+    animation: notifyToastAppear 0.15s ease-in;
+    animation-fill-mode: forwards;
+  }
+  &.disappear {
+    animation: notifyToastDisappear 0.15s ease-in;
+    animation-fill-mode: forwards;
+  }
+}

velog-frontend/src/components/base/NotifyToast/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './NotifyToast';

velog-frontend/src/containers/base/Core.js

@@ -11,6 +11,7 @@ import { withRouter, type ContextRouter } from 'react-router-dom';
 
 import FullscreenLoaderContainer from './FullscreenLoaderContainer';
 import { setup } from '../../lib/progress';
+import NotifyToastContainer from './NotifyToastContainer';
 
 type Props = {
   user: ?UserData,
@@ -82,6 +83,7 @@ class Core extends Component<Props> {
       <Fragment>
         <FullscreenLoaderContainer />
         <NanoBar />
+        <NotifyToastContainer />
       </Fragment>
     );
   }

velog-frontend/src/containers/base/NotifyToastContainer.js

@@ -0,0 +1,33 @@
+// @flow
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { BaseActions } from 'store/actionCreators';
+import { type State } from 'store';
+
+import NotifyToast from '../../components/base/NotifyToast';
+
+type Props = {
+  toast: {
+    type: ?string,
+    message: ?string,
+    visible: boolean,
+  },
+};
+class NotifyToastContainer extends Component<Props> {
+  onHide() {
+    BaseActions.hideToast();
+  }
+
+  render() {
+    const { toast } = this.props;
+
+    return <NotifyToast toast={toast} onHide={this.onHide} />;
+  }
+}
+
+export default connect(
+  ({ base }: State) => ({
+    toast: base.toast,
+  }),
+  () => ({}),
+)(NotifyToastContainer);

velog-frontend/src/containers/write/SubmitBoxContainer.js

@@ -8,7 +8,7 @@ import WriteConfigureThumbnail from 'components/write/WriteConfigureThumbnail';
 import SubmitBoxAdditional from 'components/write/SubmitBoxAdditional/SubmitBoxAdditional';
 import { connect } from 'react-redux';
 import type { State } from 'store';
-import { WriteActions, UserActions } from 'store/actionCreators';
+import { WriteActions, UserActions, BaseActions } from 'store/actionCreators';
 import type { Categories, PostData, Meta } from 'store/modules/write';
 import axios from 'axios';
 import storage from 'lib/storage';
@@ -159,6 +159,10 @@ class SubmitBoxContainer extends Component<Props> {
           meta,
           url_slug: urlSlug,
         });
+        BaseActions.showToast({
+          type: 'success',
+          message: '포스트가 수정됐습니다.',
+        });
       } else {
         await WriteActions.writePost({
           title,
@@ -171,6 +175,10 @@ class SubmitBoxContainer extends Component<Props> {
           meta,
           urlSlug: urlSlug || escapeForUrl(title),
         });
+        BaseActions.showToast({
+          type: 'success',
+          message: '포스트가 작성됐습니다.',
+        });
       }
     } catch (e) {
       console.log(e);

velog-frontend/src/store/modules/base.js

@@ -8,6 +8,8 @@ const SET_FULLSCREEN_LOADER = 'base/SET_FULLSCREEN_LOADER';
 const ENTER_LANDING = 'base/ENTER_LANDING';
 const EXIT_LANDING = 'base/EXIT_LANDING';
 const SET_WIDTH = 'base/SET_WIDTH';
+const SHOW_TOAST = 'base/SHOW_TOAST';
+const HIDE_TOAST = 'base/HIDE_TOAST';
 
 const showUserMenu = createAction(SHOW_USER_MENU);
 const hideUserMenu = createAction(HIDE_USER_MENU);
@@ -18,11 +20,14 @@ const setFullscreenLoader = createAction(
 const exitLanding = createAction(EXIT_LANDING);
 const enterLanding = createAction(ENTER_LANDING);
 const setWidth = createAction(SET_WIDTH, (width: number) => width);
+const showToast = createAction(SHOW_TOAST, (payload: { type: string, message: string }) => payload);
+const hideToast = createAction(HIDE_TOAST);
 
 type ShowUserMenuAction = ActionType<typeof showUserMenu>;
 type HideUserMenuAction = ActionType<typeof hideUserMenu>;
 type SetFullscreenLoaderAction = ActionType<typeof setFullscreenLoader>;
 type SetWidthAction = ActionType<typeof setWidth>;
+type ShowToastAction = ActionType<typeof showToast>;
 
 export interface BaseActionCreators {
   showUserMenu(): any;
@@ -31,6 +36,8 @@ export interface BaseActionCreators {
   exitLanding(): any;
   enterLanding(): any;
   setWidth(width: number): any;
+  showToast(payload: { type: string, message: string }): any;
+  hideToast(): any;
 }
 
 export const actionCreators: BaseActionCreators = {
@@ -40,20 +47,28 @@ export const actionCreators: BaseActionCreators = {
   exitLanding,
   enterLanding,
   setWidth,
+  showToast,
+  hideToast,
 };
 
 export type Base = {
   userMenu: boolean,
   fullscreenLoader: boolean,
   landing: boolean,
   windowWidth: number,
+  toast: { type: ?string, message: ?string, visible: boolean },
 };
 
 const initialState: Base = {
   userMenu: false,
   fullscreenLoader: false,
   landing: true,
   windowWidth: 1920,
+  toast: {
+    type: null,
+    message: null,
+    visible: false,
+  },
 };
 
 export default handleActions(
@@ -86,6 +101,20 @@ export default handleActions(
         draft.windowWidth = action.payload;
       });
     },
+    [SHOW_TOAST]: (state, { payload }: ShowToastAction) => {
+      return {
+        ...state,
+        toast: {
+          ...payload,
+          visible: true,
+        },
+      };
+    },
+    [HIDE_TOAST]: (state) => {
+      return produce(state, (draft) => {
+        draft.toast.visible = false;
+      });
+    },
   },
   initialState,
 );