Implements series removal

Author: velopert

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

@@ -8,8 +8,9 @@ type Props = {
   series: SeriesData,
   ownSeries: boolean,
   onEnableEditing: () => void,
+  onAskRemove: () => void,
 };
-const SeriesViewer = ({ series, onEnableEditing, ownSeries }: Props) => {
+const SeriesViewer = ({ series, onEnableEditing, onAskRemove, ownSeries }: Props) => {
   return (
     <div className="SeriesViewer">
       <h1>{series.name}</h1>
@@ -18,7 +19,9 @@ const SeriesViewer = ({ series, onEnableEditing, ownSeries }: Props) => {
           <button className="text-btn" onClick={onEnableEditing}>
             수정
           </button>
-          <button className="text-btn">삭제</button>
+          <button className="text-btn" onClick={onAskRemove}>
+            삭제
+          </button>
         </div>
       )}
       <div className="list">

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

@@ -4,6 +4,7 @@ import { withRouter, type ContextRouter } from 'react-router-dom';
 import { SeriesActions } from 'store/actionCreators';
 import { connect } from 'react-redux';
 import { type State } from 'store';
+import QuestionModal from 'components/common/QuestionModal/QuestionModal';
 import { type SeriesData } from 'store/modules/series';
 import SeriesViewer from '../../components/series/SeriesViewer/SeriesViewer';
 import SeriesEditor from '../../components/series/SeriesEditor/SeriesEditor';
@@ -16,7 +17,14 @@ type Props = {
   currentUsername: ?string,
 } & ContextRouter;
 
-class SeriesContainer extends Component<Props> {
+type LocalState = {
+  remove: boolean,
+};
+
+class SeriesContainer extends Component<Props, LocalState> {
+  state = {
+    remove: false,
+  };
   initialize = async () => {
     if (this.props.shouldCancel) return;
     SeriesActions.initialize();
@@ -61,6 +69,27 @@ class SeriesContainer extends Component<Props> {
     }
   };
 
+  askRemoveSeries = () => {
+    this.setState({
+      remove: true,
+    });
+  };
+
+  cancelRemove = () => {
+    this.setState({
+      remove: false,
+    });
+  };
+
+  confirmRemove = () => {
+    const { username, urlSlug } = this.props.match.params;
+    if (!username || !urlSlug) return;
+    SeriesActions.removeSeries({
+      username,
+      urlSlug,
+    });
+    this.props.history.push(`/@${this.props.currentUsername || ''}`);
+  };
   componentDidMount() {
     this.initialize();
   }
@@ -80,10 +109,19 @@ class SeriesContainer extends Component<Props> {
         ) : (
           <SeriesViewer
             series={series}
+            onAskRemove={this.askRemoveSeries}
             onEnableEditing={this.enableEditing}
             ownSeries={currentUsername === series.user.username}
           />
         )}
+        <QuestionModal
+          title="시리즈 삭제"
+          description="시리즈를 삭제하시겠습니까?"
+          confirmText="삭제"
+          open={this.state.remove}
+          onCancel={this.cancelRemove}
+          onConfirm={this.confirmRemove}
+        />
       </SeriesTemplate>
     );
   }

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

@@ -28,3 +28,11 @@ export type UpdateSeriesPayload = {
 
 export const updateSeries = (payload: UpdateSeriesPayload) =>
   axios.patch(`/series/${payload.username}/${payload.urlSlug}`, payload.data);
+
+export type RemoveSeriesPayload = {
+  urlSlug: string,
+  username: string,
+};
+export const removeSeries = ({ username, urlSlug }: RemoveSeriesPayload) => {
+  return axios.delete(`/series/${username}/${urlSlug}`);
+};

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

@@ -9,13 +9,15 @@ const INITIALIZE = 'series/INITIALIZE';
 const ENABLE_EDITING = 'series/ENABLE_EDITING';
 const DISABLE_EDITING = 'series/DISABLE_EDITING';
 const UPDATE_SERIES = 'series/UPDATE_SERIES';
+const REMOVE_SERIES = 'seres/REMOVE_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),
+  removeSeries: createAction(REMOVE_SERIES, SeriesAPI.removeSeries),
 };
 
 export type SeriesPostData = {