feat: skeleton for gallery/topo page (#1128)

src/app/(area)/topo/[id]/components/GalleryThumbnails.tsx

@@ -0,0 +1,65 @@
+'use client'
+import { useState, Dispatch, SetStateAction } from 'react'
+import Image from 'next/image'
+import clx from 'classnames'
+import { AreaType, MediaWithTags } from '@/js/types'
+
+type GalleryThumbnailsProps = AreaType
+
+export const GalleryThumbnails: React.FC<GalleryThumbnailsProps> = ({ media }) => {
+  const [currentPhoto, setCurrentPhoto] = useState<string | null>(media[0]?.id ?? null)
+  const currentMedia = media.find(media => media.id === currentPhoto)
+  return (
+    <div className='w-full'>
+      <div className='flex flex-rows flex-wrap gap-4'>
+        {media.map(media =>
+          <Thumbnail
+            key={media.id}
+            {...media} onClick={setCurrentPhoto}
+            selected={currentPhoto === media.id}
+          />)}
+      </div>
+      <div className='mt-6'>
+        {(currentMedia != null) && <ActivePhoto {...currentMedia} />}
+      </div>
+    </div>
+  )
+}
+
+const IMAGE_MAX_WIDITH = 200
+
+interface ThumbnailProps extends MediaWithTags {
+  onClick: Dispatch<SetStateAction<string | null>>
+  selected: boolean
+}
+
+const Thumbnail: React.FC<ThumbnailProps> = ({ id, mediaUrl, width, height, entityTags, onClick, selected }) => {
+  const imageRatio = width / height
+  return (
+    <div className={clx('relative block hover:cursor-pointer', selected && 'ring-2 ring-offset-1')} onClick={() => onClick(id)}>
+      <Image
+        src={mediaUrl}
+        width={IMAGE_MAX_WIDITH}
+        height={IMAGE_MAX_WIDITH / imageRatio}
+        sizes='25vw'
+        alt=''
+      />
+    </div>
+  )
+}
+
+const ActivePhoto: React.FC<MediaWithTags> = ({ mediaUrl, width, height, entityTags }) => {
+  const imageRatio = width / height
+  const WIDTH = 800
+  return (
+    <div className='relative block w-full'>
+      <Image
+        src={mediaUrl}
+        width={WIDTH}
+        height={WIDTH / imageRatio}
+        sizes='25vw'
+        alt=''
+      />
+    </div>
+  )
+}

src/app/(area)/topo/[id]/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading (): JSX.Element {
+  return <p>Loading...</p>
+}

src/app/(area)/topo/[id]/page.tsx

@@ -0,0 +1,21 @@
+import { notFound } from 'next/navigation'
+import { getArea } from '@/js/graphql/getArea'
+import { GalleryThumbnails } from './components/GalleryThumbnails'
+
+interface TopoPageParams {
+  params: { id: string }
+}
+
+export default async function TopoPage ({ params: { id } }: TopoPageParams): Promise<JSX.Element> {
+  const pageData = await getArea(id)
+  if (pageData == null || pageData.area == null) {
+    notFound()
+  }
+  const { area } = pageData
+  return (
+    <article className='default-page-margins mt-6'>
+      <h1 className='mt-4'>{area.areaName}</h1>
+      <GalleryThumbnails {...area} />
+    </article>
+  )
+}

src/app/(area)/topo/layout.tsx

@@ -0,0 +1,3 @@
+import Layout from '../../(default)/layout'
+
+export default Layout

src/js/graphql/getArea.ts

@@ -3,11 +3,10 @@ import { FetchPolicy } from '@apollo/client'
 import { QUERY_AREA_BY_ID } from './gql/areaById'
 import { QUERY_CHILD_AREAS_FOR_BREADCRUMBS, ChildAreasQueryReturn, AreaWithChildren } from './gql/breadcrumbs'
 import { graphqlClient } from './Client'
-import { AreaType, ChangesetType } from '../types'
+import { AreaType } from '../types'
 
 export interface AreaPageDataProps {
   area: AreaType | null
-  getAreaHistory: ChangesetType[]
 }
 
 /**
@@ -26,7 +25,7 @@ export const getArea = async (uuid: string, fetchPolicy: FetchPolicy = 'no-cache
     return rs.data
   } catch (error) {
     console.error(error)
-    return { area: null, getAreaHistory: [] }
+    return { area: null }
   }
 }
 

src/js/graphql/gql/areaById.ts

@@ -1,12 +1,11 @@
 import { gql } from '@apollo/client'
 
-import { FRAGMENT_AUTHOR_METADATA, FRAGMENT_CHANGE_HISTORY } from './contribs'
+import { FRAGMENT_AUTHOR_METADATA } from './contribs'
 import { FRAGMENT_MEDIA_WITH_TAGS } from './tags'
 import { FRAGMENT_CLIMB_DISCIPLINES } from './climbById'
 
 export const QUERY_AREA_BY_ID = gql`
   ${FRAGMENT_CLIMB_DISCIPLINES}
-  ${FRAGMENT_CHANGE_HISTORY}
   ${FRAGMENT_MEDIA_WITH_TAGS}
   ${FRAGMENT_AUTHOR_METADATA}
   query ($uuid: ID) {
@@ -119,9 +118,6 @@ export const QUERY_AREA_BY_ID = gql`
         ... AuthorMetadataFields
       }
     }
-    getAreaHistory(filter: {areaId: $uuid}) {
-       ...ChangeHistoryFields
-    }
   }
   `