Some data being used in the TC header are not loaded yet during server-side rendering.

I'd like to add 2 new communities as follows:

1. Topcoder Product Development

• This will be a community similar to Wipro. It should be restricted to a group. It can have the same pages as well.

2. Demo Expert Community

• This should be open to the public - no login required
• Challenges will use a tech tag for filtering, as well as a group ID. For example, we might want to show challenges in group 1001 plus any challenge with tech=reactJS.

Now when Log Out is triggered via top nav menu (at the moment, we have two top nav menus in this repo: one for the main web-site, another for the TC Community mini-sites), it just redirects user to https://www.topcoder-dev.com/logout. This redirection does log out the user from Topcoder accounts-app, but it does not wipe out auth cookies associated with the community-app subdomain. It is not that obvious, because when the App is restarted it communicates with accounts-app, and cleans the cookies if the user is not authenticated, but there is a short moment before this communication, when the user may see something he is not supposed to see.

In other words, the best way to see this issue:

1. Login as a valid user and go to Wipro community page.
2. Log out through the top nav menu.
3. Press back in the browser until you return to the Wipro community page: you will see the Wipro community page will be visible for a brief time, and only a moment later it will change to the You must be authenticated to access this page message.

Now inside /src/shared/components/ there is a bunch of components related to challenge listings, all in their own folders. We should move them to a dedicated sub-directory, e.g. /src/shared/components/challenge-listing just to enhance navigation around the source code.

As of the moment CSS loading in development environment has some problems, as it loads pre-build css file, and then loads updates from HMR as a part of JS bundle. This is not a correct setup, and should be updated.

Now they are black, should be #888894 according to specs.

Loading fonts as separate files in dev leads to problems with HMR. I've changed it to load fonts as data urls within JS bundle. This solves the problem with HMR, but delays proper rendering of page in dev environment. Should be further investigated and fixed.

Submission data are fetched on client-side. Which is fine to begin with, but perfection demands it to be fixed.

Facebook has deprecated React.PropTypes - related functionality is now split into the separate library https://www.npmjs.com/package/prop-types. We should update our code to use it.

These should be populated with real data from the api. I think we might want to make this configurable too. Let's chat about the api calls to determine each stat...

Challenges = Same as the All Challenges count on the /challenges page
Members = total # of people in the configured group
Prizes = sum of prizes for open challenges
Projects = we might drop this

Setup it up as an express Node.js server, dockerize and push via ElasticBeanstalk.

Add the topcoder favicon to the community app

On the challenges page, add a filter to allow the user to switch between the challenges that are in the current community (based on the group) or All challenges. All challenges would be everything that is open (public) plus any challenges the user has access to via their groups.

We have some designs for this from challenges that chekspir ran. We should use those designs.

Intercept Topcoder API calls to inject auth JWT. Interceptor should also manage refreshing tokens.

When performing npm run fix:styles it brakes linting for some files.

Let's say we checkout commit f3d273d22e09b6a34f0a090cc5be377ac3dd6b79.

How to reproduce

1. Run npm run lint:scss. There are no errors

2. Run npm run fix:styles. It says that 10 files are formatted.

3. Run npm run lint:scss again. Now we get error declaration-empty-line-before in two files src/styles/_forms.scss and src/styles/mixins/_typography.scss.

In total

• fix:styles can create declaration-empty-line-before error
• fix:styles formats some files which lint:scss doesn't treat as broken

Create step by step instructions to add and configure a new community.

1. ./src/shared/containers/tc-communities/Header/index.jsx still contains references to 'tcCommunities.header'
   From the challenge details page, this should be changed to 'tcCommunities.meta'
   Should be properly updated in the following files as well :
   -- ./src/shared/reducers/leaderboard.js
   -- ./src/shared/reducers/tc-communities/header.js

2. ChallengeListing : " For this challenge we want to update it to get filter so that tag comes from from the community meta data endpoint (see header section, and the mock API there)"
   This is not implemented, the tag to be used for filtering ('Javascript' for demo purpose) should be configured (i.e in future returned by the API) in /src/server/tc-communities/wipro/metadata.json

To be implemented

Depending on the site you're hitting, the login needs to redirect the user back to the appropriate site. It should fallback to the default www.topcoder.com if we're not within a specific community site.

At the moment we re-use the standard Topcoder footer there, and it gets some problems with nav link colors:

Hot Module Replacement (HMR) fails for SCSS modules containing @include statements. E.g. at the fonts test page (/examples/fonts-test endpoint) when you try to edit corresponding style.scss file while the App is running in dev mode with that page open, you'll see that most of the text will just dissapear. HMR seems to work fine in other cases, though.

loading-indicator component is not used correctly, it should be used in the LeaderboardPageContainer when loading the data.
it should not be used in Podium component.

Besides, if there is only 1 or 2 users on leaderboard, the Podium component won't render it properly as it accesses comps[1] and comps[2] directly.

I'm in Safari on a Mac. When I load the wipro.topcoder.com site, I don't see the login button...

From preliminary winning submission:

Project has to run using domain http://local.topcoder-dev.com:3000/. It's because we use server not only to serve frontend but also for demo API. Though for API we have to define absolute paths to work properly on the server side.

I believe, there should be a simple workaround.

Some feedback from DaraK...

1. There should be a little more space between the action buttons to limit the user from accidentally clicking the wrong action.

2. The preview image was a little too small, not sure we can see the difference on 2 different preview versions of design

Let's add a config so we can specify a blog feed url to use for Latest News posts. We can use this as a sample feed: www.topcoder.com/feed

It looks like the login and register links in the header for communities is hard coded to wipro.topcoder.com. Can we make those always return to the page the user is on?

Does not work because, according to the winning submission:

• there's no endpoint for deleting a specific submission (/challenges/{id}/resources in v3 doesn't work either)

Now it is black, should be #444 according to specs.

A comment to winning submission tells

there's an endpoint in v2 (/v2/{type}/download/{submId}?submissionType=original) that states it lets you download a specific submission, doesn't seem to work

Probably it works, but submitter made some auth-related mistake?

Ref https://github.com/appirio-tech/connect-app/blob/dev/src/actions/loadUser.js

Topcoder header and footer should be copied into this repo, to be used in TC pages served from here.

@birdofpreyru i dug around to figure out why deploys are failing, and builds are essentially timing out. Are there any dependencies that we dont currently need - react-draft-wysiwyg for eg. Mind removing those and giving it a try.

Current version of SMP shows dummy submission previews and no screening / review status info.
The core problem is that TC API v3 does not allow to fetch challenges yet (or have we failed to find the right endpoints?) and TC API v2 does not provide previews and screening / review info.

The api response for the leaderboard has been updated. We need to update the app to support the new api response.

This is the latest: https://api.topcoder.com/v4/looks/458/run/json/

Must haves

• webpack2
• react
• redux
• babel-plugin-react-css-modules (https://github.com/gajus/babel-plugin-react-css-modules)
• react-svg-loader (https://github.com/boopathi/react-svg-loader)
• eslint (airbnb)
• stylelint
• stylefmt
• scss loaders
• autoprefixer
• unit testing ..
• font loading...
• axios / isomorphic-fetch
• CircleCI deploys (this can come later)

Good To have

• webpack-dashboard (https://github.com/FormidableLabs/webpack-dashboard)
• react-css-themr (https://github.com/javivelasco/react-css-themr)
• path resolver (alias)
• redux-devtools
• redux-devtools-log-monitor
• redux-devtools-dock-monitor

Sample boilerplate:
https://github.com/nicksp/redux-webpack-es6-boilerplate

Structure that supports isomorphic app - (https://reactjsnews.com/isomorphic-react-in-real-life)

• Structure

node_modules /
config /
src /
  assets / --- images
  / api -- capture api calls to topcoder.com
  / shared / 
    / containers
      |--project-listing/
        |--actions/
        |--components/
          |--card/
            |--card.jsx
            |--card.js
            |--card.scss
          |--grid_header/
          |--grid_footer/
        |--reducers/
      |--projectListing.jsx
      |--projectListing.js
      |--projectListing.scss
    / components
        ..... 
    / reducers
    / actions
  / client
  / server

Let's make sure we're setup to log to logentries.com

https://docs.logentries.com/v1.0/docs/nodejs

My challenges are not actually loaded at the moment :(

I just clone this repository and didn't modify any thing, when I run "npm run dev" in terminal, it shows errors. Here is the log.

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
/Users/luoxiongwen/Code/topcoder/community-app/node_modules/[email protected]@tc-accounts/exports.js:1
(function (exports, require, module, __filename, __dirname) { export { configureConnector, getFreshToken, logout } from './connector/connector-wrapper.js'
                                                               ^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:545:28)
    at Module._extensions..js (module.js:582:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/luoxiongwen/Code/topcoder/community-app/node_modules/[email protected]@babel-register/lib/node.js:152:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/luoxiongwen/Code/topcoder/community-app/src/shared/actions/auth.js:8:1)

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v7.0.0
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `NODE_ENV=development node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'NODE_ENV=development node ./bin/www'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the community-app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_ENV=development node ./bin/www
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs community-app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls community-app
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/luoxiongwen/Code/topcoder/community-app/npm-debug.log```

Let's make these real links that go to the specific community sites:

We should probably have some kind of config for it.

Once the challenge is finished, the counter of time till the end of the phase shows negative number.
Also in other spot we still show when submission ends, though it is not useful once the phase is finished.
In general, we should double-check and fix all logic in the page, related phase periods, etc.

Depending on the subdomain/community, we should default to a specific landing page. For example, wipro.topcoder.com should load wipro.topoder.com/community/wipro2/home

This warning is shown, for example, during unit testing (npm run jest). Code should be upgraded to avoid it.

After the last challenge there are some failing tests, also the global test coverage should be increased.

From that submission comments

SubmissionManagement component will fail the snapshot test since we need to dinamically show the user the time left till the current phase ends.

The time for that component comes from a call to Topcoder API. That call should be mocked with standard Jest methods, and then snapshot test will be feasible.

This warning shows during $ npm run lint:js. Should be fixed.

It looks from the code that winner has supported server-side rendering of the page, but it does not work correctly, according to the warning in the browser console:

bundle.js:26959 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) .w3.org/1999/xlink" class="src-shared-co
 (server) .w3.org/1999/xlink" data-reactid="27"><t

Probably it is related to how the mocked data are handled, and will be automatically resolved, once we move to real API for fetching leaderboard data.

• in many scss file of components we import main style like @import '~styles/tc-styles' This import is being processed by scss which include imported files every time we import it and not only once like webpack.

Most probably, this is not a problem in prod, as styles are optimized by CSS optimization/uglification plugin, which is not used in dev, though. Should be double-checked and enhanced.