From 3df1353216450dc299bfea44d7b77a43fe7d7412 Mon Sep 17 00:00:00 2001
From: Patrik Kozak <patrik@trbl.design>
Date: Thu, 23 Feb 2023 14:10:03 -0500
Subject: [PATCH] fix: button hrefs / media-content buttons

---
 src/blocks/MediaContent/index.tsx |  4 +--
 src/components/Button/index.tsx   | 46 +++++++++++++++++++++++++------
 src/components/CMSLink/index.tsx  | 10 ++++++-
 3 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/blocks/MediaContent/index.tsx b/src/blocks/MediaContent/index.tsx
index 6228015b0..a691af224 100644
--- a/src/blocks/MediaContent/index.tsx
+++ b/src/blocks/MediaContent/index.tsx
@@ -37,7 +37,7 @@ export const MediaContentBlock: React.FC<MediaContentProps> = ({ mediaContentFie
               <RichText content={richText} />
               {enableLink && link && (
                 <div className={classes.button}>
-                  <Button {...link} labelStyle="mono" icon="arrow" />
+                  <Button {...link} labelStyle="mono" icon="arrow" el="link" />
                 </div>
               )}
             </Cell>
@@ -54,7 +54,7 @@ export const MediaContentBlock: React.FC<MediaContentProps> = ({ mediaContentFie
               <RichText content={richText} />
               {enableLink && link && (
                 <div className={classes.button}>
-                  <Button {...link} labelStyle="mono" icon="arrow" />
+                  <Button {...link} labelStyle="mono" icon="arrow" el="link" />
                 </div>
               )}
             </Cell>
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index a94289518..da831cafe 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -4,7 +4,7 @@ import { LineBlip } from '@components/LineBlip'
 import Link from 'next/link'
 import React, { useState } from 'react'
 // eslint-disable-next-line import/no-cycle
-import { Reference } from '../CMSLink'
+import { LinkType, Reference } from '../CMSLink'
 import { ArrowIcon } from '../../icons/ArrowIcon'
 import { SearchIcon } from '../../icons/SearchIcon'
 import classes from './index.module.scss'
@@ -21,6 +21,7 @@ export type Props = {
   icon?: 'arrow' | 'search'
   fullWidth?: boolean
   mobileFullWidth?: boolean
+  type?: LinkType
   reference?: Reference
   htmlButtonType?: 'button' | 'submit'
   onMouseEnter?: () => void
@@ -32,6 +33,38 @@ const icons = {
   search: SearchIcon,
 }
 
+type GenerateSlugType = {
+  type: LinkType
+  url?: string
+  reference?: Reference
+}
+const generateHref = (args: GenerateSlugType): string => {
+  const { reference, url, type } = args
+
+  if ((type === 'custom' || type === undefined) && url) {
+    return url
+  }
+
+  if (type === 'reference' && reference?.value && typeof reference.value !== 'string') {
+    if (reference.relationTo === 'pages') {
+      const { breadcrumbs } = reference.value
+      return breadcrumbs[breadcrumbs.length - 1].url
+    }
+
+    if (reference.relationTo === 'posts') {
+      return `/blog/${reference.value.slug}`
+    }
+
+    if (reference.relationTo === 'case_studies') {
+      return `/case-studies/${reference.value.slug}`
+    }
+
+    return `/${reference.relationTo}/${reference.value.slug}`
+  }
+
+  return ''
+}
+
 const ButtonContent: React.FC<Props> = props => {
   const { icon, label, labelStyle = 'mono' } = props
 
@@ -71,23 +104,20 @@ const elements: {
 export const Button: React.FC<Props> = props => {
   const {
     el = 'button',
+    type,
+    reference,
     newTab,
-    href: hrefFromProps,
     appearance = 'default',
     className: classNameFromProps,
     onClick,
     fullWidth,
     mobileFullWidth,
-    reference,
     htmlButtonType = 'button',
   } = props
 
-  const [isHovered, setIsHovered] = useState(false)
+  const href = generateHref({ type, reference })
 
-  let href = hrefFromProps
-  if (reference && typeof reference?.value === 'object' && reference.value.slug) {
-    href = `/${reference.value.slug}`
-  }
+  const [isHovered, setIsHovered] = useState(false)
 
   const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
 
diff --git a/src/components/CMSLink/index.tsx b/src/components/CMSLink/index.tsx
index 5bbcb519a..5a997ad59 100644
--- a/src/components/CMSLink/index.tsx
+++ b/src/components/CMSLink/index.tsx
@@ -4,6 +4,10 @@ import { CaseStudy, Page, Post } from '@root/payload-types'
 // eslint-disable-next-line import/no-cycle
 import { Button, Props as ButtonProps } from '../Button'
 
+const relationSlugs = {
+  case_studies: 'case-studies',
+}
+
 type PageReference = {
   value: string | Page
   relationTo: 'pages'
@@ -16,7 +20,7 @@ type PostsReference = {
 
 type CaseStudyReference = {
   value: string | CaseStudy
-  relationTo: 'case-studies'
+  relationTo: (typeof relationSlugs)['case_studies']
 }
 
 export type LinkType = 'reference' | 'custom'
@@ -60,6 +64,10 @@ const generateHref = (args: GenerateSlugType): string => {
       return `/blog/${reference.value.slug}`
     }
 
+    if (reference.relationTo === 'case_studies') {
+      return `/case-studies/${reference.value.slug}`
+    }
+
     return `/${reference.relationTo}/${reference.value.slug}`
   }