Challenge Overview
Lately, Topcoder puts a lot of efforts into a massive update and enhancement of our beloved community platform. As a part of this work, in a previous challenge we have ported Topcoder Dashboard into our new repository, Community App, which is powered by ReactJS / Redux with various bells and whistles. In the present challenge you will add some features to it, and perform some clean up of the code.
You should work out of the latest commit in the develop branch of Community App. Your update of the code should follow the best practices for a ReactJS / Redux App, established in the repo. Do not introduce lint errors, do not break existing unit tests, properly use react-css-modules and react-css-themr for styling. Should you have any questions about the best practices, and how some specific things should be done, do not hesitate to ask for clarifications in the challenge forum.
In the current code there are multiple violations of this approach, that should be fixed:
- config.ACCOUNTS_APP_CONNECTOR_URL should be moved to config.URL.ACCOUNTS_APP_CONNECTOR (and all the code using it, should be updated accordingly);
- config.DOMAIN - this should be removed and any code using it should use the already existing config.URL.BASE (in some cases the config.DOMAIN is used as `https://ios.${config.DOMAIN}` - in such cases just add a separate base URL into config);
- config.BLOG_LOCATION should be moved to config.URL.BLOG (and any code using it, should be updated accordingly);
- /src/shared/components/Dashboard/Program/IosCard.jsx intializes const SUBDOMAIN from location.href. This should be changed to use the config instead. If there is any particular problem with this, let's discuss in the forum.
- /src/containers/Dashboard/index.jsx - There are multiple hardcoded URLs. They should properly use config for base URLs instead.
- If you notice any other URLs in the code, that do not use this approach, especially in the Dashboard-related code, introduced in the commit f6f85d6dfd6def1830bf37fa07724cb712aaf69d - please fix following the same approach.
2. My Communities tab in the Dashboard (the /my-dashboard route of the Community App):
- You should implement TC Community cards according to this design: https://drive.google.com/open?id=0B3y3SEA9cIEkUHVXeHhGeXpkTmM
- Community image for the cards, and the brief community description should be added into community configuration files, which are now mocked in /src/server/tc-communities/communityId/metadata.json files. Add these to all existing communities, and also update the community setup doc (/docs/how-to-add-a-new-topcoder-community.md) accordingly.
- You should change the way user communities are determined. Right now the code seems to take from the user profile the array of groups the user belongs to, and lists these groups in the tab. This should be replaced by the logic which is being used to show the list of user communities in the challenge listing's communties filter (go to the /challenges route, press Filters button in the top panel, and check the Sub community filter's dropdown - inside My Communities tab you should reuse the same logic, which is being used to populate this dropdown).
- To get communities stats (# of registrants, # of challenges, total prize) you should reuse the logic for fetching and displaying these stats inside communities (check /community/wipro/home for example). You will have to update this logic, however: right now the number of challenges and the total prize is calculated inside /src/actions/stats.js assuming that each community has an associated groupId which can be used to find all challenges belonging to that community. This is not true after the latest updates to the code. You should adopt the logic which is used inside the challenge listing to load active challenges and filter out those belonging to a specific communty: there is getAllActiveChallengesDone action, which allows to fetch all active challenges (including Marathon Matches). There are filters for each community the user belongs to, fetched into the challengeListing.communityFilters[index].filter route of the Redux state, and there is getFilterFunction(..) function, which maps the filter state objects stored in the Redux state into the actual filter function, which can be used to filter the challenges belonging to a given community. Also, now the stats are stored in the Redux under stats.groups[groupId] path, this should be changed to stats.groups[communityId], without breaking stats in the community pages.
3. My Challenges tab in the Dashboard. The sidebar allowing to filter active challenges by communities now works the same way as in (2): it lists user's groups rather than communities, and it uses groupIds to filter challenges. This should be changed to the same logic, explained above: populate the sidebar and use the community challenge filters in the same way they are used in the challenge listing (and in the same way you gonna use them for getting stats at the My Communities tab).
4. There are problems with layout of challenge cards in the My Challenges tab in the Dashboard, these should be fixed (the comments and screenshots from reviewers of the previous challenge):
> The way you display the cards (float on the right side) looks ugly http://take.ms/h4viU
> UI looks odd if there are 0 challenges from the new filter - https://cl.ly/1y2517444506
> Similarly, position of challenge looks odd when there is one challenge matching the filter - https://cl.ly/3Z0p0P3Z1j2h It's too close to the filter and there are empty space on the other side
You should work out of the latest commit in the develop branch of Community App. Your update of the code should follow the best practices for a ReactJS / Redux App, established in the repo. Do not introduce lint errors, do not break existing unit tests, properly use react-css-modules and react-css-themr for styling. Should you have any questions about the best practices, and how some specific things should be done, do not hesitate to ask for clarifications in the challenge forum.
Challenge Scope
1. All base URLs, pointing to different parts of Topcoder platform in dev and prod, should be configured in /config/default.json (dev) and in /config/production.json (prod). These base URLs should be included into the config objects under paths like URL.AUTH, URL.BASE, etc. Inside the code the config should be imported as import config from 'utils/config'; (this ensures the config is properly loaded both at the client and server side), and then the base URLs should be accessed like config.URL.AUTH, etc.In the current code there are multiple violations of this approach, that should be fixed:
- config.ACCOUNTS_APP_CONNECTOR_URL should be moved to config.URL.ACCOUNTS_APP_CONNECTOR (and all the code using it, should be updated accordingly);
- config.DOMAIN - this should be removed and any code using it should use the already existing config.URL.BASE (in some cases the config.DOMAIN is used as `https://ios.${config.DOMAIN}` - in such cases just add a separate base URL into config);
- config.BLOG_LOCATION should be moved to config.URL.BLOG (and any code using it, should be updated accordingly);
- /src/shared/components/Dashboard/Program/IosCard.jsx intializes const SUBDOMAIN from location.href. This should be changed to use the config instead. If there is any particular problem with this, let's discuss in the forum.
- /src/containers/Dashboard/index.jsx - There are multiple hardcoded URLs. They should properly use config for base URLs instead.
- If you notice any other URLs in the code, that do not use this approach, especially in the Dashboard-related code, introduced in the commit f6f85d6dfd6def1830bf37fa07724cb712aaf69d - please fix following the same approach.
2. My Communities tab in the Dashboard (the /my-dashboard route of the Community App):
- You should implement TC Community cards according to this design: https://drive.google.com/open?id=0B3y3SEA9cIEkUHVXeHhGeXpkTmM
- Community image for the cards, and the brief community description should be added into community configuration files, which are now mocked in /src/server/tc-communities/communityId/metadata.json files. Add these to all existing communities, and also update the community setup doc (/docs/how-to-add-a-new-topcoder-community.md) accordingly.
- You should change the way user communities are determined. Right now the code seems to take from the user profile the array of groups the user belongs to, and lists these groups in the tab. This should be replaced by the logic which is being used to show the list of user communities in the challenge listing's communties filter (go to the /challenges route, press Filters button in the top panel, and check the Sub community filter's dropdown - inside My Communities tab you should reuse the same logic, which is being used to populate this dropdown).
- To get communities stats (# of registrants, # of challenges, total prize) you should reuse the logic for fetching and displaying these stats inside communities (check /community/wipro/home for example). You will have to update this logic, however: right now the number of challenges and the total prize is calculated inside /src/actions/stats.js assuming that each community has an associated groupId which can be used to find all challenges belonging to that community. This is not true after the latest updates to the code. You should adopt the logic which is used inside the challenge listing to load active challenges and filter out those belonging to a specific communty: there is getAllActiveChallengesDone action, which allows to fetch all active challenges (including Marathon Matches). There are filters for each community the user belongs to, fetched into the challengeListing.communityFilters[index].filter route of the Redux state, and there is getFilterFunction(..) function, which maps the filter state objects stored in the Redux state into the actual filter function, which can be used to filter the challenges belonging to a given community. Also, now the stats are stored in the Redux under stats.groups[groupId] path, this should be changed to stats.groups[communityId], without breaking stats in the community pages.
3. My Challenges tab in the Dashboard. The sidebar allowing to filter active challenges by communities now works the same way as in (2): it lists user's groups rather than communities, and it uses groupIds to filter challenges. This should be changed to the same logic, explained above: populate the sidebar and use the community challenge filters in the same way they are used in the challenge listing (and in the same way you gonna use them for getting stats at the My Communities tab).
4. There are problems with layout of challenge cards in the My Challenges tab in the Dashboard, these should be fixed (the comments and screenshots from reviewers of the previous challenge):
> The way you display the cards (float on the right side) looks ugly http://take.ms/h4viU
> UI looks odd if there are 0 challenges from the new filter - https://cl.ly/1y2517444506
> Similarly, position of challenge looks odd when there is one challenge matching the filter - https://cl.ly/3Z0p0P3Z1j2h It's too close to the filter and there are empty space on the other side