[FE/#74] Feat : 타이틀 수정기능 서버 api 요청작업

codesquad-member-2020 · Jun 24, 2020 · d5c4f0b · d5c4f0b
1 parent c1076a2
commit d5c4f0b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/FE/src/components/DetailedIssue/Comment/Write/Textarea.jsx b/FE/src/components/DetailedIssue/Comment/Write/Textarea.jsx
@@ -1,25 +1,38 @@
 import React from "react";
 
+import editHandler from "@Components/DetailedIssue/editHandler";
+
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 import Button from "@material-ui/core/Button";
 import Box from "@material-ui/core/Box";
 import ButtonGroup from "@material-ui/core/ButtonGroup";
 import { makeStyles } from "@material-ui/core/styles";
 
-const COMMENT_BTN_TEXT = "comment ";
-const CANCEL_BTN_TEXT = "Cancel";
+const COMMENT_BTN_TEXT = "comment";
+const CANCEL_BTN_TEXT = "close issue";
+const REOPEN_BTN_TEXT = "reopen issue";
 
 const TextArea = () => {
   const classes = useStyles();
 
+  const { isEdit, onToggle, onClickSave, onClickClose } = editHandler();
+
   return (
     <Box className={classes.root}>
       <TextareaAutosize aria-label="Comment write" rowsMin={3} placeholder="Leave a comment" />
       <ButtonGroup aria-label="outlined primary button group">
         <Button variant="contained" color="primary">
           {COMMENT_BTN_TEXT}
         </Button>
-        <Button variant="contained">{CANCEL_BTN_TEXT}</Button>
+        {isEdit ? (
+          <Button variant="contained" onClick={onToggle}>
+            {CANCEL_BTN_TEXT}
+          </Button>
+        ) : (
+          <Button variant="contained" onClick={onToggle}>
+            {REOPEN_BTN_TEXT}
+          </Button>
+        )}
       </ButtonGroup>
     </Box>
   );

diff --git a/FE/src/components/DetailedIssue/Header/Title/InputBox.jsx b/FE/src/components/DetailedIssue/Header/Title/InputBox.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 
 import { DetailedIssueContext } from "@Contexts/detailedIssueContext";
@@ -26,6 +26,7 @@ const InputBox = ({ value, onChange, onClickSave, onClickClose }) => {
   } = useContext(DetailedIssueContext);
 
   const { getData } = pipe(editTitleFetchOptions, useFetch)({ detailedIssueDispatch, id, value });
+
   const classes = useStyles();
 
   const onSubmitForm = (e) => {
@@ -38,7 +39,7 @@ const InputBox = ({ value, onChange, onClickSave, onClickClose }) => {
       <Box display="flex" alignItems="center" justifyContent="space-between">
         <InputField
           onChange={onChange}
-          value={value}
+          value={value || ""}
           inputProps={{ "aria-label": "Issue title" }}
         />
         <ButtonGroup>

diff --git a/FE/src/reducers/detailedIssueReducer.js b/FE/src/reducers/detailedIssueReducer.js
@@ -44,22 +44,23 @@ export const initDataFetchOptions = ({ detailedIssueDispatch, id }) => ({
   },
 });
 
-export const editTitleFetchOptions = ({ detailedIssueDispatch, id, title }) => ({
+export const editTitleFetchOptions = ({ detailedIssueDispatch, id, value }) => ({
   url: `${detailedIssueUrl}${id}/title`,
   dispatch: detailedIssueDispatch,
   actionType: {
     fetchSuccess,
     fetchError,
   },
   skip: true,
+  deps: [value],
   option: {
     headers: {
       "Content-Type": "application/json",
     },
     method: "PATCH",
     body: JSON.stringify({
       userId: id,
-      issueTitle: title,
+      issueTitle: value,
     }),
   },
 });