Merge branch 'challenges-bug-bash' of github.com:topcoder-platform/micro-frontends-challenges-app into issue_124

Author: fikzzzy

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,12 @@ 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,40 @@ 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: "",
@@ -344,8 +344,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 empty selection range when mouse leaves.
+      // ---
+
+      // setActiveDate(null);
+      if (range.startDate || range.endDate) {
+        setFocusedRange([0, focusedRange[1]]);
+      }
       return;
     }
 
@@ -485,7 +496,7 @@ function DateRangePicker(props) {
           startDate: activeDate,
           endDate: activeDate,
           key: "active",
-          color: "#D8FDD8",
+          color: preview ? "#D8FDD8" : "#D8FDD800",
         },
       ];
     }
@@ -538,6 +549,7 @@ function DateRangePicker(props) {
           }}
           onStartEndDateChange={onStartEndDateChange}
           placeholder={placeholder}
+          enterToSubmit={enterToSubmit}
         />
       </div>
       <div ref={calendarRef} styleName="calendar-container">
@@ -562,18 +574,29 @@ 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={() => {
+                  onDateRangePickerChange({
+                    startDate: null,
+                    endDate: null,
+                  });
+                }}
+              >
+                Reset
+              </button>
+              <button
+                type="button"
+                styleName="calendar-button"
+                onClick={() => {
+                  setIsComponentVisible(false);
+                }}
+              >
+                Close
+              </button>
+            </div>
           </div>
         )}
       </div>

src/components/DateRangePicker/style.scss

@@ -391,6 +391,7 @@ $darkGreen: #0AB88A;;
   z-index: 10;
 
   @include phone {
+    width: 100vw;
     position: fixed;
     top: 0;
     left: 0;
@@ -402,7 +403,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 +430,7 @@ $darkGreen: #0AB88A;;
       height: 26px;
       line-height: 27px;
       font-size: 12px;
-      margin: 20px 12px 0;
+      margin: 0 12px 0;
     }
   }
 }

src/components/NotFoundError/index.jsx

@@ -0,0 +1,20 @@
+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;
+  }
+}

src/components/Pagination/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import PT from "prop-types";
 import Dropdown from "../Dropdown";
 import {
@@ -12,6 +12,20 @@ import "./styles.scss";
 
 const N = PAGINATION_MAX_PAGE_DISPLAY;
 
+const createDisplayPages = (p, n) => {
+  const pages = [];
+  for (
+    let start = utils.clamp(p - N, 0, n),
+      end = utils.clamp(p + N, 0, n),
+      i = start;
+    i < end;
+    i += 1
+  ) {
+    pages.push(i);
+  }
+  return pages.slice(-N);
+};
+
 /**
  * Pagination with the first page index being as 0 and the last page index being as `total - 1`
  */
@@ -20,24 +34,6 @@ const Pagination = ({ length, pageIndex, pageSize, onChange }) => {
   const perPageOptions = utils.createDropdownOptions(PAGINATION_PER_PAGES);
   utils.setSelectedDropdownOption(perPageOptions, `${pageSize}`);
 
-  const createDisplayPages = (p, n) => {
-    const pages = [];
-    for (
-      let start = utils.clamp(p - N, 0, n),
-        end = utils.clamp(p + N, 0, n),
-        i = start;
-      i < end;
-      i += 1
-    ) {
-      pages.push(i);
-    }
-    return pages.slice(-N);
-  };
-
-  const [displayPages, setDisplayPages] = useState(
-    createDisplayPages(pageIndex, total)
-  );
-
   const onChangePageSize = (options) => {
     const selectedOption = utils.getSelectedDropdownOption(options);
     const newPageSize = +selectedOption.label;
@@ -59,33 +55,40 @@ const Pagination = ({ length, pageIndex, pageSize, onChange }) => {
     }
   };
 
-  const latestPropsRef = useRef(null);
-  latestPropsRef.current = { displayPages, pageIndex };
-
-  useEffect(() => {
-    const newTotal = Math.ceil(length / pageSize);
-    const _pageIndex = latestPropsRef.current.pageIndex;
-    setDisplayPages(createDisplayPages(_pageIndex, newTotal));
-  }, [length, pageSize]);
+  const previousPropsRef = useRef();
+  const [displayPages, setDisplayPages] = useState([]);
 
   useEffect(() => {
-    const _displayPages = latestPropsRef.current.displayPages;
-    const start = _displayPages[0];
-    const end = _displayPages[_displayPages.length - 1];
-
-    const updateDisplayPages = [];
-    if (pageIndex < start) {
-      for (let i = pageIndex; i < pageIndex + N; i += 1) {
-        updateDisplayPages.push(i);
+      let _displayPages = displayPages;
+
+      if (!previousPropsRef.current
+        || previousPropsRef.current.length !== length
+        || previousPropsRef.current.pageSize !== pageSize) {
+        const newTotal = Math.ceil(length / pageSize);
+        _displayPages = createDisplayPages(pageIndex, newTotal);
+        setDisplayPages(_displayPages)
       }
-      setDisplayPages(updateDisplayPages);
-    } else if (pageIndex > end) {
-      for (let i = pageIndex; i > pageIndex - N; i -= 1) {
-        updateDisplayPages.unshift(i);
+
+      if (!previousPropsRef.current || previousPropsRef.current.pageIndex !== pageIndex) {
+        const start = _displayPages[0];
+        const end = _displayPages[_displayPages.length - 1];
+
+        const updateDisplayPages = [];
+        if (pageIndex < start) {
+          for (let i = pageIndex; i < pageIndex + N; i += 1) {
+            updateDisplayPages.push(i);
+          }
+          setDisplayPages(updateDisplayPages);
+        } else if (pageIndex > end) {
+          for (let i = pageIndex; i > pageIndex - N; i -= 1) {
+            updateDisplayPages.unshift(i);
+          }
+          setDisplayPages(updateDisplayPages);
+        }
       }
-      setDisplayPages(updateDisplayPages);
-    }
-  }, [pageIndex]);
+
+      previousPropsRef.current = { length, pageSize, pageIndex };
+  }, [length, pageSize, pageIndex, displayPages, setDisplayPages]);
 
   const formatPage = (p) => `${p + 1}`;
 

src/components/TextInput/index.jsx

@@ -55,7 +55,7 @@ function TextInput({
         }}
         onKeyPress={(e) => {
           if (e.key === "Enter") {
-            onEnterKey();
+            onEnterKey(e.target.value);
           }
         }}
       />