Implements series editing feature

Author: velopert

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

@@ -10,6 +10,8 @@ import './SeriesEditor.scss';
 
 type Props = {
   series: SeriesData,
+  onCancel: () => void,
+  onUpdate: (data: { name: string, posts: any[] }) => Promise<any>,
 };
 
 type State = {
@@ -43,6 +45,17 @@ class SeriesEditor extends Component<Props, State> {
     });
   };
 
+  onSave = () => {
+    const converted = this.state.tempPosts.map((tp, i) => ({
+      id: tp.id,
+      index: i + 1,
+    }));
+    this.props.onUpdate({
+      name: this.state.name,
+      posts: converted,
+    });
+  };
+
   reorder = (oldIndex: number, newIndex: number) => {
     const nextPosts = [...this.state.tempPosts];
     const temp = nextPosts[oldIndex];
@@ -71,7 +84,7 @@ class SeriesEditor extends Component<Props, State> {
   }
 
   render() {
-    const { series } = this.props;
+    const { onCancel } = this.props;
     return (
       <div className="SeriesEditor">
         <TextareaAutosize
@@ -81,8 +94,10 @@ class SeriesEditor extends Component<Props, State> {
           onKeyPress={this.onKeyPress}
         />
         <div className="buttons-wrapper">
-          <Button cancel>취소</Button>
-          <Button>적용</Button>
+          <Button cancel onClick={onCancel}>
+            취소
+          </Button>
+          <Button onClick={this.onSave}>적용</Button>
         </div>
         <div className="list" ref={this.list}>
           {this.state.tempPosts.map(post => (

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

@@ -1,6 +1,7 @@
 @import 'utils';
 .SeriesTemplate {
   margin-top: 4rem;
+  margin-bottom: 4rem;
   color: $oc-gray-9;
   @include media('<medium') {
     margin-top: 0;

velog-frontend/src/containers/series/SeriesContainer.js

@@ -15,18 +15,48 @@ type Props = {
 } & ContextRouter;
 
 class SeriesContainer extends Component<Props> {
-  initialize = () => {
+  initialize = async () => {
     const { username, urlSlug } = this.props.match.params;
     if (!username || !urlSlug) return;
-    SeriesActions.getSeries({
-      username,
-      urlSlug,
-    });
+    try {
+      await SeriesActions.getSeries({
+        username,
+        urlSlug,
+      });
+    } catch (e) {
+      console.log(e);
+    }
   };
 
   enableEditing = () => {
     SeriesActions.enableEditing();
   };
+
+  cancelEditing = () => {
+    SeriesActions.disableEditing();
+  };
+
+  updateSeries = async (data: { name: string, posts: any[] }) => {
+    const { username, urlSlug } = this.props.match.params;
+    if (!username || !urlSlug) return;
+    try {
+      await SeriesActions.updateSeries({
+        username,
+        urlSlug,
+        data: {
+          ...data,
+          description: '',
+          thumbnail: null,
+          url_slug: urlSlug,
+        },
+      });
+      await this.initialize();
+      SeriesActions.disableEditing();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   componentDidMount() {
     this.initialize();
   }
@@ -38,7 +68,11 @@ class SeriesContainer extends Component<Props> {
     return (
       <SeriesTemplate user={series.user}>
         {editing ? (
-          <SeriesEditor series={series} />
+          <SeriesEditor
+            series={series}
+            onCancel={this.cancelEditing}
+            onUpdate={this.updateSeries}
+          />
         ) : (
           <SeriesViewer series={series} onEnableEditing={this.enableEditing} />
         )}

velog-frontend/src/lib/api/series.js

@@ -19,3 +19,12 @@ export type GetSeriesParams = {
 };
 export const getSeries = ({ username, urlSlug }: GetSeriesParams) =>
   axios.get(`/series/${username}/${urlSlug}`);
+
+export type UpdateSeriesPayload = {
+  urlSlug: string,
+  username: string,
+  data: CreateSeriesPayload,
+};
+
+export const updateSeries = (payload: UpdateSeriesPayload) =>
+  axios.patch(`/series/${payload.username}/${payload.urlSlug}`, payload.data);

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

@@ -7,11 +7,15 @@ import * as SeriesAPI from 'lib/api/series';
 const GET_SERIES = 'series/GET_SERIES';
 const INITIALIZE = 'series/INITIALIZE';
 const ENABLE_EDITING = 'series/ENABLE_EDITING';
+const DISABLE_EDITING = 'series/DISABLE_EDITING';
+const UPDATE_SERIES = 'series/UPDATE_SERIES';
 
 export const actionCreators = {
   getSeries: createAction(GET_SERIES, SeriesAPI.getSeries),
   initialize: createAction(INITIALIZE),
   enableEditing: createAction(ENABLE_EDITING),
+  disableEditing: createAction(DISABLE_EDITING),
+  updateSeries: createAction(UPDATE_SERIES, SeriesAPI.updateSeries),
 };
 
 export type SeriesPostData = {
@@ -62,6 +66,10 @@ const reducer = handleActions(
       ...state,
       editing: true,
     }),
+    [DISABLE_EDITING]: state => ({
+      ...state,
+      editing: false,
+    }),
   },
   initialState,
 );