How to use topcoder-react-lib - 10 common examples

tokenV3,
    subTab,
    settingsTab,
    basicInfo,
    // language
  }) => {
    console.log("Subtab", subTab);
    dispatch(profileActions.loadProfile(handle));
    if (settingsTab === TABS.PROFILE) {
      dispatch(settingsActions.page.settings.selectTab('profile/basicinfo'));
      dispatch(profileActions.getSkillsInit());
      dispatch(profileActions.getLinkedAccountsInit());
      dispatch(profileActions.getExternalAccountsInit());
      dispatch(profileActions.getExternalLinksInit());
      dispatch(actions.lookup.getSkillTagsInit());
      dispatch(actions.lookup.getSkillTagsDone());
      dispatch(profileActions.getLinkedAccountsDone(profile, tokenV3));
      dispatch(profileActions.getExternalAccountsDone(handle));
      dispatch(profileActions.getExternalLinksDone(handle));
      dispatch(profileActions.getSkillsDone(handle));
    } else if (settingsTab === TABS.TOOLS) {
      dispatch(settingsActions.page.settings.selectTab('tools/devices'));
      dispatch(profileActions.getEmailPreferencesInit());
      dispatch(profileActions.getEmailPreferencesDone(profile, tokenV3));
    } else if (settingsTab === TABS.ACCOUNT) {
      dispatch(settingsActions.page.settings.selectTab('account'));
      dispatch(profileActions.getCredentialInit());
      dispatch(profileActions.getCredentialDone(profile, tokenV3));
    }
    else if (settingsTab === TABS.PREFERENCES) {
      dispatch(settingsActions.page.settings.selectTab('preferences/email'));
      }

profile,
    tokenV3,
    subTab,
    settingsTab,
    basicInfo,
    // language
  }) => {
    console.log("Subtab", subTab);
    dispatch(profileActions.loadProfile(handle));
    if (settingsTab === TABS.PROFILE) {
      dispatch(settingsActions.page.settings.selectTab('profile/basicinfo'));
      dispatch(profileActions.getSkillsInit());
      dispatch(profileActions.getLinkedAccountsInit());
      dispatch(profileActions.getExternalAccountsInit());
      dispatch(profileActions.getExternalLinksInit());
      dispatch(actions.lookup.getSkillTagsInit());
      dispatch(actions.lookup.getSkillTagsDone());
      dispatch(profileActions.getLinkedAccountsDone(profile, tokenV3));
      dispatch(profileActions.getExternalAccountsDone(handle));
      dispatch(profileActions.getExternalLinksDone(handle));
      dispatch(profileActions.getSkillsDone(handle));
    } else if (settingsTab === TABS.TOOLS) {
      dispatch(settingsActions.page.settings.selectTab('tools/devices'));
      dispatch(profileActions.getEmailPreferencesInit());
      dispatch(profileActions.getEmailPreferencesDone(profile, tokenV3));
    } else if (settingsTab === TABS.ACCOUNT) {
      dispatch(settingsActions.page.settings.selectTab('account'));
      dispatch(profileActions.getCredentialInit());
      dispatch(profileActions.getCredentialDone(profile, tokenV3));
    }
    else if (settingsTab === TABS.PREFERENCES) {
      dispatch(settingsActions.page.settings.selectTab('preferences/email'));

* to query entries from Contentful API. */
    if (isomorphy.isServerSide()) {
      return this.private.ss.queryEntries(query);
    }

    /* At client-side we send HTTP request to Community App server,
     * which proxies it to Contentful API via the same server-side service
     * used above. */
    let url = this.private.baseUrl;
    url += this.private.preview ? '/preview' : '/published';
    url += '/entries';
    if (query) url += `?${qs.stringify(query)}`;
    const res = await fetch(url);
    if (!res.ok) {
      const error = new Error('Failed to get entries.');
      logger.error(error);
    }
    return res.json();
  }

function ArticleAssetsLoader(props) {
  const {
    article, articleCard, preview, spaceName, environment,
  } = props;

  // handle forum posts
  const { contentAuthor } = article;
  if (!contentAuthor) {
    logger.error("'contentAuthor' property should be required but is missing");
  }
  const contentAuthorIds = contentAuthor.map(obj => obj.sys.id);
  if (articleCard.theme === 'Forum post' && contentAuthorIds.length !== 0) {
    return (
       {
          const avatars = [];
          let authors = contentAuthorIds.map((id, index) => {
            const author = data.entries.items[id].fields;
            // adding `key` property so it can be used as key
            // when looping over authors in `ArticleCard.jsx`
            author.id = id;

fireErrorMessage(
      'ERROR: Failed to submit!',
      'Please, try to submit from https://software.topcoder.com or email you submission to support@topcoder.com',
    );
    return {
      ...state,
      submitErrorMsg: 'Failed to submit',
      isSubmitting: false,
      submitDone: false,
    };
  }

  if (payload.message) {
    /* payload message is present when upload of file fails due to any reason so
     * handle this special case for error */
    logger.error(`Failed to submit for the challenge - ${payload.message}`);
    return {
      ...state,
      submitErrorMsg: payload.message || 'Failed to submit',
      isSubmitting: false,
      submitDone: false,
    };
  }

  /* TODO: I am not sure, whether this code is just wrong, or does it handle
   * only specific errors, returned from API for design submissions? I am
   * adding a more generic failure handling code just above. */
  if (payload.result && !payload.result.success) {
    return {
      ...state,
      submitErrorMsg: payload.result.content.message || 'Failed to submit',
      isSubmitting: false,

function onGetDraftChallengesDone(state, { error, payload }) {
  if (error) {
    logger.error(payload);
    return state;
  }
  const { uuid, challenges: loaded } = payload;
  if (uuid !== state.loadingDraftChallengesUUID) return state;

  const ids = new Set();
  loaded.forEach(item => ids.add(item.id));

  /* Fetching 0 page of draft challenges also drops any draft challenges
   * loaded to the state before. */
  const filter = state.lastRequestedPageOfDraftChallenges
    ? item => !ids.has(item.id)
    : item => !ids.has(item.id) && item.status !== 'DRAFT';

  const challenges = state.challenges
    .filter(filter).concat(loaded);

function onGetActiveChallengesDone(state, { error, payload }) {
  if (error) {
    logger.error(payload);
    return state;
  }
  const { uuid, challenges: loaded } = payload;
  if (uuid !== state.loadingActiveChallengesUUID) return state;

  /* Once all active challenges are fetched from the API, we remove from the
   * store any active challenges stored there previously, and also any
   * challenges with IDs matching any challenges loaded now as active. */
  const ids = new Set();
  loaded.forEach(item => ids.add(item.id));

  /* Fetching 0 page of active challenges also drops any active challenges
   * loaded to the state before. */
  const filter = state.lastRequestedPageOfActiveChallenges
    ? item => !ids.has(item.id)
    : item => !ids.has(item.id) && item.status !== 'ACTIVE';

function onSubmitDone(state, { error, payload }) {
  if (error) {
    /* TODO: Some more details for the log will be handy, but no time to care
     * about right now. */
    logger.error('Failed to submit for the challenge');
    fireErrorMessage(
      'ERROR: Failed to submit!',
      'Please, try to submit from https://software.topcoder.com or email you submission to support@topcoder.com',
    );
    return {
      ...state,
      submitErrorMsg: 'Failed to submit',
      isSubmitting: false,
      submitDone: false,
    };
  }

  /* TODO: I am not sure, whether this code is just wrong, or does it handle
   * only specific errors, returned from API for design submissions? I am
   * adding a more generic failure handling code just above. */
  if (payload.error) {

function onGetPastChallengesDone(state, { error, payload }) {
  if (error) {
    logger.error(payload);
    return state;
  }
  const { uuid, challenges: loaded, frontFilter } = payload;
  if (uuid !== state.loadingPastChallengesUUID) return state;

  const ids = new Set();
  loaded.forEach(item => ids.add(item.id));

  /* Fetching 0 page of past challenges also drops any past challenges
   * loaded to the state before. */
  const filter = state.lastRequestedPageOfPastChallenges
    ? item => !ids.has(item.id)
    : item => !ids.has(item.id) && item.status !== 'COMPLETED' && item.status !== 'PAST';

  const challenges = state.challenges.filter(filter).concat(loaded);

import communityActions from 'actions/tc-communities';
import Home from 'components/tc-communities/communities/cognitive/Home';
import moment from 'moment';
import PT from 'prop-types';
import React from 'react';
import resourcesActions from 'actions/page/communities/cognitive/resources';
import shortId from 'shortid';
import { USER_GROUP_MAXAGE } from 'config';

import { connect } from 'react-redux';
import { challenge as challengeUtils } from 'topcoder-react-lib';

/* Holds cache time [ms] for the data demanded by this container. */
const MAXAGE = 30 * 60 * 1000;

const Filter = challengeUtils.filter;

class HomeContainer extends React.Component {
  componentDidMount() {
    const {
      activeChallengesTimestamp,
      auth,
      communitiesList,
      getAllActiveChallenges,
      getCommunitiesList,
      loadingActiveChallenges,
    } = this.props;
    if (Date.now() - activeChallengesTimestamp > MAXAGE
    && !loadingActiveChallenges) {
      getAllActiveChallenges(auth.tokenV3);
    }
    if (Date.now() - communitiesList.timestamp > USER_GROUP_MAXAGE