Merge pull request #86 from topcoder-platform/dev

Release 2021/04/30 - Challenge Listing fixes

Author: luizrrodrigues

docker/Dockerfile

@@ -1,5 +1,5 @@
 # Use the base image with Node.js
-FROM node:latest
+FROM node:10.22.1
 
 ARG APPMODE
 ARG APPENV

package-lock.json

@@ -49,24 +49,24 @@ const App = () => {
       return;
     }
 
-    if (location.pathname === "/earn/find/challenges") {
-      const params = utils.url.parseUrlQuery(location.search);
-      const toUpdate = utils.challenge.createChallengeFilter(params);
+    //if (location.pathname === "/earn/find/challenges") {
+    const params = utils.url.parseUrlQuery(location.search);
+    const toUpdate = utils.challenge.createChallengeFilter(params);
 
-      if (!toUpdate.types) toUpdate.types = [];
-      if (!toUpdate.tracks) toUpdate.tracks = [];
-      if (!toUpdate.bucket) toUpdate.bucket = "";
+    if (!toUpdate.types) toUpdate.types = [];
+    if (!toUpdate.tracks) toUpdate.tracks = [];
+    if (!toUpdate.bucket) toUpdate.bucket = "";
 
-      const updatedFilter = { ...initialChallengeFilter, ...toUpdate };
-      const currentFilter = store.getState().filter.challenge;
-      const diff = !_.isEqual(updatedFilter, currentFilter);
-      if (diff) {
-        store.dispatch(actions.filter.updateFilter(updatedFilter));
-      }
-      getChallengesDebounced.current(() =>
-        store.dispatch(actions.challenges.getChallenges(updatedFilter))
-      );
+    const updatedFilter = { ...initialChallengeFilter, ...toUpdate };
+    const currentFilter = store.getState().filter.challenge;
+    const diff = !_.isEqual(updatedFilter, currentFilter);
+    if (diff) {
+      store.dispatch(actions.filter.updateFilter(updatedFilter));
     }
+    getChallengesDebounced.current(() =>
+      store.dispatch(actions.challenges.getChallenges(updatedFilter))
+    );
+    //}
   }, [location]);
 
   useEffect(() => {
@@ -90,8 +90,7 @@ const App = () => {
       </aside>
       <div className="content">
         <Router>
-          <Challenges path="/earn/find/challenges" />
-          <NoSidebarDemo path="/earn" />
+          <Challenges path="/earn/*" />
         </Router>
       </div>
     </div>

src/App.jsx

@@ -9,7 +9,12 @@ async function getCommunityList() {
   return service.getCommunityList();
 }
 
+async function isLoggedIn() {
+  return service.isLoggedIn();
+}
+
 export default createActions({
   GET_TAGS: getTags,
   GET_COMMUNITY_LIST: getCommunityList,
+  IS_LOGGED_IN: isLoggedIn,
 });

src/actions/lookup.js

@@ -3,7 +3,6 @@ export const PAGINATION_MAX_PAGE_DISPLAY = 3;
 
 export const NAV_MENU = {
   "Find Work": {
-    Gigs: "",
     Challenges: "/earn/find/challenges",
   },
 };
@@ -59,7 +58,7 @@ export const SORT_ORDER = {
 };
 
 export const SORT_BY_SORT_ORDER = {
-  bestMatch: SORT_ORDER.DESC,
+  // bestMatch: SORT_ORDER.DESC,
   updated: SORT_ORDER.DESC,
   "overview.totalPrizes": SORT_ORDER.DESC,
   name: SORT_ORDER.ASC,

src/constants/index.js

@@ -14,7 +14,7 @@ import TagsMoreTooltip from "../tooltips/TagsMoreTooltip";
 
 import "./styles.scss";
 
-const ChallengeItem = ({ challenge, onClickTag, onClickTrack }) => {
+const ChallengeItem = ({ challenge, onClickTag, onClickTrack, isLoggedIn }) => {
   const totalPrizes = challenge.overview.totalPrizes;
   const currencySymbol = utils.challenge.getCurrencySymbol(challenge.prizeSets);
   const placementPrizes = utils.challenge.getPlacementPrizes(
@@ -24,6 +24,12 @@ const ChallengeItem = ({ challenge, onClickTag, onClickTrack }) => {
     challenge.prizeSets
   );
 
+  let submissionLink = `${process.env.URL.BASE}/challenges/${challenge.id}`;
+
+  if (isLoggedIn && challenge.numOfSubmissions > 0) {
+    submissionLink += "?tab=submissions";
+  }
+
   return (
     <div styleName="challenge-item">
       <div styleName="track">
@@ -69,9 +75,7 @@ const ChallengeItem = ({ challenge, onClickTag, onClickTrack }) => {
           >
             <NumRegistrants numOfRegistrants={challenge.numOfRegistrants} />
           </a>
-          <a
-            href={`${process.env.URL.BASE}/challenges/${challenge.id}?tab=submissions`} // eslint-disable-line no-undef
-          >
+          <a href={submissionLink}>
             <NumSubmissions numOfSubmissions={challenge.numOfSubmissions} />
           </a>
         </div>
@@ -96,6 +100,7 @@ ChallengeItem.propTypes = {
   challenge: PT.shape(),
   onClickTag: PT.func,
   onClickTrack: PT.func,
+  isLoggedIn: PT.bool,
 };
 
 export default ChallengeItem;

src/containers/Challenges/Listing/ChallengeItem/index.jsx

@@ -26,6 +26,8 @@ const Listing = ({
   updateFilter,
   bucket,
   sortByLabels,
+  isLoggedIn,
+  tags,
 }) => {
   const sortByOptions = utils.createDropdownOptions(
     sortByLabels,
@@ -105,13 +107,14 @@ const Listing = ({
             <ChallengeItem
               challenge={challenge}
               onClickTag={(tag) => {
-                const filterChange = { search: tag };
+                const filterChange = { tags: [tag] };
                 updateFilter(filterChange);
               }}
               onClickTrack={(track) => {
                 const filterChange = { tracks: [track] };
                 updateFilter(filterChange);
               }}
+              isLoggedIn={isLoggedIn}
             />
           </div>
         ))}
@@ -146,6 +149,7 @@ Listing.propTypes = {
   updateFilter: PT.func,
   bucket: PT.string,
   sortByLabels: PT.arrayOf(PT.string),
+  isLoggedIn: PT.bool,
 };
 
 export default Listing;

src/containers/Challenges/Listing/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import PT from "prop-types";
 import { connect } from "react-redux";
 import Listing from "./Listing";
@@ -26,7 +26,17 @@ const Challenges = ({
   recommendedChallenges,
   initialized,
   updateQuery,
+  userLoggedIn,
+  isLoggedIn,
+  tags,
 }) => {
+  const latestPropsRef = useRef(null);
+  latestPropsRef.current = { userLoggedIn };
+
+  useEffect(() => {
+    latestPropsRef.current.userLoggedIn();
+  }, []);
+
   const BUCKET_OPEN_FOR_REGISTRATION = constants.FILTER_BUCKETS[1];
   const isRecommended = recommended && bucket === BUCKET_OPEN_FOR_REGISTRATION;
   const sortByValue = isRecommended
@@ -75,7 +85,9 @@ const Challenges = ({
               updateQuery(filterChange);
             }}
             bucket={bucket}
+            tags={tags}
             sortByLabels={sortByLabels}
+            isLoggedIn={isLoggedIn}
           />
         </>
       )}
@@ -98,6 +110,8 @@ Challenges.propTypes = {
   recommendedChallenges: PT.arrayOf(PT.shape()),
   initialized: PT.bool,
   updateQuery: PT.func,
+  isLoggedIn: PT.bool,
+  tags: PT.arrayOf(PT.string),
 };
 
 const mapStateToProps = (state) => ({
@@ -114,11 +128,14 @@ const mapStateToProps = (state) => ({
   recommended: state.filter.challenge.recommended,
   recommendedChallenges: state.challenges.recommendedChallenges,
   initialized: state.challenges.initialized,
+  isLoggedIn: state.lookup.isLoggedIn,
+  tags: state.filter.challenge.tags,
 });
 
 const mapDispatchToProps = {
   updateFilter: actions.filter.updateFilter,
   updateQuery: actions.filter.updateChallengeQuery,
+  userLoggedIn: actions.lookup.isLoggedIn,
 };
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => ({

src/containers/Challenges/index.jsx

@@ -33,7 +33,7 @@ const ChallengeFilter = ({
   openForRegistrationCount,
 }) => {
   // const BUCKET_OPEN_FOR_REGISTRATION = constants.FILTER_BUCKETS[1];
-  const tagOptions = utils.createDropdownTermOptions(challengeTags);
+  const tagOptions = utils.createDropdownTermOptions(challengeTags, tags);
   const bucketOptions = utils.createRadioOptions(challengeBuckets, bucket);
 
   const caseSensitive = false;

src/containers/Filter/ChallengeFilter/index.jsx

@@ -5,7 +5,7 @@ import _ from "lodash";
 const defaultState = {
   challenge: {
     types: constants.FILTER_CHALLENGE_TYPES,
-    tracks: constants.FILTER_CHALLENGE_TRACKS.filter((track) => track !== "QA"),
+    tracks: constants.FILTER_CHALLENGE_TRACKS,
     search: "",
     tags: [],
     groups: [],
@@ -14,15 +14,12 @@ const defaultState = {
     endDateStart: null,
     page: 1,
     perPage: constants.PAGINATION_PER_PAGES[0],
-    sortBy: constants.CHALLENGE_SORT_BY_RECOMMENDED,
+    sortBy: constants.CHALLENGE_SORT_BY_MOST_RECENT,
     totalPrizesFrom: 0,
     totalPrizesTo: 10000,
-    includeAllTags: true,
-
     // ---
 
     bucket: constants.FILTER_BUCKETS[1],
-    recommended: false,
   },
 };
 

src/reducers/filter.js

@@ -7,6 +7,7 @@ const defaultState = {
   tracks: constants.FILTER_CHALLENGE_TRACKS,
   tags: [],
   subCommunities: [],
+  isLoggedIn: false,
 };
 
 function onGetTagsDone(state, { payload }) {
@@ -17,10 +18,15 @@ function onGetCommunityListDone(state, { payload }) {
   return { ...state, subCommunities: payload };
 }
 
+function onIsLoggedInDone(state, { payload }) {
+  return { ...state, isLoggedIn: payload };
+}
+
 export default handleActions(
   {
     GET_TAGS_DONE: onGetTagsDone,
     GET_COMMUNITY_LIST_DONE: onGetCommunityListDone,
+    IS_LOGGED_IN_DONE: onIsLoggedInDone,
   },
   defaultState
 );

src/reducers/lookup.js

@@ -18,6 +18,11 @@ async function getTags() {
   return data.result.content.map((tag) => tag.name);
 }
 
+async function isLoggedIn() {
+  const isLoggedIn = await utils.auth.isLoggedIn();
+  return isLoggedIn;
+}
+
 async function doGetUserGroups() {
   const isLoggedIn = await utils.auth.isLoggedIn();
 
@@ -51,4 +56,5 @@ async function getCommunityList() {
 export default {
   getTags,
   getCommunityList,
+  isLoggedIn,
 };

src/services/lookup.js

@@ -100,7 +100,6 @@ export function createChallengeFilter(params) {
       bucket: normalized.bucket,
       totalPrizesFrom: normalized.totalPrizesFrom,
       totalPrizesTo: normalized.totalPrizesTo,
-      includeAllTags: normalized.includeAllTags,
       recommended: normalized.recommended,
     },
     (value) => value == null
@@ -116,18 +115,12 @@ const queryScheme = {
   tags: Joi.array().items(Joi.string()),
   startDateEnd: Joi.date(),
   endDateStart: Joi.date(),
-  sortBy: Joi.string().valid(
-    "bestMatch",
-    "updated",
-    "overview.totalPrizes",
-    "name"
-  ),
+  sortBy: Joi.string().valid("updated", "overview.totalPrizes", "name"),
   groups: Joi.array().items(Joi.optionalId()).unique(),
   events: Joi.array().items(Joi.string()),
   bucket: Joi.bucket(),
   totalPrizesFrom: Joi.number().integer().min(0),
   totalPrizesTo: Joi.number().integer().min(0),
-  includeAllTags: Joi.boolean(),
   recommended: Joi.boolean(),
 };
 
@@ -155,7 +148,6 @@ export function createChallengeParams(filter) {
     tracks: params.tracks.map(
       (track) => constants.FILTER_CHALLENGE_TRACK_ABBREVIATIONS[track]
     ),
-    includeAllTags: params.tags.length ? params.includeAllTags : null,
   };
 }
 
@@ -189,7 +181,6 @@ export function createChallengeCriteria(filter) {
     events: filter.events,
     totalPrizesFrom: filter.totalPrizesFrom,
     totalPrizesTo: filter.totalPrizesTo,
-    includeAllTags: filter.tags.length ? filter.includeAllTags : null,
     isLightweight: true,
   };
 }
@@ -264,7 +255,6 @@ export function shouldFetchChallenges(filterUpdate) {
       "bucket",
       "totalPrizesFrom",
       "totalPrizesTo",
-      "includeAllTags",
     ].includes(attr)
   );
 }
@@ -305,7 +295,6 @@ export function createEmptyChallengeFilter() {
     "sortBy",
     "totalPrizesFrom",
     "totalPrizesTo",
-    "includeAllTags",
     "recommended",
   ]);
 }

src/utils/challenge.js

@@ -48,7 +48,7 @@ export function setSelectedDropdownOptions(options, selectedValues) {
 export function createDropdownTermOptions(values, selectedValues) {
   return values.map((value) => ({
     label: `${value}`,
-    selected: !!selectedValues && selectedValues.includes[value],
+    selected: !!selectedValues && selectedValues.includes(value),
   }));
 }