add page action bar

OpenBeta · Nov 1, 2024 · 37def76 · 37def76
1 parent 8167014
commit 37def76
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 126 deletions.
diff --git a/src/app/(default)/area/[[...slug]]/loading.tsx b/src/app/(default)/area/[[...slug]]/loading.tsx
@@ -1,8 +1,8 @@
-import { AreaPageContainer } from '@/app/(default)/components/ui/AreaPageContainer'
+import { DefaultPageContainer } from '@/app/(default)/components/ui/DefaultPageContainer'
 
 /**
  * Loading skeleton for /area/<id> page.
  */
 export default function Loading (): JSX.Element {
-  return (<AreaPageContainer />)
+  return (<DefaultPageContainer />)
 }
diff --git a/src/app/(default)/area/[[...slug]]/page.tsx b/src/app/(default)/area/[[...slug]]/page.tsx
@@ -11,13 +11,13 @@ import { AreaCrumbs } from '@/components/breadcrumbs/AreaCrumbs'
 import { ArticleLastUpdate } from '@/components/edit/ArticleLastUpdate'
 import { getMapHref, getFriendlySlug, getAreaPageFriendlyUrl, sanitizeName, parseUuidAsFirstParam } from '@/js/utils'
 import { LazyAreaMap } from '@/components/maps/AreaMap'
-import { AreaPageContainer } from '@/app/(default)/components/ui/AreaPageContainer'
-import { AreaPageActions } from '../../components/AreaPageActions'
+import { DefaultPageContainer } from '@/app/(default)/components/ui/DefaultPageContainer'
+import { AreaAndClimbPageActions } from '../../components/AreaAndClimbPageActions'
 import { SubAreasSection } from './sections/SubAreasSection'
 import { ClimbListSection } from './sections/ClimbListSection'
 import { CLIENT_CONFIG } from '@/js/configs/clientConfig'
 import { PageBanner as LCOBanner } from '@/components/lco/PageBanner'
-import { AuthorMetadata, OrganizationType } from '@/js/types'
+import { AuthorMetadata, OrganizationType, TagTargetType } from '@/js/types'
 import { PageWithCatchAllUuidProps, PageSlugType } from '@/js/types/pages'
 /**
  * Page cache settings
@@ -51,13 +51,13 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
   }
 
   return (
-    <AreaPageContainer
+    <DefaultPageContainer
       photoGallery={
         photoList.length === 0
           ? <UploadPhotoCTA />
           : <PhotoMontage photoList={photoList} />
       }
-      pageActions={<AreaPageActions areaName={areaName} uuid={uuid} />}
+      pageActions={<AreaAndClimbPageActions name={areaName} uuid={uuid} targetType={TagTargetType.area} />}
       breadcrumbs={
         <StickyHeaderContainer>
           <AreaCrumbs pathTokens={pathTokens} ancestors={ancestors} />
@@ -85,7 +85,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
         <SubAreasSection area={area} />
         <ClimbListSection area={area} />
       </div>
-    </AreaPageContainer>
+    </DefaultPageContainer>
   )
 }
 

diff --git a/src/app/(default)/climb/[[...slug]]/page.tsx b/src/app/(default)/climb/[[...slug]]/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation'
 
 import { AreaCrumbs } from '@/components/breadcrumbs/AreaCrumbs'
-import { AreaPageContainer } from '../../components/ui/AreaPageContainer'
+import { DefaultPageContainer } from '../../components/ui/DefaultPageContainer'
 import PhotoMontage, { UploadPhotoCTA } from '@/components/media/PhotoMontage'
 import { StickyHeaderContainer } from '../../components/ui/StickyHeaderContainer'
 import { parseUuidAsFirstParam, climbLeftRightIndexComparator } from '@/js/utils'
@@ -12,9 +12,19 @@ import { ContentBlock } from './components/ContentBlock'
 import { Summary } from '../../components/ui/Summary'
 import { SiblingClimbs } from './components/SiblingClimbs'
 import { LazyAreaMap } from '@/components/maps/AreaMap'
-import { ClimbType } from '@/js/types'
+import { ClimbType, TagTargetType } from '@/js/types'
 import { NeighboringRoutesNav } from '@/components/crag/NeighboringRoute'
+import { AreaAndClimbPageActions } from '../../components/AreaAndClimbPageActions'
 
+/**
+ * Page cache settings
+ */
+export const revalidate = 300 // 5 mins
+export const fetchCache = 'force-no-store' // opt out of Nextjs version of 'fetch'
+
+/**
+ * Climb page
+ */
 export default async function Page ({ params }: PageWithCatchAllUuidProps): Promise<any> {
   const climbId = parseUuidAsFirstParam({ params })
   const climb = await getClimbById(climbId)
@@ -25,7 +35,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
   const photoList = climb.media
 
   const {
-    id, ancestors, pathTokens, parent
+    id, name, ancestors, pathTokens, parent
   } = climb
 
   let leftClimb: ClimbType | null = null
@@ -40,14 +50,16 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
     }
   }
 
+  console.log('#photo list', photoList)
+
   return (
-    <AreaPageContainer
+    <DefaultPageContainer
       photoGallery={
                 photoList.length === 0
                   ? <UploadPhotoCTA />
                   : <PhotoMontage photoList={photoList} />
         }
-      // pageActions={<AreaPageActions areaName={areaName} uuid={uuid} />}
+      pageActions={<AreaAndClimbPageActions name={name} uuid={id} targetType={TagTargetType.climb} />}
       breadcrumbs={
         <StickyHeaderContainer>
           <AreaCrumbs pathTokens={pathTokens} ancestors={ancestors} />
@@ -72,7 +84,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
         columns={{
           left: <SiblingClimbs parentArea={climb.parent} climbId={id} />,
           right: (
-            <div className='hidden lg:min-h-[500px] lg:h-full lg:block lg:relative'>
+            <div id='map' className='hidden lg:min-h-[500px] lg:h-full lg:block lg:relative'>
               <LazyAreaMap
                 focused={null}
                 selected={climb.parent.id}
@@ -83,6 +95,6 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
         }}
       />
       <div className='mt-16' />
-    </AreaPageContainer>
+    </DefaultPageContainer>
   )
 }
diff --git a/src/app/(default)/components/AreaPageActions.tsx b/src/app/(default)/components/AreaPageActions.tsx
diff --git a/src/app/(default)/components/ShareAreaLinkButton.tsx b/src/app/(default)/components/ShareAreaLinkButton.tsx
diff --git a/src/app/(default)/components/ui/AreaPageContainer.tsx b/src/app/(default)/components/ui/AreaPageContainer.tsx
diff --git a/src/js/graphql/api.ts b/src/js/graphql/api.ts
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client'
+import { gql, FetchPolicy } from '@apollo/client'
 
 import { AreaType, ClimbType, TickType, CountrySummaryType, MediaWithTags } from '../types'
 import { graphqlClient } from './Client'
@@ -155,13 +155,13 @@ export const getUserMedia = async (userUuid: string, maxFiles = 1000): Promise<M
  * Get climb by id
  * @param id climb id as string in uuid v4 format
  */
-export const getClimbById = async (id: string): Promise<ClimbType> => {
+export const getClimbById = async (id: string, fetchPolicy: FetchPolicy = 'no-cache'): Promise<ClimbType> => {
   const res = await graphqlClient.query<{ climb: ClimbType }, { id: string }>({
     query: QUERY_CLIMB_BY_ID,
     variables: {
       id
     },
-    fetchPolicy: 'no-cache'
+    fetchPolicy
   }).catch(e => { throw new Error(e) })
   return res.data.climb
 }