Challenge Overview
With this challenge we pursue two related goals: (1) to migrate Topcoder Dashboard from topcoder-app into community-app, hence to port it to the new tech stack (ReactJS / Redux, with various bells and whistles we have set up in the community-app); (2) to extend the Dashboard with additional functionality related to the new implementation of Topcoder Communities dedicated to specific clients / projects / technologies. This image gives a rough idea about the expected result.
2. In this challenge we'll keep the current style of victory counters. We'll add, however, community tags to the challenge cards, we'll implement community filter, and a simple My Communities tab.
3. All necessary code to fetch My Challenges is already present inside community-app: see challenge listing page, challengeListing section of the Redux state, and related actions / reducers. Don't hesitate to ask about details of how it works in the forum. Here is a brief overview, how relevant logic should work:
- Once a user is properly authenticated (which is already handled by the code), you'll find the list of user's groups under auth.profile.groups path of the Redux state. You'll use these data to render the content of My Communities tab, and to populate community filter in the My Challenges tab.
- To get user challenges you will use actions from src/shared/actions/challenge-listing.js. To fetch user challenges you should (1) generate an uuid, using shortid package; (2) dispatch getInit(uuid) action; (3) dispatch either getMarathonMatches(uuid, filters, param, token, countCategory, user) or getChallenges(uuid, filters, param, token, countCategory, user) action with the same uuid and other necessary parameters.
- For our purposes here you should pass in these functions { status: 'ACTIVE' } as filters, user auth token from auth.tokenV3 path of the Redux state as token, and user handle from auth.user.handle as handle. You can keep other arguments undefined, you also may keep filters undefined to get all user challenges.
- You will find loaded challenges under challengeListing.challenges path of Redux store. You should check challengeListing.pendingRequest path to see when all your requests to load challenges are completed.
Here are few non-intuitive, but important notes about fetching the challenges:
- Passing a valid auth token is very important. Without it API won't include into response any challenges from auth-protected groups (and current version of API does not warn you when it happens).
- You should not assume that challengeListing.challenges contains only the challenges you have asked to load, because other pages of the App may load different challenges into that array. Always filter that array in the necessary way before using it for rendering. Also note that if user runs the App for a long time without restarts, challenge data stored in the Redux state may become outdated. There is challengeListing.oldestData field intended to deal with it. If upon entering the Dashboard you see that this field is too far into the past, you better drop and reload all challenges loaded into Redux state. Sure, the actual time which triggers this should be exposed via App configuration.
Details
1. You will take base code of the Dashboard from the latest commit in dev branch of topcoder-app and port it into the develop branch of community-app. The ported code should follow the best practices of ReactJS / Redux, being used in the community-app repo. You should properly use react-css-modules and/or react-css-themr for styling. You should implement unit-testing of the ported code.2. In this challenge we'll keep the current style of victory counters. We'll add, however, community tags to the challenge cards, we'll implement community filter, and a simple My Communities tab.
3. All necessary code to fetch My Challenges is already present inside community-app: see challenge listing page, challengeListing section of the Redux state, and related actions / reducers. Don't hesitate to ask about details of how it works in the forum. Here is a brief overview, how relevant logic should work:
- Once a user is properly authenticated (which is already handled by the code), you'll find the list of user's groups under auth.profile.groups path of the Redux state. You'll use these data to render the content of My Communities tab, and to populate community filter in the My Challenges tab.
- To get user challenges you will use actions from src/shared/actions/challenge-listing.js. To fetch user challenges you should (1) generate an uuid, using shortid package; (2) dispatch getInit(uuid) action; (3) dispatch either getMarathonMatches(uuid, filters, param, token, countCategory, user) or getChallenges(uuid, filters, param, token, countCategory, user) action with the same uuid and other necessary parameters.
- For our purposes here you should pass in these functions { status: 'ACTIVE' } as filters, user auth token from auth.tokenV3 path of the Redux state as token, and user handle from auth.user.handle as handle. You can keep other arguments undefined, you also may keep filters undefined to get all user challenges.
- You will find loaded challenges under challengeListing.challenges path of Redux store. You should check challengeListing.pendingRequest path to see when all your requests to load challenges are completed.
Here are few non-intuitive, but important notes about fetching the challenges:
- Passing a valid auth token is very important. Without it API won't include into response any challenges from auth-protected groups (and current version of API does not warn you when it happens).
- You should not assume that challengeListing.challenges contains only the challenges you have asked to load, because other pages of the App may load different challenges into that array. Always filter that array in the necessary way before using it for rendering. Also note that if user runs the App for a long time without restarts, challenge data stored in the Redux state may become outdated. There is challengeListing.oldestData field intended to deal with it. If upon entering the Dashboard you see that this field is too far into the past, you better drop and reload all challenges loaded into Redux state. Sure, the actual time which triggers this should be exposed via App configuration.