Community App - Refactor and spawn into a separate library TC-related actions/reducers/services

Key Information

The challenge is finished.
Show Deadlines

Challenge Overview

Community App is our new frontend for community-faced segment of Topcoder platform, written in ReactJS. Over the year of its existence we have accumulated there quite a lot of code we want to re-use in different apps, thus now we are splitting it into separate libraries.

We already have topcoder-react-utils library (also available via NPM), which will host all generic ReactJS configurations / components / helpers we want to reuse in any ReactJS projects created at Topcoder. We also have topcoder-react-ui-kit (at NPM) library which will host styles and style components specific to Topcoder UI Kit. For the purpose of this challenge, note that topcoder-react-ui-kit uses Babel / ESLint / Jest / Webpack configurations provided by topcoder-react-utils for testing and bundling of the library into distribution package. In this challenge you will create a new topcoder-react-lib library that will host ReactJS actions / reducers / services / utils specific to various interactions with Topcoder backend. This way we will facilitate creation of new stuff for Topcoder, as for many typical operations new Topcoder-related ReactJS apps will be able to reuse the same functionality exposed by that library.

Exact Requirements

  1. Create a new topcoder-react-lib package. Its high-level structure (beside the actual content of /src folder) should be the same as that of topcoder-react-ui-kit, it should rely on configurations exposed by topcoder-react-utils library the same way as topcoder-react-ui-kit does.
  2. In /src folder you will have four subfolders: /actions, /reducers, /services, and /utils, where you will move the stuff specified in the following sections. It will also contain index.js that will be the entry point of the library, similarly to how it is done in two existing libs.
  3. Actions. Move into the new library following sets of actions from Community App (specified by the filenames in https://github.com/topcoder-platform/community-app/tree/develop/src/shared/actions): auth, challenge, direct, groups, member-tasks, members, profile, reviewOpportunity, smp, stats, terms. There are two things to take care about on the way:
    1. You will likely have to add missing merges of actions from different modules (you can find examples in the existing Community App code). It is expected that, to use any action from the new lib, we'll do the following in Community App:
      import { actions } from 'topcoder-react-lib';
      const getChallengeDetailsDoneAction = actions.challenge.getDetailsDone;
    2. You'll probably find that some of the actions in the modules to move are related not to the interactions with TC backend, but to some UI operations on specific Community App pages (thus no point to reuse them). Such actions you should keep in Community App.
  4. Reducers. Move into topcoder-react-lib all reducer modules corresponding to the moved actions. Here is one thing to take care about on the way: server-side rendering (SSR) support.

    In the current code (for example in challenge reducer), at the server side, ExpressJS HTTP Request object is passed through the hierarchy of reducer factories. Each factory is free to check request cookies and path, and use them to generate intial state fitted to the particular request, for example, loading details of the specified challenge. This will not work in the library, because we don't know, at comile time, which routes of the host app will demand preloading of specific data during SSR.

    Please use the following solution:
    1. Instead of HTTP request pass through the hierarchy of reducers an options object. For each reducer factory it shold be specified which options in this object it support, and which data it will preload when these options are provided.
    2. The root reducer factory, in the host app (Community App, or any other) will still take HTTP request as the argument. It will map it into the options object that the library understands, and will pass it to the reducer factory from the library.

      For example, when a challenge details page is rendered at server side, the new flow will be:

      In Community App code:

      - Test that url matches /challenge/CHALLENGE_ID, hence we need to preload challenge details during SSR.

      - Add to options object challenge.challengeDetails.id equal to CHALLENGE_ID.

      - If request contains authentication cookies, extract tokens and add them to options object at auth.tokenV2 and auth.tokenV3 paths.

      - ... probably, some more settings here...

      - Pass resulting options into the the root factory of library reducer imported as import { reducerFactory } from 'topcoder-react-lib';���

      In the lib:

      - Pass the received options object through the hierarchy of reducer functions;

      - Challenge reducer, encountering challenge.challengeDetails.id provided will load challenge details during SSR (and as it will also check that tokens are provided in options, it will also use them to fetch challenge details as an authenticated user).

      - Auth reducer, also seeing auth tokens in options will load user profile.

      Be sure to document options recognized by each reducer factory.
  5. Services. You will move to the lib the following services: api, billing, challenges, direct, groups, members.  reviewOpportunities, terms, user-settings, user. They should be exposed from the library in the following way:
    import { services } from 'topcode-react-lib';
    const challengeService = services.challenge.get(tokenV3, tokenV2);
  6. Utils. Move to the new lib only the stuff you need to move because it is used by the actions / reducers / services you are moving there.
  7. Tests. Move to the new lib tests related to the moved code.
  8. Update Community App (latest develop branch, which is 6e7c3d9188fae0d4a1f55edc5c70912dc2595f10 at the moment of writing) to rely on the new lib.
Should you have any further questions, do not hesitate to ask for clarificiations / advices in the challenge forum.

Final Submission Guidelines

Submit the code of topcoder-react-lib, together with Git patch for community-app.


Topcoder will compensate members in accordance with our standard payment policies, unless otherwise specified in this challenge. For information on payment policies, setting up your profile to receive payments, and general payment questions, please refer to ‌Payment Policies and Instructions.


2018 Topcoder(R) Open


Final Review:

Community Review Board


User Sign-Off

ID: 30064737