Path based routing

micro-service/src/app/[[...slug]]/page.js

@@ -7,7 +7,7 @@ import Head from 'next/head';
 
 export const dynamic = 'force-dynamic';
 
-export async function generateMetadata({ params, searchParams }, parent) {
+export async function generateMetadata({ searchParams }, parent) {
   const id = searchParams?.id;
 
   if (!id) return parent;

packages/web-shared/components/ContentChannel.js

@@ -3,18 +3,18 @@ import { useNavigate } from 'react-router-dom';
 
 import { getURLFromType } from '../utils';
 import { ContentCard, Box, H3, systemPropTypes, Button } from '../ui-kit';
+import { useNavigation } from '../providers/NavigationProvider';
 
 const PAGE_SIZE = 20;
 
 function ContentChannel(props = {}) {
-  const navigate = useNavigate();
+  const { navigate } = useNavigation();
 
   const hasMorePages = props.data?.totalCount > props.data?.edges?.length;
 
   const handleActionPress = (item) => {
     navigate({
-      pathname: '/',
-      search: `?id=${getURLFromType(item.relatedNode)}`,
+      id: getURLFromType(item.relatedNode),
     });
   };
 

packages/web-shared/components/ContentSeriesSingle.js

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { getURLFromType } from '../utils';
-import { add as addBreadcrumb, useBreadcrumbDispatch } from '../providers/BreadcrumbProvider';
+
 import { set as setModal, useModal } from '../providers/ModalProvider';
 
 import { Box, H2, Loader, Longform, H3, ContentCard, ShareButton } from '../ui-kit';
@@ -15,13 +14,12 @@ import InteractWhenLoaded from './InteractWhenLoaded';
 import TrackEventWhenLoaded from './TrackEventWhenLoaded';
 import styled from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import { useNavigation } from '../providers/NavigationProvider';
 
 function ContentSeriesSingle(props = {}) {
-  const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const dispatchBreadcrumb = useBreadcrumbDispatch();
   const [state, dispatch] = useModal();
   const parseHTMLContent = useHTMLContent();
+  const { id, navigate } = useNavigation();
 
   const invalidPage = !props.loading && !props.data;
 
@@ -35,9 +33,7 @@ function ContentSeriesSingle(props = {}) {
 
   useEffect(() => {
     if (!state.modal && invalidPage) {
-      navigate({
-        pathname: '/',
-      });
+      navigate();
     }
   }, [invalidPage, navigate]);
 
@@ -76,14 +72,8 @@ function ContentSeriesSingle(props = {}) {
   `;
 
   const handleActionPress = (item) => {
-    if (searchParams.get('id') !== getURLFromType(item)) {
-      dispatchBreadcrumb(
-        addBreadcrumb({
-          url: `?id=${getURLFromType(item)}`,
-          title: item.title,
-        })
-      );
-      setSearchParams(`?id=${getURLFromType(item)}`);
+    if (id !== getURLFromType(item)) {
+      navigate({ id: getURLFromType(item) });
     }
     if (state.modal) {
       const url = getURLFromType(item);

packages/web-shared/components/ContentSingle.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { ChatCircleText } from '@phosphor-icons/react';
 
@@ -9,11 +8,6 @@ import { getURLFromType } from '../utils';
 import { format, parseISO } from 'date-fns';
 import FeatureFeed from './FeatureFeed';
 import FeatureFeedComponentMap from './FeatureFeed/FeatureFeedComponentMap';
-import {
-  add as addBreadcrumb,
-  remove as removeBreadcrumb,
-  useBreadcrumbDispatch,
-} from '../providers/BreadcrumbProvider';
 import { set as setModal, useModal } from '../providers/ModalProvider';
 
 import {
@@ -38,6 +32,8 @@ import VideoPlayer from './VideoPlayer';
 import InteractWhenLoaded from './InteractWhenLoaded';
 import TrackEventWhenLoaded from './TrackEventWhenLoaded';
 import styled from 'styled-components';
+import { useNavigation } from '../providers/NavigationProvider';
+import { useShouldUsePathRouter } from '../providers/AppProvider';
 
 const infoDivider = (
   <BodyText color="text.tertiary" mx="xs" display={{ xs: 'none', sm: 'block' }}>
@@ -92,10 +88,10 @@ function CalendarData({ start, end, location }) {
 }
 
 function ContentSingle(props = {}) {
-  const navigate = useNavigate();
+  const { navigate, id: idFromParams } = useNavigation();
   const [showComments, setShowComments] = useState(false);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const dispatchBreadcrumb = useBreadcrumbDispatch();
+  const usePathRouter = useShouldUsePathRouter();
+
   const [state, dispatch] = useModal();
   const parseHTMLContent = useHTMLContent();
 
@@ -123,14 +119,16 @@ function ContentSingle(props = {}) {
 
   useEffect(() => {
     if (!state.modal && invalidPage) {
-      navigate({
-        pathname: '/',
-      });
+      // return home if the page is invalid
+      navigate();
     }
   }, [invalidPage, navigate]);
 
   // Try and convince Google that this is the canonical URL
-  const canonicalUrl = `${window.location.origin}/?id=${searchParams.get('id')}`;
+  // TODO: Find a better way to determine this.
+  const canonicalUrl = usePathRouter
+    ? `${window.location.origin}/ac/${idFromParams}`
+    : `${window.location.origin}/?id=${idFromParams}`;
 
   // Some websites have existing canonical links that need to be updated.
   useEffect(() => {
@@ -197,15 +195,10 @@ function ContentSingle(props = {}) {
         )}`
       : null;
   const handleActionPress = (item) => {
-    dispatchBreadcrumb(removeBreadcrumb());
-    if (searchParams.get('id') !== getURLFromType(item)) {
-      dispatchBreadcrumb(
-        addBreadcrumb({
-          url: `?id=${getURLFromType(item)}`,
-          title: item.title,
-        })
-      );
-      setSearchParams(`?id=${getURLFromType(item)}`);
+    if (idFromParams !== getURLFromType(item)) {
+      navigate({
+        id: getURLFromType(item),
+      });
     }
     if (state.modal) {
       const url = getURLFromType(item);

packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js

@@ -2,15 +2,14 @@ import React from 'react';
 import { getURLFromType } from '../../../utils';
 import { systemPropTypes, ResourceCard, Box, H5 } from '../../../ui-kit';
 import Styled from './ActionListFeature.styles';
-import { useNavigate } from 'react-router-dom';
+import { useNavigation } from '../../../providers/NavigationProvider';
 
 function ActionListFeature({ feature, emptyPlaceholderText }) {
-  const navigate = useNavigate();
+  const { navigate } = useNavigation();
 
   const handleActionPress = (item) => {
     navigate({
-      pathname: '/',
-      search: `?id=${getURLFromType(item.relatedNode)}`,
+      id: getURLFromType(item.relatedNode),
     });
   };
 

packages/web-shared/components/FeatureFeed/Features/ButtonFeature.js

@@ -1,21 +1,20 @@
 import React from 'react';
 import { withTheme } from 'styled-components';
 
-import { useNavigate } from 'react-router-dom';
 import { getURLFromType } from '../../../utils';
 
 import { Button, systemPropTypes } from '../../../ui-kit';
+import { useNavigation } from '../../../providers/NavigationProvider';
 
 function ButtonFeature(props = {}) {
-  const navigate = useNavigate();
+  const { navigate } = useNavigation();
   // Event Handlers
   const handleActionPress = () => {
     if (props.feature?.action?.relatedNode?.url) {
       window.open(props.transformLink(props.feature?.action?.relatedNode?.url), '_blank');
     } else {
       navigate({
-        pathname: '/',
-        search: `?id=${getURLFromType(props.feature.action.relatedNode)}`,
+        id: getURLFromType(item.relatedNode),
       });
     }
   };

packages/web-shared/components/FeatureFeed/Features/HeroListFeature.js

@@ -1,54 +1,28 @@
 import React from 'react';
 import { withTheme } from 'styled-components';
-import { useSearchParams } from 'react-router-dom';
 import { getURLFromType } from '../../../utils';
 import { open as openModal, set as setModal, useModal } from '../../../providers/ModalProvider';
-import { add as addBreadcrumb, useBreadcrumbDispatch } from '../../../providers/BreadcrumbProvider';
 import { Box, Button, H2, H4, systemPropTypes, ContentCard } from '../../../ui-kit';
 import Styled from './HeroListFeature.styles';
-import { useNavigate } from 'react-router-dom';
-import { useAnalytics } from '../../../providers/AnalyticsProvider';
+import { useNavigation } from '../../../providers/NavigationProvider';
+import useHandleActionPress, {
+  useHandlePrimaryActionPress,
+} from '../../../hooks/useHandleActionPress';
 
 function HeroListFeature(props = {}) {
   const [state, dispatch] = useModal();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const dispatchBreadcrumb = useBreadcrumbDispatch();
-  const navigate = useNavigate();
-  const analytics = useAnalytics();
 
-  const handleActionPress = (item) => {
-    if (item.action === 'OPEN_URL') {
-      analytics.track('OpenUrl', {
-        url: item?.relatedNode?.url,
-      });
-      return window.open(getURLFromType(item.relatedNode), '_blank');
-    }
+  const { id, navigate } = useNavigation();
 
-    if (searchParams.get('id') !== getURLFromType(item.relatedNode)) {
-      dispatchBreadcrumb(
-        addBreadcrumb({
-          url: `?id=${getURLFromType(item.relatedNode)}`,
-          title: item.relatedNode?.title,
-        })
-      );
-      setSearchParams(`?id=${getURLFromType(item.relatedNode)}`);
-    }
-    navigate({
-      pathname: '/',
-      search: `?id=${getURLFromType(item.relatedNode)}`,
-    });
-  };
+  const handleActionPress = useHandleActionPress();
+  const handlePrimaryActionClick = useHandlePrimaryActionPress(props.feature);
 
   // Event Handlers
   const handleHeroCardPress = () => {
-    if (searchParams.get('id') !== getURLFromType(props.feature?.heroCard?.relatedNode)) {
-      dispatchBreadcrumb(
-        addBreadcrumb({
-          url: `?id=${getURLFromType(props.feature?.heroCard?.relatedNode)}`,
-          title: props.feature?.heroCard?.relatedNode?.title,
-        })
-      );
-      setSearchParams(`?id=${getURLFromType(props.feature?.heroCard?.relatedNode)}`);
+    if (id !== getURLFromType(props.feature?.heroCard?.relatedNode)) {
+      navigate({
+        id: getURLFromType(props.feature?.heroCard?.relatedNode),
+      });
     }
 
     if (state.modal) {
@@ -58,20 +32,8 @@ function HeroListFeature(props = {}) {
     }
   };
 
-  const handlePrimaryActionClick = () => {
-    if (props.feature?.primaryAction?.action === 'OPEN_FEED') {
-      analytics.track('OpenFeatureFeed', {
-        featureFeedId: props.feature?.primaryAction?.relatedNode?.id,
-        fromFeatureId: props.feature?.id,
-        title: props.feature?.title,
-      });
-    }
-    setSearchParams(`?id=${getURLFromType(props.feature.primaryAction.relatedNode)}`);
-  };
-
   const actions = props.feature?.actions;
 
-
   return (
     <Box mb="base" minWidth="180px" {...props}>
       {/* Content */}