Added canonical link to html head (#1102)

oncokb · May 3, 2024 · ebb5e2c · ebb5e2c
1 parent 1d4b3c0
commit ebb5e2c
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 29 deletions.
diff --git a/src/main/webapp/app/routes/routes.tsx b/src/main/webapp/app/routes/routes.tsx
@@ -1,4 +1,4 @@
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Redirect, Switch } from 'react-router-dom';
 import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
 import Login from 'app/components/login/LoginPage';
 import { Logout } from 'app/components/login/logout';
@@ -37,6 +37,7 @@ import * as QueryString from 'query-string';
 import OncologyTherapiesPage from 'app/pages/oncologyTherapiesPage/oncologyTherapiesPage';
 import { NewsPageNavTab } from 'app/pages/newsPage/NewsPageNavTab';
 import CompanionDiagnosticDevicePage from 'app/pages/companionDiagnosticDevicesPage/companionDiagnosticDevicePage';
+import OncokbRoute from 'app/shared/route/OncokbRoute';
 
 const getOldLevelsRedirectRoute = (hash: string) => {
   const queryStrings = QueryString.parse(hash) as {
@@ -73,7 +74,7 @@ const AppRouts = (props: {
   // Redirect needs to be defined first
   return (
     <Switch>
-      <Route exact path={PAGE_ROUTE.HOME} component={HomePage} />
+      <OncokbRoute exact path={PAGE_ROUTE.HOME} component={HomePage} />
       <Redirect exact from={'/updates'} to={PAGE_ROUTE.NEWS} />
       <Redirect exact from={'/genes'} to={PAGE_ROUTE.CANCER_GENES} />
       <Redirect
@@ -174,13 +175,15 @@ const AppRouts = (props: {
             isUserAuthenticated={props.authenticationStore.isUserAuthenticated}
             appStore={props.appStore}
             path={PAGE_ROUTE.GENE}
+            addCanonicalLink
             component={GenePage}
           />
           <RecaptchaBoundaryRoute
             exact
             isUserAuthenticated={props.authenticationStore.isUserAuthenticated}
             appStore={props.appStore}
             path={PAGE_ROUTE.ALTERATION}
+            addCanonicalLink
             component={AlterationPage}
           />
           <RecaptchaBoundaryRoute
@@ -202,34 +205,63 @@ const AppRouts = (props: {
             isUserAuthenticated={props.authenticationStore.isUserAuthenticated}
             appStore={props.appStore}
             path={PAGE_ROUTE.ALTERATION_TUMOR_TYPE}
+            addCanonicalLink
             component={AlterationPage}
           />
-          <Route exact path={PAGE_ROUTE.ABOUT} component={AboutPageNavTab} />
-          <Route exact path={PAGE_ROUTE.TEAM} component={AboutPageNavTab} />
-          <Route exact path={PAGE_ROUTE.SOP} component={AboutPageNavTab} />
-          <Route
+          <OncokbRoute
+            exact
+            path={PAGE_ROUTE.ABOUT}
+            component={AboutPageNavTab}
+          />
+          <OncokbRoute
+            exact
+            path={PAGE_ROUTE.TEAM}
+            component={AboutPageNavTab}
+          />
+          <OncokbRoute
+            exact
+            path={PAGE_ROUTE.SOP}
+            component={AboutPageNavTab}
+          />
+          <OncokbRoute
             exact
             path={PAGE_ROUTE.YEAR_END_SUMMARY}
             component={NewsPageNavTab}
           />
-          <Route exact path={PAGE_ROUTE.NEWS} component={NewsPageNavTab} />
-          <Route
+          <OncokbRoute
+            exact
+            path={PAGE_ROUTE.NEWS}
+            component={NewsPageNavTab}
+          />
+          <OncokbRoute
             exact
             path={PAGE_ROUTE.FDA_RECOGNITION}
             component={AboutPageNavTab}
           />
-          <Route
+          <OncokbRoute
             exact
             path={PAGE_ROUTE.TERMS}
             component={ApiAccessPageNavTab}
           />
-          <Route exact path={PAGE_ROUTE.LEVELS}>
+          <OncokbRoute exact path={PAGE_ROUTE.LEVELS}>
             {getOldLevelsRedirectRoute(window.location.hash)}
-          </Route>
-          <Route exact path={PAGE_ROUTE.DX} component={LevelOfEvidencePage} />
-          <Route exact path={PAGE_ROUTE.PX} component={LevelOfEvidencePage} />
-          <Route exact path={PAGE_ROUTE.V2} component={LevelOfEvidencePage} />
-          <Route
+          </OncokbRoute>
+          <OncokbRoute
+            exact
+            path={PAGE_ROUTE.DX}
+            component={LevelOfEvidencePage}
+          />
+          <OncokbRoute
+            exact
+            path={PAGE_ROUTE.PX}
+            component={LevelOfEvidencePage}
+          />
+          <OncokbRoute
+            exact
+            path={PAGE_ROUTE.V2}
+            component={LevelOfEvidencePage}
+          />
+          <OncokbRoute
             exact
             path={PAGE_ROUTE.FDA_NGS}
             component={LevelOfEvidencePage}

diff --git a/src/main/webapp/app/shared/auth/RecaptchaBoundaryRoute.tsx b/src/main/webapp/app/shared/auth/RecaptchaBoundaryRoute.tsx
@@ -1,11 +1,10 @@
 import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
 import { observer } from 'mobx-react';
 import React from 'react';
-import { RouteProps } from 'react-router-dom';
-import { ContactLink } from '../links/ContactLink';
 import AppStore from 'app/store/AppStore';
+import { OncokbRouteProps } from '../route/OncokbRoute';
 
-export interface IRecaptchaBoundaryRoute extends RouteProps {
+export interface IRecaptchaBoundaryRoute extends OncokbRouteProps {
   isUserAuthenticated: boolean;
   appStore: AppStore;
 }

diff --git a/src/main/webapp/app/shared/auth/private-route.tsx b/src/main/webapp/app/shared/auth/private-route.tsx
@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  Route,
-  Redirect,
-  RouteProps,
-  RouteComponentProps,
-} from 'react-router-dom';
+import { Redirect, RouteComponentProps } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import ErrorBoundary from 'app/shared/error/error-boundary';
 import AuthenticationStore from 'app/store/AuthenticationStore';
@@ -13,8 +8,9 @@ import { PAGE_ROUTE } from 'app/config/constants';
 import { isAuthorized } from 'app/shared/auth/AuthUtils';
 import { getRedirectLoginState } from 'app/shared/utils/Utils';
 import { AppConfig } from 'app/appConfig';
+import OncokbRoute, { OncokbRouteProps } from '../route/OncokbRoute';
 
-export interface IPrivateRouteProps extends RouteProps {
+export interface IPrivateRouteProps extends OncokbRouteProps {
   authenticationStore: AuthenticationStore;
   routing: RouterStore;
   hasAnyAuthorities?: string[];
@@ -81,6 +77,6 @@ export const PrivateRoute = observer(
         }`
       );
 
-    return <Route {...rest} render={renderRedirect} />;
+    return <OncokbRoute {...rest} render={renderRedirect} />;
   }
 );
diff --git a/src/main/webapp/app/shared/error/error-boundary-route.tsx b/src/main/webapp/app/shared/error/error-boundary-route.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
-import { Route, RouteProps, RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps } from 'react-router-dom';
 import ErrorBoundary from 'app/shared/error/error-boundary';
+import OncokbRoute, { OncokbRouteProps } from '../route/OncokbRoute';
 
 export const ErrorBoundaryRoute = ({
   component,
   render,
   ...rest
-}: RouteProps) => {
+}: OncokbRouteProps) => {
   const encloseInErrorBoundary = (props: RouteComponentProps) => (
     <ErrorBoundary>
       {render ? <>{render(props)}</> : React.createElement(component!, props)}
@@ -18,7 +19,7 @@ export const ErrorBoundaryRoute = ({
       `A component needs to be specified for path ${(rest as any).path}`
     );
 
-  return <Route {...rest} render={encloseInErrorBoundary} />;
+  return <OncokbRoute {...rest} render={encloseInErrorBoundary} />;
 };
 
 export default ErrorBoundaryRoute;
diff --git a/src/main/webapp/app/shared/route/OncokbRoute.tsx b/src/main/webapp/app/shared/route/OncokbRoute.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import { RouteProps, Route, RouteComponentProps } from 'react-router';
+
+type CanonicalLinkProps = { routeProps: RouteComponentProps };
+
+function CanonicalLink({ routeProps }: CanonicalLinkProps) {
+  useEffect(() => {
+    const canonicalEndpoint = routeProps.location.pathname;
+    const linkNode = document.createElement('link');
+
+    linkNode.setAttribute('id', 'canonical');
+    linkNode.setAttribute('rel', 'canonical');
+    linkNode.setAttribute(
+      'href',
+      `${location.protocol}${location.host}${canonicalEndpoint}`
+    );
+
+    document.head.appendChild(linkNode);
+
+    return () => {
+      document.head.removeChild(linkNode);
+    };
+  }, [routeProps]);
+  return <></>;
+}
+
+export type OncokbRouteProps = RouteProps & {
+  addCanonicalLink?: boolean;
+};
+
+export default function OncokbRoute({
+  render,
+  component,
+  addCanonicalLink = false,
+  ...rest
+}: OncokbRouteProps) {
+  const newRender = (props: RouteComponentProps) => {
+    return render ? (
+      <>
+        {render(props)}
+        {addCanonicalLink && <CanonicalLink routeProps={props} />}
+      </>
+    ) : (
+      <>
+        {React.createElement(component!, props)}
+
+        {addCanonicalLink && <CanonicalLink routeProps={props} />}
+      </>
+    );
+  };
+  return <Route render={newRender} {...rest} />;
+}