some Submit refactor

src/pages/Submit/Submit.js

@@ -27,7 +27,7 @@ const Submit = (props) => {
     getTags(dispatch);
   }, []);
 
-  const challengeSubmissionSubmit = () => {
+  const challengeSubmissionSubmit = React.useCallback(() => {
     dispatch({ type: SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING });
     challengeSubmission(
       props.challengeName,
@@ -37,26 +37,13 @@ const Submit = (props) => {
       state.submissionTags,
       dispatch
     );
-  };
+  }, [
-
+    props.challengeName,
-  const setDescription = (value) => {
+    state.description,
-    dispatch({ type: SUBMIT_ACTION.SET_DESCRIPTION, payload: value });
+    state.repoBranch,
-  };
+    state.repoUrl,
-
+    state.submissionTags,
-  const setRepoUrl = (value) => {
+  ]);
-    dispatch({ type: SUBMIT_ACTION.SET_REPO_URL, payload: value });
-  };
-
-  const setRepoBranch = (value) => {
-    dispatch({ type: SUBMIT_ACTION.SET_REPO_BRANCH, payload: value });
-  };
-
-  const updateTags = (submissionTags, tags) => {
-    dispatch({
-      type: SUBMIT_ACTION.UPDATE_TAGS,
-      payload: { submissionTags: submissionTags, tags: tags },
-    });
-  };
 
   if (!state.submissionLoading) {
     return (
@@ -67,13 +54,30 @@ const Submit = (props) => {
         <FlexColumn className="SubmitStyle__form">
           <SubmitInput
             label="Submission description"
-            handler={setDescription}
+            handler={(value) => {
+              dispatch({ type: SUBMIT_ACTION.SET_DESCRIPTION, payload: value });
+            }}
+          />
+          <SubmitInput
+            label="Submission repo URL"
+            handler={(value) => {
+              dispatch({ type: SUBMIT_ACTION.SET_REPO_URL, payload: value });
+            }}
+          />
+          <SubmitInput
+            label="Submission repo branch"
+            handler={(value) => {
+              dispatch({ type: SUBMIT_ACTION.SET_REPO_BRANCH, payload: value });
+            }}
           />
-          <SubmitInput label="Submission repo URL" handler={setRepoUrl} />
-          <SubmitInput label="Submission repo branch" handler={setRepoBranch} />
           <TagsChoose
             label="Submission tags"
-            updateTags={updateTags}
+            updateTags={(submissionTags, tags) => {
+              dispatch({
+                type: SUBMIT_ACTION.UPDATE_TAGS,
+                payload: { submissionTags: submissionTags, tags: tags },
+              });
+            }}
             tags={state.tags}
             submissionTags={state.submissionTags}
           />

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

@@ -23,12 +23,7 @@ const TagsChoose = (props) => {
         className="TagsChooseStyle__grid"
         onChange={(e) => props.handler(e.target.value)}
       >
-        <FlexRow
+        <FlexRow className="TagsChooseStyle__tags-container">
-          width="100%"
-          height="100%"
-          className="TagsChooseStyle__tags-container"
-          gap="16px"
-        >
           {props.submissionTags.map((tag, i) =>
             i === 0 ? tag.name : `, ${tag.name}`
           )}

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

@@ -21,6 +21,7 @@ const TagsChooseStyle = styled(FlexColumn)`
   }
 
   .TagsChooseStyle__tags-container {
+    width: 100%;
     height: 100%;
     justify-content: flex-start;
     align-items: flex-start;

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

@@ -52,7 +52,7 @@ const TagsChoosePopUp = (props) => {
           )}
           {renderTagItems(tags, toggleTagChoose, 'none')}
         </FlexColumn>
-        <FlexRow width="100%" gap="20px" alignmentX="flex-start">
+        <FlexRow className="TagsChoosePopUpStyle__buttons-container">
           <Button
             height="32px"
             width="76px"

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

@@ -26,6 +26,12 @@ const TagsChoosePopUpStyle = styled(FlexColumn)`
       background-color: ${({ theme }) => theme.colors.green03};
     }
   }
+
+  .TagsChoosePopUpStyle__buttons-container {
+    width: 100%;
+    gap: 20px;
+    justify-content: flex-start;
+  }
 `;
 
 export default TagsChoosePopUpStyle;