From 8177028937a44f8bd79991ff767139455aef45cf Mon Sep 17 00:00:00 2001 From: nqv Date: Sun, 4 Apr 2021 00:07:13 +0700 Subject: [PATCH 1/2] fix review feedbacks (WIP) --- src/actions/auth.js | 8 -- src/actions/challenges.js | 89 +++++++++------ src/actions/filter.js | 5 + src/assets/icons/card-view.svg | 10 ++ src/assets/icons/list-view.svg | 10 ++ src/assets/icons/not-found-recommended.png | Bin 0 -> 1292 bytes src/components/Button/index.jsx | 18 +++- src/components/Button/styles.scss | 14 ++- src/components/Checkbox/index.jsx | 6 +- .../DateRangePicker/DateInput/index.jsx | 77 +++++++++++-- .../DateRangePicker/DateInput/styles.scss | 37 ++++++- src/components/DateRangePicker/helpers.js | 10 +- src/components/DateRangePicker/index.jsx | 102 +++++++++++++----- src/components/DateRangePicker/style.scss | 21 +++- src/components/Menu/index.jsx | 2 + src/components/Menu/styles.scss | 19 +++- src/components/Pagination/index.jsx | 4 +- src/components/Pagination/styles.scss | 3 +- src/components/Toggle/index.jsx | 6 +- src/constants/index.js | 15 ++- .../Listing/ChallengeError/index.jsx | 33 ++++-- .../ChallengeItem/NumRegistrants/styles.scss | 2 +- .../ChallengeItem/NumSubmissions/styles.scss | 2 +- .../ChallengeItem/PhaseEndDate/index.jsx | 3 +- .../Listing/ChallengeItem/Prize/styles.scss | 4 + .../ChallengeItem/TrackIcon/styles.scss | 2 + .../Listing/ChallengeItem/styles.scss | 19 +++- src/containers/Challenges/Listing/index.jsx | 11 +- src/containers/Challenges/index.jsx | 30 +++++- src/containers/Challenges/styles.scss | 8 ++ .../Filter/ChallengeFilter/index.jsx | 69 +++++++++--- .../Filter/ChallengeFilter/styles.scss | 13 +++ src/containers/Filter/index.jsx | 13 +++ src/reducers/challenges.js | 43 +++++++- src/reducers/filter.js | 15 ++- src/root.component.js | 7 ++ src/services/challenges.js | 6 ++ src/store.js | 8 +- src/styles/_variables.scss | 3 + src/utils/challenge.js | 12 ++- src/utils/icon.js | 12 ++- src/utils/index.js | 4 +- src/utils/menu.js | 16 +-- src/utils/pagination.js | 10 +- src/utils/session.js | 29 +++++ src/utils/tag.js | 2 +- src/utils/url.js | 2 +- 47 files changed, 674 insertions(+), 160 deletions(-) delete mode 100644 src/actions/auth.js create mode 100644 src/assets/icons/card-view.svg create mode 100644 src/assets/icons/list-view.svg create mode 100644 src/assets/icons/not-found-recommended.png create mode 100644 src/utils/session.js diff --git a/src/actions/auth.js b/src/actions/auth.js deleted file mode 100644 index 18e177a..0000000 --- a/src/actions/auth.js +++ /dev/null @@ -1,8 +0,0 @@ -import { createActions } from "redux-actions"; -import service from "../services/lookup"; - -async function getMemberGroups() {} - -export default createActions({ - GET_MEMBER_GROUPS: getMemberGroups, -}); diff --git a/src/actions/challenges.js b/src/actions/challenges.js index 304fa5c..60e78f9 100644 --- a/src/actions/challenges.js +++ b/src/actions/challenges.js @@ -7,10 +7,10 @@ async function doGetChallenges(filter) { return service.getChallenges(filter); } -async function getActiveChallenges(filter) { +async function getAllActiveChallenges(filter) { const activeFilter = { ...util.createChallengeCriteria(filter), - ...util.createActiveChallengeCriteria(), + ...util.createAllActiveChallengeCriteria(), }; return doGetChallenges(activeFilter); } @@ -23,14 +23,20 @@ async function getOpenForRegistrationChallenges(filter) { return doGetChallenges(openForRegistrationFilter); } -async function getPastChallenges(filter) { +async function getClosedChallenges(filter) { const pastFilter = { ...util.createChallengeCriteria(filter), - ...util.createPastChallengeCriteria(), + ...util.createClosedChallengeCriteria(), }; return doGetChallenges(pastFilter); } +async function getRecommendedChallenges(filter) { + const result = [] + result.meta = { total: 0 } + return result; +} + function doFilterBySubSommunities(challenges) { return challenges; } @@ -43,46 +49,69 @@ function doFilterByPrizeTo(challenges) { async function getChallenges(filter, change) { const FILTER_BUCKETS = constants.FILTER_BUCKETS; - let challenges; - let challengesFiltered; - let total; - let filterChange = change; - - const getChallengesByBucket = async (f) => { - switch (f.bucket) { - case FILTER_BUCKETS[0]: - return getActiveChallenges(f); - case FILTER_BUCKETS[1]: - return getOpenForRegistrationChallenges(f); - case FILTER_BUCKETS[2]: - return getPastChallenges(f); - default: - return []; - } + const BUCKET_ALL_ACTIVE_CHALLENGES = FILTER_BUCKETS[0]; + const BUCKET_OPEN_FOR_REGISTRATION = FILTER_BUCKETS[1]; + const BUCKET_PAST_CHALLENGES = FILTER_BUCKETS[2]; + const filterChange = change; + const bucket = filter.bucket; + + const getChallengesByBuckets = async (f) => { + return FILTER_BUCKETS.includes(f.bucket) + ? Promise.all([ + getAllActiveChallenges(f), + f.recommended ? getRecommendedChallenges() : getOpenForRegistrationChallenges(f), + getClosedChallenges(f) + ]) + : [[], [], []] }; + if (!filterChange) { + let [allActiveChallenges, openForRegistrationChallenges, closedChallenges] = await getChallengesByBuckets(filter) + let challenges; + let openForRegistrationCount; + let total; + + switch (bucket) { + case BUCKET_ALL_ACTIVE_CHALLENGES: challenges = allActiveChallenges; break; + case BUCKET_OPEN_FOR_REGISTRATION: challenges = openForRegistrationChallenges; break; + case BUCKET_PAST_CHALLENGES: challenges = closedChallenges; break; + } + openForRegistrationCount = openForRegistrationChallenges.meta.total; + total = challenges.meta.total; + + return { challenges, total, openForRegistrationCount, allActiveChallenges, openForRegistrationChallenges, closedChallenges }; + } + if (!util.checkRequiredFilterAttributes(filter)) { return { challenges: [], challengesFiltered: [], total: 0 }; } - if (!filterChange) { - const chs = await getChallengesByBucket(filter); - return { challenges: chs, challengesFiltered: chs, total: chs.meta.total }; - } + let allActiveChallenges; + let openForRegistrationChallenges; + let closedChallenges; + let challenges; + let openForRegistrationCount; + let total; if (util.shouldFetchChallenges(filterChange)) { - challenges = await getChallengesByBucket(filter); + [allActiveChallenges, openForRegistrationChallenges, closedChallenges] = await getChallengesByBuckets(filter) + switch (bucket) { + case BUCKET_ALL_ACTIVE_CHALLENGES: challenges = allActiveChallenges; break; + case BUCKET_OPEN_FOR_REGISTRATION: challenges = openForRegistrationChallenges; break; + case BUCKET_PAST_CHALLENGES: challenges = closedChallenges; break; + } } - challengesFiltered = challenges; + openForRegistrationCount = openForRegistrationChallenges.meta.total; total = challenges.meta.total; + if (util.shouldFilterChallenges(filterChange)) { - challengesFiltered = doFilterBySubSommunities(challengesFiltered); - challengesFiltered = doFilterByPrizeFrom(challengesFiltered); - challengesFiltered = doFilterByPrizeTo(challengesFiltered); + challenges = doFilterBySubSommunities(challenges); + challenges = doFilterByPrizeFrom(challenges); + challenges = doFilterByPrizeTo(challenges); } - return { challenges, challengesFiltered, total }; + return { challenges, total, openForRegistrationCount, allActiveChallenges, openForRegistrationChallenges, closedChallenges }; } export default createActions({ diff --git a/src/actions/filter.js b/src/actions/filter.js index 5d3944b..1cb8fd6 100644 --- a/src/actions/filter.js +++ b/src/actions/filter.js @@ -1,9 +1,14 @@ import { createActions } from "redux-actions"; +function restoreFilter (filter) { + return filter; +} + function updateFilter(partialUpdate) { return partialUpdate; } export default createActions({ + RESTORE_FILTER: restoreFilter, UPDATE_FILTER: updateFilter, }); diff --git a/src/assets/icons/card-view.svg b/src/assets/icons/card-view.svg new file mode 100644 index 0000000..a25ef80 --- /dev/null +++ b/src/assets/icons/card-view.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/list-view.svg b/src/assets/icons/list-view.svg new file mode 100644 index 0000000..ea5bd21 --- /dev/null +++ b/src/assets/icons/list-view.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/not-found-recommended.png b/src/assets/icons/not-found-recommended.png new file mode 100644 index 0000000000000000000000000000000000000000..728a77b966448a7d59479213b6b1033db790ed41 GIT binary patch literal 1292 zcmV+n1@roeP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1ffYpK~z{r&6oF2 z{#==Ntrxj0i$R5d;VjIU_)15IN_Z=Du;&8SmJ`GG3&;_ru6t)$Zr6epS`; zkMA$xe@XoE@-j6wRa8_I6B82=5s{Xb*3{H=aB!gRKSNOB{r!EI3^%m4w!Xc+={&D+ zC*IrJi;RqfgWr~xmW73dwY9a;(b3GzOyRDsuKxJ=(Al2gLj3snn39sh>KPds=jZ2Y zHSzxb-qX_~+{44eYV`ycVs<7=6Y8Cv9ktp(sPV?f$0GtYg$@_uyu3Ui24P`gRaI51 ztEb+xq(Y%*@Q#*cf&z z(?&){bVlfKA?8q7w7k4r#}1He{{0%p;o+g0LWc`6l96@oo3?<;a&vR>qJTe1Wfx*l zSy{=_2x?$p;Pv%Ytv(-H6vg3k&9v{sotQ%{C@Apn+Auisii(Q5x;iV(V4aR+7e{QSK2q13gnr5BW#u254`6BQLD3t6Cs^!D~TyA!7)dB`Wq0|h{RZg3%{F|aw4 zMG+kxotT(tFC)%kNieYUp-)dwB)v?#xw%od1A)X_TU&8)aq?POSsBr@PK!duEr9J3 ze3I(=`kIo0%1%#DiGOWvEw4}mWTq@KF)=}G$a^jni;Ii)rt%B1)rQ&M#>R$P-LSm8 zY(E8PBp!TR5Tiwl|XNzBfYl9F)K?b(f5-N1HbLo^ITWUlE4hiaWY z=f&5n!!T&@qB|;tO!y>jZ*RweF3!%*)D#5t4|6r+_V$(_6KW2a)=7kQh6&`xNfBY$ zh9v^=DltC!B5na<`2ts0S0=AP%BtxQ7M>|DJm1~j`FYIS1VaiD z&t#gt>M5~^9)Za4JK%C6DTI6&^3gnV^`{bykB{>V&4=Qm{nK;SY^l#!p81(U;}#Q6>6Cby%57E#9VL5d#W_r ( - ); @@ -14,4 +14,20 @@ Button.propTypes = { onClick: PT.func, }; +const ButtonIcon = ({ children, onClick }) => ( + +) + +ButtonIcon.propTypes = { + children: PT.node, + onClick: PT.func, +}; + +export { + Button, + ButtonIcon, +} + export default Button; diff --git a/src/components/Button/styles.scss b/src/components/Button/styles.scss index 88f1d74..608f1ec 100644 --- a/src/components/Button/styles.scss +++ b/src/components/Button/styles.scss @@ -22,5 +22,15 @@ background-color: $green; } -.button-lg {} -.button-sm {} +.button-icon { + width: 32px; + height: 32px; + padding: 0; + line-height: 0; + text-align: center; + vertical-align: middle; + appearance: none; + background: none; + border: 0; + border-radius: 50%; +} diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx index 10343de..da5ce11 100644 --- a/src/components/Checkbox/index.jsx +++ b/src/components/Checkbox/index.jsx @@ -1,7 +1,7 @@ /** * Checkbox component. */ -import React, { useRef, useState } from "react"; +import React, { useRef, useState, useEffect } from "react"; import PT from "prop-types"; import _ from "lodash"; import "./styles.scss"; @@ -22,6 +22,10 @@ function Checkbox({ checked, onChange, size, errorMsg }) { _.debounce((q, cb) => cb(q), process.env.GUIKIT.DEBOUNCE_ON_CHANGE_TIME) // eslint-disable-line no-undef ).current; + useEffect(() => { + setCheckedInternal(checked) + }, [checked]) + return (