[C-2976] Fix profile-page seo (#3912)

AudiusProject · Aug 21, 2023 · 6a08944 · 6a08944
1 parent 2381d46
commit 6a08944
Show file tree

Hide file tree

Showing 16 changed files with 280 additions and 186 deletions.
diff --git a/packages/web/src/components/animated-button/AnimatedButtonProvider.tsx b/packages/web/src/components/animated-button/AnimatedButtonProvider.tsx
@@ -11,6 +11,8 @@ import { useInstanceVar } from '@audius/common'
 import cn from 'classnames'
 import Lottie from 'react-lottie'
 
+import { SeoLink } from 'components/link'
+
 import styles from './AnimatedButtonProvider.module.css'
 
 export type BaseAnimatedButtonProps = {
@@ -99,31 +101,32 @@ const AnimatedButton = ({
     }
   ]
 
-  return (
-    <a
-      href={href}
-      onClick={handleClick}
-      className={cn(
-        [styles.baseStyle],
-        className,
-        {
-          [activeClassName]: isActive
-        },
-        {
-          [disabledClassName]: isDisabled
-        },
-        { [styles.glow]: isActive && isMatrix }
-      )}
-    >
-      <div className={cn(wrapperClassName)}>
-        <Lottie
-          options={animationOptions}
-          isPaused={isPaused}
-          isClickToPauseDisabled
-          eventListeners={isDisabled ? [] : eventListeners}
-        />
-      </div>
-    </a>
+  const buttonElement = (
+    <div className={cn(wrapperClassName)}>
+      <Lottie
+        options={animationOptions}
+        isPaused={isPaused}
+        isClickToPauseDisabled
+        eventListeners={isDisabled ? [] : eventListeners}
+      />
+    </div>
+  )
+
+  const rootProps = {
+    onClick: handleClick,
+    className: cn(styles.baseStyle, className, {
+      [activeClassName]: isActive,
+      [disabledClassName]: isDisabled,
+      [styles.glow]: isActive && isMatrix
+    })
+  }
+
+  return href ? (
+    <SeoLink to={href} {...rootProps}>
+      {buttonElement}
+    </SeoLink>
+  ) : (
+    <button {...rootProps}>{buttonElement}</button>
   )
 }
 

diff --git a/packages/web/src/components/link/ExternalLink.tsx b/packages/web/src/components/link/ExternalLink.tsx
@@ -0,0 +1,5 @@
+type ExternalLinkProps = JSX.IntrinsicElements['a']
+
+export const ExternalLink = (props: ExternalLinkProps) => {
+  return <a {...props} target='_blank' rel='noopener noreferrer' />
+}
diff --git a/packages/web/src/components/link/SeoLink.tsx b/packages/web/src/components/link/SeoLink.tsx
@@ -0,0 +1,24 @@
+import { MouseEvent, forwardRef, useCallback } from 'react'
+
+import { LinkProps } from 'react-router-dom'
+
+type SeoLinkProps = Omit<LinkProps, 'to'> & { to: string }
+
+/**
+ * Link that renders an anchor tag, but is not clickable itself. Used for seo purposes
+ */
+export const SeoLink = forwardRef<HTMLAnchorElement, SeoLinkProps>(
+  function SeoLink(props, ref) {
+    const { to, onClick, ...other } = props
+
+    const handleClick = useCallback(
+      (event: MouseEvent<HTMLAnchorElement>) => {
+        event.preventDefault()
+        onClick?.(event)
+      },
+      [onClick]
+    )
+
+    return <a ref={ref} href={to} onClick={handleClick} {...other} />
+  }
+)
diff --git a/packages/web/src/components/link/index.ts b/packages/web/src/components/link/index.ts
@@ -1 +1,3 @@
 export * from './Link'
+export * from './SeoLink'
+export * from './ExternalLink'
diff --git a/packages/web/src/components/nav/mobile/ConnectedNavBar.tsx b/packages/web/src/components/nav/mobile/ConnectedNavBar.tsx
@@ -20,12 +20,7 @@ import {
 } from 'components/animated-switch/RouterContextProvider'
 import { AppState } from 'store/types'
 import { getIsIOS } from 'utils/browser'
-import {
-  TRENDING_PAGE,
-  NOTIFICATION_PAGE,
-  SETTINGS_PAGE,
-  AUDIO_PAGE
-} from 'utils/route'
+import { NOTIFICATION_PAGE, SETTINGS_PAGE, AUDIO_PAGE } from 'utils/route'
 
 import NavBar from './NavBar'
 const { getSearchStatus } = searchResultsPageSelectors
@@ -55,10 +50,6 @@ const ConnectedNavBar = ({
     })
   }
 
-  const goToTrending = useCallback(() => {
-    goToRoute(TRENDING_PAGE)
-  }, [goToRoute])
-
   const record = useRecord()
   const goToNotificationPage = useCallback(() => {
     if (getIsIOS()) {
@@ -94,7 +85,6 @@ const ConnectedNavBar = ({
       goToNotificationPage={goToNotificationPage}
       goToSettingsPage={goToSettingsPage}
       search={search}
-      logoClicked={goToTrending}
       searchStatus={searchStatus}
       goBack={goBack}
       history={history}

diff --git a/packages/web/src/components/nav/mobile/NavBar.tsx b/packages/web/src/components/nav/mobile/NavBar.tsx
@@ -11,6 +11,7 @@ import {
 } from '@audius/stems'
 import cn from 'classnames'
 import { History } from 'history'
+import { Link } from 'react-router-dom'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { useTransition, animated } from 'react-spring'
 
@@ -27,6 +28,7 @@ import NavContext, {
 import SearchBar from 'components/search-bar/SearchBar'
 import { useFlag } from 'hooks/useRemoteConfig'
 import { getIsIOS } from 'utils/browser'
+import { TRENDING_PAGE } from 'utils/route'
 import { isMatrix } from 'utils/theme/theme'
 
 import styles from './NavBar.module.css'
@@ -41,7 +43,6 @@ interface NavBarProps {
   goToSettingsPage: () => void
   goToAudioPage: () => void
   search: (term: string) => void
-  logoClicked: () => void
   goBack: () => void
   history: History<any>
 }
@@ -61,7 +62,6 @@ const NavBar = ({
   signUp,
   goToNotificationPage,
   goToSettingsPage,
-  logoClicked,
   goBack,
   goToAudioPage,
   history: {
@@ -206,26 +206,25 @@ const NavBar = ({
       >
         {left}
       </div>
-      {centerElement === CenterPreset.LOGO && (
-        <div
+      {centerElement === CenterPreset.LOGO ? (
+        <Link
+          to={TRENDING_PAGE}
           className={cn(styles.logo, { [styles.matrixLogo]: matrix })}
-          onClick={logoClicked}
         >
-          {logoTransitions.map(
-            ({ item, props, key }) =>
-              item && (
-                <animated.div style={props} key={key}>
-                  <AudiusLogo />
-                  {isEarlyAccess ? (
-                    <div className={styles.earlyAccess}>
-                      {messages.earlyAccess}
-                    </div>
-                  ) : null}
-                </animated.div>
-              )
+          {logoTransitions.map(({ item, props, key }) =>
+            item ? (
+              <animated.div style={props} key={key}>
+                <AudiusLogo />
+                {isEarlyAccess ? (
+                  <div className={styles.earlyAccess}>
+                    {messages.earlyAccess}
+                  </div>
+                ) : null}
+              </animated.div>
+            ) : null
           )}
-        </div>
-      )}
+        </Link>
+      ) : null}
       {typeof centerElement === 'string' &&
         !Object.values(CenterPreset).includes(centerElement as any) && (
           <div className={styles.centerText}> {centerElement} </div>

diff --git a/packages/web/src/hooks/useTabs/useTabs.tsx b/packages/web/src/hooks/useTabs/useTabs.tsx
@@ -17,20 +17,22 @@ import { useInstanceVar } from '@audius/common'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 import cn from 'classnames'
 import { throttle } from 'lodash'
-// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
+// eslint-disable-next-line no-restricted-imports
 import { animated, useTransition, useSpring } from 'react-spring'
 import { useDrag } from 'react-use-gesture'
 
+import { SeoLink } from 'components/link'
 import Tooltip from 'components/tooltip/Tooltip'
 
 import styles from './TabStyles.module.css'
 
-type TabHeader = {
+export type TabHeader = {
   icon?: ReactNode
   text: string
   label: string
   disabled?: boolean
   disabledTooltipText?: string
+  to?: string
 }
 
 type TabProps = {
@@ -56,7 +58,7 @@ const Tab = forwardRef(
         { [styles.tabActive]: isActive },
         { [styles.tabDisabled]: disabled }
       )}
-      onClick={() => !disabled && onClick()}
+      onClick={() => !disabled && onClick?.()}
       ref={ref}
     >
       {icon && <div className={styles.icon}>{icon}</div>}
@@ -87,6 +89,7 @@ type TabBarProps = {
   // offset of -1 to the left.
   // Used to track in progress gestures.
   fractionalOffset?: number
+  pathname?: string
 }
 
 const TabBar = memo(
@@ -96,7 +99,8 @@ const TabBar = memo(
     onClick,
     isMobile,
     disabledTabTooltipText,
-    fractionalOffset = 0
+    fractionalOffset = 0,
+    pathname
   }: TabBarProps) => {
     const [accentPosition, setAccentPosition] = useState({
       top: 0,
@@ -224,6 +228,7 @@ const TabBar = memo(
           { [styles.tabBarContainerMobile]: isMobile },
           { [styles.tabBarContainerDesktop]: !isMobile }
         )}
+        role='tablist'
       >
         <TabAccent
           style={{
@@ -233,35 +238,49 @@ const TabBar = memo(
             transform: left.interpolate(interpolateScale)
           }}
         />
-        {tabs.map((e, i) => {
+        {tabs.map((tab, i) => {
           const isActive = activeIndex === i
           const tooltipActive =
-            (!!disabledTabTooltipText || !!e.disabledTooltipText) && e.disabled
+            (!!disabledTabTooltipText || !!tab.disabledTooltipText) &&
+            tab.disabled
+
+          const tabElement = (
+            <Tab
+              onClick={() => onClick(i)}
+              ref={refsArr.current[i]}
+              isActive={isActive}
+              key={tab.label}
+              isMobile={isMobile}
+              disabled={!!tab.disabled}
+              icon={tab.icon}
+              label={tab.label}
+              text={tab.text}
+            />
+          )
+
+          const { to } = tab
+
+          const rootProps = {
+            role: 'tab',
+            className: cn(styles.tabWrapper, {
+              [styles.tabWrapperMobile]: isMobile
+            })
+          }
+
           return (
             <Tooltip
-              text={e.disabledTooltipText || disabledTabTooltipText}
+              text={tab.disabledTooltipText || disabledTabTooltipText}
               placement='bottom'
               disabled={!tooltipActive}
               key={i}
             >
-              {/* Extra div inserted here because tooltip needs to pass a ref to it's child :( */}
-              <div
-                className={cn(styles.tabWrapper, {
-                  [styles.tabWrapperMobile]: isMobile
-                })}
-              >
-                <Tab
-                  onClick={() => onClick(i)}
-                  ref={refsArr.current[i]}
-                  isActive={isActive}
-                  key={e.label}
-                  isMobile={isMobile}
-                  disabled={!!e.disabled}
-                  icon={e.icon}
-                  label={e.label}
-                  text={e.text}
-                />
-              </div>
+              {to && pathname ? (
+                <SeoLink {...rootProps} to={`${pathname}/${to}`}>
+                  {tabElement}
+                </SeoLink>
+              ) : (
+                <div {...rootProps}>{tabElement}</div>
+              )}
             </Tooltip>
           )
         })}
@@ -736,6 +755,7 @@ const BodyContainer = memo(
     dimensionsAreDirty,
     didSetDimensions
   }: BodyContainerProps) => {
+    console.log('hmm', elements, activeIndex)
     // Get a ref to the element to use for calculating height
     const {
       containerWidth,
@@ -920,6 +940,8 @@ type UseTabsArguments = {
 
   // The intitial scroll offset height to adjust the window to on transition
   initialScrollOffset?: number
+  // The base pathname url of the page to determine tab navigation
+  pathname?: string
 }
 
 type UseTabsResult = {
@@ -954,7 +976,8 @@ const useTabs = ({
   interElementSpacing = 0,
   disabledTabTooltipText,
   tabRecalculator,
-  initialScrollOffset = 0
+  initialScrollOffset = 0,
+  pathname
 }: UseTabsArguments): UseTabsResult => {
   if (tabs.length !== elements.length)
     throw new Error('Non-matching number of tabs and elements')
@@ -1107,6 +1130,7 @@ const useTabs = ({
         isMobile={isMobile}
         disabledTabTooltipText={disabledTabTooltipText}
         fractionalOffset={accentFractionalOffset}
+        pathname={pathname}
       />
     ),
     [
@@ -1117,7 +1141,8 @@ const useTabs = ({
       shouldAnimate,
       isMobile,
       disabledTabTooltipText,
-      accentFractionalOffset
+      accentFractionalOffset,
+      pathname
     ]
   )
 

diff --git a/packages/web/src/pages/profile-page/ProfilePage.tsx b/packages/web/src/pages/profile-page/ProfilePage.tsx
@@ -1,4 +1,4 @@
-import { RefObject } from 'react'
+import { RefObject, memo } from 'react'
 
 import { useIsMobile } from 'utils/clientUtil'
 
@@ -21,4 +21,4 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
   )
 }
 
-export default ProfilePage
+export default memo(ProfilePage)