implemented loading temp saves

Author: velopert

velog-backend/src/router/posts/post/saves/index.js

@@ -7,6 +7,7 @@ import * as savesCtrl from './saves.ctrl';
 const saves: Router = new Router();
 
 saves.get('/', savesCtrl.getTempSaveList);
+saves.get('/:saveId', savesCtrl.loadTempSave);
 saves.post('/', savesCtrl.tempSave);
 
 export default saves;

velog-backend/src/router/posts/post/saves/saves.ctrl.js

@@ -1,7 +1,7 @@
 // @flow
 import type { Context, Middleware } from 'koa';
 import Joi from 'joi';
-import { validateSchema, extractKeys } from 'lib/common';
+import { validateSchema, extractKeys, isUUID } from 'lib/common';
 import PostHistory from 'database/models/PostHistory';
 
 export const tempSave = async (ctx: Context): Promise<*> => {
@@ -14,7 +14,9 @@ export const tempSave = async (ctx: Context): Promise<*> => {
   const { id } = ctx.params;
 
   const schema = Joi.object().keys({
-    title: Joi.string().min(1).max(120),
+    title: Joi.string()
+      .min(1)
+      .max(120),
     body: Joi.string().min(1),
     is_release: Joi.boolean(),
   });
@@ -34,13 +36,39 @@ export const tempSave = async (ctx: Context): Promise<*> => {
     }).save();
 
     ctx.body = extractKeys(postHistory, [
-      'id', 'title', 'body', 'created_at', 'is_release',
+      'id',
+      'title',
+      'body',
+      'created_at',
+      'is_release',
     ]);
   } catch (e) {
     ctx.throw(500, e);
   }
 };
 
+export const loadTempSave: Middleware = async (ctx) => {
+  const { id, saveId } = ctx.params;
+  if (!isUUID(saveId)) {
+    ctx.body = {
+      name: 'NOT_UUID',
+    };
+    ctx.status = 400;
+    return;
+  }
+  try {
+    const postHistory = await PostHistory.findOne({
+      where: {
+        fk_post_id: id,
+        id: saveId,
+      },
+    });
+    ctx.body = postHistory;
+  } catch (e) {
+    ctx.throw(500, e);
+  }
+};
+
 export const getTempSaveList: Middleware = async (ctx: Context) => {
   const { id } = ctx.params;
   const page = parseInt(ctx.query.page || 1, 10);

velog-frontend/src/components/common/Button/Button.js

@@ -1,5 +1,6 @@
 // @flow
 import React, { type Node } from 'react';
+import { Link } from 'react-router-dom';
 import cx from 'classnames';
 import './Button.scss';
 
@@ -9,21 +10,42 @@ type Props = {
   cancel?: boolean,
   violetFont?: boolean,
   className?: string,
+  to?: ?string,
   children: Node,
 };
 
-const Button = ({ theme, children, confirm, cancel, violetFont, className, ...rest }: Props) => (
-  <button className={cx('Button', theme, className, { confirm, cancel, violetFont })} {...rest}>
-    {children}
-  </button>
-);
+const Button = ({
+  theme,
+  children,
+  confirm,
+  cancel,
+  violetFont,
+  className,
+  to,
+  ...rest
+}: Props) => {
+  const processedClassName = cx('Button', theme, className, { confirm, cancel, violetFont });
+  if (to) {
+    return (
+      <Link className={processedClassName} to={to} {...rest}>
+        {children}
+      </Link>
+    );
+  }
+  return (
+    <button className={processedClassName} {...rest}>
+      {children}
+    </button>
+  );
+};
 
 Button.defaultProps = {
   theme: 'default',
   confirm: false,
   cancel: false,
   violetFont: false,
   className: '',
+  to: null,
 };
 
 export default Button;

velog-frontend/src/components/main/MainHead/MainHead.js

@@ -14,7 +14,7 @@ type Props = {
 
 const MainHead = ({ logged, onLogin, rightArea }: Props) => (
   <div className="MainHead">
-    <div className="button-area">{logged && <Button>새 포스트 작성</Button>}</div>
+    <div className="button-area">{logged && <Button to="/write">새 포스트 작성</Button>}</div>
     <div className="spacer" />
     <div className="right-area">
       {rightArea || (

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

@@ -13,9 +13,11 @@ type Props = {
 
 const PostContent = ({ body, onSetToc, onActivateHeading, thumbnail }: Props) => (
   <div className="PostContent">
-    <div className="post-thumbnail">
-      <img src={thumbnail} alt="" />
-    </div>
+    {thumbnail && (
+      <div className="post-thumbnail">
+        <img src={thumbnail} alt="" />
+      </div>
+    )}
     <div className="contents">
       <MarkdownRender body={body} onSetToc={onSetToc} onActivateHeading={onActivateHeading} />
     </div>

velog-frontend/src/components/write/SubmitBox/SubmitBox.js

@@ -3,6 +3,7 @@ import React, { Fragment, Component, type Node } from 'react';
 import onClickOutside from 'react-onclickoutside';
 import SettingsIcon from 'react-icons/lib/md/settings';
 import cx from 'classnames';
+import { Link } from 'react-router-dom';
 
 import './SubmitBox.scss';
 import SubmitBoxAdditional from '../SubmitBoxAdditional';
@@ -19,6 +20,7 @@ type Props = {
   onEditCategoryClick(): void,
   onToggleAdditionalConfig(): void,
   additional: Node | false,
+  postLink: ?string,
 };
 
 type State = {
@@ -75,6 +77,7 @@ class SubmitBox extends Component<Props, State> {
       configureThumbnail,
       onToggleAdditionalConfig,
       additional,
+      postLink,
     } = this.props;
     const { animating } = this.state;
 
@@ -84,7 +87,12 @@ class SubmitBox extends Component<Props, State> {
       <div className={cx('SubmitBox', visible ? 'appear' : 'disappear')}>
         <div className="title">
           <div className="text">{isEdit ? '글 수정하기' : '새 글 작성하기'}</div>
-          {isEdit && <div className="view">글 보기</div>}
+          {isEdit &&
+            postLink && (
+              <Link className="view" to={postLink}>
+                글 보기
+              </Link>
+            )}
         </div>
         {additional || (
           <Fragment>

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

@@ -20,7 +20,7 @@ class RightCorner extends Component<Props> {
     if (!user) return null;
     return (
       <Fragment>
-        <NotificationButton count={10} onClick={() => undefined} />
+        {/* <NotificationButton count={10} onClick={() => undefined} /> */}
         <UserButton onClick={this.onUserButtonClick} thumbnail={user.thumbnail} />
         <UserMenuContainer />
       </Fragment>

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

@@ -26,6 +26,7 @@ type Props = {
   thumbnail: ?string,
   additional: boolean,
   meta: Meta,
+  username: ?string,
 };
 
 class SubmitBoxContainer extends Component<Props> {
@@ -200,9 +201,24 @@ class SubmitBoxContainer extends Component<Props> {
       onCancelAdditionalConfig,
       onConfirmAdditionalConfig,
     } = this;
-    const { body, open, categories, tags, postData, thumbnail, additional, meta } = this.props;
+
+    const {
+      body,
+      open,
+      categories,
+      tags,
+      postData,
+      thumbnail,
+      additional,
+      meta,
+      username,
+    } = this.props;
+
+    const postLink = username && postData && `/@${username}/${postData.url_slug}`;
+
     return (
       <SubmitBox
+        postLink={postLink}
         onEditCategoryClick={onEditCategoryClick}
         selectCategory={<SelectCategory categories={categories} onToggle={onToggleCategory} />}
         inputTags={<InputTags tags={tags} onInsert={onInsertTag} onRemove={onRemoveTag} />}
@@ -237,7 +253,7 @@ class SubmitBoxContainer extends Component<Props> {
 }
 
 export default connect(
-  ({ write }: State) => ({
+  ({ write, user }: State) => ({
     open: write.submitBox.open,
     categories: write.submitBox.categories,
     tags: write.submitBox.tags,
@@ -250,6 +266,7 @@ export default connect(
     thumbnail: write.thumbnail,
     additional: write.submitBox.additional,
     meta: write.meta,
+    username: user.user && user.user.username,
   }),
   () => ({}),
 )(SubmitBoxContainer);

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

@@ -4,12 +4,28 @@ import WriteExtra from 'components/write/WriteExtra/WriteExtra';
 import { connect } from 'react-redux';
 import type { State } from 'store';
 import { WriteActions } from 'store/actionCreators';
+import type { PostData } from 'store/modules/write';
 
 type Props = {
   visible: boolean,
   mode: string,
+  postData: ?PostData,
 };
+
 class WriteExtraContainer extends Component<Props> {
+  async listTempSave() {
+    const { postData } = this.props;
+    if (!postData) return;
+    WriteActions.listTempSaves(postData.id);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.visible && this.props.visible) {
+      // WriteExtra is now visible
+      this.listTempSave();
+    }
+  }
+
   onSelectLayoutMode = (mode) => {
     WriteActions.setLayoutMode(mode);
   };
@@ -33,6 +49,10 @@ class WriteExtraContainer extends Component<Props> {
 }
 
 export default connect(
-  ({ write }: State) => ({ visible: write.writeExtra.visible, mode: write.writeExtra.layoutMode }),
+  ({ write }: State) => ({
+    visible: write.writeExtra.visible,
+    mode: write.writeExtra.layoutMode,
+    postData: write.postData,
+  }),
   () => ({}),
 )(WriteExtraContainer);

velog-frontend/src/lib/api/posts/saves.js

@@ -0,0 +1,13 @@
+// @flow
+import axios from 'lib/defaultClient';
+
+export const getTempSaveList = (postId: string) => axios.get(`/posts/${postId}/saves`);
+
+export type LoadTempSavePayload = {
+  postId: string,
+  saveId: string,
+};
+
+export const loadTempSave = ({ postId, saveId }: LoadTempSavePayload) => {
+  axios.get(`/posts/${postId}/saves/${saveId}`);
+};