submission tags add, remove, clear, post

src/api/challengeSubmissionPost.js

@@ -7,10 +7,12 @@ const challengeSubmission = (
   repoUrl,
   repoBranch,
   description,
+  submissionTags,
   dispatch
 ) => {
   const details = {
     f1: description,
+    f2: submissionTags,
     f3: repoUrl,
     f4: repoBranch,
   };

src/assets/remove_ico.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.39729 27.0172C0.82276 27.5917 0.5 28.3709 0.5 29.1834C0.5 29.9959 0.82276 30.7751 1.39729 31.3497C1.97181 31.9242 2.75104 32.2469 3.56354 32.2469C4.37604 32.2469 5.15526 31.9242 5.72978 31.3497C9.33002 27.7494 12.8998 24.1492 16.5 20.61L27.2702 31.3497C27.5547 31.6341 27.8924 31.8598 28.2641 32.0138C28.6358 32.1677 29.0342 32.2469 29.4365 32.2469C29.8388 32.2469 30.2371 32.1677 30.6088 32.0138C30.9805 31.8598 31.3182 31.6341 31.6027 31.3497C31.8872 31.0652 32.1128 30.7275 32.2668 30.3558C32.4208 29.9841 32.5 29.5857 32.5 29.1834C32.5 28.7811 32.4208 28.3827 32.2668 28.011C32.1128 27.6394 31.8872 27.3016 31.6027 27.0172C28.0025 23.4779 24.4022 19.8472 20.863 16.2469C23.3649 13.6841 25.8667 11.2127 28.3686 8.71085C29.467 7.61247 30.5043 6.51409 31.6027 5.47673C32.1772 4.9022 32.5 4.12298 32.5 3.31048C32.5 2.49798 32.1772 1.71876 31.6027 1.14423C31.0282 0.569709 30.249 0.246948 29.4365 0.246948C28.624 0.246948 27.8447 0.569709 27.2702 1.14423L16.5 11.9328L5.72978 1.14423C5.15526 0.569709 4.37604 0.246948 3.56354 0.246948C2.75104 0.246948 1.97181 0.569709 1.39729 1.14423C0.82276 1.71876 0.5 2.49798 0.5 3.31048C0.5 4.12298 0.82276 4.9022 1.39729 5.47673L12.1858 16.2469L1.39729 27.0172Z" fill="#343434"/>
+</svg>

src/index.js

@@ -8,13 +8,9 @@ import HttpService from './services/HttpService';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
-const renderApp = () => root.render(
+const renderApp = () => root.render(<App />);
-    <React.StrictMode>
-        <App/>
-    </React.StrictMode>
-);
 
 KeyCloakService.initKeycloak(renderApp);
 HttpService.configure();
 
-renderApp();
+renderApp();

src/pages/Submit/Submit.js

@@ -11,6 +11,7 @@ import getTags from '../../api/getTags';
 import TagsChoose from './components/TagsChoose';
 import SubmitReducer from './model/SubmitReducer';
 import SUBMIT_ACTION from './model/SubmitActionEnum';
+import SubmitStyle from './SubmitStyle';
 
 const Submit = (props) => {
   const [state, dispatch] = React.useReducer(SubmitReducer, {
@@ -33,6 +34,7 @@ const Submit = (props) => {
       state.repoUrl,
       state.repoBranch,
       state.description,
+      state.submissionTags,
       dispatch
     );
   };
@@ -49,25 +51,28 @@ const Submit = (props) => {
     dispatch({ type: SUBMIT_ACTION.SET_REPO_BRANCH, payload: value });
   };
 
-  const addSubmissionTag = React.useCallback((value) => {
+  const toggleSubmissionTag = React.useCallback(
-    dispatch({ type: SUBMIT_ACTION.ADD_SUBMISSION_TAG, payload: value });
+    (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 });
+  };
 
   if (!state.submissionLoading) {
     return (
-      <FlexColumn
+      <SubmitStyle as="section">
-        margin="40px 0 0 0"
+        <H2 as="h2" className="SubmitStyle__header">
-        padding="24px"
-        as="section"
-        gap="64px"
-        maxWidth="624px"
-        width="100%"
-        alignmentX="flex-start"
-      >
-        <H2 as="h2" width="100%" textAlign="center">
           Submit a solution to the challenge
         </H2>
-        <FlexColumn width="100%" gap="32px">
+        <FlexColumn className="SubmitStyle__form">
           <SubmitInput
             label="Submission description"
             handler={setDescription}
@@ -76,15 +81,16 @@ const Submit = (props) => {
           <SubmitInput label="Submission repo branch" handler={setRepoBranch} />
           <TagsChoose
             label="Submission tags"
-            addSubmissionTag={addSubmissionTag}
+            toggleSubmissionTag={toggleSubmissionTag}
             tags={state.tags}
             submissionTags={state.submissionTags}
+            clearSubmissionTags={clearSubmissionTags}
           />
         </FlexColumn>
         <Button width="122px" height="44px" handler={challengeSubmissionSubmit}>
           <Menu color={theme.colors.white}>Submit</Menu>
         </Button>
-      </FlexColumn>
+      </SubmitStyle>
     );
   } else {
     return createPortal(

src/pages/Submit/SubmitStyle.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { FlexColumn } from '../../utils/containers';
+
+const SubmitStyle = styled(FlexColumn)`
+  margin: 40px 0 0 0;
+  padding: 24px;
+  gap: 64px;
+  max-width: 624px;
+  width: 100%;
+  align-items: flex-start;
+
+  .SubmitStyle__header {
+    width: 100%;
+    text-align: center;
+  }
+
+  .SubmitStyle__form {
+    width: 100%;
+    gap: 32px;
+  }
+`;
+
+export default SubmitStyle;

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

@@ -23,7 +23,16 @@ const TagsChoose = (props) => {
         className="TagsChooseStyle__grid"
         onChange={(e) => props.handler(e.target.value)}
       >
-        <FlexRow className="TagsChooseStyle__tags-container">tags</FlexRow>
+        <FlexRow
+          width="100%"
+          height="100%"
+          className="TagsChooseStyle__tags-container"
+          gap="16px"
+        >
+          {props.submissionTags.map((tag, i) =>
+            i === 0 ? tag.name : `, ${tag.name}`
+          )}
+        </FlexRow>
         <ImageButton src={pencilIco} width="20px" height="20px" />
       </Grid>
       {tagsPopUp &&
@@ -31,8 +40,9 @@ const TagsChoose = (props) => {
           <TagsChoosePopUp
             tags={props.tags}
             submissionTags={props.submissionTags}
-            addSubmissionTag={props.addSubmissionTag}
+            toggleSubmissionTag={props.toggleSubmissionTag}
             setTagsPopUp={setTagsPopUp}
+            clearSubmissionTags={props.clearSubmissionTags}
           />,
           document.body
         )}

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

@@ -24,6 +24,7 @@ const TagsChooseStyle = styled(FlexColumn)`
     height: 100%;
     justify-content: flex-start;
     align-items: flex-start;
+    overflow-y: scroll;
   }
 `;
 

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

@@ -5,7 +5,7 @@ import Search from '../../../../components/generic/Search';
 import theme from '../../../../utils/theme';
 import Button from '../../../../components/generic/Button';
 import TagsChoosePopUpStyle from './TagsChoosePopUpStyle';
-import tagColorHandle from './functions/tagColorHandle';
+import renderTagItems from './functions/renderTagItems';
 
 const TagsChoosePopUp = (props) => {
   return (
@@ -17,24 +17,15 @@ const TagsChoosePopUp = (props) => {
     >
       <TagsChoosePopUpStyle>
         <Search />
-        <FlexColumn as="list" className="TagsChoosePopUpStyle__tags-list">
+        <FlexColumn as="ul" className="TagsChoosePopUpStyle__tags-list">
-          {props.tags.map((tag, index) => {
+          {renderTagItems(
-            return (
+            props.submissionTags,
-              <FlexRow
+            props.toggleSubmissionTag,
-                key={`tag-${index}`}
+            `1px dotted ${theme.colors.green}`,
-                onClick={() => props.addSubmissionTag(tag.name)}
+            theme.colors.green03,
-                className="TagsChoosePopUpStyle__tag-item"
+            true
-                backgroundColor={tagColorHandle(
+          )}
-                  theme,
+          {renderTagItems(props.tags, props.toggleSubmissionTag, 'none')}
-                  index,
-                  tag,
-                  props.submissionTags
-                )}
-              >
-                {tag.name}
-              </FlexRow>
-            );
-          })}
         </FlexColumn>
         <FlexRow width="100%" gap="20px" alignmentX="flex-start">
           <Button height="32px" width="76px">
@@ -44,6 +35,7 @@ const TagsChoosePopUp = (props) => {
             height="32px"
             width="76px"
             backgroundColor={theme.colors.dark08}
+            handler={() => props.clearSubmissionTags()}
           >
             Clear
           </Button>
@@ -52,6 +44,7 @@ const TagsChoosePopUp = (props) => {
             width="76px"
             backgroundColor={theme.colors.dark}
             margin="0 0 0 auto"
+            handler={() => props.setTagsPopUp(false)}
           >
             Cancel
           </Button>

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

@@ -17,7 +17,7 @@ const TagsChoosePopUpStyle = styled(FlexColumn)`
   .TagsChoosePopUpStyle__tag-item {
     height: 42px;
     width: 100%;
-    justify-content: flex-start;
+    justify-content: space-between;
     padding: 12px;
     cursor: pointer;
     transition: background-color 0.3s ease-in-out;

src/pages/Submit/components/TagsChoosePopup/functions/renderTagItems.js

@@ -0,0 +1,42 @@
+import theme from '../../../../../utils/theme';
+import tagBackgroundColorHandle from './tagBackgroundColorHandle';
+import { FlexRow } from '../../../../../utils/containers';
+import removeIco from '../../../../../assets/remove_ico.svg';
+import { Svg } from '../../../../../utils/containers';
+
+const renderTagItems = (
+  tags,
+  toggleTag,
+  border,
+  backgroundColor,
+  submissionTags = false
+) => {
+  return tags.map((tag, index) => {
+    return (
+      <FlexRow
+        key={`tag-${index}`}
+        onClick={() => toggleTag(tag)}
+        className="TagsChoosePopUpStyle__tag-item"
+        backgroundColor={
+          backgroundColor
+            ? backgroundColor
+            : tagBackgroundColorHandle(theme, index)
+        }
+        border={border}
+      >
+        {tag.name}
+        {submissionTags && (
+          <Svg
+            src={removeIco}
+            backgroundColor={theme.colors.dark}
+            width="10px"
+            size="cover"
+            height="10px"
+          />
+        )}
+      </FlexRow>
+    );
+  });
+};
+
+export default renderTagItems;

src/pages/Submit/components/TagsChoosePopup/functions/tagBackgroundColorHandle.js

@@ -0,0 +1,6 @@
+const tagBackgroundColorHandle = (theme, index) => {
+  if (index % 2 === 0) return theme.colors.white;
+  return theme.colors.dark01;
+};
+
+export default tagBackgroundColorHandle;

src/pages/Submit/components/TagsChoosePopup/functions/tagColorHandle.js

@@ -1,7 +0,0 @@
-const tagColorHandle = (theme, index, tag, tags) => {
-  if (tags.includes(tag.name)) return theme.colors.green;
-  if (index % 2 === 0) return theme.colors.dark01;
-  return theme.colors.white;
-};
-
-export default tagColorHandle;

src/pages/Submit/model/SubmitActionEnum.js

@@ -4,8 +4,8 @@ const SUBMIT_ACTION = {
   SET_REPO_BRANCH: 'set_repo_branch',
   TOGGLE_SUBMISSION_LOADING: 'toggle_submission_loading',
   LOAD_TAGS: 'load_tags',
-  ADD_SUBMISSION_TAGS: 'add_submission_tag',
+  ADD_SUBMISSION_TAG: 'add_submission_tag',
-  REMOVE_SUBMISSION_TAGS: 'remove_submission_tag',
+  REMOVE_SUBMISSION_TAG: 'remove_submission_tag',
   CLEAR_SUBMISSION_TAGS: 'clear_submission_tags',
 };
 

src/pages/Submit/model/SubmitReducer.js

@@ -1,9 +1,9 @@
 import SUBMIT_ACTION from './SubmitActionEnum';
 
 const SubmitReducer = (state, action) => {
-  console.log('SubmitReducer');
+  console.log(`SubmitReducer: ${action.type}`);
-  let initTags = state.tags;
   let newSubmissionTags = state.submissionTags;
+  let newTags = state.tags;
   switch (action.type) {
     case SUBMIT_ACTION.SET_DESCRIPTION:
       return { ...state, description: action.payload };
@@ -14,12 +14,24 @@ const SubmitReducer = (state, action) => {
     case SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING:
       return { ...state, submissionLoading: !state.submissionLoading };
     case SUBMIT_ACTION.LOAD_TAGS:
-      if (state.tags.length === 0) initTags = action.payload;
+      if (state.tags.length === 0) newTags = action.payload;
-      return { ...state, tags: initTags };
+      return { ...state, tags: newTags };
     case SUBMIT_ACTION.ADD_SUBMISSION_TAG:
-      if (!newSubmissionTags.includes(action.payload))
+      if (!newSubmissionTags.includes(action.payload)) {
+        newTags = state.tags;
         newSubmissionTags.push(action.payload);
-      return { ...state, submissionTags: newSubmissionTags };
+        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: [] };
     default: