[#35] fix : Render issue detail when new comment is posted

FE/frontend/src/components/main/issue/ListFilters.tsx

@@ -13,36 +13,36 @@ const ListFilters = () => {
     ?.flatMap(({ assignees }: any) => {
       return assignees;
     })
-    .filter(
+    ?.filter(
       (v: any, i: number, a: any) =>
         a.findIndex((t: any) => t.username === v.username) === i
     )
     .map((val: any) => {
-      return { optionName: val.username, image: val.profile_image };
+      return { id: val.id, optionName: val.username, image: val.profile_image };
     });
 
   const labels = data
     ?.flatMap(({ labels }: any) => {
       return labels;
     })
-    .filter(
+    ?.filter(
       (v: any, i: number, a: any) =>
         a.findIndex((t: any) => t.title === v.title) === i
     )
     .map((val: any) => {
-      return { optionName: val.title, color: val.color };
+      return { id: val.id, optionName: val.title, color: val.color };
     });
 
   const milestone = data
     ?.map(({ milestone }: any) => {
       return milestone;
     })
-    .filter(
+    ?.filter(
       (v: any, i: number, a: any) =>
-        a.findIndex((t: any) => t.title === v.title) === i
+        a?.findIndex((t: any) => t?.title === v?.title) === i
     )
-    .map((val: any) => {
-      return { optionName: val.title };
+    ?.map((val: any) => {
+      return { id: val?.id, optionName: val?.title };
     });
 
   const author = data
@@ -54,7 +54,7 @@ const ListFilters = () => {
         a.findIndex((t: any) => t.username === v.username) === i
     )
     .map((val: any) => {
-      return { optionName: val.username, image: val.profile_image };
+      return { id: val.id, optionName: val.username, image: val.profile_image };
     });
 
   return (
@@ -63,34 +63,6 @@ const ListFilters = () => {
       {labels && <LabelFilter filteredLabels={labels} />}
       {milestone && <MilestoneFilter filteredMilestone={milestone} />}
       {author && <AuthorFilter filteredAuthor={author} />}
-      {/* <Modal
-        label="담당자"
-        options={assignees}
-        exceptedDiv="filterTitle"
-        type="text"
-        innerTitle="담당자 필터"
-      />
-      <Modal
-        label="레이블"
-        options={labels}
-        exceptedDiv="filterTitle"
-        type="text"
-        innerTitle="레이블 필터"
-      />
-      <Modal
-        label="마일스톤"
-        options={milestones}
-        exceptedDiv="filterTitle"
-        type="text"
-        innerTitle="마일스톤 필터"
-      />
-      <Modal
-        label="작성자"
-        options={author}
-        exceptedDiv="filterTitle"
-        type="text"
-        innerTitle="작성자 필터"
-      /> */}
     </FilterContainer>
   );
 };

FE/frontend/src/components/main/issue/NewComment.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Link, useHistory } from 'react-router-dom';
 import { useMutation, useQueryClient } from 'react-query';
@@ -11,7 +11,7 @@ import { ReactComponent as XSquare } from '../../../icons/xSquare.svg';
 
 interface Props {
   issueId: number;
-  refetch(): any;
+  refetch(): void;
 }
 
 const NewComment = (props: Props) => {
@@ -27,11 +27,21 @@ const NewComment = (props: Props) => {
     file: '',
   });
 
+  // useEffect(() => {
+  // setInput({ ...input, content: '' });
+  // props.refetch();
+  // }, [input])
+
   const queryClient = useQueryClient();
   let debounceTimeoutId: ReturnType<typeof setTimeout>;
   let history = useHistory();
 
-  const { mutateAsync, isSuccess } = useMutation(useMutate('comment', 'add'));
+  const { mutateAsync } = useMutation(useMutate('comment', 'add'), {
+    onSuccess: () => {
+      setInput({ ...input, content: '' });
+      props.refetch();
+    },
+  });
 
   const countInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const valueCount = e.target.value.length;
@@ -65,11 +75,6 @@ const NewComment = (props: Props) => {
 
   const registerNewIssue = () => {
     mutateAsync({ data: input, id: props.issueId });
-    if (isSuccess) {
-      setInput({ ...input, content: '' });
-
-      props.refetch();
-    }
   };
 
   return (

FE/frontend/src/recoil/atoms.ts

@@ -3,16 +3,6 @@ import { atom, RecoilState } from 'recoil';
 interface Props {
   [key: string]: boolean | null | string;
 }
-const isSelectedAtom = atom<Props>({
-  key: 'isSelected',
-  default: {
-    '열린 이슈': false,
-    '내가 작성한 이슈': false,
-    '나에게 할당된 이슈': false,
-    '내가 댓글을 남긴 이슈': false,
-    '닫힌 이슈': false,
-  },
-});
 
 const filterAtom = atom<Props>({
   key: 'filter',
@@ -26,4 +16,4 @@ const filterAtom = atom<Props>({
   },
 });
 
-export { isSelectedAtom, filterAtom };
+export { filterAtom };

FE/frontend/src/styles/molcules/Modal.tsx

@@ -1,7 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import { useRecoilState } from 'recoil';
 import DropDown from './DropDown';
 import Typo from '../atoms/Typos';
+import { filterAtom } from '../../recoil/atoms';
 
 interface Props {
   children: JSX.Element;
@@ -12,10 +14,12 @@ interface Props {
 }
 
 const Modal = (props: Props) => {
+  const [filter, setFilter] = useRecoilState<any>(filterAtom);
   const [isShown, setIsShown] = useState<boolean>(false);
   const [options, setOptions] = useState(
     props.options.map(val => {
       return {
+        id: val.id,
         name: val.optionName,
         image: val.image,
         color: val.color,
@@ -24,6 +28,98 @@ const Modal = (props: Props) => {
     })
   );
 
+  useEffect(() => {
+    switch (props.innerTitle) {
+      case '작성자 필터':
+        options.forEach((option: any) => {
+          if (option.isSelected === true) {
+            option.name === '작성자가 없는 이슈'
+              ? setFilter({ ...filter, writer: null })
+              : setFilter({ ...filter, writer: option.id });
+          }
+        });
+        if (
+          options.filter((option: any) => option.isSelected === true).length ===
+          0
+        ) {
+          setFilter({ ...filter, writer: '' });
+        }
+        return;
+      case '담당자 필터':
+        options.forEach((option: any) => {
+          if (option.isSelected === true) {
+            option.name === '담당자가 없는 이슈'
+              ? setFilter({ ...filter, assignee: null })
+              : setFilter({ ...filter, assignee: option.id });
+          }
+        });
+        if (
+          options.filter((option: any) => option.isSelected === true).length ===
+          0
+        ) {
+          setFilter({ ...filter, assignee: '' });
+        }
+        return;
+      case '레이블 필터':
+        options.forEach((option: any) => {
+          if (option.isSelected === true) {
+            option.name === '레이블이 없는 이슈'
+              ? setFilter({ ...filter, label: null })
+              : setFilter({ ...filter, label: option.id });
+          }
+        });
+        if (
+          options.filter((option: any) => option.isSelected === true).length ===
+          0
+        ) {
+          setFilter({ ...filter, label: '' });
+        }
+        return;
+      case '마일스톤 필터':
+        options.forEach((option: any) => {
+          if (option.isSelected === true) {
+            option.name === '마일스톤이 없는 이슈'
+              ? setFilter({ ...filter, milstone: null })
+              : setFilter({ ...filter, milstone: option.id });
+          }
+        });
+        if (
+          options.filter((option: any) => option.isSelected === true).length ===
+          0
+        ) {
+          setFilter({ ...filter, milstone: '' });
+        }
+        return;
+      case '이슈 필터':
+        options.forEach((option: any) => {
+          if (option.isSelected === true) {
+            switch (option.name) {
+              case '열린 이슈':
+                return setFilter({ ...filter, isOpen: true });
+              case '내가 작성한 이슈':
+                return setFilter({
+                  ...filter,
+                  isOpen: '',
+                  specialFilter: 'my_issue',
+                });
+              case '나에게 할당된 이슈':
+                return setFilter({ ...filter, specialFilter: 'my_assign' });
+              case '내가 댓글을 남긴 이슈':
+                return setFilter({ ...filter, specialFilter: 'my_comment' });
+              case '닫힌 이슈':
+                return setFilter({ ...filter, isOpen: false });
+            }
+          }
+          if (
+            options.filter((option: any) => option.isSelected === true)
+              .length === 0
+          ) {
+            setFilter({ ...filter, specialFilter: '' });
+          }
+        });
+    }
+  }, [options]);
+
   const toggle = (): void => {
     setIsShown(!isShown);
   };
@@ -32,7 +128,7 @@ const Modal = (props: Props) => {
     setOptions(
       options.map(item =>
         item.name === option.name
-          ? { ...item, isSelected: true }
+          ? { ...item, isSelected: !option.isSelected }
           : { ...item, isSelected: false }
       )
     );