Prepares Series Editor component

Author: velopert

velog-backend/src/lib/redisClient.js

@@ -15,7 +15,6 @@ class RedisClient {
   }
   connect() {
     const p = new Promise((resolve, reject) => {
-      const { REDIS_HOST, REDIS_PASS } = process.env;
       const client = redis.createClient({
         host: process.env.REDIS_HOST || '',
         password: process.env.REDIS_PASS || '',

velog-frontend/sketch/velog-temp.sketch

@@ -0,0 +1,50 @@
+// @flow
+import React, { Component } from 'react';
+import { type SeriesData } from 'store/modules/series';
+import TextareaAutosize from 'react-autosize-textarea';
+import './SeriesEditor.scss';
+
+type Props = {
+  series: SeriesData,
+};
+
+type State = {
+  name: string,
+};
+class SeriesEditor extends Component<Props, State> {
+  state = {
+    name: '',
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state.name = props.series.name;
+  }
+
+  onKeyPress = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+    }
+  };
+
+  onChangeTitle = (e: SyntheticInputEvent<HTMLInputElement>) => {
+    this.setState({
+      name: e.target.value,
+    });
+  };
+
+  render() {
+    return (
+      <div className="SeriesEditor">
+        <TextareaAutosize
+          className="title"
+          onChange={this.onChangeTitle}
+          value={this.state.name}
+          onKeyPress={this.onKeyPress}
+        />
+      </div>
+    );
+  }
+}
+
+export default SeriesEditor;

velog-frontend/src/components/series/SeriesEditor/SeriesEditor.js

@@ -0,0 +1,18 @@
+@import 'utils';
+
+.SeriesEditor {
+  .title {
+    resize: none !important;
+    width: 100%;
+    margin-top: 1.5rem;
+    color: $oc-gray-9;
+    font-size: 2.5rem;
+    font-weight: 800;
+    border-bottom: 1px solid $oc-gray-2;
+    margin-bottom: 0;
+    padding: 0.5rem;
+    border: 1px solid $oc-gray-3;
+    outline: none;
+    font-family: inherit;
+  }
+}

velog-frontend/src/components/series/SeriesEditor/SeriesEditor.scss

@@ -0,0 +1 @@
+export { default } from './SeriesEditor';

velog-frontend/src/components/series/SeriesEditor/index.js

@@ -1,8 +1,6 @@
 @import 'utils';
 
 .SeriesPostItem {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
   h2 {
     margin: 0;
     font-size: 1.75rem;
@@ -17,7 +15,7 @@
   .date {
     font-size: 0.875rem;
     color: $oc-gray-6;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
   }
   p {
     font-size: 1.125rem;
@@ -27,6 +25,6 @@
     margin-top: 0;
   }
   & + & {
-    border-top: 1px solid $oc-gray-2;
+    margin-top: 4rem;
   }
 }

velog-frontend/src/components/series/SeriesPostItem/SeriesPostItem.scss

@@ -0,0 +1,30 @@
+// @flow
+import React, { type Node } from 'react';
+import BookIcon from 'react-icons/lib/md/book';
+import './SeriesTemplate.scss';
+import HorizontalUserInfo from '../../common/HorizontalUserInfo/HorizontalUserInfo';
+
+type Props = {
+  user: {
+    username: string,
+    id: string,
+    thumbnail: ?string,
+    short_bio: ?string,
+  },
+  children: Node,
+};
+
+const SeriesTemplate = ({ user, children }: Props) => {
+  return (
+    <div className="SeriesTemplate">
+      <HorizontalUserInfo user={user} />
+      <div className="series-label">
+        <BookIcon />
+        <span>SERIES</span>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default SeriesTemplate;

velog-frontend/src/components/series/SeriesTemplate/SeriesTemplate.js

@@ -0,0 +1,31 @@
+@import 'utils';
+.SeriesTemplate {
+  margin-top: 4rem;
+  color: $oc-gray-9;
+  @include media('<medium') {
+    margin-top: 0;
+    width: 100%;
+  }
+  .series-label {
+    background: $oc-violet-4;
+    color: white;
+    width: 7.5rem;
+    height: 3rem;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    span {
+      margin-left: 0.25rem;
+    }
+    @include media('<medium') {
+      width: 5rem;
+      height: 2rem;
+      font-size: 1rem;
+      span {
+        margin-left: 0.125rem;
+      }
+    }
+  }
+}

velog-frontend/src/components/series/SeriesTemplate/SeriesTemplate.scss

@@ -0,0 +1 @@
+export { default } from './SeriesTemplate';

velog-frontend/src/components/series/SeriesTemplate/index.js

@@ -1,23 +1,23 @@
 // @flow
 import React from 'react';
-import BookIcon from 'react-icons/lib/md/book';
 import { type SeriesData } from 'store/modules/series';
 import './SeriesViewer.scss';
-import HorizontalUserInfo from '../../common/HorizontalUserInfo/HorizontalUserInfo';
 import SeriesPostItem from '../SeriesPostItem/SeriesPostItem';
 
 type Props = {
   series: SeriesData,
+  onEnableEditing: () => void,
 };
-const SeriesViewer = ({ series }: Props) => {
+const SeriesViewer = ({ series, onEnableEditing }: Props) => {
   return (
     <div className="SeriesViewer">
-      <HorizontalUserInfo user={series.user} />
-      <div className="series-label">
-        <BookIcon />
-        <span>SERIES</span>
-      </div>
       <h1>{series.name}</h1>
+      <div className="manage">
+        <button className="text-btn" onClick={onEnableEditing}>
+          수정
+        </button>
+        <button className="text-btn">삭제</button>
+      </div>
       <div className="list">
         {series.posts.map(p => (
           <SeriesPostItem key={p.id} post={p} username={series.user.username} />

velog-frontend/src/components/series/SeriesViewer/SeriesViewer.js

@@ -1,32 +1,35 @@
 @import 'utils';
 .SeriesViewer {
-  margin-top: 4rem;
-  color: $oc-gray-9;
-  @include media('<medium') {
-    margin-top: 0;
-  }
-
-  .series-label {
-    background: $oc-violet-4;
-    color: white;
-    width: 7.5rem;
-    height: 3rem;
-    font-size: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 800;
-    span {
-      margin-left: 0.25rem;
-    }
-  }
-
   h1 {
     margin-top: 1.5rem;
     color: $oc-gray-9;
     font-size: 2.5rem;
     line-height: 1.5;
-    margin-bottom: 1rem;
     font-weight: 800;
+    border-bottom: 1px solid $oc-gray-2;
+    margin-bottom: 0;
+    padding-bottom: 0.5rem;
+  }
+  .manage {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+    color: $oc-gray-6;
+    font-size: 0.875rem;
+    margin-bottom: -1.5625rem;
+    .text-btn {
+      cursor: pointer;
+      padding: 0.5rem;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+      border-radius: 4px;
+      &:hover {
+        background: $oc-gray-0;
+        color: $oc-violet-6;
+      }
+    }
+  }
+  .list {
+    margin-top: 5rem;
   }
 }

velog-frontend/src/components/series/SeriesViewer/SeriesViewer.scss

@@ -6,12 +6,15 @@ import { connect } from 'react-redux';
 import { type State } from 'store';
 import { type SeriesData } from 'store/modules/series';
 import SeriesViewer from '../../components/series/SeriesViewer/SeriesViewer';
+import SeriesEditor from '../../components/series/SeriesEditor/SeriesEditor';
+import SeriesTemplate from '../../components/series/SeriesTemplate/SeriesTemplate';
 
 type Props = {
   series: ?SeriesData,
+  editing: boolean,
 } & ContextRouter;
 
-class SeriesViewerContainer extends Component<Props> {
+class SeriesContainer extends Component<Props> {
   initialize = () => {
     const { username, urlSlug } = this.props.match.params;
     if (!username || !urlSlug) return;
@@ -20,19 +23,33 @@ class SeriesViewerContainer extends Component<Props> {
       urlSlug,
     });
   };
+
+  enableEditing = () => {
+    SeriesActions.enableEditing();
+  };
   componentDidMount() {
     this.initialize();
   }
 
   render() {
-    const { series } = this.props;
+    const { series, editing } = this.props;
     if (!series) return null;
-    return <SeriesViewer series={series} />;
+
+    return (
+      <SeriesTemplate user={series.user}>
+        {editing ? (
+          <SeriesEditor series={series} />
+        ) : (
+          <SeriesViewer series={series} onEnableEditing={this.enableEditing} />
+        )}
+      </SeriesTemplate>
+    );
   }
 }
 
 export default withRouter(
   connect((state: State) => ({
     series: state.series.series,
-  }))(SeriesViewerContainer),
+    editing: state.series.editing,
+  }))(SeriesContainer),
 );

velog-frontend/src/containers/series/SeriesViewerContainer.js renamed to velog-frontend/src/containers/series/SeriesContainer.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { type Match } from 'react-router-dom';
 import ViewerHead from 'components/base/ViewerHead';
 import PlainTemplate from '../components/common/PlainTemplate';
-import SeriesViewerContainer from '../containers/series/SeriesViewerContainer';
+import SeriesContainer from '../containers/series/SeriesContainer';
 
 type Props = {
   match: Match,
@@ -12,7 +12,7 @@ type Props = {
 const Series = ({ match }: Props) => {
   return (
     <PlainTemplate header={<ViewerHead />}>
-      <SeriesViewerContainer />
+      <SeriesContainer />
     </PlainTemplate>
   );
 };

velog-frontend/src/pages/Series.js

@@ -6,10 +6,12 @@ import * as SeriesAPI from 'lib/api/series';
 
 const GET_SERIES = 'series/GET_SERIES';
 const INITIALIZE = 'series/INITIALIZE';
+const ENABLE_EDITING = 'series/ENABLE_EDITING';
 
 export const actionCreators = {
   getSeries: createAction(GET_SERIES, SeriesAPI.getSeries),
   initialize: createAction(INITIALIZE),
+  enableEditing: createAction(ENABLE_EDITING),
 };
 
 export type SeriesPostData = {
@@ -45,15 +47,21 @@ type GetSeriesResponseAction = GenericResponseAction<SeriesData>;
 
 export type SeriesState = {
   series: ?SeriesData,
+  editing: boolean,
 };
 
 const initialState: SeriesState = {
   series: null,
+  editing: false,
 };
 
 const reducer = handleActions(
   {
     [INITIALIZE]: () => initialState,
+    [ENABLE_EDITING]: state => ({
+      ...state,
+      editing: true,
+    }),
   },
   initialState,
 );