more cleanup & config updates

Author: vas3a

README.md

@@ -93,6 +93,8 @@ Use the [VS Code](https://code.visualstudio.com/download) IDE for MFE developmen
 ### nvm
 Use the node version manager [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md) to easily and safely manage the required version of NodeJS (aka, node). Download and install it per the instructions for your development operating system. Installing a version of node via `nvm` will also install `npm`.
 
+>**NOTE:** If the nvm command is not working it might be because the installation failed to update your paths variable properly. To try and fix this try installing nvm again using sudo.
+
 Once nvm is installed, run:
 
 >% nvm install <insert node version>
@@ -128,7 +130,7 @@ You will need to add the following line to your hosts file. The hosts file is no
 ```
 ### Serving
 
-1. Open a bash shell
+1. Open a terminal
 2. Run the following commands
 
 >% git clone https://github.com/topcoder-platform/platform-ui.git

craco.config.js

@@ -26,9 +26,13 @@ module.exports = {
         alias: {
             // aliases used in JS/TS
             '~': resolve('src'),
+            '@earn': resolve('src/apps/earn/src'),
+            '@learn': resolve('src/apps/learn/src'),
+            '@devCenter': resolve('src/apps/dev-center/src'),
+            '@gamificationAdmin': resolve('src/apps/gamification-admin/src'),
 
+            '@platform': resolve('src/apps/platform/src'),
             // aliases used in SCSS files
-            '@earn': resolve('src/apps/earn/src'),
             '@libs/ui/styles': resolve('src/libs/ui/lib/styles'),
         },
     }

jsconfig.json

@@ -144,6 +144,7 @@
         "@types/react-helmet": "^6.1.6",
         "@types/react-redux-toastr": "^7.6.2",
         "@types/react-router-dom": "^5.3.3",
+        "@types/redux-actions": "2.6.2",
         "@types/sanitize-html": "^2.6.2",
         "@types/segment-analytics": "^0.0.34",
         "@types/systemjs": "^6.1.1",

jsconfig.paths.json

@@ -0,0 +1,20 @@
+REACT_APP_ENV=dev
+
+REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
+
+# Stripe configs
+REACT_APP_STRIPE_API_KEY=
+REACT_APP_STRIPE_API_VERSION=
+# not really used anywhere
+REACT_APP_STRIPE_ADMIN_TOKEN=
+REACT_APP_STRIPE_CUSTOMER_TOKEN=
+
+# Vanilla Forums
+REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV
+
+# DataDogLogging
+REACT_APP_DATADOG_PUBLIC_TOKEN=puba0825671e469d16f940c5a30dc738f11
+
+REACT_APP_MEMBER_VERIFY_LOOKER=3322
+
+REACT_APP_SPRIG_ENV_ID=bUcousVQ0-yF

package.json

@@ -0,0 +1,20 @@
+REACT_APP_ENV=prod
+
+REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
+
+# Stripe configs
+REACT_APP_STRIPE_API_KEY=pk_live_m3bCBVSfkfMOEp3unZFRsHXi
+REACT_APP_STRIPE_API_VERSION=2020-08-27
+# not really used anywhere
+REACT_APP_STRIPE_ADMIN_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIiwiYWRtaW5pc3RyYXRvciJdLCJpc3MiOiJodHRwczovL2FwaS50b3Bjb2Rlci1kZXYuY29tIiwiaGFuZGxlIjoidGVzdDEiLCJleHAiOjI1NjMwNzY2ODksInVzZXJJZCI6IjQwMDUxMzMzIiwiaWF0IjoxNDYzMDc2MDg5LCJlbWFpbCI6InRlc3RAdG9wY29kZXIuY29tIiwianRpIjoiYjMzYjc3Y2QtYjUyZS00MGZlLTgzN2UtYmViOGUwYWU2YTRhIn0.wKWUe0-SaiFVN-VR_-GwgFlvWaDkSbc8H55ktb9LAVw
+REACT_APP_STRIPE_CUSTOMER_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg
+
+# Vanilla Forums
+REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV
+
+# DataDogLogging
+REACT_APP_DATADOG_PUBLIC_TOKEN=puba0825671e469d16f940c5a30dc738f11
+
+REACT_APP_MEMBER_VERIFY_LOOKER=3322
+
+REACT_APP_SPRIG_ENV_ID=bUcousVQ0-yF

sample.env.dev

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/typedef */
+import { EnvironmentConfig } from '~/config'
+
+const { TOPCODER_URL } = EnvironmentConfig
+
+export const API_BASE = `${TOPCODER_URL}/api`
+export const WP_CONTENT = `${TOPCODER_URL}/wp-content`
+export const BLOG_PAGE = `${TOPCODER_URL}/blog`
+export const THRIVE_PAGE = `${TOPCODER_URL}/thrive`

sample.env.prod

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import classNames from 'classnames'
 
-import { EnvironmentConfig } from '~/config'
+import { THRIVE_PAGE } from '~/apps/dev-center/src/config'
 import { IconSolid } from '~/libs/ui'
 
 import { DevCenterTag } from '../../dev-center-tag'
@@ -54,7 +54,7 @@ function getArticleDetails(article: ThriveArticle | BlogPost): ArticleDetails {
     const regex: RegExp = /(<([^>]+)>)/gi
     const summary: string = content.replace(regex, '') // Remove html from the content string
     const url: string = isThrive
-        ? `${EnvironmentConfig.TOPCODER_URLS.THRIVE_PAGE}/articles/${thriveArticle.slug}`
+        ? `${THRIVE_PAGE}/articles/${thriveArticle.slug}`
         : blogPost.link
     const author: string = !isThrive ? blogPost.creator : ''
     const image: string = isThrive

src/apps/dev-center/src/config/index.ts

@@ -1,4 +1,4 @@
-import { EnvironmentConfig } from '~/config'
+import { API_BASE, WP_CONTENT } from '~/apps/dev-center/src/config'
 
 import { BlogPost, ThriveArticle } from './models'
 
@@ -8,12 +8,12 @@ export function isThriveArticle(article: BlogPost | ThriveArticle): article is T
 }
 
 /** This is the default image to be used for blog posts that do not provide an url to the hero image */
-const DEFAULT_BLOG_IMAGE: string = `${EnvironmentConfig.TOPCODER_URLS.WP_CONTENT}/uploads/2017/04/SRM_Blog.png`
+const DEFAULT_BLOG_IMAGE: string = `${WP_CONTENT}/uploads/2017/04/SRM_Blog.png`
 
 /** Get the blog with the given url, or return undefined if the blog couldn't be fetched */
 export async function getBlog(url: string): Promise<BlogPost | undefined> {
     try {
-        const response: Response = await fetch(`${EnvironmentConfig.TOPCODER_URLS.API_BASE}/blog?limit=200`)
+        const response: Response = await fetch(`${API_BASE}/blog?limit=200`)
         const data: Array<BlogPost> = await response.json()
         const blog: BlogPost = data.filter(x => x.link === url)[0]
         // If the returned data do not contain the URL to the image, use the default one

src/apps/dev-center/src/dev-center-pages/community-app/landing-page/dev-center-articles-section/ArticleCard/ArticleCard.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import { EnvironmentConfig } from '~/config'
+import { BLOG_PAGE, WP_CONTENT } from '~/apps/dev-center/src/config'
 
 import { ArticleEntry, ArticleType, BlogPost } from './models'
 
@@ -11,7 +11,7 @@ import { ArticleEntry, ArticleType, BlogPost } from './models'
  * Example
  * {
  *   type: ArticleType.Blog,
- *   url: `${EnvironmentConfig.TOPCODER_URLS.BLOG_PAGE}/talent-as-a-service-taas-a-brilliant-solution-to-the-talent-gap/`,
+ *   url: `${BLOG_PAGE}/talent-as-a-service-taas-a-brilliant-solution-to-the-talent-gap/`,
  * }
  * {
  *   type: ArticleType.Thrive,
@@ -48,36 +48,36 @@ export const defaultBlogs: Array<BlogPost> = [
     {
         contentSnippet: 'In light of the incredible speed of innovation, specialized tech talent has never been more critical to business success. Yet access to that talent remains frustratingly difficult for many companies. According to the Society for Human Resources Management, 83% of businesses are having trouble recruiting suitable candidates for their open positions, particularly when it comes […]\nThe post Talent as a Service (TaaS): A Brilliant Solution to the Talent Gap appeared first on Topcoder.',
         creator: 'Kiran Hampapura',
-        featuredImage: `${EnvironmentConfig.TOPCODER_URLS.WP_CONTENT}/uploads/2019/11/taashero.jpg`,
-        link: `${EnvironmentConfig.TOPCODER_URLS.BLOG_PAGE}/talent-as-a-service-taas-a-brilliant-solution-to-the-talent-gap/`,
+        featuredImage: `${WP_CONTENT}/uploads/2019/11/taashero.jpg`,
+        link: `${BLOG_PAGE}/talent-as-a-service-taas-a-brilliant-solution-to-the-talent-gap/`,
         title: 'Talent as a Service (TaaS): A Brilliant Solution to the Talent Gap',
     },
     {
         contentSnippet: 'Can our Topcoder accounts be hacked? Can our well-earned cash be stolen away through the platform? Can customers suffer from intellectual theft? These sensitive questions belong to a discussion on a beyond-interesting topic: security. Honoring Topcoder’s security themed month, we want to raise awareness on what cyber security means for members and customers. We turned […]\nThe post Securing A Safe Work System For Members And Customers With John Wheeler - The Topcoder Nation Show #18 appeared first on Topcoder.',
         creator: 'mahestro',
-        featuredImage: `${EnvironmentConfig.TOPCODER_URLS.WP_CONTENT}/uploads/2022/07/00-tcn-show-18-john-wheeler.png`,
-        link: `${EnvironmentConfig.TOPCODER_URLS.BLOG_PAGE}/securing-a-safe-work-system-for-members-and-customers-with-john-wheeler-the-topcoder-nation-show-18/`,
+        featuredImage: `${WP_CONTENT}/uploads/2022/07/00-tcn-show-18-john-wheeler.png`,
+        link: `${BLOG_PAGE}/securing-a-safe-work-system-for-members-and-customers-with-john-wheeler-the-topcoder-nation-show-18/`,
         title: 'Securing A Safe Work System For Members And Customers With John Wheeler – The Topcoder Nation Show #18',
     },
     {
         contentSnippet: 'Job opportunities, upskilling, and mentoring are traits that identify the endeavor that this young gentleman is leading in Africa. Meet Abiodun (), born and raised in Lagos; he aims to close the gap between the tech talent in his region and opportunities, leveraging Topcoder as a medium to make it happen. Abiodun loves live music […]\nThe post Building A Tech Community In Africa With Code_Abbey – The Topcoder Nation Show #17 appeared first on Topcoder.',
         creator: 'mahestro',
-        featuredImage: `${EnvironmentConfig.TOPCODER_URLS.WP_CONTENT}/uploads/2022/06/00-tcn-show-17-code_abby-and-gigs-in-africa.png`,
-        link: `${EnvironmentConfig.TOPCODER_URLS.BLOG_PAGE}/building-a-tech-community-in-africa-with-code_abbey-the-topcoder-nation-show-17/`,
+        featuredImage: `${WP_CONTENT}/uploads/2022/06/00-tcn-show-17-code_abby-and-gigs-in-africa.png`,
+        link: `${BLOG_PAGE}/building-a-tech-community-in-africa-with-code_abbey-the-topcoder-nation-show-17/`,
         title: 'Building A Tech Community In Africa With Code_Abbey – The Topcoder Nation Show #17',
     },
     {
         contentSnippet: 'CellPhoneService We just need to do the calculations described in the statement. One part of the calculations that may be tricky for beginners is the fee per each started minute of a call. If we have a call that takes S seconds, the number of minutes we’ll paying for can be computed by dividing S […]\nThe post Single Round Match 833 Editorials appeared first on Topcoder.',
         creator: 'misof',
-        featuredImage: `${EnvironmentConfig.TOPCODER_URLS.WP_CONTENT}/uploads/2017/04/SRM_Blog.png`,
-        link: `${EnvironmentConfig.TOPCODER_URLS.BLOG_PAGE}/single-round-match-833-editorials/`,
+        featuredImage: `${WP_CONTENT}/uploads/2017/04/SRM_Blog.png`,
+        link: `${BLOG_PAGE}/single-round-match-833-editorials/`,
         title: 'Single Round Match 833 Editorials',
     },
     {
         contentSnippet: 'TwoDimensionalSort Imagine that we label rows of the board A to Z from top to bottom. If we got each rook X into its row X, the board would surely be sorted. With N rooks we can always achieve that in at most 2*N moves. In the first N moves we’ll move some rooks horizontally […]\nThe post TCO22 Round 3 Editorial appeared first on Topcoder.',
         creator: 'misof',
-        featuredImage: `${EnvironmentConfig.TOPCODER_URLS.WP_CONTENT}/uploads/2017/04/SRM_Blog.png`,
-        link: `${EnvironmentConfig.TOPCODER_URLS.BLOG_PAGE}/tco22-round-3-editorial/`,
+        featuredImage: `${WP_CONTENT}/uploads/2017/04/SRM_Blog.png`,
+        link: `${BLOG_PAGE}/tco22-round-3-editorial/`,
         title: 'TCO22 Round 3 Editorial',
     },
 ]

src/apps/dev-center/src/dev-center-pages/community-app/landing-page/dev-center-articles-section/Articles.ts

@@ -12,7 +12,7 @@ import { getService as getSubmissionService } from "../services/submissions";
 import { getApi } from "../services/challenge-api";
 import * as submissionUtil from "../utils/submission";
 
-const { PAGE_SIZE } = 50;
+const { PAGE_SIZE } = config;
 
 /**
  * Private. Loads from the backend all data matching some conditions.
@@ -21,7 +21,7 @@ const { PAGE_SIZE } = 50;
  *  "offset" ones. Returns loaded data as an array.
  * @param {Number} page Optional. Next page of data to load.
  * @param {Number} perPage Optional. The size of the page content to load.
- * @param {Array} prev Optional. data loaded so far.
+ * @param {Array<string>} prev Optional. data loaded so far.
  */
 function getAll(getter, page = 1, perPage = PAGE_SIZE, prev) {
   /* Amount of submissions to fetch in one API call. 50 is the current maximum
@@ -386,7 +386,7 @@ function getSubmissionInformationDone(challengeId, submissionId, tokenV3) {
   return getAll(params => submissionsService.getSubmissions(filter, params), 1, 500)
     .then((submissions) => {
       const submission = _.find(submissions, { id: submissionId });
-      _.remove(submission.review, review => review.typeId === CONFIG.AV_SCAN_SCORER_REVIEW_TYPE_ID);
+      _.remove(submission.review, review => review.typeId === config.AV_SCAN_SCORER_REVIEW_TYPE_ID);
       return { submissionId, submission };
     });
 }
@@ -438,4 +438,4 @@ export default createActions({
     FETCH_CHALLENGE_STATISTICS_INIT: fetchChallengeStatisticsInit,
     FETCH_CHALLENGE_STATISTICS_DONE: fetchChallengeStatisticsDone,
   },
-});
+});

src/apps/dev-center/src/dev-center-pages/community-app/landing-page/dev-center-articles-section/articles.config.ts

@@ -1,12 +1,13 @@
 import PT from "prop-types";
 import _ from "lodash";
+import { EnvironmentConfig } from "~/config";
+
 import { PrimaryButton } from "../Buttons";
 import { ReactComponent as TopcoderLogo } from "../../assets/icons/logo_topcoder.svg";
 import { ACCESS_DENIED_REASON } from "../../constants";
-import config from '../../config';
+import { styled as styledCss } from "../../utils";
 
 import styles from "./styles.module.scss";
-import { styled as styledCss } from "../../utils";
 const styled = styledCss(styles)
 
 const AccessDenied = ({ cause, redirectLink, children }) => {
@@ -21,10 +22,10 @@ const AccessDenied = ({ cause, redirectLink, children }) => {
           <div className={styled("msg")}>
             <a
               className="tc-btn-md tc-btn-primary"
-              href={`${config.URL.AUTH}/member`}
+              href={`${EnvironmentConfig.AUTH.ACCOUNTS_APP_CONNECTOR}/member`}
               onClick={(event) => {
                 const retUrl = encodeURIComponent(window.location.href);
-                window.location = `${config.URL.AUTH}/member?retUrl=${retUrl}`;
+                window.location = `${EnvironmentConfig.AUTH.ACCOUNTS_APP_CONNECTOR}/member?retUrl=${retUrl}`;
                 event.preventDefault();
               }}
             >