implemented router action and post delete/update feature

Author: velopert

velog-frontend/src/components/post/PostActionButtons/PostActionButtons.js

@@ -1,13 +1,21 @@
 // @flow
 import React from 'react';
+import { Link } from 'react-router-dom';
 import './PostActionButtons.scss';
 
-type Props = {};
+type Props = {
+  id: string,
+  onAskRemove: () => void,
+};
 
-const PostActionButtons = (props: Props) => (
+const PostActionButtons = ({ id, onAskRemove }: Props) => (
   <div className="PostActionButtons">
-    <button className="btn">수정</button>
-    <button className="btn">삭제</button>
+    <Link to={`/write?edit_id=${id}`} className="btn">
+      수정
+    </Link>
+    <button className="btn" onClick={onAskRemove}>
+      삭제
+    </button>
   </div>
 );
 

velog-frontend/src/components/post/PostHead/PostHead.js

@@ -9,6 +9,7 @@ import PostActionButtons from '../PostActionButtons';
 import './PostHead.scss';
 
 type Props = {
+  id: string,
   title: string,
   categories: Categories,
   user: {
@@ -21,9 +22,20 @@ type Props = {
   liked: boolean,
   ownPost: boolean,
   onToggleLike: () => void,
+  onAskRemove: () => void,
 };
 
-const PostHead = ({ title, categories, user, likes, liked, ownPost, onToggleLike }: Props) => {
+const PostHead = ({
+  id,
+  title,
+  categories,
+  user,
+  likes,
+  liked,
+  ownPost,
+  onToggleLike,
+  onAskRemove,
+}: Props) => {
   const userLink = `/@${user.username}`;
 
   return (
@@ -46,7 +58,7 @@ const PostHead = ({ title, categories, user, likes, liked, ownPost, onToggleLike
         <PostLikeButton onClick={onToggleLike} liked={liked} likes={likes} />
       </div>
       <div className="separator" />
-      {ownPost && <PostActionButtons />}
+      {ownPost && <PostActionButtons id={id} onAskRemove={onAskRemove} />}
     </div>
   );
 };

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

@@ -1,19 +1,23 @@
 // @flow
 import React, { Component, Fragment } from 'react';
-import { UserActions, BaseActions } from 'store/actionCreators';
+import { UserActions, BaseActions, CommonActions } from 'store/actionCreators';
 import { connect } from 'react-redux';
 import type { State } from 'store';
 import type { UserData } from 'store/modules/user';
 import storage from 'lib/storage';
 import NanoBar from 'components/common/NanoBar';
 import throttle from 'lodash/throttle';
+import { withRouter, type ContextRouter } from 'react-router-dom';
+
 import FullscreenLoaderContainer from './FullscreenLoaderContainer';
 
 type Props = {
   user: ?UserData,
-};
+} & ContextRouter;
 
 class Core extends Component<Props> {
+  unlisten = null;
+
   checkUser = async () => {
     const storedUser = storage.get('__velog_user__');
     if (!storedUser) {
@@ -52,9 +56,24 @@ class Core extends Component<Props> {
     // TODO
   };
 
+  listenHistory = () => {
+    const { history } = this.props;
+    this.unlisten = history.listen((location, type) => {
+      CommonActions.changeRoute({
+        type,
+        ...location,
+      });
+    });
+  };
+
   componentDidMount() {
     this.initialize();
     this.integrateAxiosProgressbar();
+    this.listenHistory();
+  }
+
+  componentWillUnmount() {
+    if (this.unlisten) this.unlisten();
   }
 
   render() {
@@ -72,4 +91,4 @@ export default connect(
     user: user.user,
   }),
   () => ({}),
-)(Core);
+)(withRouter(Core));

velog-frontend/src/containers/post/PostViewer.js

@@ -3,11 +3,13 @@ import React, { Component, Fragment } from 'react';
 import PostHead from 'components/post/PostHead';
 import PostContent from 'components/post/PostContent';
 import PostTags from 'components/post/PostTags';
-import { PostsActions } from 'store/actionCreators';
+import { PostsActions, CommonActions } from 'store/actionCreators';
 import { connect } from 'react-redux';
 import type { State } from 'store';
 import type { PostData, TocItem } from 'store/modules/posts';
 import PostToc from 'components/post/PostToc';
+import QuestionModal from 'components/common/QuestionModal/QuestionModal';
+import { withRouter, type ContextRouter, type Location } from 'react-router-dom';
 
 type Props = {
   username: ?string,
@@ -17,7 +19,9 @@ type Props = {
   activeHeading: ?string,
   likeInProcess: boolean,
   currentUsername: ?string,
-};
+  askRemove: boolean,
+  routerHistory: Location[],
+} & ContextRouter;
 
 class PostViewer extends Component<Props> {
   initialize = async () => {
@@ -52,19 +56,40 @@ class PostViewer extends Component<Props> {
     }
   };
 
+  onToggleAskRemove = () => {
+    PostsActions.toggleAskRemove();
+  };
+
+  onConfirmRemove = async () => {
+    const { post, history, routerHistory } = this.props;
+    PostsActions.toggleAskRemove();
+    if (!post) return;
+    try {
+      CommonActions.removePost(post.id);
+    } catch (e) {
+      console.log(e);
+    }
+    if (routerHistory.length === 0) {
+      history.push('/');
+      return;
+    }
+    history.goBack();
+  };
+
   componentDidMount() {
     this.initialize();
   }
 
   render() {
-    const { post, toc, activeHeading, username, currentUsername } = this.props;
+    const { post, toc, activeHeading, username, currentUsername, askRemove } = this.props;
     const { onSetToc, onActivateHeading } = this;
     if (!post) return null;
 
     return (
       <Fragment>
         <PostToc toc={toc} activeHeading={activeHeading} />
         <PostHead
+          id={post.id}
           title={post.title}
           tags={post.tags}
           categories={post.categories}
@@ -73,6 +98,7 @@ class PostViewer extends Component<Props> {
           liked={post.liked}
           onToggleLike={this.onToggleLike}
           ownPost={currentUsername === username}
+          onAskRemove={this.onToggleAskRemove}
         />
         <PostContent
           thumbnail={post.thumbnail}
@@ -81,18 +107,28 @@ class PostViewer extends Component<Props> {
           onActivateHeading={onActivateHeading}
         />
         <PostTags tags={post.tags} />
+        <QuestionModal
+          open={askRemove}
+          title="포스트 삭제"
+          description="이 포스트를 정말로 삭제하시겠습니까?"
+          confirmText="삭제"
+          onConfirm={this.onConfirmRemove}
+          onCancel={this.onToggleAskRemove}
+        />
       </Fragment>
     );
   }
 }
 
 export default connect(
-  ({ posts, pender, user }: State) => ({
+  ({ posts, pender, user, common }: State) => ({
     currentUsername: user.user && user.user.username,
     post: posts.post,
     toc: posts.toc,
     activeHeading: posts.activeHeading,
     likeInProcess: pender.pending['posts/LIKE'] || pender.pending['posts/UNLIKE'],
+    askRemove: posts.askRemove,
+    routerHistory: common.router.history,
   }),
   () => ({}),
-)(PostViewer);
+)(withRouter(PostViewer));

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

@@ -4,32 +4,38 @@ import { applyPenders, type GenericResponseAction } from 'lib/common';
 import * as CommonAPI from 'lib/api/common';
 import produce from 'immer';
 import * as PostsAPI from 'lib/api/posts';
+import { type Location } from 'react-router-dom';
 
 const GET_TAGS = 'common/GET_TAGS';
 const SET_TAG_INFO = 'common/SET_TAG_INFO';
 const GET_TAG_INFO = 'common/GET_TAG_INFO';
 const ASK_REMOVE = 'common/saves/ASK_REMOVE';
 const CLOSE_REMOVE = 'common/saves/CLOSE_REMOVE';
 const REMOVE_POST = 'common/saves/REMOVE_POST';
+const CHANGE_ROUTE = 'common/router/CHANGE_ROUTE';
 
 export type TagData = {
   name: string,
   posts_count: number,
 };
 
+export type HistoryPayload = Location & { type: string };
+
 export const actionCreators = {
   getTags: createAction(GET_TAGS, CommonAPI.getTags, meta => meta),
   setTagInfo: createAction(SET_TAG_INFO, (info: ?TagData) => info),
   getTagInfo: createAction(GET_TAG_INFO, CommonAPI.getTagInfo),
   askRemove: createAction(ASK_REMOVE, (postId: string) => postId),
   closeRemove: createAction(CLOSE_REMOVE),
   removePost: createAction(REMOVE_POST, PostsAPI.deletePost),
+  changeRoute: createAction(CHANGE_ROUTE, (payload: HistoryPayload) => payload),
 };
 
 type GetTagsResponseAction = GenericResponseAction<TagData[], string>;
 type GetTagInfoResponseAction = GenericResponseAction<TagData, string>;
 type SetTagInfoAction = ActionType<typeof actionCreators.setTagInfo>;
 type AskRemoveAction = ActionType<typeof actionCreators.askRemove>;
+type ChangeRouteAction = ActionType<typeof actionCreators.changeRoute>;
 
 export type CommonState = {
   tags: {
@@ -42,6 +48,9 @@ export type CommonState = {
     removeId: ?string,
     ask: boolean,
   },
+  router: {
+    history: Location[],
+  },
 };
 
 const initialState: CommonState = {
@@ -55,6 +64,9 @@ const initialState: CommonState = {
     removeId: null,
     ask: false,
   },
+  router: {
+    history: [],
+  },
 };
 
 const reducer = handleActions(
@@ -75,6 +87,20 @@ const reducer = handleActions(
         draft.saves.ask = false;
       });
     },
+    [CHANGE_ROUTE]: (state, { payload }: ChangeRouteAction) => {
+      return produce(state, (draft) => {
+        const { type, ...rest } = payload;
+        if (type === 'PUSH') {
+          draft.router.history.push(rest);
+        }
+        if (type === 'POP') {
+          draft.router.history.pop();
+        }
+        if (type === 'REPLACE') {
+          draft.router.history[draft.router.history.length - 1] = payload;
+        }
+      });
+    },
   },
   initialState,
 );

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

@@ -22,6 +22,7 @@ const READ_SUBCOMMENTS = 'posts/READ_SUBCOMMENTS';
 const LIKE = 'posts/LIKE';
 const UNLIKE = 'posts/UNLIKE';
 const GET_LIKES_COUNT = 'posts/GET_LIKES_COUNT';
+const TOGGLE_ASK_REMOVE = 'posts/TOGGLE_ASK_REMOVE';
 
 export interface PostsActionCreators {
   readPost(payload: PostsAPI.ReadPostPayload): any;
@@ -33,6 +34,7 @@ export interface PostsActionCreators {
   like(postId: string): any;
   unlike(postId: string): any;
   getLikesCount(postId: string): any;
+  toggleAskRemove(): any;
 }
 
 export const actionCreators = {
@@ -45,11 +47,13 @@ export const actionCreators = {
   like: createAction(LIKE, LikesAPI.like),
   unlike: createAction(UNLIKE, LikesAPI.unlike),
   getLikesCount: createAction(GET_LIKES_COUNT, LikesAPI.getLikesCount),
+  toggleAskRemove: createAction(TOGGLE_ASK_REMOVE),
 };
 
 type SetTocAction = ActionType<typeof actionCreators.setToc>;
 type ActivateHeadingAction = ActionType<typeof actionCreators.activateHeading>;
 
+
 export type Categories = { id: string, name: string, url_slug: string }[];
 export type Comment = {
   id: string,
@@ -95,6 +99,7 @@ export type Posts = {
   activeHeading: ?string,
   comments: ?(Comment[]),
   subcommentsMap: SubcommentsMap,
+  askRemove: boolean,
 };
 
 const initialState: Posts = {
@@ -103,6 +108,7 @@ const initialState: Posts = {
   activeHeading: null,
   comments: null,
   subcommentsMap: {},
+  askRemove: false,
 };
 
 const reducer = handleActions(
@@ -117,6 +123,12 @@ const reducer = handleActions(
         draft.activeHeading = action.payload;
       });
     },
+    [TOGGLE_ASK_REMOVE]: (state) => {
+      return {
+        ...state,
+        askRemove: !state.askRemove,
+      };
+    },
   },
   initialState,
 );