feat: track page analytics and page titles

Author: maxceem

src/components/LayoutContainer/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/Page/index.jsx

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

src/components/LayoutContainer/styles.module.scss renamed to src/components/Page/styles.module.scss

@@ -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";
@@ -21,7 +21,7 @@ const MyTeamsDetails = ({ teamId }) => {
   const [team, loadingError] = useData(getTeamById, teamId);
 
   return (
-    <LayoutContainer>
+    <Page title="Team Details">
       {!team ? (
         <LoadingIndicator error={loadingError} />
       ) : (
@@ -32,7 +32,7 @@ const MyTeamsDetails = ({ teamId }) => {
           <TeamPositions positions={team.jobs || []} teamId={teamId} />
         </>
       )}
-    </LayoutContainer>
+    </Page>
   );
 };
 

src/routes/MyTeamsDetails/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/MyTeamsList/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/routes/PositionDetails/index.jsx

@@ -149,3 +149,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;
+};