diff --git a/README.md b/README.md index affdbf9d82..4315c3dbea 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,11 @@ It is intended that Wipro community is accessed as `wipro.topcoder-dev.com` in d 2. Once you have added this alias to your `/etc/hosts`, it is extremely easy to forget about it and to be totally confused when failing to access the remotely deployed dev version of the App (because `wipro.topcoder-dev.com` is used in both places). ***Thus we recommend to comment out this alias in `/etc/hosts` whenever you don't need it!!!*** Technically, it makes total sense just to run the local dev version of the App at, say, `local.wipro.topcoder-dev.com:3000`, and the code does support it... the problem is that, as of now, Topcoder's `accounts-app` does not allow to authenticated from such subdomain/port, thus you won't be permitted to access. -3. As of now, this community can be also rapidly accessed at `local.topcoder-dev.com/community/wipro/`. It should be fine to use it during development, just keep in mind that you should use relative links to navigate inside the community, as our primary goal is to ensure it is properly funcional at `wipro.topcode-dev.com`. +3. As of now, this community can be also rapidly accessed at `local.topcoder-dev.com/community/wipro/`. It should be fine to use it during development, just keep in mind that you should use relative links to navigate inside the community, as our primary goal is to ensure it is properly funcional at `wipro.topcoder-dev.com`. + +### Configuration for *logentries.com* + +We use [https://logentries.com](https://logentries.com) to track the logs. Log Entries API token should be provided via the `LOG_ENTRIES_TOKEN` environment variable, which will override the default values set in `/config/default.json` (sample account for local setup testing), and in `/config/production.json` (empty token) - with empty token Log Entries will not be used. ### Development Notes - [Challenge Listing - Notes from winning submission](docs/challenge-listing-notes.md) diff --git a/__mocks__/le_node.js b/__mocks__/le_node.js new file mode 100644 index 0000000000..0b919833b5 --- /dev/null +++ b/__mocks__/le_node.js @@ -0,0 +1,11 @@ +/* eslint-disable no-console */ + +module.exports = ({ token }) => { + if (!token) throw Error('Invalid token!'); + return { + err: console.log, + info: console.log, + log: console.log, + warning: console.log, + }; +}; diff --git a/__tests__/shared/components/examples/__snapshots__/Content.jsx.snap b/__tests__/shared/components/examples/__snapshots__/Content.jsx.snap index a9ec26b126..4cef5faf74 100644 --- a/__tests__/shared/components/examples/__snapshots__/Content.jsx.snap +++ b/__tests__/shared/components/examples/__snapshots__/Content.jsx.snap @@ -173,12 +173,28 @@ exports[`Matches shallow shapshot 1`] = ` . +
  • + + Demo Expert Community + +
    • +
  • + + Topcoder Product Development + +
  • - Wipro 2 Community Homepage + Wipro Community Homepage – Example of community implementation with new design. This community has three more pages: { rnd.render((
    @@ -22,6 +28,7 @@ test('Snapshot match', () => {
    diff --git a/__tests__/shared/components/tc-communities/__snapshots__/Header.jsx.snap b/__tests__/shared/components/tc-communities/__snapshots__/Header.jsx.snap index 8577a01db5..9621463ac2 100644 --- a/__tests__/shared/components/tc-communities/__snapshots__/Header.jsx.snap +++ b/__tests__/shared/components/tc-communities/__snapshots__/Header.jsx.snap @@ -34,24 +34,14 @@ exports[`Snapshot match 1`] = ` options={ Array [ Object { - "label": "Wipro Hybrid Crowd", + "label": "Community Name", "value": "1", }, - Object { - "label": "Cognitive Community", - "redirect": "http://cognitive.topcoder.com/", - "value": "2", - }, - Object { - "label": "iOS Community", - "redirect": "https://ios.topcoder.com/", - "value": "3", - }, ] } value={ Object { - "label": "Wipro Hybrid Crowd", + "label": "Community Name", "value": "1", } } @@ -153,24 +143,14 @@ exports[`Snapshot match 2`] = ` options={ Array [ Object { - "label": "Wipro Hybrid Crowd", + "label": "Community Name", "value": "1", }, - Object { - "label": "Cognitive Community", - "redirect": "http://cognitive.topcoder.com/", - "value": "2", - }, - Object { - "label": "iOS Community", - "redirect": "https://ios.topcoder.com/", - "value": "3", - }, ] } value={ Object { - "label": "Wipro Hybrid Crowd", + "label": "Community Name", "value": "1", } } diff --git a/__tests__/shared/components/tc-communities/communities/wipro2/__snapshots__/Learn.jsx.snap b/__tests__/shared/components/tc-communities/communities/wipro2/__snapshots__/Learn.jsx.snap index 493ede0c9b..073e3d3769 100644 --- a/__tests__/shared/components/tc-communities/communities/wipro2/__snapshots__/Learn.jsx.snap +++ b/__tests__/shared/components/tc-communities/communities/wipro2/__snapshots__/Learn.jsx.snap @@ -40,7 +40,7 @@ exports[`Snapshot match 1`] = ` mapThemrProps={[Function]} onTitleClick={[Function]} theme={Object {}} - title="Joining the Community" + title="Overview" >

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, + The FULCRUM is “one stop shop” for access to a wide range of training and learning opportunities on Wipro’s Hybrid Crowd. Designed to strengthen the skills of employees, the hub offers physical and online platforms to learn skills on demand, gain hands-on experience, and be future ready.

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, + Meticulously crafted comprehensive learning paths, detailed study material, engaging case studies, training projects to systematically enhance your career, development environments to practice, convenient online accessibility, opportunity to connect with mentors, peers, SMEs of various technologies – a variety of resources bringing people and technology together for an innovative and valuable learning experience.

    -
    - - Join Now - -
    -     - - - -

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, -

    -     -     - - -

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, -

    -

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, -

    -
    - - Join Now - -
    -     -     - -

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, + Our compelling learning environment across wide range of emerging technologies helps you in mastering today’s most essential skills, that brings your knowledge to the next level, step by step, which ultimately creates a more effective learning experience.

    -     -     - -

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, -

    -

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, + Are you ready to step onto the innovative journey of learning?

    - - Join Now - + Start Exploring +
    - - -

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, -

    -     -     - - -

    - Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis, -

    -     -     { beforeAll(() => { process.env.NODE_ENV = 'development'; }); - test('is an alias for console in dev environment', () => + test.skip('is an alias for console in dev environment', () => expect(require('utils/logger').default).toBe(console)); }); @@ -17,7 +17,7 @@ describe('Prod logger', () => { jest.resetModules(); process.env.NODE_ENV = 'production'; }); - test('does not use console methods', () => { + test.skip('does not use console methods', () => { const logger = require('utils/logger').default; const spies = _.functions(console).map(key => jest.spyOn(console, key)); _.functions(console).forEach((func) => { diff --git a/config/custom-environment-variables.json b/config/custom-environment-variables.json new file mode 100644 index 0000000000..7688acfc5d --- /dev/null +++ b/config/custom-environment-variables.json @@ -0,0 +1,6 @@ +/* Specifies environment variables, which, when set, will override their + * counterparts from configuration files. */ + +{ + "LOG_ENTRIES_TOKEN": "LOG_ENTRIES_TOKEN" +} diff --git a/config/default.json b/config/default.json index 40514ba468..1df3ed3cd9 100644 --- a/config/default.json +++ b/config/default.json @@ -24,6 +24,10 @@ "SECURE": false }, + /* API token for logentries.com. The token below is just for local testing of + * the setup. To override it use LOG_ENTRIES_TOKEN environment variable. */ + "LOG_ENTRIES_TOKEN": "816f5574-0d4a-49f9-ab3b-00d791f7c1f7", + /* Amount of time [seconds] before expiration of authentication tokens, * when the frontend will automatically trigger their refreshment. Once * ready, it will either write to the Redux store fresh token, or will diff --git a/config/production.json b/config/production.json index 303d5156c1..162cc2ebe2 100644 --- a/config/production.json +++ b/config/production.json @@ -8,6 +8,7 @@ "MAXAGE": 7, "SECURE": true }, + "LOG_ENTRIES_TOKEN": "", "URL": { "ARENA": "https://arena.topcoder.com/", "AUTH": "https://accounts.topcoder.com/member", diff --git a/config/webpack/default.js b/config/webpack/default.js index f3f20df688..1d67fc2a97 100644 --- a/config/webpack/default.js +++ b/config/webpack/default.js @@ -10,6 +10,10 @@ module.exports = { context, entry: './src/client', module: { + noParse: [ + /* NodeJS library for https://logentries.com. It is server-side only. */ + /\/node_modules\/le_node/, + ], rules: [{ test: /\.(eot|otf|svg|ttf|woff|woff2)$/, include: [ diff --git a/config/webpack/production.js b/config/webpack/production.js index ec5dad0012..5cdeeb13da 100644 --- a/config/webpack/production.js +++ b/config/webpack/production.js @@ -6,8 +6,13 @@ const defaultConfig = require('./default'); module.exports = webpackMerge(defaultConfig, { module: { - /* To avoid bundling of redux-devtools into production bundle. */ - noParse: /\/src\/shared\/containers\/DevTools/, + noParse: [ + /* NodeJS library for https://logentries.com. It is server-side only. */ + /\/node_modules\/le_node/, + + /* To avoid bundling of redux-devtools into production bundle. */ + /\/src\/shared\/containers\/DevTools/, + ], }, plugins: [ new webpack.DefinePlugin({ diff --git a/package.json b/package.json index 65b9cee414..0e43b54bca 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "isomorphic-fetch": "^2.2.1", "jest": "^20.0.0", "jquery": "^3.2.1", + "le_node": "^1.7.0", "lodash": "^4.17.4", "moment": "^2.18.1", "morgan": "^1.8.1", @@ -91,6 +92,7 @@ "redux": "^3.6.0", "redux-actions": "^2.0.1", "redux-promise": "^0.5.3", + "request-ip": "^2.0.1", "resolve-url-loader": "^2.0.2", "sass-loader": "^6.0.3", "serialize-javascript": "^1.3.0", diff --git a/src/assets/themes/demo-expert/logo_topcoder_with_name.svg b/src/assets/themes/demo-expert/logo_topcoder_with_name.svg new file mode 100644 index 0000000000..526eb7f317 --- /dev/null +++ b/src/assets/themes/demo-expert/logo_topcoder_with_name.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/themes/tc-prod-dev/logo_topcoder_with_name.svg b/src/assets/themes/tc-prod-dev/logo_topcoder_with_name.svg new file mode 100644 index 0000000000..526eb7f317 --- /dev/null +++ b/src/assets/themes/tc-prod-dev/logo_topcoder_with_name.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/client/index.jsx b/src/client/index.jsx index ddbab67fea..dfd7a5c8da 100644 --- a/src/client/index.jsx +++ b/src/client/index.jsx @@ -53,9 +53,7 @@ function authenticate(store) { getFreshToken().then((tctV3) => { const tctV2 = cookies.get('tcjwt'); logger.log('Authenticated as:', decodeToken(tctV3)); - logger.log('Topcoder API v3 token:', tctV3); if (!tctV2) logger.error('Failed to fetch API v2 token!'); - else logger.log('Topcoder API v2 token:', tctV2); return ({ tctV2, tctV3 }); }).catch(() => { logger.warn('Authentication failed!'); diff --git a/src/server/.eslintrc b/src/server/.eslintrc deleted file mode 100644 index 1ac998e606..0000000000 --- a/src/server/.eslintrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "rules": { - // It is fine to use console server-side - // http://eslint.org/docs/rules/no-console - "no-console": 0 - } -} diff --git a/src/server/index.js b/src/server/index.js index 534723d982..aa0d7f4d57 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -4,6 +4,7 @@ import _ from 'lodash'; import http from 'http'; +import logger from 'utils/logger'; import app from './server'; /** @@ -36,11 +37,11 @@ function onError(error) { /* Human-readable messages for some specific listen errors. */ switch (error.code) { case 'EACCES': - console.error(`${bind} requires elevated privileges`); + logger.error(`${bind} requires elevated privileges`); process.exit(1); break; case 'EADDRINUSE': - console.error(`${bind} is already in use`); + logger.error(`${bind} is already in use`); process.exit(1); break; default: @@ -54,7 +55,7 @@ function onError(error) { function onListening() { const addr = server.address(); const bind = _.isString(addr) ? `pipe ${addr}` : `port ${addr.port}`; - console.log(`Server listening on ${bind} in ${process.env.NODE_ENV} mode`); + logger.log(`Server listening on ${bind} in ${process.env.NODE_ENV} mode`); } /* Listens on provided port, on all network interfaces. */ diff --git a/src/server/renderer.jsx b/src/server/renderer.jsx index d64ea67c82..1e455e8439 100644 --- a/src/server/renderer.jsx +++ b/src/server/renderer.jsx @@ -3,6 +3,7 @@ * the App. */ +import _ from 'lodash'; import config from 'config'; import React from 'react'; import ReactDOM from 'react-dom/server'; // This may cause warning of PropTypes @@ -16,6 +17,14 @@ import App from '../shared'; * to put the store into correct state depending on the demanded route. */ import storeFactory from '../shared/store-factory'; +const sanitizedConfig = serializeJs( + _.omit(config, [ + 'LOG_ENTRIES_TOKEN', + ]), { + isJSON: true, + }, +); + export default (req, res) => { storeFactory(req).then((store) => { const context = {}; @@ -46,7 +55,7 @@ export default (req, res) => {
    ${appHtml}
    diff --git a/src/server/server.js b/src/server/server.js index 1b730f6526..e4f318a939 100644 --- a/src/server/server.js +++ b/src/server/server.js @@ -3,9 +3,12 @@ import atob from 'atob'; import bodyParser from 'body-parser'; import cookieParser from 'cookie-parser'; import express from 'express'; -import logger from 'morgan'; +import logger from 'utils/logger'; +import loggerMiddleware from 'morgan'; import path from 'path'; import favicon from 'serve-favicon'; +import requestIp from 'request-ip'; +import stream from 'stream'; // Temporarily here to test our API service. // import '../shared/services/api'; @@ -33,10 +36,30 @@ const app = express(); global.atob = atob; app.use(favicon(path.resolve(__dirname, '../assets/images/favicon.ico'))); -app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); +app.use(requestIp.mw()); + +/* Log Entries service proxy. */ +app.use('/api/logger', (req, res) => { + logger.log(`${req.clientIp} > `, ...req.body.data); + res.end(); +}); + +loggerMiddleware.token('ip', req => req.clientIp); + +app.use(loggerMiddleware(':ip > :status :method :url :response-time ms :res[content-length] :referrer :user-agent', { + stream: new stream.Writable({ + decodeStrings: false, + write: (chunk, encoding, cb) => { + if (!chunk.match(/ELB-HealthChecker\/2.0/)) { + logger.log(chunk); + } + cb(); + }, + }), +})); /* Setup of Webpack Hot Reloading for development environment. * These dependencies are not used nor installed in production deployment, diff --git a/src/server/tc-communities/demo-expert/metadata.json b/src/server/tc-communities/demo-expert/metadata.json new file mode 100644 index 0000000000..eb99c69045 --- /dev/null +++ b/src/server/tc-communities/demo-expert/metadata.json @@ -0,0 +1,36 @@ +{ + "challengeGroupId": "1001", + "challengeFilterTag": ".NET", + "communityId": "demo-expert", + "communitySelector": [{ + "label": "Demo Expert Community", + "value": "1" + }, { + "label": "Cognitive Community", + "redirect": "http://cognitive.topcoder.com/", + "value": "2" + }, { + "label": "iOS Community", + "redirect": "https://ios.topcoder.com/", + "value": "3" + }], + "logos": [ + "/themes/demo-expert/logo_topcoder_with_name.svg" + ], + "menuItems": [ + { + "title": "Home", + "url": "." + }, { + "title": "Learn", + "url": "learn" + }, { + "title": "Challenges", + "url": "challenges" + }, { + "title": "Leaderboard", + "url": "leaderboard" + } + ], + "leaderboardApiUrl": "https://api.topcoder.com/v4/looks/0/run/json/" +} diff --git a/src/server/tc-communities/tc-prod-dev/metadata.json b/src/server/tc-communities/tc-prod-dev/metadata.json new file mode 100644 index 0000000000..85d3a8682d --- /dev/null +++ b/src/server/tc-communities/tc-prod-dev/metadata.json @@ -0,0 +1,39 @@ +{ + "authorizedGroupIds": [ + "20000000" + ], + "challengeGroupId": "20000000", + "challengeFilterTag": "", + "communityId": "tc-prod-dev", + "communitySelector": [{ + "label": "Topcoder Product Development", + "value": "1" + }, { + "label": "Cognitive Community", + "redirect": "http://cognitive.topcoder.com/", + "value": "2" + }, { + "label": "iOS Community", + "redirect": "https://ios.topcoder.com/", + "value": "3" + }], + "logos": [ + "/themes/wipro/logo_topcoder_with_name.svg" + ], + "menuItems": [ + { + "title": "Home", + "url": "." + }, { + "title": "Learn", + "url": "learn" + }, { + "title": "Challenges", + "url": "challenges" + }, { + "title": "Leaderboard", + "url": "leaderboard" + } + ], + "leaderboardApiUrl": "https://api.topcoder.com/v4/looks/0/run/json/" +} diff --git a/src/server/tc-communities/wipro/metadata.json b/src/server/tc-communities/wipro/metadata.json index 2a7a772ac9..30e208ded7 100644 --- a/src/server/tc-communities/wipro/metadata.json +++ b/src/server/tc-communities/wipro/metadata.json @@ -5,6 +5,18 @@ "challengeGroupId": "20000000", "challengeFilterTag": "", "communityId": "wipro", + "communitySelector": [{ + "label": "Wipro Hybrid Crowd", + "value": "1" + }, { + "label": "Cognitive Community", + "redirect": "http://cognitive.topcoder.com/", + "value": "2" + }, { + "label": "iOS Community", + "redirect": "https://ios.topcoder.com/", + "value": "3" + }], "logos": [ "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Wipro_Logo_RGB.png/480px-Wipro_Logo_RGB.png", "/themes/wipro/logo_topcoder_with_name.svg" diff --git a/src/shared/components/challenge-listing/ChallengeCardContainer/index.jsx b/src/shared/components/challenge-listing/ChallengeCardContainer/index.jsx index fd6b43a03c..2798309b3d 100644 --- a/src/shared/components/challenge-listing/ChallengeCardContainer/index.jsx +++ b/src/shared/components/challenge-listing/ChallengeCardContainer/index.jsx @@ -28,7 +28,7 @@ import _ from 'lodash'; import React, { Component } from 'react'; import PT from 'prop-types'; import SortingSelectBar from 'components/SortingSelectBar'; -import InfiniteList from 'components/InfiniteList'; +import InfiniteList from '../InfiniteList'; import defaultFilters from './challengeFilters'; import defaultSortingFunctionStore from './sortingFunctionStore'; import { @@ -126,7 +126,7 @@ class ChallengeCardContainer extends Component { } render() { - const { additionalFilter, filters, fetchCallback } = this.props; + const { additionalFilter, filters } = this.props; const { currentFilter, expanded, @@ -224,7 +224,6 @@ class ChallengeCardContainer extends Component { res.challenges), ]).then(([a, b]) => a.concat(b)); }} - fetchItemFinishCallback={fetchCallback} batchNumber={batchLoadNumber} filter={additionalFilter} tempDataFilter={filterName} @@ -252,7 +251,6 @@ ChallengeCardContainer.defaultProps = { currentFilterName: '', challenges: [], expanded: false, - fetchCallback: _.noop, config: {}, }; @@ -278,7 +276,6 @@ ChallengeCardContainer.propTypes = { info: PT.shape(), })), expanded: PT.oneOfType([PT.bool, PT.string]), - fetchCallback: PT.func, getChallenges: PT.func.isRequired, getMarathonMatches: PT.func.isRequired, config: PT.shape(), diff --git a/src/shared/components/InfiniteList/generalHelpers.js b/src/shared/components/challenge-listing/InfiniteList/generalHelpers.js similarity index 100% rename from src/shared/components/InfiniteList/generalHelpers.js rename to src/shared/components/challenge-listing/InfiniteList/generalHelpers.js diff --git a/src/shared/components/InfiniteList/index.jsx b/src/shared/components/challenge-listing/InfiniteList/index.jsx similarity index 98% rename from src/shared/components/InfiniteList/index.jsx rename to src/shared/components/challenge-listing/InfiniteList/index.jsx index fe2dca831e..d2b687ce2d 100644 --- a/src/shared/components/InfiniteList/index.jsx +++ b/src/shared/components/challenge-listing/InfiniteList/index.jsx @@ -86,7 +86,6 @@ class InfiniteList extends Component { fetchItems: () => this.fetchNewItems(), finishCallback: (newItems) => { this.state.newItemsCount = newItems.length ? newItems.length : 0; - this.props.fetchItemFinishCallback(newItems); this.currentPageIndex += 1; this.setLoadingStatus(false); }, @@ -215,7 +214,6 @@ InfiniteList.defaultProps = { sort: () => true, fetchItems: null, uniqueIdentifier: false, - fetchItemFinishCallback: _.noop, renderItem: _.noop, tempDataFilter: null, }; @@ -230,7 +228,6 @@ InfiniteList.propTypes = { filter: PT.func, sort: PT.func, uniqueIdentifier: PT.oneOfType([PT.string, PT.bool]), - fetchItemFinishCallback: PT.func, renderItem: PT.func, tempDataFilter: PT.string, }; diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx index ec77b6981a..77360e58e1 100755 --- a/src/shared/components/challenge-listing/index.jsx +++ b/src/shared/components/challenge-listing/index.jsx @@ -25,7 +25,7 @@ import SideBarFilter, { MODE as SideBarFilterModes } from './SideBarFilters/Side import SideBarFilters from './SideBarFilters'; import ChallengeCard from './ChallengeCard'; import ChallengeCardContainer from './ChallengeCardContainer'; -// import ChallengeCardPlaceholder from './placeholders/ChallengeCardPlaceholder'; +import ChallengeCardPlaceholder from './placeholders/ChallengeCardPlaceholder'; import SidebarFilterPlaceholder from './placeholders/SidebarFilterPlaceholder'; import SRMCard from './SRMCard'; import ChallengesSidebar from './Sidebar'; @@ -46,7 +46,7 @@ function keywordsMapper(keyword) { } // Number of challenge placeholder card to display -// const CHALLENGE_PLACEHOLDER_COUNT = 8; +const CHALLENGE_PLACEHOLDER_COUNT = 8; // A mock list of SRMs side bar const SRMsSidebarMock = { @@ -102,20 +102,6 @@ const deserialize = (queryString) => { // The demo component itself. class ChallengeFiltersExample extends React.Component { - constructor(props) { - super(props); - this.state = { - // challenges: [], - // srmChallenges: [], - // currentCardType: 'Challenges', - // filter: new SideBarFilter(), - // lastFetchId: 0, - - // isSRMChallengesLoading: false, - // isSRMChallengesLoaded: false, - }; - // this.setCardType.bind(this); - } /** * ChallengeFiltersExample was brought from another project without server rendering support. @@ -142,42 +128,8 @@ class ChallengeFiltersExample extends React.Component { }); } */ - - /* - if (!this.state.isChallengesLoading && !this.state.isChallengesLoaded) { - // eslint-disable-next-line react/no-did-mount-set-state - this.setState({ isChallengesLoading: true }); - this.fetchChallenges(0).then((res) => { - this.setChallenges(0, res); - this.setState({ isChallengesLoading: false, isChallengesLoaded: true }); - }); - } - */ } - /* - componentDidUpdate(prevProps) { - if (this.props.auth.tokenV3 !== prevProps.auth.tokenV3) { - setImmediate(() => { - this.setState({ - challenges: [], - lastFetchId: 1, - isChallengesLoading: true, - isChallengesLoaded: false, - isLoaded: false, - }); - this.fetchChallenges().then((res) => { - this.setChallenges(1, res); - this.setState({ - isChallengesLoading: false, - isChallengesLoaded: true, - }); - }); - }); - } - } - */ - /** * Searches the challenges for with the specified search string, competition * tracks, and filters. @@ -281,11 +233,10 @@ class ChallengeFiltersExample extends React.Component { const filter = this.getFilter(); const { name: sidebarFilterName } = filter; + const expanded = sidebarFilterName !== 'All Challenges'; + let challengeCardContainer; - /* - TODO: Rendering of the challenge placeholders during initial loading - is temporarly disabled. - if (false && this.props.loadingChallenges && (sidebarFilterName !== 'All Challenges')) { + if (!expanded && this.props.loadingChallenges) { const challengeCards = _.range(CHALLENGE_PLACEHOLDER_COUNT) .map(key => ); challengeCardContainer = ( @@ -295,7 +246,7 @@ class ChallengeFiltersExample extends React.Component { ); - } else */ if (filter.isCustomFilter) { + } else if (filter.isCustomFilter) { if (currentFilter.mode === SideBarFilterModes.CUSTOM) { challenges = this.props.challenges.filter(currentFilter.getFilterFunction()); } @@ -338,15 +289,6 @@ class ChallengeFiltersExample extends React.Component { challengeGroupId={this.props.challengeGroupId} currentFilterName={sidebarFilterName} expanded={sidebarFilterName !== 'All Challenges'} - fetchCallback={_.noop /* (fetchedChallenges) => { - /* - this.setState({ - challenges: _.uniqBy( - challenges.concat(fetchedChallenges), - 'id', - ), - }); - }*/} getChallenges={this.props.getChallenges} getMarathonMatches={this.props.getMarathonMatches} additionalFilter={ @@ -430,7 +372,7 @@ class ChallengeFiltersExample extends React.Component {
    - {!this.props.loadingChallenges ? ( - {!this.props.loadingChallenges ? (.
  • - Wipro 2 Community Homepage – + Demo Expert Community +
    • +
  • + Topcoder Product + Development +
    • +
  • + Wipro Community Homepage – Example of community implementation with new design. This community has three more pages: Learn , Challenges diff --git a/src/shared/components/tc-communities/Accordion/Accordion/style.scss b/src/shared/components/tc-communities/Accordion/Accordion/style.scss index 1e8a46c9e1..f3b5d7638d 100644 --- a/src/shared/components/tc-communities/Accordion/Accordion/style.scss +++ b/src/shared/components/tc-communities/Accordion/Accordion/style.scss @@ -37,6 +37,10 @@ font: 600 15px/20px 'Open Sans'; padding: 20px 0; position: relative; + + div { + outline: none; + } } .titleListItemSelected { diff --git a/src/shared/components/tc-communities/Header/index.jsx b/src/shared/components/tc-communities/Header/index.jsx index 3bccb57ac9..f56b1f3948 100644 --- a/src/shared/components/tc-communities/Header/index.jsx +++ b/src/shared/components/tc-communities/Header/index.jsx @@ -24,6 +24,7 @@ export default function Header(props) { const { activeTrigger, closeMenu, + communitySelector, openMenu, openedMenu, logos, @@ -37,22 +38,6 @@ export default function Header(props) { loginUrl, } = props; - // hardcode dropdown options for now - const communitiesDropdownOptions = [ - { - label: 'Wipro Hybrid Crowd', - value: '1', - }, { - label: 'Cognitive Community', - redirect: 'http://cognitive.topcoder.com/', - value: '2', - }, { - label: 'iOS Community', - redirect: 'https://ios.topcoder.com/', - value: '3', - }, - ]; - const BASE_URL = config.URL.BASE; let userSubMenu; @@ -146,8 +131,8 @@ export default function Header(props) {
    @@ -211,6 +196,7 @@ Header.defaultProps = { Header.propTypes = { activeTrigger: PT.shape({}), closeMenu: PT.func.isRequired, + communitySelector: PT.arrayOf(PT.shape()).isRequired, registerUrl: PT.string.isRequired, loginUrl: PT.string.isRequired, menuItems: PT.arrayOf(PT.shape({ diff --git a/src/shared/components/tc-communities/communities/demo-expert/Home/index.jsx b/src/shared/components/tc-communities/communities/demo-expert/Home/index.jsx new file mode 100644 index 0000000000..26310b1bb2 --- /dev/null +++ b/src/shared/components/tc-communities/communities/demo-expert/Home/index.jsx @@ -0,0 +1,153 @@ +/** + * Static implementation of Home page for Wipro 2 community + * + * It hardcodes data which is passed to dummy components, + * thus we disable max-len eslint rule for this file + */ +/* eslint-disable max-len */ + +import React from 'react'; +import Section from 'components/tc-communities/Section'; +import Banner from 'components/tc-communities/Banner'; +import IconStat from 'components/tc-communities/IconStat'; +import ImageText from 'components/tc-communities/ImageText'; +import ResourceCard from 'components/tc-communities/ResourceCard'; +import ArticleCard from 'components/tc-communities/ArticleCard'; +import NewsletterSignup from 'components/tc-communities/NewsletterSignup'; + +import IconSuitcase from '../../../../../../assets/images/tc-communities/suitcase.svg'; +import IconRocket from '../../../../../../assets/images/tc-communities/rocket.svg'; +import IconMember from '../../../../../../assets/images/tc-communities/member.svg'; +import IconDollar from '../../../../../../assets/images/tc-communities/dollar.svg'; +import IconNetwork from '../../../../../../assets/images/tc-communities/network.svg'; +import IconMedal from '../../../../../../assets/images/tc-communities/medal.svg'; + +import style from './style.scss'; + +export default function Home() { + return ( +
    + + +
    + + + + +
    + +
    +
    + + +
    +
    + +
    + + + +
    + +
    + + + +
    + + + +
    + ); +} diff --git a/src/shared/components/tc-communities/communities/demo-expert/Home/style.scss b/src/shared/components/tc-communities/communities/demo-expert/Home/style.scss new file mode 100644 index 0000000000..2ec64bb553 --- /dev/null +++ b/src/shared/components/tc-communities/communities/demo-expert/Home/style.scss @@ -0,0 +1,33 @@ +@import '~styles/tc-styles'; + +.statsContainer { + padding: 0; +} + +.statsContent { + border-bottom: 1px solid #ddd; + padding: 43px 38px 50px; + + @include xxs-to-sm { + display: flex; + justify-content: space-around; + padding: 30px 12px 32px; + } +} + +.resourcesContainer { + background-color: #fafafa; + padding: 70px 0; + + @include xxs-to-sm { + padding: 40px 0; + } +} + +.linksContainer { + padding: 60px 0; + + @include xxs-to-sm { + padding: 0; + } +} diff --git a/src/shared/components/tc-communities/communities/demo-expert/Learn/index.jsx b/src/shared/components/tc-communities/communities/demo-expert/Learn/index.jsx new file mode 100644 index 0000000000..c1c1f10ea9 --- /dev/null +++ b/src/shared/components/tc-communities/communities/demo-expert/Learn/index.jsx @@ -0,0 +1,197 @@ +/** + * Static implementation of Learn page for Wipro 2 community + * + * It hardcodes data which is passed to dummy components, + * thus we disable max-len eslint rule for this file + */ +/* eslint-disable max-len */ + +import React from 'react'; +import { Link } from 'react-router-dom'; +import Section from 'components/tc-communities/Section'; +import Accordion from 'components/tc-communities/Accordion/Accordion'; +import AccordionItem from 'components/tc-communities/Accordion/AccordionItem'; +import Banner from 'components/tc-communities/Banner'; +import NewsletterSignup from 'components/tc-communities/NewsletterSignup'; +import ArticleCard from 'components/tc-communities/ArticleCard'; +import LinksCard from 'components/tc-communities/LinksCard'; +import Text from 'components/tc-communities/Text'; + +import style from './style.scss'; + +export default function Learn() { + return ( +
    + + + +
    + + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +
    + Join Now +
    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +
    + Join Now +
    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +
    + Join Now +
    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +     +     +     +
    + +
    + + + +
    + +
    + + + +
    + + +
    + ); +} diff --git a/src/shared/components/tc-communities/communities/demo-expert/Learn/style.scss b/src/shared/components/tc-communities/communities/demo-expert/Learn/style.scss new file mode 100644 index 0000000000..0cf7ca7cff --- /dev/null +++ b/src/shared/components/tc-communities/communities/demo-expert/Learn/style.scss @@ -0,0 +1,84 @@ +@import '~styles/tc-styles'; + +.coursesContainer { + padding-bottom: 60px; +} + +.resourcesTitle { + padding-bottom: 50px; + padding-top: 0; + + @include xxs-to-sm { + font-size: 36px; + padding-bottom: 30px; + } +} + +.resourcesContainer { + padding-bottom: 60px; + + @include xxs-to-sm { + padding-bottom: 50px; + } +} + +.bannerContainer { + height: 252px; + + @include xxs-to-sm { + height: 300px; + } +} + +.bannerContent { + bottom: 0; + top: 0; + transform: none; + width: 600px; + + @include xxs-to-sm { + top: auto; + width: 100%; + } +} + +.bannerContentInner { + @include xxs-to-sm { + padding-bottom: 20px; + padding-top: 48px; + } +} + +.learnBasicsContainer { + padding-bottom: 0; +} + +.joinnowWrap { + margin-top: 10px; + + @include xxs-to-sm { + margin-top: 20px; + text-align: center; + } +} + +.joinnow { + color: #0092ff; + display: inline-block; + border: 1px solid #0092ff; + border-radius: 20px; + font: 700 14px/40px 'OpenSans'; + height: 40px; + text-align: center; + text-transform: uppercase; + width: 171px; + + &:hover, + &:active, + &:focus, + &:visited { + color: #0092ff; + outline: none; + text-decoration: none; + } +} diff --git a/src/shared/components/tc-communities/communities/tc-prod-dev/Home/index.jsx b/src/shared/components/tc-communities/communities/tc-prod-dev/Home/index.jsx new file mode 100644 index 0000000000..26310b1bb2 --- /dev/null +++ b/src/shared/components/tc-communities/communities/tc-prod-dev/Home/index.jsx @@ -0,0 +1,153 @@ +/** + * Static implementation of Home page for Wipro 2 community + * + * It hardcodes data which is passed to dummy components, + * thus we disable max-len eslint rule for this file + */ +/* eslint-disable max-len */ + +import React from 'react'; +import Section from 'components/tc-communities/Section'; +import Banner from 'components/tc-communities/Banner'; +import IconStat from 'components/tc-communities/IconStat'; +import ImageText from 'components/tc-communities/ImageText'; +import ResourceCard from 'components/tc-communities/ResourceCard'; +import ArticleCard from 'components/tc-communities/ArticleCard'; +import NewsletterSignup from 'components/tc-communities/NewsletterSignup'; + +import IconSuitcase from '../../../../../../assets/images/tc-communities/suitcase.svg'; +import IconRocket from '../../../../../../assets/images/tc-communities/rocket.svg'; +import IconMember from '../../../../../../assets/images/tc-communities/member.svg'; +import IconDollar from '../../../../../../assets/images/tc-communities/dollar.svg'; +import IconNetwork from '../../../../../../assets/images/tc-communities/network.svg'; +import IconMedal from '../../../../../../assets/images/tc-communities/medal.svg'; + +import style from './style.scss'; + +export default function Home() { + return ( +
    + + +
    + + + + +
    + +
    +
    + + +
    +
    + +
    + + + +
    + +
    + + + +
    + + + +
    + ); +} diff --git a/src/shared/components/tc-communities/communities/tc-prod-dev/Home/style.scss b/src/shared/components/tc-communities/communities/tc-prod-dev/Home/style.scss new file mode 100644 index 0000000000..2ec64bb553 --- /dev/null +++ b/src/shared/components/tc-communities/communities/tc-prod-dev/Home/style.scss @@ -0,0 +1,33 @@ +@import '~styles/tc-styles'; + +.statsContainer { + padding: 0; +} + +.statsContent { + border-bottom: 1px solid #ddd; + padding: 43px 38px 50px; + + @include xxs-to-sm { + display: flex; + justify-content: space-around; + padding: 30px 12px 32px; + } +} + +.resourcesContainer { + background-color: #fafafa; + padding: 70px 0; + + @include xxs-to-sm { + padding: 40px 0; + } +} + +.linksContainer { + padding: 60px 0; + + @include xxs-to-sm { + padding: 0; + } +} diff --git a/src/shared/components/tc-communities/communities/tc-prod-dev/Learn/index.jsx b/src/shared/components/tc-communities/communities/tc-prod-dev/Learn/index.jsx new file mode 100644 index 0000000000..c1c1f10ea9 --- /dev/null +++ b/src/shared/components/tc-communities/communities/tc-prod-dev/Learn/index.jsx @@ -0,0 +1,197 @@ +/** + * Static implementation of Learn page for Wipro 2 community + * + * It hardcodes data which is passed to dummy components, + * thus we disable max-len eslint rule for this file + */ +/* eslint-disable max-len */ + +import React from 'react'; +import { Link } from 'react-router-dom'; +import Section from 'components/tc-communities/Section'; +import Accordion from 'components/tc-communities/Accordion/Accordion'; +import AccordionItem from 'components/tc-communities/Accordion/AccordionItem'; +import Banner from 'components/tc-communities/Banner'; +import NewsletterSignup from 'components/tc-communities/NewsletterSignup'; +import ArticleCard from 'components/tc-communities/ArticleCard'; +import LinksCard from 'components/tc-communities/LinksCard'; +import Text from 'components/tc-communities/Text'; + +import style from './style.scss'; + +export default function Learn() { + return ( +
    + + + +
    + + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +
    + Join Now +
    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +
    + Join Now +
    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +
    + Join Now +
    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +     +     + + +

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +     +     +     +
    + +
    + + + +
    + +
    + + + +
    + + +
    + ); +} diff --git a/src/shared/components/tc-communities/communities/tc-prod-dev/Learn/style.scss b/src/shared/components/tc-communities/communities/tc-prod-dev/Learn/style.scss new file mode 100644 index 0000000000..0cf7ca7cff --- /dev/null +++ b/src/shared/components/tc-communities/communities/tc-prod-dev/Learn/style.scss @@ -0,0 +1,84 @@ +@import '~styles/tc-styles'; + +.coursesContainer { + padding-bottom: 60px; +} + +.resourcesTitle { + padding-bottom: 50px; + padding-top: 0; + + @include xxs-to-sm { + font-size: 36px; + padding-bottom: 30px; + } +} + +.resourcesContainer { + padding-bottom: 60px; + + @include xxs-to-sm { + padding-bottom: 50px; + } +} + +.bannerContainer { + height: 252px; + + @include xxs-to-sm { + height: 300px; + } +} + +.bannerContent { + bottom: 0; + top: 0; + transform: none; + width: 600px; + + @include xxs-to-sm { + top: auto; + width: 100%; + } +} + +.bannerContentInner { + @include xxs-to-sm { + padding-bottom: 20px; + padding-top: 48px; + } +} + +.learnBasicsContainer { + padding-bottom: 0; +} + +.joinnowWrap { + margin-top: 10px; + + @include xxs-to-sm { + margin-top: 20px; + text-align: center; + } +} + +.joinnow { + color: #0092ff; + display: inline-block; + border: 1px solid #0092ff; + border-radius: 20px; + font: 700 14px/40px 'OpenSans'; + height: 40px; + text-align: center; + text-transform: uppercase; + width: 171px; + + &:hover, + &:active, + &:focus, + &:visited { + color: #0092ff; + outline: none; + text-decoration: none; + } +} diff --git a/src/shared/components/tc-communities/communities/wipro/Learn/index.jsx b/src/shared/components/tc-communities/communities/wipro/Learn/index.jsx index c1c1f10ea9..1a54a75fbf 100644 --- a/src/shared/components/tc-communities/communities/wipro/Learn/index.jsx +++ b/src/shared/components/tc-communities/communities/wipro/Learn/index.jsx @@ -7,7 +7,7 @@ /* eslint-disable max-len */ import React from 'react'; -import { Link } from 'react-router-dom'; +// import { Link } from 'react-router-dom'; import Section from 'components/tc-communities/Section'; import Accordion from 'components/tc-communities/Accordion/Accordion'; import AccordionItem from 'components/tc-communities/Accordion/AccordionItem'; @@ -41,53 +41,17 @@ export default function Learn() { }} > - + -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    +

    The FULCRUM is “one stop shop” for access to a wide range of training and learning opportunities on Wipro’s Hybrid Crowd. Designed to strengthen the skills of employees, the hub offers physical and online platforms to learn skills on demand, gain hands-on experience, and be future ready.

    +

    Meticulously crafted comprehensive learning paths, detailed study material, engaging case studies, training projects to systematically enhance your career, development environments to practice, convenient online accessibility, opportunity to connect with mentors, peers, SMEs of various technologies – a variety of resources bringing people and technology together for an innovative and valuable learning experience.

    +

    Our compelling learning environment across wide range of emerging technologies helps you in mastering today’s most essential skills, that brings your knowledge to the next level, step by step, which ultimately creates a more effective learning experience.

    +

    Are you ready to step onto the innovative journey of learning?

    - Join Now + Start Exploring
    - - -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    -     -     - - -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    -
    - Join Now -
    -     -     - - -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    -     -     - - -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    -
    - Join Now -
    -     -     - - -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    -     -     - - -

    Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Nullam rhoncus lacus non odio luctus, eu condimentum mauris ultrices. Praesent blandit, augue a posuere aliquam, arcu tortor feugiat turpis,

    -     -     diff --git a/src/shared/containers/tc-communities/Page/index.jsx b/src/shared/containers/tc-communities/Page/index.jsx index aea1264c66..9429528575 100644 --- a/src/shared/containers/tc-communities/Page/index.jsx +++ b/src/shared/containers/tc-communities/Page/index.jsx @@ -32,6 +32,12 @@ import Leaderboard from 'containers/Leaderboard'; import WiproHome from 'components/tc-communities/communities/wipro/Home'; import WiproLearn from 'components/tc-communities/communities/wipro/Learn'; +import TcProdDevHome from 'components/tc-communities/communities/tc-prod-dev/Home'; +import TcProdDevLearn from 'components/tc-communities/communities/tc-prod-dev/Learn'; + +import DemoExpertHome from 'components/tc-communities/communities/demo-expert/Home'; +import DemoExpertLearn from 'components/tc-communities/communities/demo-expert/Learn'; + import AccessDenied, { CAUSE as ACCESS_DENIED_CAUSE, } from 'components/tc-communities/AccessDenied'; @@ -68,6 +74,18 @@ class Page extends Component { } else if (pageId === 'learn') { pageContent = ; } + } else if (communityId === 'tc-prod-dev') { + switch (pageId) { + case 'home': pageContent = ; break; + case 'learn': pageContent = ; break; + default: break; + } + } else if (communityId === 'demo-expert') { + switch (pageId) { + case 'home': pageContent = ; break; + case 'learn': pageContent = ; break; + default: break; + } } else if (communityId.match(/example-theme-\w/)) { pageContent =
    ; } @@ -123,9 +141,10 @@ class Page extends Component { // true, if is loading now, or if not started loading yet const isNotLoaded = communityId !== this.props.meta.communityId; - if (this.props.profile && !isNotLoaded) { - const userGroupIds = this.props.profile.groups.map(item => item.id); - if (_.intersection(userGroupIds, this.props.meta.authorizedGroupIds || []).length) { + if ((this.props.profile || !this.props.meta.authorizedGroupIds) && !isNotLoaded) { + const userGroupIds = this.props.profile ? this.props.profile.groups.map(item => item.id) : []; + if (!this.props.meta.authorizedGroupIds || + _.intersection(userGroupIds, this.props.meta.authorizedGroupIds || []).length) { return (
    = 0) { + let communityId; + if (subdomains.indexOf('demo-expert') >= 0) communityId = 'demo-expert'; + else if (subdomains.indexOf('wipro') >= 0) communityId = 'wipro'; + else if (subdomains.indexOf('tc-prod-dev') >= 0) communityId = 'tc-prod-dev'; + if (communityId) { return (
    ( @@ -42,7 +46,7 @@ function Routes({ subdomains }) { path="/:pageId" render={props => ( )} diff --git a/src/shared/utils/isomorphy.js b/src/shared/utils/isomorphy.js index b5866ca91a..47da004c18 100644 --- a/src/shared/utils/isomorphy.js +++ b/src/shared/utils/isomorphy.js @@ -20,6 +20,13 @@ export function isDev() { return process.env.NODE_ENV === 'development'; } +/** + * Returns true if production version of the code is running. + */ +export function isProd() { + return process.env.NODE_ENV === 'production'; +} + /** * Returns true if the calling code is running server-side. * @return True if the code is running server-side. diff --git a/src/shared/utils/logger.js b/src/shared/utils/logger.js index 3a0ad87144..dd296c3dbe 100644 --- a/src/shared/utils/logger.js +++ b/src/shared/utils/logger.js @@ -1,17 +1,84 @@ /** - * A very simple logger: writes messages to the console in dev environment, - * just ingores them in the production one. + * Isomorphic logger. + * + * At the server-side it outputs log messages to the console, and also sends + * them to the https://logentries.com service (only if LOG_ENTRIES_TOKEN is + * set). + * + * At the front-end side it outputs log messages to the console (only when + * development build of the frontend is used), and sends them to the + * https://logentries.com service (both dev and prod build of the frontend + * send messages to the service, proxying them through the App's server; + * the proxy will forward them to the service only if LOG_ENTRIES_TOKEN is set). + * + * In all case, interface of the logger matches that of the standard JS console. */ +/* eslint-disable global-require */ +/* eslint-disable no-console */ + import _ from 'lodash'; -import { isDev } from './isomorphy'; +/* global fetch */ +import 'isomorphic-fetch'; + +import config from './config'; -const devLogger = console; +import { isDev, isServerSide } from './isomorphy'; -const prodLogger = {}; +const logger = {}; _.functions(console).forEach((func) => { - prodLogger[func] = _.noop; + logger[func] = isDev() || isServerSide() ? console[func] : _.noop; }); -export default isDev() ? devLogger : prodLogger; +let leLogger; +if (isServerSide()) { + const token = config.LOG_ENTRIES_TOKEN; + if (token) { + const LeLogger = require('le_node'); + leLogger = new LeLogger({ token }); + } +} else { + const log = (type, ...rest) => { + fetch('/api/logger', { + body: JSON.stringify({ + data: rest, + type, + }), + headers: { + 'Content-Type': 'application/json', + }, + method: 'POST', + }); + }; + leLogger = { + err: (...rest) => log('err', ...rest), + info: (...rest) => log('info', ...rest), + log: (...rest) => log('log', ...rest), + warning: (...rest) => log('warn', ...rest), + }; +} + +if (leLogger) { + const extend = (base, le) => { + logger[base] = (...rest) => { + if (isDev() || isServerSide()) console[base](...rest); + let msg = ''; + rest.forEach((item) => { + let it = item; + if (!_.isString(it)) { + it = JSON.stringify(it); + if (!_.isString(it)) it = String(it); + } + msg = `${msg}${it} `; + }); + leLogger[le](msg); + }; + }; + extend('error', 'err'); + extend('info', 'info'); + extend('log', 'log'); + extend('warn', 'warning'); +} + +export default logger;