adding submission tags

src/api/challengeSubmissionPost.js

@@ -1,12 +1,13 @@
 import KeyCloakService from '../services/KeyCloakService';
 import { API } from '../utils/globals';
+import SUBMIT_ACTION from '../pages/Submit/model/SubmitActionEnum';
 
 const challengeSubmission = (
   challengeName,
   repoUrl,
   repoBranch,
   description,
-  setLoading
+  dispatch
 ) => {
   const details = {
     f1: description,
@@ -30,7 +31,7 @@ const challengeSubmission = (
   })
     .then((resp) => resp.json())
     .then((data) => {
-      setLoading(true);
+      dispatch({ type: SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING });
       const processUrl = API.replace('/api', '');
       window.location.replace(`${processUrl}/open-view-progress/${data}#form`);
       // console.log(data);

src/api/getChallenges.js

@@ -1,4 +1,4 @@
-import CHALLENGES_ACTION from '../pages/Challanges/model/ChallengesActionEnum';
+import CHALLENGES_ACTION from '../pages/Challanges/model/ChallengesActions';
 import { API } from '../utils/globals';
 
 const getChallenges = (dispatch) => {

src/api/getTags.js

@@ -1,10 +1,11 @@
+import SUBMIT_ACTION from '../pages/Submit/model/SubmitActionEnum';
 import { API } from '../utils/globals';
 
-const getTags = (setTags) => {
+const getTags = (dispatch) => {
   fetch(`${API}/list-tags`)
     .then((response) => response.json())
     .then((data) => {
-      setTags(data);
+      dispatch({ type: SUBMIT_ACTION.LOAD_TAGS, payload: data });
     });
 };
 

src/pages/Challanges/Challenges.js

@@ -9,7 +9,7 @@ import ChallengesMobile from './components/ChallengesMobile';
 import ChallengesDesktop from './components/ChallengesDesktop';
 import challengeSearchQueryHandler from './functions/challengeSearchQueryHandler';
 import ChallengesReducer from './model/ChallengesReducer';
-import CHALLENGES_ACTION from './model/ChallengesActionEnum';
+import CHALLENGES_ACTION from './model/ChallengesActions';
 
 const Challenges = () => {
   const [state, dispatch] = React.useReducer(ChallengesReducer, {

src/pages/Challanges/components/ChallengesMobile.js

@@ -7,7 +7,7 @@ import Search from '../../../components/generic/Search';
 import { CALC_PAGES } from '../../../utils/globals';
 import renderChallenges from '../functions/renderChallenges';
 import Loading from '../../../components/generic/Loading';
-import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
+import CHALLENGES_ACTION from '../model/ChallengesActions';
 
 const ChallengesMobile = (props) => {
   return (

src/pages/Challanges/components/FiltersMenu/FiltersMenu.js

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import FilterBy from '../FilterBy';
 import filterOptions from './filterOptions';
 import Media from 'react-media';
-import CHALLENGES_ACTION from '../../model/ChallengesActionEnum';
+import CHALLENGES_ACTION from '../../model/ChallengesActions';
 
 const FiltersMenuStyle = styled(FlexColumn)`
   position: fixed;

src/pages/Challanges/functions/challengeSearchQueryHandler.js

@@ -1,4 +1,4 @@
-import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
+import CHALLENGES_ACTION from '../model/ChallengesActions';
 
 const challengeSearchQueryHandler = (event, challengesFromAPI, dispatch) => {
   let searchQuery = event.target.value;

src/pages/Challanges/functions/statusFilterHandle.js

@@ -1,5 +1,5 @@
 import { CHALLENGES_STATUS_FILTER } from '../../../utils/globals';
-import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
+import CHALLENGES_ACTION from '../model/ChallengesActions';
 
 const dateIsOlder = (newerDate, olderDate) => {
   if (newerDate.year > olderDate.year) return true;

src/pages/Challanges/model/ChallengesReducer.js

@@ -1,4 +1,4 @@
-import CHALLENGES_ACTION from './ChallengesActionEnum';
+import CHALLENGES_ACTION from './ChallengesActions';
 
 const ChallengesReducer = (state, action) => {
   switch (action.type) {

src/pages/Submit/Submit.js

@@ -9,32 +9,51 @@ import challengeSubmission from '../../api/challengeSubmissionPost';
 import Loading from '../../components/generic/Loading';
 import getTags from '../../api/getTags';
 import TagsChoose from './components/TagsChoose';
+import SubmitReducer from './model/SubmitReducer';
+import SUBMIT_ACTION from './model/SubmitActionEnum';
 
 const Submit = (props) => {
-  const [description, setDescription] = React.useState('');
-  const [repoUrl, setRepoUrl] = React.useState('');
-  const [repoBranch, setRepoBranch] = React.useState('');
-  const [loading, setLoading] = React.useState(false);
-  const [tags, setTags] = React.useState([]);
-  // eslint-disable-next-line no-unused-vars
-  const [submissionTags, setSubmissionTags] = React.useState([]);
+  const [state, dispatch] = React.useReducer(SubmitReducer, {
+    description: '',
+    repoUrl: '',
+    repoBranch: '',
+    submissionLoading: false,
+    tags: [],
+    submissionTags: [],
+  });
 
   React.useMemo(() => {
-    getTags(setTags);
+    getTags(dispatch);
   }, []);
 
   const challengeSubmissionSubmit = () => {
-    setLoading(true);
+    dispatch({ type: SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING });
     challengeSubmission(
       props.challengeName,
-      repoUrl,
-      repoBranch,
-      description,
-      setLoading
+      state.repoUrl,
+      state.repoBranch,
+      state.description,
+      dispatch
     );
   };
 
-  if (!loading) {
+  const setDescription = (value) => {
+    dispatch({ type: SUBMIT_ACTION.SET_DESCRIPTION, payload: value });
+  };
+
+  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 addSubmissionTag = React.useCallback((value) => {
+    dispatch({ type: SUBMIT_ACTION.ADD_SUBMISSION_TAG, payload: value });
+  }, []);
+
+  if (!state.submissionLoading) {
     return (
       <FlexColumn
         margin="40px 0 0 0"
@@ -57,8 +76,9 @@ const Submit = (props) => {
           <SubmitInput label="Submission repo branch" handler={setRepoBranch} />
           <TagsChoose
             label="Submission tags"
-            handler={setSubmissionTags}
-            tags={tags}
+            addSubmissionTag={addSubmissionTag}
+            tags={state.tags}
+            submissionTags={state.submissionTags}
           />
         </FlexColumn>
         <Button width="122px" height="44px" handler={challengeSubmissionSubmit}>

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

@@ -28,7 +28,12 @@ const TagsChoose = (props) => {
       </Grid>
       {tagsPopUp &&
         createPortal(
-          <TagsChoosePopUp tags={props.tags} setTagsPopUp={setTagsPopUp} />,
+          <TagsChoosePopUp
+            tags={props.tags}
+            submissionTags={props.submissionTags}
+            addSubmissionTag={props.addSubmissionTag}
+            setTagsPopUp={setTagsPopUp}
+          />,
           document.body
         )}
     </TagsChooseStyle>

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

@@ -5,6 +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';
 
 const TagsChoosePopUp = (props) => {
   return (
@@ -21,10 +22,14 @@ const TagsChoosePopUp = (props) => {
             return (
               <FlexRow
                 key={`tag-${index}`}
+                onClick={() => props.addSubmissionTag(tag.name)}
                 className="TagsChoosePopUpStyle__tag-item"
-                backgroundColor={
-                  index % 2 === 0 ? theme.colors.dark01 : theme.colors.white
-                }
+                backgroundColor={tagColorHandle(
+                  theme,
+                  index,
+                  tag,
+                  props.submissionTags
+                )}
               >
                 {tag.name}
               </FlexRow>

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

@@ -15,10 +15,16 @@ const TagsChoosePopUpStyle = styled(FlexColumn)`
   }
 
   .TagsChoosePopUpStyle__tag-item {
-    height: 48px;
+    height: 42px;
     width: 100%;
     justify-content: flex-start;
     padding: 12px;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.green03};
+    }
   }
 `;
 

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,12 @@
+const SUBMIT_ACTION = {
+  SET_DESCRIPTION: 'set_description',
+  SET_REPO_URL: 'set_repo_url',
+  SET_REPO_BRANCH: 'set_repo_branch',
+  TOGGLE_SUBMISSION_LOADING: 'toggle_submission_loading',
+  LOAD_TAGS: 'load_tags',
+  ADD_SUBMISSION_TAGS: 'add_submission_tag',
+  REMOVE_SUBMISSION_TAGS: 'remove_submission_tag',
+  CLEAR_SUBMISSION_TAGS: 'clear_submission_tags',
+};
+
+export default SUBMIT_ACTION;

src/pages/Submit/model/SubmitReducer.js

@@ -0,0 +1,30 @@
+import SUBMIT_ACTION from './SubmitActionEnum';
+
+const SubmitReducer = (state, action) => {
+  console.log('SubmitReducer');
+  let initTags = state.tags;
+  let newSubmissionTags = state.submissionTags;
+  switch (action.type) {
+    case SUBMIT_ACTION.SET_DESCRIPTION:
+      return { ...state, description: action.payload };
+    case SUBMIT_ACTION.SET_REPO_BRANCH:
+      return { ...state, repoBranch: action.payload };
+    case SUBMIT_ACTION.SET_REPO_URL:
+      return { ...state, repoUrl: action.payload };
+    case SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING:
+      return { ...state, submissionLoading: !state.submissionLoading };
+    case SUBMIT_ACTION.LOAD_TAGS:
+      if (state.tags.length === 0) initTags = action.payload;
+      return { ...state, tags: initTags };
+    case SUBMIT_ACTION.ADD_SUBMISSION_TAG:
+      if (!newSubmissionTags.includes(action.payload))
+        newSubmissionTags.push(action.payload);
+      return { ...state, submissionTags: newSubmissionTags };
+    case SUBMIT_ACTION.CLEAR_SUBMISSION_TAGS:
+      return { ...state, submissionTags: [] };
+    default:
+      throw new Error('Undefined action in SubmitReducer!');
+  }
+};
+
+export default SubmitReducer;