Fix thumbnail / short_description bug

Author: velopert

src/components/write/PublishPreview.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import PublishSection from './PublishSection';
 import palette from '../../lib/styles/palette';
@@ -179,7 +179,6 @@ const { useCallback } = React;
 export interface PublishPreviewProps {
   title: string;
   description: string;
-  defaultDescription: string;
   thumbnail: string | null;
   onChangeDescription: (description: string) => void;
   onResetThumbnail: () => void;
@@ -190,12 +189,11 @@ const PublishPreview: React.FC<PublishPreviewProps> = ({
   title,
   thumbnail,
   description,
-  defaultDescription,
   onChangeDescription,
   onUpload,
   onResetThumbnail,
 }) => {
-  const descriptionToShow: string = description || defaultDescription;
+  // const descriptionToShow: string = description || defaultDescription;
   const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onChangeDescription(e.target.value);
   };
@@ -220,17 +218,12 @@ const PublishPreview: React.FC<PublishPreviewProps> = ({
         <h4>{title}</h4>
         <ShortDescriptionTextarea
           placeholder="당신의 포스트를 짧게 소개해보세요."
-          value={descriptionToShow}
+          value={description}
           onChange={onChange}
           onKeyDown={onKeyDown}
         />
-        <TextLimit
-          limit={
-            descriptionToShow !== defaultDescription &&
-            descriptionToShow.length === 150
-          }
-        >
-          {descriptionToShow.length}/150
+        <TextLimit limit={description.length === 150}>
+          {description.length}/150
         </TextLimit>
       </PostInfo>
     </PublishPreviewBlock>

src/components/write/__tests__/PublishPreview.test.tsx

@@ -7,7 +7,6 @@ describe('PublishPreview', () => {
     const initialProps: PublishPreviewProps = {
       title: '타이틀',
       description: '',
-      defaultDescription: '',
       onChangeDescription: () => {},
       onResetThumbnail: () => {},
       onUpload: () => {},
@@ -33,19 +32,7 @@ describe('PublishPreview', () => {
     const utils = setup({ title: '타이틀 입니다.' });
     utils.getByText('타이틀 입니다.');
   });
-  it('shows default description', () => {
-    const utils = setup({
-      defaultDescription: 'default',
-    });
-    expect(utils.textarea.value).toBe('default');
-  });
-  it('shows description', () => {
-    const utils = setup({
-      description: 'hello',
-      defaultDescription: 'default',
-    });
-    expect(utils.textarea.value).toBe('hello');
-  });
+
   it('calls onChangeDescription', () => {
     const onChangeDescription = jest.fn();
     const utils = setup({

src/containers/post/PostViewer.tsx

@@ -205,6 +205,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
         tags: post.tags,
         title: post.title,
         urlSlug: post.url_slug,
+        thumbnail: post.thumbnail,
       }),
     );
     history.push(`/write?id=${post.id}`);

src/containers/write/ActiveEditor.tsx

@@ -87,6 +87,7 @@ const ActiveEditor: React.FC<ActiveEditorProps> = () => {
         isPrivate: post.is_private,
         isMarkdown: post.is_markdown,
         isTemp: post.is_temp,
+        thumbnail: post.thumbnail,
       }),
     );
     dispatch(setInitialBody(post.body));

src/containers/write/PublishActionButtonsContainer.tsx

@@ -64,7 +64,9 @@ const PublishActionButtonsContainer: React.FC<PublishActionButtonsContainerProps
     is_private: options.isPrivate,
     url_slug: options.urlSlug || escapeForUrl(options.title),
     thumbnail: options.thumbnail,
-    meta: {},
+    meta: {
+      short_description: options.description,
+    },
     series_id: safe(() => options.selectedSeries!.id),
   };
 

src/containers/write/PublishPreviewContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useRef } from 'react';
 import { connect } from 'react-redux';
 import { RootState } from '../../modules';
 import PublishPreview from '../../components/write/PublishPreview';
@@ -33,6 +33,7 @@ const PublishPreviewContainer: React.FC<PublishPreviewContainerProps> = ({
   thumbnail,
   setThumbnail,
 }) => {
+  const mounted = useRef(false);
   const onChangeDescription = useCallback(
     (description: string) => changeDescription(description),
     [changeDescription],
@@ -41,6 +42,17 @@ const PublishPreviewContainer: React.FC<PublishPreviewContainerProps> = ({
   const [upload, file] = useUpload();
   const [s3Upload, image] = useS3Upload();
 
+  // fills description with defaultDescription when it is empty
+  useEffect(() => {
+    if (mounted.current) return;
+
+    if (!description) {
+      changeDescription(defaultDescription);
+    }
+
+    mounted.current = true;
+  }, [changeDescription, defaultDescription, description]);
+
   const onUpload = () => {
     upload();
   };
@@ -64,7 +76,6 @@ const PublishPreviewContainer: React.FC<PublishPreviewContainerProps> = ({
   return (
     <PublishPreview
       title={title}
-      defaultDescription={defaultDescription}
       description={description}
       onChangeDescription={onChangeDescription}
       onUpload={onUpload}

src/modules/write.ts

@@ -71,6 +71,7 @@ export type PrepareEditPayload = {
   isPrivate: boolean;
   isMarkdown: boolean;
   isTemp?: boolean;
+  thumbnail: string | null;
 };
 
 export const prepareEdit = createStandardAction(PREPARE_EDIT)<
@@ -199,13 +200,14 @@ const write = createReducer(
         id,
         isPrivate,
         isTemp,
+        thumbnail,
       } = payload;
       const key = isMarkdown ? 'markdown' : 'html';
       return {
         ...state,
         title,
         tags,
-        description,
+        description: description.slice(0, 150),
         urlSlug,
         isPrivate,
         isTemp: isTemp || false,
@@ -215,6 +217,7 @@ const write = createReducer(
         postId: id,
         initialBody: body,
         initialTitle: title,
+        thumbnail,
       };
     },
     [SET_WRITE_POST_ID]: (state, action: SetWritePostId) => ({