refactor: adding a default vercel url, link to /maps from area and cl…

…imb page (#1236)

* fix: adding a default vercel url to fix the share button

* refactor: add NEXT_PUBLIC_VERCEL_URL to env file

* refactor: don't show share button on area or climb page

* refactor: link to /maps? from climb or area page, if on climb, will link to parent

.env

@@ -21,6 +21,8 @@ NEXT_PUBLIC_CDN_URL=https://stg-media.openbeta.io
 
 NEXT_PUBLIC_API_SERVER=https://stg-api.openbeta.io
 
+NEXT_PUBLIC_VERCEL_URL=$VERCEL_URL
+
 # Disable telemetry
 NEXT_TELEMETRY_DISABLED=1
 

src/app/(default)/area/[[...slug]]/page.tsx

@@ -56,7 +56,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
           ? <UploadPhotoCTA />
           : <PhotoMontage photoList={photoList} />
       }
-      pageActions={<AreaAndClimbPageActions name={areaName} uuid={uuid} targetType={TagTargetType.area} />}
+      pageActions={<AreaAndClimbPageActions name={areaName} uuid={uuid} targetType={TagTargetType.area} parentUuid={uuid} />}
       breadcrumbs={
         <StickyHeaderContainer>
           <AreaCrumbs pathTokens={pathTokens} ancestors={ancestors} />

src/app/(default)/climb/[[...slug]]/page.tsx

@@ -66,7 +66,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
                   ? <UploadPhotoCTA />
                   : <PhotoMontage photoList={photoList} />
         }
-      pageActions={<AreaAndClimbPageActions name={name} uuid={id} targetType={TagTargetType.climb} />}
+      pageActions={<AreaAndClimbPageActions name={name} uuid={id} targetType={TagTargetType.climb} parentUuid={parent.uuid} />}
       breadcrumbs={
         <StickyHeaderContainer>
           <AreaCrumbs pathTokens={pathTokens} ancestors={ancestors} />

src/app/(default)/components/AreaAndClimbPageActions.tsx

@@ -8,22 +8,26 @@ import { TagTargetType } from '@/js/types'
 
 /**
  * Main action bar for area & climb page
+ * In an area page, pass in the same uuid for both `uuid` and `parentUuid` but `parentUuid` is not used.
  */
-export const AreaAndClimbPageActions: React.FC<{ uuid: string, name: string, targetType: TagTargetType }> = ({ uuid, name, targetType }) => {
+export const AreaAndClimbPageActions: React.FC<{ uuid: string, name: string, targetType: TagTargetType, parentUuid: string }> = ({ uuid, name, targetType, parentUuid }) => {
   let url: string
   let sharePath: string
   let enableEdit = true
   let editLabel = 'Edit'
+  let navigateUuid = ''
   switch (targetType) {
     case TagTargetType.area:
       url = `/editArea/${uuid}`
       sharePath = `/area/${uuid}`
+      navigateUuid = uuid
       break
     case TagTargetType.climb:
       url = `/editClimb/${uuid}`
       sharePath = `/climb/${uuid}`
       enableEdit = false
       editLabel = 'Edit (TBD)'
+      navigateUuid = parentUuid ?? ''
   }
   return (
     <ul className='flex items-center justify-between gap-2'>
@@ -33,7 +37,7 @@ export const AreaAndClimbPageActions: React.FC<{ uuid: string, name: string, tar
 
       <UploadPhotoButton />
 
-      <Link href='#map' className='btn no-animation'>
+      <Link href={`/maps?areaId=${navigateUuid}`} className='btn no-animation'>
         <MapTrifold size={20} className='hidden md:inline' /> Map
       </Link>
       <SharePageURLButton path={sharePath} name={name} />

src/app/(default)/components/SharePageURLButton.tsx

@@ -10,7 +10,7 @@ import { ControlledTooltip } from '@/components/ui/Tooltip'
  */
 export const SharePageURLButton: React.FC<{ path: string, name: string }> = ({ path, name }) => {
   const slug = getFriendlySlug(name)
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL != null ? process.env.NEXT_PUBLIC_BASE_URL : 'http://localhost:3000'
+  const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL !== '' && process.env.NEXT_PUBLIC_VERCEL_URL != null ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` : 'http://localhost:3000'
   const optionalSlug = slug !== '' ? `/${slug}` : ''
   const url = `${baseUrl}${path}${optionalSlug}`
 

src/components/maps/TileHandlers/CragContent.tsx

@@ -11,15 +11,16 @@ export const CragDrawerContent: React.FC<CragFeatureProperties> = ({ id, areaNam
   const friendlyUrl = getAreaPageFriendlyUrl(id, areaName)
   const editUrl = `/editArea/${id}/general`
   const pathname = `${usePathname()}${window.location.search}`
+  const isMapPage = pathname.startsWith('/maps?')
 
   return (
     <>
       <BaseDrawerContent
         media={<MiniCarousel mediaList={media} />}
         heading={<Link href={friendlyUrl}>{areaName}</Link>}
         subheading={<Subheading id={id} totalClimbs={climbs.length} />}
-        cta={<Link className='btn btn-primary btn-outline btn-sm no-animation' href={editUrl}>Edit area</Link>}
-        share={<SharePageURLButton path={pathname} name='' />}
+        cta={<Link className='btn btn-primary btn-outline no-animation' href={editUrl}>Edit area</Link>}
+        share={isMapPage && <SharePageURLButton path={pathname} name='' />}
       >
         <section className='text-sm'>
           {description == null || description.trim() === ''

src/js/graphql/gql/climbById.ts

@@ -55,6 +55,7 @@ export const QUERY_CLIMB_BY_ID = gql`
         climbId
       }
       parent {
+        uuid,
         areaName
         gradeContext
         metadata {