[Release 1] [Bug Bash] Fix 1 (#173) (#174)

Challenges-App MFE Bug Bash Release 1

Author: LieutenantRoger

.circleci/config.yml

@@ -77,7 +77,6 @@ workflows:
             branches:
               only:
                 - dev
-                - submission-page
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/dev.js

@@ -139,4 +139,8 @@ module.exports = {
       process.env.FILESTACK_SUBMISSION_CONTAINER ||
       "topcoder-dev-submissions-dmz",
   },
+  /* Time in MS to wait before refreshing challenge details after register
+   * and unregister.  Used to allow API sufficent time to update.
+   */
+  CHALLENGE_DETAILS_REFRESH_DELAY: 3000,
 };

config/prod.js

@@ -134,4 +134,8 @@ module.exports = {
       process.env.FILESTACK_SUBMISSION_CONTAINER ||
       "topcoder-dev-submissions-dmz",
   },
+  /* Time in MS to wait before refreshing challenge details after register
+   * and unregister.  Used to allow API sufficent time to update.
+   */
+  CHALLENGE_DETAILS_REFRESH_DELAY: 3000,
 };

src/components/DateRangePicker/DateInput/index.jsx

@@ -20,6 +20,7 @@ const DateInput = ({
   onClickCalendarIcon,
   onStartEndDateChange,
   placeholder,
+  enterToSubmit,
 }) => {
   const ref = useRef(null);
   const [focused, setFocused] = useState(false);
@@ -125,7 +126,14 @@ const DateInput = ({
           size="xs"
           value={rangeText}
           onChange={(value) => {
-            onChangeRangeTextDebounced.current(() => onChangeRangeText(value));
+            if (!enterToSubmit) {
+              onChangeRangeTextDebounced.current(() =>
+                onChangeRangeText(value)
+              );
+            }
+          }}
+          onEnterKey={(value) => {
+            onChangeRangeText(value);
           }}
           placeholder={placeholder}
         />

src/components/DateRangePicker/helpers.js

@@ -50,39 +50,45 @@ const staticRangeHandler = {
  * @return {object[]} list of defined ranges
  */
 export function createStaticRanges() {
-  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 today = moment();
+  const endOfToday = today.set({
+    hour: 23,
+    minute: 59,
+    second: 59,
+    millisecond: 999,
+  });
+  const pastWeek = endOfToday.clone().subtract(1, "week");
+  const pastMonth = endOfToday.clone().subtract(1, "month");
+  const past6Months = endOfToday.clone().subtract(6, "month");
+  const pastYear = endOfToday.clone().subtract(1, "year");
 
   const ranges = [
     {
       label: "Past Week",
       range: () => ({
         startDate: pastWeek.startOf("day").toDate(),
-        endDate: now.endOf("day").toDate(),
+        endDate: endOfToday.toDate(),
       }),
     },
     {
       label: "Past Month",
       range: () => ({
         startDate: pastMonth.startOf("day").toDate(),
-        endDate: now.endOf("day").toDate(),
+        endDate: endOfToday.toDate(),
       }),
     },
     {
       label: "Past 6 Months",
       range: () => ({
         startDate: past6Months.startOf("day").toDate(),
-        endDate: now.endOf("day").toDate(),
+        endDate: endOfToday.toDate(),
       }),
     },
     {
       label: "Past Year",
       range: () => ({
         startDate: pastYear.startOf("day").toDate(),
-        endDate: now.endOf("day").toDate(),
+        endDate: endOfToday.toDate(),
       }),
     },
   ];

src/components/DateRangePicker/index.jsx

@@ -16,7 +16,7 @@ import {
 } from "./helpers";
 
 function DateRangePicker(props) {
-  const { id, range, onChange, placeholder } = props;
+  const { id, range, onChange, placeholder, enterToSubmit = false } = props;
 
   const [rangeString, setRangeString] = useState({
     startDateString: "",
@@ -269,6 +269,37 @@ function DateRangePicker(props) {
     setPreview(null);
   };
 
+  const onReset = (presetRange) => {
+    let newStartDate;
+    let newEndDate;
+
+    if (presetRange) {
+      newStartDate = presetRange.startDate;
+      newEndDate = presetRange.endDate;
+    }
+
+    setFocusedRange([0, 0]);
+
+    setErrors({
+      startDate: "",
+      endDate: "",
+    });
+
+    setRangeString({
+      startDateString: newStartDate
+        ? moment(newStartDate).format("MMM D, YYYY")
+        : "",
+      endDateString: newEndDate ? moment(newEndDate).format("MMM D, YYYY") : "",
+    });
+
+    onChange({
+      startDate: newStartDate ? moment(newStartDate) : null,
+      endDate: newEndDate ? moment(newEndDate) : null,
+    });
+
+    setIsComponentVisible(false);
+  }
+
   /**
    * Event handler on date selection changes
    * @param {Object} newRange nnew range that has endDate and startDate data
@@ -344,8 +375,19 @@ function DateRangePicker(props) {
   const onPreviewChange = (date) => {
     if (!(date instanceof Date)) {
       setPreview(null);
-      setActiveDate(null);
-      setFocusedRange([0, focusedRange[1]]);
+
+      // ---
+      // workaround for fixing issue 132:
+      // - set the active range's background to transparent color
+      // to prevent the calendar auto focusing on the day of today by default when no
+      // start date nor end date are set.
+      // - does not set focus on the selection range when mouse leaves.
+      // ---
+
+      // setActiveDate(null);
+      // if (range.startDate || range.endDate) {
+      //   setFocusedRange([0, focusedRange[1]]);
+      // }
       return;
     }
 
@@ -485,7 +527,7 @@ function DateRangePicker(props) {
           startDate: activeDate,
           endDate: activeDate,
           key: "active",
-          color: "#D8FDD8",
+          color: preview ? "#D8FDD8" : "#D8FDD800",
         },
       ];
     }
@@ -538,6 +580,7 @@ function DateRangePicker(props) {
           }}
           onStartEndDateChange={onStartEndDateChange}
           placeholder={placeholder}
+          enterToSubmit={enterToSubmit}
         />
       </div>
       <div ref={calendarRef} styleName="calendar-container">
@@ -546,9 +589,13 @@ function DateRangePicker(props) {
             <ReactDateRangePicker
               focusedRange={focusedRange}
               onRangeFocusChange={setFocusedRange}
-              onChange={(item) =>
-                onDateRangePickerChange(item.selection || item.active)
-              }
+              onChange={(item) => {
+                if (!preview) {
+                  onReset(item.selection || item.active);
+                } else {
+                  onDateRangePickerChange(item.selection || item.active);
+                }
+              }}
               dateDisplayFormat="MM/dd/yyyy"
               showDateDisplay={false}
               staticRanges={createStaticRanges()}
@@ -562,18 +609,24 @@ function DateRangePicker(props) {
               preview={preview}
               onPreviewChange={onPreviewChange}
             />
-            <button
-              type="button"
-              styleName="reset-button"
-              onClick={() => {
-                onDateRangePickerChange({
-                  startDate: null,
-                  endDate: null,
-                });
-              }}
-            >
-              Reset
-            </button>
+            <div styleName="calendar-footer">
+              <button
+                type="button"
+                styleName="calendar-button"
+                onClick={onReset}
+              >
+                Reset
+              </button>
+              <button
+                type="button"
+                styleName="calendar-button"
+                onClick={() => {
+                  setIsComponentVisible(false);
+                }}
+              >
+                Close
+              </button>
+            </div>
           </div>
         )}
       </div>

src/components/DateRangePicker/style.scss

@@ -348,6 +348,10 @@ $darkGreen: #0AB88A;;
           }
         }
 
+        .rdrStartEdge.rdrEndEdge ~ .rdrDayNumber span {
+          color: $tc-black;
+        }
+
         .rdrDayNumber {
           top: 0;
           bottom: 0;
@@ -391,6 +395,7 @@ $darkGreen: #0AB88A;;
   z-index: 10;
 
   @include phone {
+    width: 100vw;
     position: fixed;
     top: 0;
     left: 0;
@@ -402,7 +407,15 @@ $darkGreen: #0AB88A;;
     border-radius: 0;
   }
 
-  .reset-button {
+  .calendar-footer {
+    width: 100%;
+
+    @include phone {
+      padding: 0 20px;
+    }
+  }
+
+  .calendar-button {
     @include roboto-bold;
 
     width: 71px;
@@ -421,7 +434,7 @@ $darkGreen: #0AB88A;;
       height: 26px;
       line-height: 27px;
       font-size: 12px;
-      margin: 20px 12px 0;
+      margin: 0 12px 0;
     }
   }
 }

src/components/DropdownTerms/index.jsx

@@ -51,8 +51,8 @@ function DropdownTerms({
     }
   }, [focused, selectedOption]);
   useEffect(() => {
-    setInternalTerms(terms);
-  }, [terms]);
+    setInternalTerms(terms); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [terms && terms.length]);
 
   const CustomReactSelectRow = React.forwardRef(
     ({ className, option, children, onSelect }, ref) =>

src/components/NotFoundError/index.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import IconNotFound from "assets/icons/not-found.png";
+
+import "./styles.scss";
+
+const NotFoundError = ({ message }) => (
+  <div styleName="not-found-error">
+    <div>
+      <img src={IconNotFound} alt="not found" />
+    </div>
+    <h1>404 Not found</h1>
+    <p>Sorry, we couldn’t find that page</p>
+  </div>
+);
+
+export default NotFoundError;

src/components/NotFoundError/styles.scss

@@ -0,0 +1,21 @@
+@import "styles/variables";
+
+.not-found-error {
+  padding: 16px 24px;
+  min-height: 136px;
+  margin-bottom: 35px;
+  font-size: $font-size-sm;
+  line-height: 22px;
+  text-align: center;
+  background: $white;
+  border-radius: $border-radius-lg;
+
+  h1 {
+    padding: 15px 0 10px;
+    margin-bottom: 20px;
+  }
+
+  p {
+    margin-bottom: 8px;
+  }
+}