s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

submission tags add, remove, clear, post

Browse Source
This commit is contained in:
Mateusz Tylka 2023-05-17 14:16:12 +02:00
parent 9458061f29
commit 55316d5509
14 changed files with 146 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/challengeSubmissionPost.js
View File

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

3
src/assets/remove_ico.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

6
src/index.js
View File

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

38
src/pages/Submit/Submit.js
View File

@ -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) => {
dispatch({ type: SUBMIT_ACTION.ADD_SUBMISSION_TAG, 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 });
};
if (!state.submissionLoading) {
return (
<FlexColumn
margin="40px 0 0 0"
padding="24px"
as="section"
gap="64px"
maxWidth="624px"
width="100%"
alignmentX="flex-start"
>
<H2 as="h2" width="100%" textAlign="center">
<SubmitStyle as="section">
<H2 as="h2" className="SubmitStyle__header">
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(

23
src/pages/Submit/SubmitStyle.js Normal file
View File

@ -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;

14
src/pages/Submit/components/TagsChoose/TagsChoose.js
View File

@ -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
)}

1
src/pages/Submit/components/TagsChoose/TagsChooseStyle.js
View File

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

31
src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js
View File

@ -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">
{props.tags.map((tag, index) => {
return (
<FlexRow
key={`tag-${index}`}
onClick={() => props.addSubmissionTag(tag.name)}
className="TagsChoosePopUpStyle__tag-item"
backgroundColor={tagColorHandle(
theme,
index,
tag,
props.submissionTags
)}
>
{tag.name}
</FlexRow>
);
})}
<FlexColumn as="ul" className="TagsChoosePopUpStyle__tags-list">
{renderTagItems(
props.submissionTags,
props.toggleSubmissionTag,
`1px dotted ${theme.colors.green}`,
theme.colors.green03,
true
)}
{renderTagItems(props.tags, props.toggleSubmissionTag, 'none')}
</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>

2
src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js
View File

@ -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;

42
src/pages/Submit/components/TagsChoosePopup/functions/renderTagItems.js Normal file
View File

@ -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;

6
src/pages/Submit/components/TagsChoosePopup/functions/tagBackgroundColorHandle.js Normal file
View File

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

7
src/pages/Submit/components/TagsChoosePopup/functions/tagColorHandle.js
View File

@ -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;

4
src/pages/Submit/model/SubmitActionEnum.js
View File

@ -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',
};

24
src/pages/Submit/model/SubmitReducer.js
View File

@ -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: