handle Done, Clear, Cancel in TagsChoosePopUp

src/pages/Submit/Submit.js

@@ -51,19 +51,11 @@ const Submit = (props) => {
     dispatch({ type: SUBMIT_ACTION.SET_REPO_BRANCH, payload: value });
   };
 
-  const toggleSubmissionTag = React.useCallback(
-    (tag) => {
-      let actionType = '';
-      if (state.submissionTags.includes(tag))
-        actionType = SUBMIT_ACTION.REMOVE_SUBMISSION_TAG;
-      else actionType = SUBMIT_ACTION.ADD_SUBMISSION_TAG;
-      dispatch({ type: actionType, payload: tag });
-    },
-    [state.submissionTags]
-  );
-
-  const clearSubmissionTags = () => {
-    dispatch({ type: SUBMIT_ACTION.CLEAR_SUBMISSION_TAGS });
+  const updateTags = (submissionTags, tags) => {
+    dispatch({
+      type: SUBMIT_ACTION.UPDATE_TAGS,
+      payload: { submissionTags: submissionTags, tags: tags },
+    });
   };
 
   if (!state.submissionLoading) {
@@ -81,10 +73,9 @@ const Submit = (props) => {
           <SubmitInput label="Submission repo branch" handler={setRepoBranch} />
           <TagsChoose
             label="Submission tags"
-            toggleSubmissionTag={toggleSubmissionTag}
+            updateTags={updateTags}
             tags={state.tags}
             submissionTags={state.submissionTags}
-            clearSubmissionTags={clearSubmissionTags}
           />
         </FlexColumn>
         <Button width="122px" height="44px" handler={challengeSubmissionSubmit}>

src/pages/Submit/components/TagsChoose/TagsChoose.js

@@ -40,9 +40,8 @@ const TagsChoose = (props) => {
           <TagsChoosePopUp
             tags={props.tags}
             submissionTags={props.submissionTags}
-            toggleSubmissionTag={props.toggleSubmissionTag}
+            updateTags={props.updateTags}
             setTagsPopUp={setTagsPopUp}
-            clearSubmissionTags={props.clearSubmissionTags}
           />,
           document.body
         )}

src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js

@@ -8,6 +8,31 @@ import TagsChoosePopUpStyle from './TagsChoosePopUpStyle';
 import renderTagItems from './functions/renderTagItems';
 
 const TagsChoosePopUp = (props) => {
+  const [tagsChoosed, setTagsChoosed] = React.useState([]);
+  const [tags, setTags] = React.useState([]);
+
+  React.useEffect(() => {
+    setTags(props.tags.slice());
+    setTagsChoosed(props.submissionTags.slice());
+  }, [props.tags, props.submissionTags]);
+
+  const toggleTagChoose = (clickedTag) => {
+    let newTagsChoosed = tagsChoosed;
+    let newTags = tags;
+    if (tagsChoosed.includes(clickedTag)) {
+      newTagsChoosed = newTagsChoosed.filter(
+        (tag) => tag.name !== clickedTag.name
+      );
+      newTags.push(clickedTag);
+      newTags = newTags.sort((a, b) => a.name.localeCompare(b.name));
+    } else {
+      newTagsChoosed.push(clickedTag);
+      newTags = newTags.filter((tag) => tag.name !== clickedTag.name);
+    }
+    setTagsChoosed(newTagsChoosed);
+    setTags(newTags);
+  };
+
   return (
     <PopUp
       width="50%"
@@ -19,23 +44,30 @@ const TagsChoosePopUp = (props) => {
         <Search />
         <FlexColumn as="ul" className="TagsChoosePopUpStyle__tags-list">
           {renderTagItems(
-            props.submissionTags,
-            props.toggleSubmissionTag,
+            tagsChoosed,
+            toggleTagChoose,
             `1px dotted ${theme.colors.green}`,
             theme.colors.green03,
             true
           )}
-          {renderTagItems(props.tags, props.toggleSubmissionTag, 'none')}
+          {renderTagItems(tags, toggleTagChoose, 'none')}
         </FlexColumn>
         <FlexRow width="100%" gap="20px" alignmentX="flex-start">
-          <Button height="32px" width="76px">
+          <Button
+            height="32px"
+            width="76px"
+            handler={() => {
+              props.updateTags(tagsChoosed, tags);
+              props.setTagsPopUp(false);
+            }}
+          >
             Done
           </Button>
           <Button
             height="32px"
             width="76px"
             backgroundColor={theme.colors.dark08}
-            handler={() => props.clearSubmissionTags()}
+            handler={() => setTagsChoosed([])}
           >
             Clear
           </Button>

src/pages/Submit/model/SubmitActionEnum.js

@@ -4,9 +4,7 @@ const SUBMIT_ACTION = {
   SET_REPO_BRANCH: 'set_repo_branch',
   TOGGLE_SUBMISSION_LOADING: 'toggle_submission_loading',
   LOAD_TAGS: 'load_tags',
-  ADD_SUBMISSION_TAG: 'add_submission_tag',
-  REMOVE_SUBMISSION_TAG: 'remove_submission_tag',
-  CLEAR_SUBMISSION_TAGS: 'clear_submission_tags',
+  UPDATE_TAGS: 'update_tags',
 };
 
 export default SUBMIT_ACTION;

src/pages/Submit/model/SubmitReducer.js

@@ -2,7 +2,6 @@ import SUBMIT_ACTION from './SubmitActionEnum';
 
 const SubmitReducer = (state, action) => {
   console.log(`SubmitReducer: ${action.type}`);
-  let newSubmissionTags = state.submissionTags;
   let newTags = state.tags;
   switch (action.type) {
     case SUBMIT_ACTION.SET_DESCRIPTION:
@@ -16,24 +15,12 @@ const SubmitReducer = (state, action) => {
     case SUBMIT_ACTION.LOAD_TAGS:
       if (state.tags.length === 0) newTags = action.payload;
       return { ...state, tags: newTags };
-    case SUBMIT_ACTION.ADD_SUBMISSION_TAG:
-      if (!newSubmissionTags.includes(action.payload)) {
-        newTags = state.tags;
-        newSubmissionTags.push(action.payload);
-        newTags = newTags.filter((tag) => tag.name !== action.payload.name);
-      }
-      return { ...state, submissionTags: newSubmissionTags, tags: newTags };
-    case SUBMIT_ACTION.REMOVE_SUBMISSION_TAG:
-      if (newSubmissionTags.includes(action.payload)) {
-        newSubmissionTags = newSubmissionTags.filter(
-          (tag) => tag.name !== action.payload.name
-        );
-        newTags.push(action.payload);
-        newTags = newTags.sort((a, b) => a.name.localeCompare(b.name));
-      }
-      return { ...state, submissionTags: newSubmissionTags, tags: newTags };
-    case SUBMIT_ACTION.CLEAR_SUBMISSION_TAGS:
-      return { ...state, submissionTags: [] };
+    case SUBMIT_ACTION.UPDATE_TAGS:
+      return {
+        ...state,
+        submissionTags: action.payload.submissionTags,
+        tags: action.payload.tags,
+      };
     default:
       throw new Error('Undefined action in SubmitReducer!');
   }