fix review feedbacks (WIP)

Author: nqviet

src/actions/auth.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({

src/actions/challenges.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,
 });

src/actions/filter.js

@@ -4,7 +4,7 @@ import PT from "prop-types";
 import "./styles.scss";
 
 const Button = ({ children, onClick }) => (
-  <button styleName="button" onClick={onClick}>
+  <button styleName="button" onClick={onClick} type="button">
     {children}
   </button>
 );
@@ -14,4 +14,20 @@ Button.propTypes = {
   onClick: PT.func,
 };
 
+const ButtonIcon = ({ children, onClick }) => (
+  <button styleName="button-icon" onClick={onClick} type="button">
+    {children}
+  </button>
+)
+
+ButtonIcon.propTypes = {
+  children: PT.node,
+  onClick: PT.func,
+};
+
+export {
+  Button,
+  ButtonIcon,
+}
+
 export default Button;

src/assets/icons/card-view.svg

@@ -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%;
+}

src/assets/icons/list-view.svg

@@ -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 (
     <label styleName={`container ${sizeStyle}`}>
       <input

src/assets/icons/not-found-recommended.png

@@ -1,15 +1,78 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import PT from "prop-types";
 import TextInput from "../../TextInput";
+import CalendarIcon from 'assets/icons/icon-calendar.svg';
 
 import "./styles.scss";
 
-const DateInput = ({ value, onClick }) => (
-  <div onClick={onClick} styleName="date-range-input">
-    <TextInput label="From" size="xs" value={value} readonly />
-  </div>
-);
+const DateInput = ({
+  id,
+  isStartDateActive,
+  startDateString,
+  onStartDateChange,
+  onStartDateFocus,
+  isEndDateActive,
+  endDateString,
+  onEndDateChange,
+  onEndDateFocus,
+  error,
+  onClickCalendarIcon
+}) => {
+  const ref = useRef(null);
 
-DateInput.propTypes = {};
+  let rangeText;
+  if (startDateString && endDateString) {
+    rangeText = `${startDateString} - ${endDateString}`;
+  } else {
+    rangeText = `${startDateString}${endDateString}`;
+  }
+
+  const onChangeRangeText = (value) => {
+    const [start, end] = value.trim().split(' - ')
+    const event = { startDateString: start, endDateString: end }
+    onStartDateChange(event)
+    onEndDateChange(event)
+  }
+
+  const onFocusInput = (e) => {
+    if (startDateString) {
+      onEndDateFocus()
+    } else {
+      onStartDateFocus()
+    }
+  }
+
+  useEffect(() => {
+    const inputElement = ref.current.querySelector('input');
+    inputElement.addEventListener('focus', onFocusInput);
+
+    return () => {
+      inputElement.removeEventListener('focus', onFocusInput);
+    }
+  })
+
+  const onClickIcon = () => {
+    if (startDateString) {
+      onClickCalendarIcon('end')
+    } else {
+      onClickCalendarIcon('start')
+    }
+  }
+
+  return (
+    <div styleName={`container ${error ? 'isError' : ''}`}>
+      <div styleName="date-range-input input-group" ref={ref}>
+        <TextInput label="From" size="xs" value={rangeText} onChange={onChangeRangeText} />
+        <div id="input-date-range-calendar-icon" styleName="icon" role="button" onClick={onClickIcon}><CalendarIcon /></div>
+      </div>
+      <div styleName="errorHint">{error}</div>
+    </div>
+  );
+}
+
+
+DateInput.propTypes = {
+  onClick: PT.func,
+};
 
 export default DateInput;

src/components/Button/index.jsx

@@ -1,11 +1,44 @@
 @import "styles/variables";
 
+.container {
+  &.isError {
+    input {
+      border: 1px solid $tc-level-5;
+    }
+
+    .errorHint {
+      display: block;
+      color: $tc-level-5;
+      font-size: 12px;
+      padding: 4px 0;
+      height: 20px;
+    }
+  }
+}
+
 .date-range-input {
   width: 230px;
+  margin-top: -12px;
   font-size: $font-size-sm;
+}
+
+.input-group {
+  position: relative;
+
+  .icon {
+    position: absolute;
+    top: 22px;
+    right: 14px;
+    z-index: 1;
+    display: block;
+    cursor: pointer;
+  }
 
   input {
-    color: $body-color !important;
-    border-color: $tc-gray-30 !important;
+    padding-right: 46px !important;
   }
 }
+
+.errorHint {
+  display: none;
+}

src/components/Button/styles.scss

@@ -50,11 +50,11 @@ const staticRangeHandler = {
  * @return {object[]} list of defined ranges
  */
 export function createStaticRanges() {
-  const now = moment();
-  const pastWeek = moment().subtract(1, "week");
-  const pastMonth = moment().subtract(1, "month");
-  const past6Months = moment().subtract(6, "month");
-  const pastYear = moment().subtract(1, "year");
+  const now = moment().utcOffset(0);
+  const pastWeek = now.clone().subtract(1, "week");
+  const pastMonth = now.clone().subtract(1, "month");
+  const past6Months = now.clone().subtract(6, "month");
+  const pastYear = now.clone().subtract(1, "year");
 
   const ranges = [
     {