Shows title in the preview pane

Author: velopert

package.json

@@ -27,7 +27,7 @@
     "@types/react-dom": "16.8.0",
     "@types/react-icons": "^2.2.6",
     "@types/react-outside-click-handler": "^1.2.0",
-    "@types/react-redux": "^7.0.1",
+    "@types/react-redux": "^7.0.6",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-textarea-autosize": "^4.3.3",
     "@types/redux-devtools-extension": "^2.13.2",
@@ -93,7 +93,7 @@
     "react-dom": "^16.8.1",
     "react-icons": "^3.3.0",
     "react-outside-click-handler": "^1.2.3",
-    "react-redux": "^6.0.1",
+    "react-redux": "^7.0.1",
     "react-router-dom": "^4.3.1",
     "react-testing-library": "^5.9.0",
     "react-textarea-autosize": "^7.1.0",

src/components/write/MarkdownEditor.tsx

@@ -14,6 +14,8 @@ import AddLink from './AddLink';
 
 export interface MarkdownEditorProps {
   onChangeMarkdown: (markdown: string) => void;
+  onChangeTitle: (title: string) => void;
+  title: string;
 }
 type MarkdownEditorState = {
   shadow: boolean;
@@ -514,13 +516,22 @@ ${selected}
     codemirror.focus();
   };
 
