Fixes for challenge cards in challnege listing

- Fixes #239, fixes #240

- Refactors ChallengeCard component (splits out NumRegistrants and
NumSubmissions components, with related logic, into separate
components).

- Improves How To Deep-Link doc.

Author: birdofpreyru

docs/how-to-deep-link.md

@@ -6,7 +6,7 @@ For some page you want to expose its state (or part of the state) via URL query
 - When that URL is used to access the app, the page is opened with the state described by the URL query params.
 
 ### Solution
-The key idea is simple: internally, you still use Redux actions / reducers / store to describe and modify entire state of the page. Inside reducer's action handlers, related to that parts of the state, that you want to expose via URL query, you add the code to properly update URL each time reducer re-evaluates related pieces of the state. Inside that reducer's factory you, in case of server-side rendering, check query parameters of HTTP request and create proper intial state of Redux store. To navigate around the app / change the page state from within the app, you just dispatch related actions, URL will be automatically updated by reducers. **In the cases when you programmatically change the route inside the app, using react-router, related actions should be dispatched after transition, as explained below**.
+The key idea is simple: internally, you still use Redux actions / reducers / store to describe and modify entire state of the page. Inside reducer's action handlers, related to that parts of the state, that you want to expose via URL query, you add the code to properly update URL each time reducer re-evaluates related pieces of the state. Inside that reducer's factory you, in case of server-side rendering, check query parameters of HTTP request and create proper intial state of Redux store. To change the page state without transition between pages, you just dispatch related actions, the URL will be automatically updated. **In the cases when you programmatically change the route inside the app, using react-router, related actions should be dispatched after transition, as explained below**.
 
 ### Examples
 At the moment of writing this instruction, this approach is used inside challenge listings to expose challenge filters and selected buckets via URL query; and also within challenge details page to expose different detail tabs. The implementation notes below will refer to the second usage.
@@ -43,19 +43,24 @@ At the moment of writing this instruction, this approach is used inside challeng
 
 - To make a transition to the page, from another route within the app, and select the desired tab you:
   - As usually use `<Link>` component from `react-router` to make transition (in our codebase we have an auxiliary wrapper around it in [`utils/router` module](https://github.com/topcoder-platform/community-app/blob/develop/src/shared/utils/router/index.jsx), also the standard [buttons](https://github.com/topcoder-platform/community-app/tree/develop/src/shared/components/buttons) and [tags](https://github.com/topcoder-platform/community-app/tree/develop/src/shared/components/tags) are rendered as `react-router` `<Link>`s when appropriate; the idea stay the same if you use it);
-  - In `to` prop you pass the target endpoint without query params (specifying query params within this prop makes no sense: it will update the URL, but won't update Redux state properly).
-  - Inside `onClick` prop you dispatch necessary action(s), wrapped inside `setImmediate(..)` method. For example, to move from the challenge listing to the challenge details page of a challenge with ID 12345, and with winners tab open (provided that the challenge is completed and thus it is appopriate to link to that tab) you do something like this:
-  ```jsx
-  <Link
-    onClick={() =>
-      setImmediate(() => selectTab('winners'))
-    }
-    to="/challenges/12345"
-  >Winners</Link>
-  ```
-  where `selectTab(..)` function is mapped to the corresponding action within page (component) container.
-  
-  `setImmediate(..)` is necessary here to delay update Redux store after the endpoint transition is handled by `react-redux`; because of `to="/challenges/12345"` `react-redux` will remove any query params from URL. The `onClick` callback, when wrapped inside `setImmediate(..)` will be triggered right after the transition, it will properly update Redux state, and set the correct URL query. From visitor's point of view it happens with no pause in beween (i.e. when the page is loaded he already will see the target tab).
+
+  - `to` prop of `<Link>` specifies target route (and query params, if specified) for `react-router`. It does not update Redux state, so you should also supply `onClick` prop, which will dispatch all necessary actions:
+    ```js
+    <Link
+      onClick={() => selectTab('winners')}
+      to="/challenges/12345?tab=winners"
+    >
+    ```
+    where `selectTab(..)` function is mapped to the corresponding action within page (component) container.
+
+  - It is important to note that in the code above, transition between the routes is handled by `react-router` after the moment `selectTab(..)` is triggered and handled by reducers; thus, the query params written to URL by reducers will be overriden by those you specify inside `to` prop. It means, if you make a mistake and provide a wrong query there, it will be out of sync with the actual state of the page after transition. As an alternative, you can do
+    ```js
+    <Link
+      onClick={() => setImmediate(() => selectTab('winners'))}
+      to="/challenges/12345?tab=winners"
+    >
+    ```
+    In this case `selectTab(..)` will be triggered after transition, thus reducers will take care about proper query params written in URL. However, you still want to leave correct query inside `to`, because when user copies a link with right mouse button, or open it in a new page, he will get the URL specified there there.
 
 ### Caveats
 - When you read url query params at the server side, any array with 20 and more elements will be parsed as an object with keys equal to array element indices. Under the hood it is done by [qs](https://www.npmjs.com/package/qs) module on purpose. Don't try to reconfigure `qs`, just remember that you can get an object when you expect an array, and handle that situation correctly.

src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/index.jsx

@@ -0,0 +1,67 @@
+/**
+ * Registrants icon with count of registrants. Acts as the link to Registrants
+ * tab of Challenge Details page (to Details tab, when there is no registrants
+ * in the challenge yet). Shows a tooltip when hovered.
+ */
+
+import _ from 'lodash';
+import config from 'utils/config';
+import PT from 'prop-types';
+import React from 'react';
+import Tooltip from 'components/Tooltip';
+import { DETAIL_TABS } from 'actions/challenge';
+import { Link } from 'utils/router';
+
+/* TODO: The icon should be converted back to SVG and imported using the
+ * the standard approach for our code! */
+import RegistrantsIcon from '../../Icons/RegistrantsIcon';
+
+import './style.scss';
+
+const ID_LENGTH = 6;
+const MM_BASE_URL
+  = `${config.URL.COMMUNITY}/longcontest/?module=ViewRegistrants&rd=`;
+
+export default function NumRegistrants({
+  challenge: { id, numRegistrants, track },
+  selectChallengeDetailsTab,
+}) {
+  let tip;
+  switch (numRegistrants) {
+    case 0: tip = 'No registrants'; break;
+    case 1: tip = '1 total registrant'; break;
+    default: tip = `${numRegistrants} total registrants`;
+  }
+  const query = numRegistrants ? `?tab=${DETAIL_TABS.REGISTRANTS}` : '';
+  const link = track === 'DATA_SCIENCE' && _.toString(id).length < ID_LENGTH
+    ? `${MM_BASE_URL}${id}` : `/challenges/${id}${query}`;
+  return (
+    <span styleName="container">
+      <Tooltip
+        content={
+          <div styleName="tooltip">{tip}</div>
+        }
+      >
+        <Link
+          onClick={() => (
+            numRegistrants
+              ? selectChallengeDetailsTab(DETAIL_TABS.REGISTRANTS) : null
+          )}
+          to={link}
+        >
+          <RegistrantsIcon />
+          <span styleName="number">{numRegistrants}</span>
+        </Link>
+      </Tooltip>
+    </span>
+  );
+}
+
+NumRegistrants.propTypes = {
+  challenge: PT.shape({
+    id: PT.oneOfType([PT.number, PT.string]).isRequired,
+    numRegistrants: PT.number.isRequired,
+    track: PT.string.isRequired,
+  }).isRequired,
+  selectChallengeDetailsTab: PT.func.isRequired,
+};

src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/style.scss

@@ -0,0 +1,24 @@
+@import "~styles/tc-styles";
+
+.container {
+  display: inline-block;
+  font-weight: 400;
+  margin-left: 4 * $base-unit;
+
+  @include xxs-to-xs {
+    margin-left: 3 * $base-unit;
+  }
+}
+
+.number {
+  vertical-align: top;
+  padding-left: $base-unit - 3;
+}
+
+.tooltip {
+  font-weight: 500;
+  font-size: 13px;
+  color: $tc-white;
+  letter-spacing: 0;
+  padding: 15px;
+}

src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/index.jsx

@@ -0,0 +1,67 @@
+/**
+ * Submissions icon with count of submissions. Acts as the link to Submissions
+ * tab of Challenge Details page (to Details tab, when there is no registrants
+ * in the challenge yet). Shows a tooltip when hovered.
+ */
+
+import _ from 'lodash';
+import config from 'utils/config';
+import PT from 'prop-types';
+import React from 'react';
+import Tooltip from 'components/Tooltip';
+import { DETAIL_TABS } from 'actions/challenge';
+import { Link } from 'utils/router';
+
+/* TODO: The icon should be converted back to SVG and imported using the
+ * the standard approach for our code! */
+import SubmissionsIcon from '../../Icons/SubmissionsIcon';
+
+import './style.scss';
+
+const ID_LENGTH = 6;
+const MM_BASE_URL
+  = `${config.URL.COMMUNITY}/longcontest/?module=ViewStandings&rd=`;
+
+export default function NumSubmissions({
+  challenge: { id, numSubmissions, track },
+  selectChallengeDetailsTab,
+}) {
+  let tip;
+  switch (numSubmissions) {
+    case 0: tip = 'No submissions'; break;
+    case 1: tip = '1 total submission'; break;
+    default: tip = `${numSubmissions} total submissions`;
+  }
+  const query = numSubmissions ? `?tab=${DETAIL_TABS.SUBMISSIONS}` : '';
+  const link = track === 'DATA_SCIENCE' && _.toString(id).length < ID_LENGTH
+    ? `${MM_BASE_URL}${id}` : `/challenges/${id}${query}`;
+  return (
+    <div styleName="container">
+      <Tooltip
+        content={
+          <div styleName="tooltip">{tip}</div>
+        }
+      >
+        <Link
+          onClick={() => (
+            numSubmissions
+              ? selectChallengeDetailsTab(DETAIL_TABS.SUBMISSIONS) : null
+          )}
+          to={link}
+        >
+          <SubmissionsIcon />
+          <span styleName="number">{numSubmissions}</span>
+        </Link>
+      </Tooltip>
+    </div>
+  );
+}
+
+NumSubmissions.propTypes = {
+  challenge: PT.shape({
+    id: PT.oneOfType([PT.number, PT.string]).isRequired,
+    numSubmissions: PT.number.isRequired,
+    track: PT.string.isRequired,
+  }).isRequired,
+  selectChallengeDetailsTab: PT.func.isRequired,
+};

src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/style.scss

@@ -0,0 +1,24 @@
+@import "~styles/tc-styles";
+
+.container {
+  display: inline-block;
+  font-weight: 400;
+  margin-left: 4 * $base-unit;
+
+  @include xxs-to-xs {
+    margin-left: 3 * $base-unit;
+  }
+}
+
+.number {
+  vertical-align: top;
+  padding-left: $base-unit - 3;
+}
+
+.tooltip {
+  font-weight: 500;
+  font-size: 13px;
+  color: $tc-white;
+  letter-spacing: 0;
+  padding: 15px;
+}