Merge branch 'challenges-bug-bash' into issue_143

Author: nqviet

src/components/DateRangePicker/index.jsx

@@ -574,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/routers/challenge-list/index.jsx

@@ -45,7 +45,8 @@ const App = () => {
       return;
     }
 
-    const params = utils.url.parseUrlQuery(location.search);
+    let search = location.href.split('?').length ? '?' + location.href.split('?')[1]: ''
+    const params = utils.url.parseUrlQuery(search);
     const toUpdate = utils.challenge.createChallengeFilter(params);
 
     if (!toUpdate.types) toUpdate.types = [];

src/services/challenges.js

@@ -17,7 +17,7 @@ import { getService as getSubmissionsService } from "./submissions";
  * @return {Array<Object>} challenges
  */
 async function getChallenges(filter, cancellationSignal) {
-  const challengeQuery = util.buildQueryString(filter);
+  const challengeQuery = util.buildQueryString(filter, true);
   return api.get(
     `/challenges/${challengeQuery}`,
     undefined,

src/utils/url.js

@@ -15,9 +15,11 @@ import qs from "qs";
  * @params {Object<{[key: string]: any}>} params Query string parameters
  * @return {String}
  */
-export function buildQueryString(params) {
+export function buildQueryString(params, disableEncode) {
   params = _.omitBy(params, (p) => p == null || p === "" || p.length === 0);
-
+  if (!disableEncode) {
+    params.tags = _.map(params.tags, (t) => encodeURIComponent(t))
+  }
   let queryString = qs.stringify(params, {
     encode: false,
     arrayFormat: "brackets",
@@ -28,7 +30,11 @@ export function buildQueryString(params) {
 }
 
 export function parseUrlQuery(queryString) {
-  return qs.parse(queryString, { ignoreQueryPrefix: true });
+  let params =  qs.parse(queryString, { ignoreQueryPrefix: true });
+  if (params.tags) {
+    params.tags = _.map(params.tags, (t) => decodeURIComponent(t))
+  }
+  return params
 }
 
 export function updateQuery(params, replace = false) {