+  handleTitleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    this.props.onChangeTitle(e.target.value);
+  };
+
   public render() {
     const { shadow, addLink } = this.state;
+    const { title } = this.props;
     return (
       <MarkdownEditorBlock ref={this.block} onScroll={this.handleScroll}>
         <div className="wrapper">
           <PaddingWrapper>
-            <TitleTextarea placeholder="제목을 입력하세요" />
+            <TitleTextarea
+              placeholder="제목을 입력하세요"
+              onChange={this.handleTitleChange}
+              value={title}
+            />
           </PaddingWrapper>
           <Toolbar
             visible

src/components/write/MarkdownPreview.tsx

@@ -4,6 +4,8 @@ import MarkdownRender from '../common/MarkdownRender';
 import palette from '../../lib/styles/palette';
 
 const MarkdownPreviewBlock = styled.div`
+  word-break: break-word;
+  font-size: 1.3125rem;
   &::-webkit-scrollbar {
     border-radius: 3px;
     width: 6px;
@@ -21,15 +23,27 @@ const MarkdownPreviewBlock = styled.div`
   padding: 3rem;
   flex: 1;
   overflow-y: auto;
+  color: ${palette.gray9};
 `;
 
-interface MarkdownPreviewProps {
+const Title = styled.h1`
+  font-size: 2.5em;
+  margin-bottom: 4rem;
+  font-weight: 800;
+`;
+
+export interface MarkdownPreviewProps {
   markdown: string;
+  title: string;
 }
 
-const MarkdownPreview: React.SFC<MarkdownPreviewProps> = ({ markdown }) => {
+const MarkdownPreview: React.SFC<MarkdownPreviewProps> = ({
+  markdown,
+  title,
+}) => {
   return (
     <MarkdownPreviewBlock>
+      <Title>{title}</Title>
       <MarkdownRender markdown={markdown} />
     </MarkdownPreviewBlock>
   );

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

@@ -1,12 +1,18 @@
 import * as React from 'react';
-import { render } from 'react-testing-library';
+import { render, fireEvent } from 'react-testing-library';
 import MarkdownEditor, { MarkdownEditorProps } from '../MarkdownEditor';
 
 describe('MarkdownEditor', () => {
   const setup = (props: Partial<MarkdownEditorProps> = {}) => {
-    const initialProps: MarkdownEditorProps = {};
+    const initialProps: MarkdownEditorProps = {
+      onChangeMarkdown: () => {},
+      onChangeTitle: () => {},
+      title: '',
+    };
     const utils = render(<MarkdownEditor {...initialProps} {...props} />);
-    const titleTextarea = utils.getByPlaceholderText('제목을 입력하세요');
+    const titleTextarea = utils.getByPlaceholderText(
+      '제목을 입력하세요',
+    ) as HTMLTextAreaElement;
     return {
       titleTextarea,
       ...utils,
@@ -19,4 +25,27 @@ describe('MarkdownEditor', () => {
     const { container } = setup();
     expect(container).toMatchSnapshot();
   });
+  it('has codemirror editor', () => {
+    const utils = setup();
+    utils.getByText('당신의 이야기를 적어보세요...');
+  });
+  it('changes title properly', () => {
+    const onChangeTitle = jest.fn();
+    const utils = setup({
+      onChangeTitle,
+    });
+    fireEvent.change(utils.titleTextarea, {
+      target: {
+        value: 'changed',
+      },
+    });
+    expect(onChangeTitle).toBeCalledWith('changed');
+    // expect(utils.titleTextarea.value).toBe('changed!');
+  });
+  it('uses title prop', () => {
+    const utils = setup({
+      title: 'hello world',
+    });
+    expect(utils.titleTextarea.value).toBe('hello world');
+  });
 });

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import MarkdownPreview, { MarkdownPreviewProps } from '../MarkdownPreview';
+
+describe('MarkdownPreview', () => {
+  const setup = (props: Partial<MarkdownPreviewProps> = {}) => {
+    const initialProps: MarkdownPreviewProps = {
+      markdown: '',
+      title: '',
+    };
+    const utils = render(<MarkdownPreview {...initialProps} {...props} />);
+    return {
+      ...utils,
+    };
+  };
+  it('renders properly', () => {
+    setup();
+  });
+  it('matches snapshot', () => {
+    const { container } = setup();
+    expect(container).toMatchSnapshot();
+  });
+  it('renders markdown', () => {
+    const utils = setup({
+      markdown: '## hello world',
+    });
+    const element = utils.getByText('hello world');
+    expect(element.tagName).toBe('H2');
+  });
+  it('renders title', () => {
+    const utils = setup({
+      title: 'this is the title',
+    });
+    utils.getByText('this is the title');
+  });
+});

src/components/write/__tests__/__snapshots__/MarkdownEditor.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`MarkdownEditor matches snapshot 1`] = `
 <div>
   <div
-    class="sc-htoDjs fvjPke"
+    class="sc-htoDjs jVrSIz"
   >
     <div
       class="wrapper"

src/components/write/__tests__/__snapshots__/MarkdownPreview.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MarkdownPreview matches snapshot 1`] = `
+<div>
+  <div
+    class="sc-bwzfXH iQyFQe"
+  >
+    <h1
+      class="sc-htpNat gQoHLP"
+    />
+    <div
+      class="atom-one-light sc-bdVaJa eVCcCu"
+    >
+      
+
+    </div>
+  </div>
+</div>
+`;

src/components/write/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Toolbar matches snapshot 1`] = `
 <div>
   <div
-    class="sc-bdVaJa cnmSue"
+    class="sc-bdVaJa dpLdTa"
     id="toolbar"
   >
     <div

src/containers/write/MarkdownEditorContainer.tsx

@@ -2,24 +2,38 @@ import * as React from 'react';
 import MarkdownEditor from '../../components/write/MarkdownEditor';
 import { connect } from 'react-redux';
 import { RootState } from '../../modules';
-import { changeMarkdown } from '../../modules/write';
+import { changeMarkdown, changeTitle } from '../../modules/write';
 
 interface OwnProps {}
-interface StateProps {}
+interface StateProps {
+  title: string;
+}
 interface DispatchProps {
   changeMarkdown: typeof changeMarkdown;
+  changeTitle: typeof changeTitle;
 }
 type MarkdownEditorContainerProps = OwnProps & StateProps & DispatchProps;
 
 const MarkdownEditorContainer: React.SFC<MarkdownEditorContainerProps> = ({
   changeMarkdown,
+  changeTitle,
+  title,
 }) => {
-  return <MarkdownEditor onChangeMarkdown={changeMarkdown} />;
+  return (
+    <MarkdownEditor
+      title={title}
+      onChangeMarkdown={changeMarkdown}
+      onChangeTitle={changeTitle}
+    />
+  );
 };
 
 export default connect<StateProps, DispatchProps, OwnProps, RootState>(
-  state => ({}),
+  state => ({
+    title: state.write.title,
+  }),
   {
     changeMarkdown,
+    changeTitle,
   },
 )(MarkdownEditorContainer);

src/containers/write/MarkdownPreviewContainer.tsx

@@ -6,19 +6,22 @@ import { RootState } from '../../modules';
 interface OwnProps {}
 interface StateProps {
   markdown: string;
+  title: string;
 }
 interface DispatchProps {}
 type MarkdownPreviewContainerProps = OwnProps & StateProps & DispatchProps;
 
 const MarkdownPreviewContainer: React.SFC<MarkdownPreviewContainerProps> = ({
   markdown,
+  title,
 }) => {
-  return <MarkdownPreview markdown={markdown} />;
+  return <MarkdownPreview markdown={markdown} title={title} />;
 };
 
 export default connect<StateProps, DispatchProps, OwnProps, RootState>(
   ({ write }) => ({
     markdown: write.markdown,
+    title: write.title,
   }),
   dispatch => ({}),
 )(MarkdownPreviewContainer);

src/modules/__tests__/write.test.ts

@@ -8,6 +8,7 @@ describe('write redux module', () => {
     const state = getInitialState();
     expect(state).toEqual({
       markdown: '',
+      title: '',
     });
   });
   describe('action handlers', () => {
@@ -16,5 +17,10 @@ describe('write redux module', () => {
       state = reducer(state, write.changeMarkdown('Hello'));
       expect(state.markdown).toBe('Hello');
     });
+    it('CHANGE_TITLE', () => {
+      let state = getInitialState();
+      state = reducer(state, write.changeTitle('World'));
+      expect(state.title).toBe('World');
+    });
   });
 });

src/modules/write.ts

@@ -2,17 +2,22 @@ import { createStandardAction } from 'typesafe-actions';
 import { createReducer } from '../lib/utils';
 
 const CHANGE_MARKDOWN = 'write/CHANGE_MARKDOWN';
+const CHANGE_TITLE = 'write/CHANGE_TITLE';
 
 export const changeMarkdown = createStandardAction(CHANGE_MARKDOWN)<string>();
+export const changeTitle = createStandardAction(CHANGE_TITLE)<string>();
 
 type ChangeMarkdown = ReturnType<typeof changeMarkdown>;
+type ChangeTitle = ReturnType<typeof changeTitle>;
 
 export type WriteState = {
   markdown: string;
+  title: string;
 };
 
 const initialState: WriteState = {
   markdown: '',
+  title: '',
 };
 
 const write = createReducer(
@@ -21,6 +26,10 @@ const write = createReducer(
       ...state,
       markdown: action.payload,
     }),
+    [CHANGE_TITLE]: (state, action: ChangeTitle) => ({
+      ...state,
+      title: action.payload,
+    }),
   },
   initialState,
 );