Merge pull request #5586 from topcoder-platform/thrive-bug-fixes3

Thrive bug fixes3

Author: luizrrodrigues

__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap

@@ -38,6 +38,8 @@ exports[`Default render 1`] = `
     isRTL={false}
     keepFocusOnInput={false}
     keepOpenOnDateSelect={false}
+    maxDate={null}
+    minDate={null}
     monthFormat="MMMM YYYY"
     navNext={
       <IconNext

src/shared/components/Contentful/ArticleCard/ArticleCard.jsx

@@ -250,7 +250,7 @@ class ArticleCard extends React.Component {
                       {
                         showArticleInfo() && (
                           <p className={theme.readTimeInfo}>
-                            {themeName === 'Article large' ? <span>&nbsp;.&nbsp;</span> : null}
+                            {themeName === 'Article large' && contentAuthor && contentAuthor.length > 0 ? <span>&nbsp;.&nbsp;</span> : null}
                             {
                               contentAuthor && contentAuthor.length > 0 ? (
                                 <Link

src/shared/components/Contentful/SearchPageFilter/FilterDate/index.jsx

@@ -5,9 +5,8 @@ import moment from 'moment';
 import PT from 'prop-types';
 import React from 'react';
 import { themr } from 'react-css-super-themr';
-import DatePicker from 'components/challenge-listing/Filters/DatePicker';
+import Datepicker from 'components/GUIKit/Datepicker';
 import CalendarWeek from 'react-dates/lib/components/CalendarWeek';
-import IconCalendar from 'assets/images/tc-edu/icon-calendar.svg';
 import defaultTheme from './themes/default.scss';
 
 // eslint-disable-next-line no-unused-expressions, react/forbid-foreign-prop-types
@@ -25,22 +24,29 @@ export function FilterDateInner(props) {
 
   return (
     <div className={`${theme.container} ${className}`}>
-      <span className={theme.title}>From</span>
-      <IconCalendar />
-      <DatePicker
-        displayFormat="MMM D, YYYY"
-        date={startDate}
-        numberOfMonths={1}
-        id="date-picker-start-date"
-        onDateChange={(date) => { onSelectStartDate(date); }}
+      <Datepicker
+        label="Date Start"
+        value={startDate}
+        onChange={(date) => {
+          if (date instanceof Date) onSelectStartDate(moment(date));
+        }}
+        size="xs"
+        isOutsideRange={day => moment().isBefore(day)}
+        displayFormat="M/DD/YYYY"
+        hideCustomInputIcon
+        errorMsg={startDate > endDate ? 'From should be before end' : null}
       />
-      <span className={theme.separator}>-</span>
-      <DatePicker
-        displayFormat="MMM D, YYYY"
-        date={endDate}
-        numberOfMonths={1}
-        id="date-picker-end-date"
-        onDateChange={(date) => { onSelectEndDate(date); }}
+      <div className={theme.separator} />
+      <Datepicker
+        label="Date End"
+        value={endDate}
+        onChange={(date) => {
+          if (date instanceof Date) onSelectEndDate(moment(date));
+        }}
+        size="xs"
+        isOutsideRange={day => moment().isSameOrBefore(day)}
+        displayFormat="M/DD/YYYY"
+        hideCustomInputIcon
       />
     </div>
   );

src/shared/components/Contentful/SearchPageFilter/FilterDate/themes/default.scss

@@ -2,58 +2,20 @@
 
 $text-black: #2a2a2a;
 
-@mixin ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
 .container {
   @include roboto-regular;
 
   display: flex;
   flex-direction: row;
   color: $text-black;
-  background-color: $tc-white;
-  border-radius: 6px;
-  border: 1px solid #aaa;
   position: relative;
-  width: 100%;
-  align-items: center;
-  padding-left: 10px;
   font-size: 14px;
-  height: 38px;
-  max-width: 235px;
-
-  :global {
-    .SingleDatePicker {
-      width: 90px;
-      margin-left: 6px;
-    }
-
-    input {
-      height: 21px !important;
-      margin: 0 !important;
-      padding: 0 !important;
-      font-size: 14px !important;
-      border: none !important;
-      box-shadow: none !important;
-    }
-  }
-}
-
-.title {
-  position: absolute;
-  color: #aaa;
-  font-size: 12px;
-  background: $tc-white;
-  padding: 0 7px;
-  left: 8px;
-  top: -7px;
 }
 
 .separator {
-  margin-left: 3px;
-  margin-right: 3px;
+  margin: 0 6px;
+  width: 6px;
+  height: 1px;
+  background-color: $text-black;
+  margin-top: 20px;
 }

src/shared/components/Contentful/SearchPageFilter/SearchPageFilter.jsx

@@ -201,7 +201,7 @@ SearchPageFilterInner.defaultProps = {
   onApply: () => { },
   selectedAuthor: DEF_SELECTED_AUTHOR,
   authorList: [DEF_SELECTED_AUTHOR],
-  startDate: moment('2001-01-02'),
+  startDate: moment('2001-01-01'),
   endDate: moment(),
   tags: [],
   selectedCategory: '',

src/shared/components/Contentful/SearchPageFilter/themes/default.scss

@@ -30,7 +30,7 @@ $green-color: #137d60;
 }
 
 .track-date-container {
-  margin-top: 27px;
+  margin-top: 43px;
 }
 
 .author-container {

src/shared/components/Contentful/TracksFilter/TracksDate/index.jsx

@@ -24,15 +24,15 @@ export function TracksDateInner(props) {
       <Datepicker
         label="Date Start"
         value={startDate}
-        onChange={(date) => { onSelectStartDate(date); }}
+        onChange={(date) => { if (date instanceof Date) onSelectStartDate(date); }}
         size="xs"
         isOutsideRange={day => moment().isSameOrBefore(day)}
       />
       <div className={theme.separator} />
       <Datepicker
         label="Date End"
         value={endDate}
-        onChange={(date) => { onSelectEndDate(date); }}
+        onChange={(date) => { if (date instanceof Date) onSelectEndDate(date); }}
         size="xs"
         isOutsideRange={day => moment().isSameOrBefore(day)}
       />

src/shared/components/GUIKit/Datepicker/index.jsx

@@ -27,6 +27,11 @@ function Datepicker({
   required,
   size,
   isOutsideRange,
+  hideCustomInputIcon,
+  isDayBlocked,
+  displayFormat,
+  minDate,
+  maxDate,
 }) {
   const sizeStyle = size === 'lg' ? 'lgSize' : 'xsSize';
   const [date, setDate] = useState(value ? moment(value) : null);
@@ -43,7 +48,7 @@ function Datepicker({
     >
       <SingleDatePicker
         hideKeyboardShortcutsPanel
-        customInputIcon={<IconCalendar />}
+        customInputIcon={hideCustomInputIcon ? null : <IconCalendar />}
         date={date}
         onDateChange={(changedDate) => {
           setDate(changedDate);
@@ -58,13 +63,16 @@ function Datepicker({
         numberOfMonths={1}
         navPrev={<IconPrev />}
         navNext={<IconNext />}
-        displayFormat="MMM DD, YYYY"
+        displayFormat={displayFormat}
         daySize={width > 600 ? 47 : 35}
         renderDayContents={d => (<div>{d.date ? d.date() : ''}</div>)}
         enableOutsideDays
         firstDayOfWeek={1}
         weekDayFormat="ddd"
         isOutsideRange={isOutsideRange}
+        isDayBlocked={isDayBlocked}
+        minDate={minDate}
+        maxDate={maxDate}
       />
       {label ? (
         <span styleName="label">
@@ -86,6 +94,11 @@ Datepicker.defaultProps = {
   required: false,
   size: 'lg',
   isOutsideRange: day => moment().isSameOrAfter(day),
+  hideCustomInputIcon: false,
+  isDayBlocked: () => false,
+  displayFormat: 'MMM DD, YYYY',
+  minDate: null,
+  maxDate: null,
 };
 
 Datepicker.propTypes = {
@@ -97,6 +110,11 @@ Datepicker.propTypes = {
   required: PT.bool,
   size: PT.oneOf(['xs', 'lg']),
   isOutsideRange: PT.func,
+  hideCustomInputIcon: PT.bool,
+  isDayBlocked: PT.func,
+  displayFormat: PT.string,
+  minDate: PT.instanceOf(moment),
+  maxDate: PT.instanceOf(moment),
 };
 
 export default Datepicker;

src/shared/containers/EDU/Search.jsx

@@ -2,7 +2,6 @@
  * Container for EDU Portal search page.
  */
 import _ from 'lodash';
-import moment from 'moment';
 import React from 'react';
 import { config, isomorphy } from 'topcoder-react-utils';
 import MetaTags from 'components/MetaTags';
@@ -67,8 +66,8 @@ export default class EDUSearch extends React.Component {
     const queryUpdate = {
       author: filterState.selectedAuthor,
       tags: filterState.tags,
-      startDate: filterState.startDate.format(),
-      endDate: filterState.endDate.format(),
+      startDate: filterState.startDate.format('YYYY-MM-DD'),
+      endDate: filterState.endDate.format('YYYY-MM-DD'),
       track: filterState.selectedCategory ? filterState.selectedCategory.title : null,
       tax: filterState.selectedCategory ? _.map(
         _.filter(filterState.selectedCategory.items, item => item.selected),
@@ -125,8 +124,8 @@ export default class EDUSearch extends React.Component {
               onApply={this.onApplyFilter}
               selectedAuthor={query.author}
               tags={query.tags}
-              startDate={query.startDate ? moment(query.startDate) : undefined}
-              endDate={query.endDate ? moment(query.endDate) : undefined}
+              startDate={query.startDate ? query.startDate : undefined}
+              endDate={query.endDate ? query.endDate : undefined}
               selectedCategory={query.track}
               categories={tree}
             />

src/shared/services/contentful.js

@@ -340,11 +340,7 @@ class Service {
     }
     if (track) query['fields.trackCategory'] = track;
     if (!_.isEmpty(tags)) {
-      if (tags.length === 1) {
-        query['fields.tags[match]'] = tags.join(',');
-      } else {
-        query.query = tags.join(' ');
-      }
+      query['fields.tags[all]'] = tags.join(',');
     }
     if (startDate) query['fields.creationDate[gte]'] = startDate;
     if (endDate) query['fields.creationDate[lte]'] = endDate;