[DEV] Version 1.5

.circleci/config.yml

@@ -77,6 +77,7 @@ workflows:
             branches:
               only:
                 - dev
+                - dev-1_5
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/index.js

@@ -3,6 +3,8 @@
 module.exports = (() => {
   const env = process.env.APPENV || "dev";
 
+  console.info(`APPENV: "${env}"`);
+
   // for security reason don't let to require any arbitrary file defined in process.env
   if (["prod", "dev"].indexOf(env) < 0) {
     return require("./dev");

package.json

@@ -4,7 +4,7 @@
     "start": "node server.js",
     "dev": "webpack-dev-server --port 8501 --host 0.0.0.0",
     "dev-https": "webpack-dev-server --https --port 8501 --host 0.0.0.0",
-    "build": "webpack --mode=${APPMODE:-development} --env.config=${APPENV:-dev}",
+    "build": "webpack --mode=${APPMODE:-production} --env.config=${APPENV:-prod}",
     "analyze": "webpack --mode=production --env.analyze=true",
     "lint": "eslint src --ext js",
     "format": "prettier --write \"./**\"",

src/components/Page/index.jsx

@@ -0,0 +1,33 @@
+/**
+ * Page
+ *
+ * Handles common stuff for pages.
+ * Should wrap each page.
+ */
+import React, { useEffect } from "react";
+import PT from "prop-types";
+import "./styles.module.scss";
+import { formatPageTitle } from "utils/format";
+
+const Page = ({ children, title }) => {
+  // set page title and triggering analytics
+  useEffect(() => {
+    // we set title manually like this instead of using `react-helmet` because of the issue:
+    // https://github.com/nfl/react-helmet/issues/189
+    document.title = formatPageTitle(title);
+
+    // call analytics if the parent Frame app initialized it
+    if (window.analytics && typeof window.analytics.page === "function") {
+      window.analytics.page();
+    }
+  }, [title]);
+
+  return <div styleName="page">{children}</div>;
+};
+
+Page.propTypes = {
+  children: PT.node,
+  title: PT.string,
+};
+
+export default Page;

src/components/LayoutContainer/styles.module.scss → src/components/Page/styles.module.scss

@@ -1,3 +1,3 @@
-.container {
+.page {
   padding: 0 35px 32px;
 }

src/routes/MyTeamsDetails/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from "react";
 import PT from "prop-types";
-import LayoutContainer from "components/LayoutContainer";
+import Page from "components/Page";
 import PageHeader from "components/PageHeader";
 import { useData } from "hooks/useData";
 import { getTeamById } from "services/teams";
@@ -20,7 +20,7 @@ const MyTeamsDetails = ({ teamId }) => {
   const [team, loadingError] = useData(getTeamById, teamId);
 
   return (
-    <LayoutContainer>
+    <Page title="Team Details">
       {!team ? (
         <LoadingIndicator error={loadingError} />
       ) : (
@@ -31,7 +31,7 @@ const MyTeamsDetails = ({ teamId }) => {
           <TeamPositions positions={team.jobs || []} teamId={teamId} />
         </>
       )}
-    </LayoutContainer>
+    </Page>
   );
 };
 

src/routes/MyTeamsList/index.jsx

@@ -5,7 +5,7 @@
  */
 import React, { useCallback, useState, useEffect } from "react";
 import _ from "lodash";
-import LayoutContainer from "components/LayoutContainer";
+import Page from "components/Page";
 import PageHeader from "components/PageHeader";
 import Input from "components/Input";
 import Pagination from "components/Pagination";
@@ -60,7 +60,7 @@ const MyTeamsList = () => {
   );
 
   return (
-    <LayoutContainer>
+    <Page title="My Teams">
       <PageHeader
         title="My Teams"
         aside={
@@ -95,7 +95,7 @@ const MyTeamsList = () => {
           )}
         </>
       )}
-    </LayoutContainer>
+    </Page>
   );
 };
 

src/routes/PositionDetails/index.jsx

@@ -5,7 +5,7 @@
  */
 import React, { useCallback, useState } from "react";
 import PT from "prop-types";
-import LayoutContainer from "components/LayoutContainer";
+import Page from "components/Page";
 import LoadingIndicator from "components/LoadingIndicator";
 import PageHeader from "components/PageHeader";
 import { CANDIDATE_STATUS } from "constants";
@@ -30,7 +30,7 @@ const PositionDetails = ({ teamId, positionId }) => {
   );
 
   return (
-    <LayoutContainer>
+    <Page title="Job Details">
       {!position ? (
         <LoadingIndicator error={error} />
       ) : (
@@ -53,7 +53,7 @@ const PositionDetails = ({ teamId, positionId }) => {
           />
         </>
       )}
-    </LayoutContainer>
+    </Page>
   );
 };
 

src/utils/format.js

@@ -167,3 +167,17 @@ export const formatDateRange = (startDate, endDate) => {
 
   return `${startDateStr} - ${endDateStr}`;
 };
+
+/**
+ * Format page title to show in the browser header.
+ *
+ * @param {string} pageTitle page title
+ */
+export const formatPageTitle = (pageTitle) => {
+  let formattedPageTitle = "TaaS | Topcoder";
+  if (pageTitle) {
+    formattedPageTitle = pageTitle + " | " + formattedPageTitle;
+  }
+
+  return formattedPageTitle;
+};

webpack.config.js

@@ -6,7 +6,7 @@ const path = require("path");
 const autoprefixer = require("autoprefixer");
 
 
-const cssLocalIdent = process.env.APPMODE === "production"  
+const cssLocalIdent = process.env.APPMODE === "production"
   ? "[hash:base64:6]"
   : "teams_[path][name]___[local]___[hash:base64:6]";
 
@@ -18,6 +18,10 @@ module.exports = (webpackConfigEnv) => {
   });
 
   return webpackMerge.smart(defaultConfig, {
+    output: {
+      // path: path.resolve(__dirname, 'dist'),
+      publicPath: 'taas-app',
+    },
     // modify the webpack config however you'd like to by adding to this object
     module: {
       rules: [