From 894e9c9b7c73a2afec045e43ab66b77b512c40af Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Wed, 10 May 2023 15:08:26 +0200 Subject: [PATCH 1/9] display submission description to Leaderboad --- .../specific_challenge/Leaderboard/Leaderboard.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js index 8a67b25..c0b6fd4 100644 --- a/src/components/specific_challenge/Leaderboard/Leaderboard.js +++ b/src/components/specific_challenge/Leaderboard/Leaderboard.js @@ -11,7 +11,6 @@ import { CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN, - } from '../../../utils/globals'; import Search from '../../generic/Search'; import Pager from '../../generic/Pager'; @@ -65,7 +64,7 @@ const Leaderboard = (props) => { }; const getLeaderboardHeader = () => { - let header = ['#', 'submitter']; + let header = ['#', 'submitter', 'description']; for (let metric of getPossibleMetrics()) { header.push(metric); } @@ -75,7 +74,7 @@ const Leaderboard = (props) => { }; const getLeaderboardHeaderMobile = () => { - let header = ['#', 'submitter', 'entries', 'when']; + let header = ['#', 'submitter', 'description', 'entries', 'when']; for (let metric of getPossibleMetrics()) { header.push(metric); } @@ -170,7 +169,7 @@ const Leaderboard = (props) => { tableType="leaderboard" gridTemplateColumns={ entries[0] - ? '1fr 3fr ' + + ? '1fr 2fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : '' @@ -179,6 +178,7 @@ const Leaderboard = (props) => { staticColumnElements={[ { name: 'id', format: null, order: 1, align: 'left' }, { name: 'submitter', format: null, order: 2, align: 'left' }, + { name: 'description', format: null, order: 3, align: 'left' }, { name: 'times', format: null, order: 4, align: 'left' }, { name: 'when', format: RENDER_WHEN, order: 5, align: 'right' }, ]} @@ -224,7 +224,7 @@ const Leaderboard = (props) => { headerElements={getLeaderboardHeader()} gridTemplateColumns={ entries[0] - ? '1fr 3fr ' + + ? '1fr 2fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : '' @@ -233,6 +233,7 @@ const Leaderboard = (props) => { staticColumnElements={[ { name: 'id', format: null, order: 1, align: 'left' }, { name: 'submitter', format: null, order: 2, align: 'left' }, + { name: 'description', format: null, order: 3, align: 'left' }, { name: 'times', format: null, order: 4, align: 'left' }, { name: 'when', format: RENDER_WHEN, order: 5, align: 'right' }, ]} @@ -255,7 +256,6 @@ const Leaderboard = (props) => { width="72px" borderRadius="64px" pages={CALC_PAGES(entries, 2)} - number={`${pageNr} / ${CALC_PAGES(entries, 2)}`} /> From bab709a7eb9ddaf695c82d682265e557e85d8d86 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Wed, 10 May 2023 15:12:28 +0200 Subject: [PATCH 2/9] sorting by description in Leaderboard --- .../Leaderboard/Leaderboard.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js index c0b6fd4..8ffb2c6 100644 --- a/src/components/specific_challenge/Leaderboard/Leaderboard.js +++ b/src/components/specific_challenge/Leaderboard/Leaderboard.js @@ -22,6 +22,7 @@ const Leaderboard = (props) => { const [pageNr, setPageNr] = React.useState(1); const [loading, setLoading] = React.useState(true); const [submitterSorted, setSubmitterSorted] = React.useState(false); + const [descriptionSorted, setDescriptionSorted] = React.useState(false); const [entriesSorted, setEntriesSorted] = React.useState(false); const [whenSorted, setWhenSorted] = React.useState(false); const [scoresSorted, setScoresSorted] = React.useState([]); @@ -106,6 +107,27 @@ const Leaderboard = (props) => { setSubmitterSorted(true); } break; + case 'description': + if (descriptionSorted) { + newEntries = newEntries.sort((a, b) => + a.description.toLowerCase() < b.description.toLowerCase() + ? 1 + : b.description.toLowerCase() < a.description.toLowerCase() + ? -1 + : 0 + ); + setDescriptionSorted(false); + } else { + newEntries = newEntries.sort((a, b) => + a.description.toLowerCase() > b.description.toLowerCase() + ? 1 + : b.description.toLowerCase() > a.description.toLowerCase() + ? -1 + : 0 + ); + setDescriptionSorted(true); + } + break; case 'entries': if (entriesSorted) { newEntries = newEntries.sort((a, b) => b.times - a.times); From 9e9cd81a5443b95350025ecb16648999f542bde0 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Wed, 10 May 2023 18:54:04 +0200 Subject: [PATCH 3/9] generic PopUp component init --- src/components/generic/DropdownWithPopup.js | 28 +++++++++++- src/components/generic/ImageButton.js | 3 ++ src/components/generic/PopUp.js | 48 +++++++++++++++++++++ 3 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 src/components/generic/PopUp.js diff --git a/src/components/generic/DropdownWithPopup.js b/src/components/generic/DropdownWithPopup.js index cca1014..ddad43a 100644 --- a/src/components/generic/DropdownWithPopup.js +++ b/src/components/generic/DropdownWithPopup.js @@ -4,10 +4,29 @@ import { Medium } from '../../utils/fonts'; import theme from '../../utils/theme'; import ImageButton from './ImageButton'; import pencilIco from '../../assets/pencil_ico.svg'; +import styled from 'styled-components'; +import PopUp from './PopUp'; +import { createPortal } from 'react-dom'; + +const DropdownWithPopupStyle = styled(FlexColumn)` + cursor: pointer; + gap: 8px; + width: 100%; + align-items: flex-start; + * { + cursor: pointer; + } +`; const DropdownWithPopup = (props) => { + const [tagsPopUp, setTagsPopUp] = React.useState(false); + return ( - + { + if (!tagsPopUp) setTagsPopUp(true); + }} + > {props.label} @@ -29,7 +48,12 @@ const DropdownWithPopup = (props) => { - + {tagsPopUp && + createPortal( + setTagsPopUp(false)}>, + document.body + )} + ); }; diff --git a/src/components/generic/ImageButton.js b/src/components/generic/ImageButton.js index 91ca906..fd02d9e 100644 --- a/src/components/generic/ImageButton.js +++ b/src/components/generic/ImageButton.js @@ -5,6 +5,9 @@ const ImageButtonStyle = styled(FlexRow)` cursor: pointer; transition: transform ease-in-out 0.3s; transform: rotate(${({ rotate }) => (rotate ? rotate : '0')}); + * { + cursor: pointer; + } &:hover { transform: rotate(${({ rotate }) => (rotate ? rotate : '0')}), scale(1.2); } diff --git a/src/components/generic/PopUp.js b/src/components/generic/PopUp.js new file mode 100644 index 0000000..b57ad14 --- /dev/null +++ b/src/components/generic/PopUp.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { FlexColumn } from '../../utils/containers'; +import styled from 'styled-components'; + +const PopUpStyle = styled(FlexColumn)` + position: fixed; + top: 0; + left: 0; + z-index: 100; + width: 100%; + height: 100vh; + background-color: ${({ theme }) => theme.colors.dark01}; + + .PopUpStyle__body { + width: ${({ width }) => (width ? width : '60%')}; + min-height: ${({ minHeight }) => (minHeight ? minHeight : '50%')}; + padding: ${({ padding }) => (padding ? padding : '48px')}; + border-radius: 12px; + background-color: ${({ theme }) => theme.colors.white}; + } +`; + +const PopUp = (props) => { + const [onHover, setOnHover] = React.useState(false); + + const closePopUp = () => { + if (!onHover) props.closeHandler(); + }; + + return ( + + setOnHover(true)} + onMouseLeave={() => setOnHover(false)} + className="PopUpStyle__body" + > + {props.children} + + + ); +}; + +export default PopUp; From 1464bc084af79131c71a75bc1d6137ef56c62602 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Fri, 12 May 2023 11:50:02 +0200 Subject: [PATCH 4/9] popup with tags to choose init design complete --- src/components/generic/Button.js | 1 + src/components/generic/DropdownWithPopup.js | 64 ++++++++++++++++++++- src/components/generic/PopUp.js | 5 ++ src/components/specific_challenge/Submit.js | 2 +- src/utils/colors.js | 25 ++++---- src/utils/containers.js | 1 + 6 files changed, 84 insertions(+), 14 deletions(-) diff --git a/src/components/generic/Button.js b/src/components/generic/Button.js index 706c4a8..30ea679 100644 --- a/src/components/generic/Button.js +++ b/src/components/generic/Button.js @@ -33,6 +33,7 @@ const Button = (props) => { onClick={() => props.handler()} width={props.width} height={props.height} + margin={props.margin} color={props.color} backgroundColor={props.backgroundColor} to={props.to} diff --git a/src/components/generic/DropdownWithPopup.js b/src/components/generic/DropdownWithPopup.js index ddad43a..d4ab17a 100644 --- a/src/components/generic/DropdownWithPopup.js +++ b/src/components/generic/DropdownWithPopup.js @@ -7,6 +7,8 @@ import pencilIco from '../../assets/pencil_ico.svg'; import styled from 'styled-components'; import PopUp from './PopUp'; import { createPortal } from 'react-dom'; +import Search from './Search'; +import Button from './Button'; const DropdownWithPopupStyle = styled(FlexColumn)` cursor: pointer; @@ -50,7 +52,67 @@ const DropdownWithPopup = (props) => { {tagsPopUp && createPortal( - setTagsPopUp(false)}>, + setTagsPopUp(false)} + > + + + + {props.tags.map((tag, index) => { + return ( + + {tag.name} + + ); + })} + + + + + + + + , document.body )} diff --git a/src/components/generic/PopUp.js b/src/components/generic/PopUp.js index b57ad14..fee1adc 100644 --- a/src/components/generic/PopUp.js +++ b/src/components/generic/PopUp.js @@ -13,10 +13,13 @@ const PopUpStyle = styled(FlexColumn)` .PopUpStyle__body { width: ${({ width }) => (width ? width : '60%')}; + height: ${({ height }) => (height ? height : '50%')}; min-height: ${({ minHeight }) => (minHeight ? minHeight : '50%')}; padding: ${({ padding }) => (padding ? padding : '48px')}; + margin: ${({ margin }) => (margin ? margin : '0')}; border-radius: 12px; background-color: ${({ theme }) => theme.colors.white}; + justify-content: flex-start; } `; @@ -31,7 +34,9 @@ const PopUp = (props) => { { }; if (!loading) { - console.log(tags); return ( { - - - - - , - document.body - )} - - ); -}; - -export default DropdownWithPopup; diff --git a/src/pages/Submit.js b/src/pages/Submit/Submit.js similarity index 80% rename from src/pages/Submit.js rename to src/pages/Submit/Submit.js index 5592868..46eebfc 100644 --- a/src/pages/Submit.js +++ b/src/pages/Submit/Submit.js @@ -1,14 +1,14 @@ import React from 'react'; import { createPortal } from 'react-dom'; -import { FlexColumn } from '../utils/containers'; -import { H2, Menu } from '../utils/fonts'; -import SubmitInput from '../components/generic/SubmitInput'; -import Button from '../components/generic/Button'; -import theme from '../utils/theme'; -import challengeSubmission from '../api/challengeSubmissionPost'; -import Loading from '../components/generic/Loading'; -import getTags from '../api/getTags'; -import DropdownWithPopup from '../components/generic/DropdownWithPopup'; +import { FlexColumn } from '../../utils/containers'; +import { H2, Menu } from '../../utils/fonts'; +import SubmitInput from '../../components/generic/SubmitInput'; +import Button from '../../components/generic/Button'; +import theme from '../../utils/theme'; +import challengeSubmission from '../../api/challengeSubmissionPost'; +import Loading from '../../components/generic/Loading'; +import getTags from '../../api/getTags'; +import TagsChoose from './components/TagsChoose'; const Submit = (props) => { const [description, setDescription] = React.useState(''); @@ -55,7 +55,7 @@ const Submit = (props) => { /> - { + const [tagsPopUp, setTagsPopUp] = React.useState(false); + + return ( + { + if (!tagsPopUp) setTagsPopUp(true); + }} + > + + {props.label} + + props.handler(e.target.value)} + > + tags + + + {tagsPopUp && + createPortal( + , + document.body + )} + + ); +}; + +export default TagsChoose; diff --git a/src/pages/Submit/components/TagsChoose/TagsChooseStyle.js b/src/pages/Submit/components/TagsChoose/TagsChooseStyle.js new file mode 100644 index 0000000..b287546 --- /dev/null +++ b/src/pages/Submit/components/TagsChoose/TagsChooseStyle.js @@ -0,0 +1,30 @@ +import styled from 'styled-components'; +import { FlexColumn } from '../../../../utils/containers'; + +const TagsChooseStyle = styled(FlexColumn)` + cursor: pointer; + gap: 8px; + width: 100%; + align-items: flex-start; + * { + cursor: pointer; + } + + .TagsChooseStyle__grid { + border-radius: 4px; + width: 100%; + height: 100px; + border: 1px solid ${({ theme }) => theme.colors.dark}; + box-shadow: 1px 2px 4px rgba(52, 52, 52, 0.25); + padding: 12px; + grid-template-columns: 1fr auto; + } + + .TagsChooseStyle__tags-container { + height: 100%; + justify-content: flex-start; + align-items: flex-start; + } +`; + +export default TagsChooseStyle; diff --git a/src/pages/Submit/components/TagsChoose/index.js b/src/pages/Submit/components/TagsChoose/index.js new file mode 100644 index 0000000..05aa6f3 --- /dev/null +++ b/src/pages/Submit/components/TagsChoose/index.js @@ -0,0 +1 @@ +export { default } from './TagsChoose'; diff --git a/src/pages/Submit/components/TagsChoosePopUp.js b/src/pages/Submit/components/TagsChoosePopUp.js new file mode 100644 index 0000000..abd4f01 --- /dev/null +++ b/src/pages/Submit/components/TagsChoosePopUp.js @@ -0,0 +1,67 @@ +import React from 'react'; +import PopUp from '../../../components/generic/PopUp'; +import { FlexColumn, FlexRow } from '../../../utils/containers'; +import Search from '../../../components/generic/Search'; +import theme from '../../../utils/theme'; +import Button from '../../../components/generic/Button'; + +const TagsChoosePopUp = (props) => { + return ( + props.setTagsPopUp(false)} + > + + + + {props.tags.map((tag, index) => { + return ( + + {tag.name} + + ); + })} + + + + + + + + + ); +}; + +export default TagsChoosePopUp; diff --git a/src/pages/Submit/index.js b/src/pages/Submit/index.js new file mode 100644 index 0000000..b5be4d5 --- /dev/null +++ b/src/pages/Submit/index.js @@ -0,0 +1 @@ +export { default } from './Submit'; From ce924995281712f0a0f89f62c6145d383d7c9345 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Fri, 12 May 2023 12:58:43 +0200 Subject: [PATCH 7/9] refactor TagsChoosePopUp component --- .../components/TagsChoose/TagsChoose.js | 2 +- .../{ => TagsChoosePopup}/TagsChoosePopUp.js | 28 +++++++------------ .../TagsChoosePopup/TagsChoosePopUpStyle.js | 25 +++++++++++++++++ .../components/TagsChoosePopup/index.js | 1 + 4 files changed, 37 insertions(+), 19 deletions(-) rename src/pages/Submit/components/{ => TagsChoosePopup}/TagsChoosePopUp.js (64%) create mode 100644 src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js create mode 100644 src/pages/Submit/components/TagsChoosePopup/index.js diff --git a/src/pages/Submit/components/TagsChoose/TagsChoose.js b/src/pages/Submit/components/TagsChoose/TagsChoose.js index 3413219..42eabbd 100644 --- a/src/pages/Submit/components/TagsChoose/TagsChoose.js +++ b/src/pages/Submit/components/TagsChoose/TagsChoose.js @@ -3,7 +3,7 @@ import { FlexRow, Grid } from '../../../../utils/containers'; import { Medium } from '../../../../utils/fonts'; import ImageButton from '../../../../components/generic/ImageButton'; import pencilIco from '../../../../assets/pencil_ico.svg'; -import TagsChoosePopUp from '../TagsChoosePopUp'; +import TagsChoosePopUp from '../TagsChoosePopup/TagsChoosePopUp'; import { createPortal } from 'react-dom'; import TagsChooseStyle from './TagsChooseStyle'; diff --git a/src/pages/Submit/components/TagsChoosePopUp.js b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js similarity index 64% rename from src/pages/Submit/components/TagsChoosePopUp.js rename to src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js index abd4f01..16de725 100644 --- a/src/pages/Submit/components/TagsChoosePopUp.js +++ b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js @@ -1,9 +1,10 @@ import React from 'react'; -import PopUp from '../../../components/generic/PopUp'; -import { FlexColumn, FlexRow } from '../../../utils/containers'; -import Search from '../../../components/generic/Search'; -import theme from '../../../utils/theme'; -import Button from '../../../components/generic/Button'; +import PopUp from '../../../../components/generic/PopUp'; +import { FlexColumn, FlexRow } from '../../../../utils/containers'; +import Search from '../../../../components/generic/Search'; +import theme from '../../../../utils/theme'; +import Button from '../../../../components/generic/Button'; +import TagsChoosePopUpStyle from './TagsChoosePopUpStyle'; const TagsChoosePopUp = (props) => { return ( @@ -13,26 +14,17 @@ const TagsChoosePopUp = (props) => { padding="36px 32px 0" closeHandler={() => props.setTagsPopUp(false)} > - + - + {props.tags.map((tag, index) => { return ( {tag.name} @@ -59,7 +51,7 @@ const TagsChoosePopUp = (props) => { Cancel - + ); }; diff --git a/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js new file mode 100644 index 0000000..127c11d --- /dev/null +++ b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js @@ -0,0 +1,25 @@ +import styled from 'styled-components'; +import { FlexColumn } from '../../../../utils/containers'; + +const TagsChoosePopUpStyle = styled(FlexColumn)` + width: 100%; + justify-content: flex-start; + height: 100%; + gap: 24px; + + .TagsChoosePopUpStyle__tags-list { + height: 80%; + width: 100%; + overflow-y: scroll; + justify-content: flex-start; + } + + .TagsChoosePopUpStyle__tag-item { + height: 48px; + width: 100%; + justify-content: flex-start; + padding: 12px; + } +`; + +export default TagsChoosePopUpStyle; diff --git a/src/pages/Submit/components/TagsChoosePopup/index.js b/src/pages/Submit/components/TagsChoosePopup/index.js new file mode 100644 index 0000000..a4781d6 --- /dev/null +++ b/src/pages/Submit/components/TagsChoosePopup/index.js @@ -0,0 +1 @@ +export { default } from './TagsChoosePopUp'; From 9458061f29913601339e691431b22337646248f5 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Mon, 15 May 2023 11:31:02 +0200 Subject: [PATCH 8/9] adding submission tags --- src/api/challengeSubmissionPost.js | 5 +- src/api/getChallenges.js | 2 +- src/api/getTags.js | 5 +- src/pages/Challanges/Challenges.js | 2 +- .../Challanges/components/ChallengesMobile.js | 2 +- .../components/FiltersMenu/FiltersMenu.js | 2 +- .../functions/challengeSearchQueryHandler.js | 2 +- .../functions/statusFilterHandle.js | 2 +- ...ngesActionEnum.js => ChallengesActions.js} | 0 .../Challanges/model/ChallengesReducer.js | 2 +- src/pages/Submit/Submit.js | 52 +++++++++++++------ .../components/TagsChoose/TagsChoose.js | 7 ++- .../TagsChoosePopup/TagsChoosePopUp.js | 11 ++-- .../TagsChoosePopup/TagsChoosePopUpStyle.js | 8 ++- .../functions/tagColorHandle.js | 7 +++ src/pages/Submit/model/SubmitActionEnum.js | 12 +++++ src/pages/Submit/model/SubmitReducer.js | 30 +++++++++++ 17 files changed, 119 insertions(+), 32 deletions(-) rename src/pages/Challanges/model/{ChallengesActionEnum.js => ChallengesActions.js} (100%) create mode 100644 src/pages/Submit/components/TagsChoosePopup/functions/tagColorHandle.js create mode 100644 src/pages/Submit/model/SubmitActionEnum.js create mode 100644 src/pages/Submit/model/SubmitReducer.js diff --git a/src/api/challengeSubmissionPost.js b/src/api/challengeSubmissionPost.js index b0d5d10..7a0b5da 100644 --- a/src/api/challengeSubmissionPost.js +++ b/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); diff --git a/src/api/getChallenges.js b/src/api/getChallenges.js index a5c790a..26d8a3f 100644 --- a/src/api/getChallenges.js +++ b/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) => { diff --git a/src/api/getTags.js b/src/api/getTags.js index 4ed6e76..fc1f959 100644 --- a/src/api/getTags.js +++ b/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 }); }); }; diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js index 79daa46..ae98353 100644 --- a/src/pages/Challanges/Challenges.js +++ b/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, { diff --git a/src/pages/Challanges/components/ChallengesMobile.js b/src/pages/Challanges/components/ChallengesMobile.js index 63cceaa..939da5f 100644 --- a/src/pages/Challanges/components/ChallengesMobile.js +++ b/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 ( diff --git a/src/pages/Challanges/components/FiltersMenu/FiltersMenu.js b/src/pages/Challanges/components/FiltersMenu/FiltersMenu.js index 8e10e33..7f76e7c 100644 --- a/src/pages/Challanges/components/FiltersMenu/FiltersMenu.js +++ b/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; diff --git a/src/pages/Challanges/functions/challengeSearchQueryHandler.js b/src/pages/Challanges/functions/challengeSearchQueryHandler.js index 90f279e..7cc4a90 100644 --- a/src/pages/Challanges/functions/challengeSearchQueryHandler.js +++ b/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; diff --git a/src/pages/Challanges/functions/statusFilterHandle.js b/src/pages/Challanges/functions/statusFilterHandle.js index 4e3bfef..48af319 100644 --- a/src/pages/Challanges/functions/statusFilterHandle.js +++ b/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; diff --git a/src/pages/Challanges/model/ChallengesActionEnum.js b/src/pages/Challanges/model/ChallengesActions.js similarity index 100% rename from src/pages/Challanges/model/ChallengesActionEnum.js rename to src/pages/Challanges/model/ChallengesActions.js diff --git a/src/pages/Challanges/model/ChallengesReducer.js b/src/pages/Challanges/model/ChallengesReducer.js index 6b42f7a..99ac043 100644 --- a/src/pages/Challanges/model/ChallengesReducer.js +++ b/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) { diff --git a/src/pages/Submit/Submit.js b/src/pages/Submit/Submit.js index 46eebfc..c1230e8 100644 --- a/src/pages/Submit/Submit.js +++ b/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 ( { - + ); } else { return createPortal( diff --git a/src/pages/Submit/SubmitStyle.js b/src/pages/Submit/SubmitStyle.js new file mode 100644 index 0000000..a06c8e6 --- /dev/null +++ b/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; diff --git a/src/pages/Submit/components/TagsChoose/TagsChoose.js b/src/pages/Submit/components/TagsChoose/TagsChoose.js index 7d6a197..2e99c34 100644 --- a/src/pages/Submit/components/TagsChoose/TagsChoose.js +++ b/src/pages/Submit/components/TagsChoose/TagsChoose.js @@ -23,7 +23,16 @@ const TagsChoose = (props) => { className="TagsChooseStyle__grid" onChange={(e) => props.handler(e.target.value)} > - tags + + {props.submissionTags.map((tag, i) => + i === 0 ? tag.name : `, ${tag.name}` + )} + {tagsPopUp && @@ -31,8 +40,9 @@ const TagsChoose = (props) => { , document.body )} diff --git a/src/pages/Submit/components/TagsChoose/TagsChooseStyle.js b/src/pages/Submit/components/TagsChoose/TagsChooseStyle.js index b287546..7d859c2 100644 --- a/src/pages/Submit/components/TagsChoose/TagsChooseStyle.js +++ b/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; } `; diff --git a/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js index c0e485d..9df83b2 100644 --- a/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js +++ b/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) => { > - - {props.tags.map((tag, index) => { - return ( - props.addSubmissionTag(tag.name)} - className="TagsChoosePopUpStyle__tag-item" - backgroundColor={tagColorHandle( - theme, - index, - tag, - props.submissionTags - )} - > - {tag.name} - - ); - })} + + {renderTagItems( + props.submissionTags, + props.toggleSubmissionTag, + `1px dotted ${theme.colors.green}`, + theme.colors.green03, + true + )} + {renderTagItems(props.tags, props.toggleSubmissionTag, 'none')} @@ -52,6 +44,7 @@ const TagsChoosePopUp = (props) => { width="76px" backgroundColor={theme.colors.dark} margin="0 0 0 auto" + handler={() => props.setTagsPopUp(false)} > Cancel diff --git a/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js index 5d34cde..fce2abf 100644 --- a/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js +++ b/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; diff --git a/src/pages/Submit/components/TagsChoosePopup/functions/renderTagItems.js b/src/pages/Submit/components/TagsChoosePopup/functions/renderTagItems.js new file mode 100644 index 0000000..fa83db4 --- /dev/null +++ b/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 ( + toggleTag(tag)} + className="TagsChoosePopUpStyle__tag-item" + backgroundColor={ + backgroundColor + ? backgroundColor + : tagBackgroundColorHandle(theme, index) + } + border={border} + > + {tag.name} + {submissionTags && ( + + )} + + ); + }); +}; + +export default renderTagItems; diff --git a/src/pages/Submit/components/TagsChoosePopup/functions/tagBackgroundColorHandle.js b/src/pages/Submit/components/TagsChoosePopup/functions/tagBackgroundColorHandle.js new file mode 100644 index 0000000..aaf118f --- /dev/null +++ b/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; diff --git a/src/pages/Submit/components/TagsChoosePopup/functions/tagColorHandle.js b/src/pages/Submit/components/TagsChoosePopup/functions/tagColorHandle.js deleted file mode 100644 index 379e6ed..0000000 --- a/src/pages/Submit/components/TagsChoosePopup/functions/tagColorHandle.js +++ /dev/null @@ -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; diff --git a/src/pages/Submit/model/SubmitActionEnum.js b/src/pages/Submit/model/SubmitActionEnum.js index 5cd4e7d..c57bb6e 100644 --- a/src/pages/Submit/model/SubmitActionEnum.js +++ b/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', - REMOVE_SUBMISSION_TAGS: 'remove_submission_tag', + ADD_SUBMISSION_TAG: 'add_submission_tag', + REMOVE_SUBMISSION_TAG: 'remove_submission_tag', CLEAR_SUBMISSION_TAGS: 'clear_submission_tags', }; diff --git a/src/pages/Submit/model/SubmitReducer.js b/src/pages/Submit/model/SubmitReducer.js index 8d23d17..803269b 100644 --- a/src/pages/Submit/model/SubmitReducer.js +++ b/src/pages/Submit/model/SubmitReducer.js @@ -1,9 +1,9 @@ import SUBMIT_ACTION from './SubmitActionEnum'; const SubmitReducer = (state, action) => { - console.log('SubmitReducer'); - let initTags = state.tags; + console.log(`SubmitReducer: ${action.type}`); 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; - return { ...state, tags: initTags }; + if (state.tags.length === 0) newTags = action.payload; + 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: