refactor(area/crag page): move page GQL query out of page

refactor(gql): reuse media fragment in area query

src/js/cdn/cdnClient.ts

@@ -0,0 +1,34 @@
+import axios from 'axios'
+import { SIRV_CONFIG } from '../sirv/SirvClient'
+export const httpClient = axios.create({
+  baseURL: SIRV_CONFIG.baseUrl
+})
+
+// const storage = new Storage()
+// /**
+//  *
+//  * @param fileList
+//  * @param token
+//  * @returns
+//  */
+// export const getImagesByFilenames = async (fileList: string[]): Promise <{ mediaList: MediaType[], idList: string[]}> => {
+//   if (fileList.length === 0) {
+//     return {
+//       mediaList: [],
+//       idList: []
+//     }
+//   }
+
+//   const [files] = await storage.bucket('openbeta-staging').getFiles({ autoPaginate: false })
+
+//   const result = files.reduce<string[]>((acc, curr) => {
+//     if (curr.name.endsWith('uid.json')) {
+//       return acc
+//     }
+//     acc.push(curr.name)
+//     return acc
+//   }, [])
+
+//   console.log('##', result)
+//   return { mediaList: [], idList: [] }
+// }

src/js/graphql/gql/areaById.ts

@@ -1,23 +1,19 @@
 import { gql } from '@apollo/client'
 
 import { FRAGMENT_CHANGE_HISTORY } from './contribs'
+import { FRAGMENT_MEDIA_WITH_TAGS } from './tags'
 
 export const QUERY_AREA_BY_ID = gql`
   ${FRAGMENT_CHANGE_HISTORY}
+  ${FRAGMENT_MEDIA_WITH_TAGS}
   query ($uuid: ID) {
     area(uuid: $uuid) {
       id
       uuid
       areaName
       gradeContext
       media {
-        username
-        mediaUrl
-        mediaUuid
-        destination
-        destType
-        width
-        height
+        ... MediaWithTagsFields
       }
       totalClimbs
       aggregate {

src/js/hooks/seo/useAreaSeo.ts

@@ -1,15 +1,14 @@
 import { shuffle } from 'underscore'
 import { SIRV_CONFIG } from '../../sirv/SirvClient'
-import { AreaType, MediaBaseTag } from '../../types'
+import { AreaType, MediaWithTags } from '../../types'
 import { SeoHookType } from './index'
 import { sanitizeName } from '../../utils'
 
 interface AreaSeoProps {
   area: AreaType
-  imageList: MediaBaseTag[]
 }
 
-export const useAreaSeo = ({ area, imageList = [] }: AreaSeoProps): SeoHookType => {
+export const useAreaSeo = ({ area }: AreaSeoProps): SeoHookType => {
   const { areaName, aggregate, pathTokens } = area
   const { byDiscipline } = aggregate
 
@@ -33,6 +32,7 @@ export const useAreaSeo = ({ area, imageList = [] }: AreaSeoProps): SeoHookType
   const total = sportCount + tradCount + boulderingCount + aidCount
   const pageTitle = `${wall}${sanitizeName(areaName)} Area${total > 1 ? ` • ${total} climbs` : ''}`
 
+  const imageList = area.media
   const pageImages = imageList.length > 0 ? getRandomPreviewImages(imageList) : []
 
   return { pageTitle, pageDescription, pageImages }
@@ -41,7 +41,7 @@ export const useAreaSeo = ({ area, imageList = [] }: AreaSeoProps): SeoHookType
 /**
  * Return some most recent photos
  */
-export const getRandomPreviewImages = (list: MediaBaseTag[]): string[] => {
+export const getRandomPreviewImages = (list: MediaWithTags[]): string[] => {
   const shortList = shuffle(list.slice(0, 10)) // shuffle the first 10
   return shortList.slice(0, 4).map(image => (`${SIRV_CONFIG.baseUrl}${image.mediaUrl}?w=1200&ch=630&cy=center&format=jpg&q=85`))
 }

src/js/types.ts

@@ -148,7 +148,7 @@ export type AreaType = EditMetadataType & {
   }
   children: AreaType[]
   climbs: Climb[]
-  media: MediaBaseTag[]
+  media: MediaWithTags[]
   gradeContext: GradeContextType
 }
 

src/pages/areas/[id].tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { NextPage, GetStaticProps } from 'next'
 import { useRouter } from 'next/router'
 
-import { AreaType, MediaBaseTag, ChangesetType } from '../../js/types'
+import { AreaType, ChangesetType } from '../../js/types'
 import Layout from '../../components/layout'
 import SeoTags from '../../components/SeoTags'
 import BreadCrumbs from '../../components/ui/BreadCrumbs'
@@ -17,7 +17,6 @@ import AreaEditTrigger from '../../components/edit/AreaEditTrigger'
 interface AreaPageProps {
   area: AreaType
   history: ChangesetType[]
-  mediaListWithUsernames: MediaBaseTag[]
 }
 
 /**
@@ -47,7 +46,7 @@ const Area: NextPage<AreaPageProps> = (props) => {
 
 export default Area
 
-const Body = ({ area, mediaListWithUsernames: enhancedMediaList, history }: AreaPageProps): JSX.Element => {
+const Body = ({ area, history }: AreaPageProps): JSX.Element => {
   const [focused, setFocused] = useState<null | string>(null)
   const [selected, setSelected] = useState<null | string>(null)
   const navbarOffset = getNavBarOffset()
@@ -82,7 +81,7 @@ const Body = ({ area, mediaListWithUsernames: enhancedMediaList, history }: Area
           <div className='pt-4'>
             <BreadCrumbs ancestors={ancestors} pathTokens={pathTokens} />
             <div className='mt-4' />
-            <PhotoMontage isHero photoList={enhancedMediaList} />
+            <PhotoMontage isHero photoList={area.media} />
           </div>
           <div className='mt-4 md:flex md:justify-end'>
             <AreaEditTrigger {...area} history={history} />
@@ -147,8 +146,8 @@ export const getStaticProps: GetStaticProps<AreaPageProps, {id: string}> = async
 /**
  * Generate dynamic meta tags for page
  */
-export const PageMeta = ({ area, mediaListWithUsernames }: AreaPageProps): JSX.Element => {
-  const { pageImages, pageTitle, pageDescription } = useAreaSeo({ area, imageList: mediaListWithUsernames })
+export const PageMeta = ({ area }: AreaPageProps): JSX.Element => {
+  const { pageImages, pageTitle, pageDescription } = useAreaSeo({ area })
   return (
     <SeoTags
       title={pageTitle}

src/pages/crag/[id].tsx

@@ -5,7 +5,7 @@ import { shuffle } from 'underscore'
 
 import { graphqlClient } from '../../js/graphql/Client'
 import Layout from '../../components/layout'
-import { AreaType, MediaBaseTag, ChangesetType } from '../../js/types'
+import { AreaType, ChangesetType } from '../../js/types'
 import { PageMeta } from '../areas/[id]'
 import PhotoMontage from '../../components/media/PhotoMontage'
 import { UploadCTACragBanner } from '../../components/media/UploadCTA'
@@ -15,7 +15,6 @@ import { QUERY_AREA_BY_ID } from '../../js/graphql/gql/areaById'
 interface CragProps {
   area: AreaType
   history: ChangesetType[]
-  mediaListWithUsernames: MediaBaseTag[]
 }
 
 const CragPage: NextPage<CragProps> = (props) => {
@@ -31,9 +30,10 @@ const CragPage: NextPage<CragProps> = (props) => {
 }
 export default CragPage
 
-const Body = ({ area, mediaListWithUsernames: photoList, history }: CragProps): JSX.Element => {
+const Body = ({ area, history }: CragProps): JSX.Element => {
   const level = area?.ancestors.length ?? 0
   const { isFallback: showSkeleton } = useRouter()
+  const photoList = area?.media ?? []
   return (
     <>
       <article className='article'>
@@ -77,7 +77,7 @@ export async function getStaticPaths (): Promise<any> {
 }
 
 export const getStaticProps: GetStaticProps<CragProps, { id: string }> = async ({ params }) => {
-  if (params == null || params.id == null) {
+  if (params?.id == null) {
     return {
       notFound: true
     }
@@ -91,7 +91,7 @@ export const getStaticProps: GetStaticProps<CragProps, { id: string }> = async (
     fetchPolicy: 'no-cache'
   })
 
-  if (rs.data == null || rs.data.area == null) {
+  if (rs?.data == null || rs?.data?.area == null) {
     return {
       notFound: true
     }
@@ -100,8 +100,7 @@ export const getStaticProps: GetStaticProps<CragProps, { id: string }> = async (
   return {
     props: {
       area: rs.data.area,
-      history: rs.data.getAreaHistory,
-      mediaListWithUsernames: rs.data.area.media
+      history: rs.data.getAreaHistory
     },
     revalidate: 30
   }