Merge pull request #685 from danactive/fix-drag

Add cluster below label

Author: danactive

app/[gallery]/[album]/page.tsx

@@ -7,56 +7,53 @@ import getAlbums from '../../../src/lib/albums'
 import getGalleries from '../../../src/lib/galleries'
 import indexKeywords, { addGeographyToSearch } from '../../../src/lib/search'
 import type { Album } from '../../../src/types/pages'
+import { generateClusters } from '../../../src/lib/generate-clusters'
 
 export async function generateMetadata(
   { params }: { params: Promise<Album.Params> },
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
   const album = (await params).album
-
-  return {
-    title: `Album ${album} - History App`,
-  }
+  return { title: `Album ${album} - History App` }
 }
 
 async function buildStaticPaths() {
   const { galleries } = await getGalleries()
   const groups = await Promise.all(galleries.map(async (gallery) => {
     const { [gallery]: { albums } } = await getAlbums(gallery)
-    return albums.map(({ name: album }) => ({ params: { gallery, album } }))
+    return albums.map(({ name: album }) => ({ gallery, album }))
   }))
   return groups.flat()
 }
 
-async function getAlbumItems({ album, gallery }: Album.Params): Promise<Album.ComponentProps> {
+export async function generateStaticParams() {
+  return buildStaticPaths()
+}
+
+async function getAlbumItems({ album, gallery }: Album.Params): Promise<Album.ItemData> {
   const { album: { items, meta } } = await getAlbum(gallery, album)
   const preparedItems = items.map((item) => ({
     ...item,
     search: addGeographyToSearch(item),
     corpus: [item.description, item.caption, item.location, item.city, item.search].join(' '),
   }))
-
-  return {
-    items: preparedItems, meta, ...indexKeywords(preparedItems),
-  }
-}
-
-export async function generateStaticParams() {
-  return buildStaticPaths()
+  return { items: preparedItems, meta, ...indexKeywords(preparedItems) }
 }
 
 export default async function AlbumServer(props: { params: Promise<Album.Params> }) {
   const params = await props.params
-
-  const {
-    album,
-    gallery,
-  } = params
+  const { album, gallery } = params
 
   const { items, meta, indexedKeywords } = await getAlbumItems({ album, gallery })
+  const clusterMarkers = generateClusters(items)
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <AlbumPageComponent items={items} meta={meta} indexedKeywords={indexedKeywords} />
+      <AlbumPageComponent
+        items={items}
+        meta={meta}
+        indexedKeywords={indexedKeywords}
+        clusteredMarkers={clusterMarkers}
+      />
     </Suspense>
   )
 }

app/[gallery]/all/__tests__/getAllData.sort.test.ts

@@ -1,4 +1,4 @@
-import { getAllData } from '../page'
+import { getAllData } from '../../../../src/lib/all'
 import type { Gallery } from '../../../../src/types/common'
 
 // Reduce mocks: keep only data providers (getAlbums/getAlbum). Use real config & search.

app/[gallery]/all/page.tsx

@@ -1,55 +1,15 @@
 import type { Metadata } from 'next'
 import { Suspense } from 'react'
 
-import config from '../../../src/models/config'
 import AllClient from '../../../src/components/All/AllClient'
-import getAlbum from '../../../src/lib/album'
-import getAlbums from '../../../src/lib/albums'
+import { getAllData } from '../../../src/lib/all'
 import getGalleries from '../../../src/lib/galleries'
-import indexKeywords, { addGeographyToSearch } from '../../../src/lib/search'
-import type { AlbumMeta, Item, ServerSideAllItem } from '../../../src/types/common'
 import type { All } from '../../../src/types/pages'
-
-export async function getAllData({ gallery }: All.Params): Promise<All.ComponentProps> {
-  const { [gallery]: { albums } } = await getAlbums(gallery)
-
-  const prepareItems = (
-    { albumName, albumCoordinateAccuracy, items }:
-    {
-      albumName: AlbumMeta['albumName'],
-      albumCoordinateAccuracy: NonNullable<AlbumMeta['geo']>['zoom'],
-      items: Item[],
-    },
-  ) => items.map((item) => ({
-    ...item,
-    gallery,
-    album: albumName,
-    corpus: [item.description, item.caption, item.location, item.city, item.search].join(' '),
-    coordinateAccuracy: item.coordinateAccuracy ?? albumCoordinateAccuracy,
-    search: addGeographyToSearch(item),
-  }))
-
-  // reverse order for albums in ascending order (oldest on top)
-  const allItems = (await albums.reduce(async (previousPromise, album) => {
-    const prev = await previousPromise
-    const { album: { items, meta } } = await getAlbum(gallery, album.name)
-    const albumCoordinateAccuracy = meta?.geo?.zoom ?? config.defaultZoom
-    const preparedItems = prepareItems({
-      albumName: album.name,
-      albumCoordinateAccuracy,
-      items,
-    })
-    return prev.concat(preparedItems.reverse())
-  }, Promise.resolve([] as ServerSideAllItem[]))).reverse()
-
-  return {
-    items: allItems, ...indexKeywords(allItems),
-  }
-}
+import { generateClusters } from '../../../src/lib/generate-clusters'
 
 export async function generateStaticParams() {
   const { galleries } = await getGalleries()
-  return galleries.map((gallery) => ({ params: { gallery } }))
+  return galleries.map((gallery) => ({ gallery }))
 }
 
 export const metadata: Metadata = {
@@ -58,15 +18,17 @@ export const metadata: Metadata = {
 
 export default async function AllServer(props: { params: Promise<All.Params> }) {
   const params = await props.params
+  const { gallery } = params
 
-  const {
-    gallery,
-  } = params
-
-  const { items = [], indexedKeywords }: All.ComponentProps = await getAllData({ gallery })
+  const { items = [], indexedKeywords } = await getAllData({ gallery })
+  const clusterMarkers = generateClusters(items)
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <AllClient items={items} indexedKeywords={indexedKeywords} />
+      <AllClient
+        items={items}
+        indexedKeywords={indexedKeywords}
+        clusteredMarkers={clusterMarkers}
+      />
     </Suspense>
   )
 }

app/[gallery]/persons/page.tsx

@@ -1,75 +1,68 @@
 import { Suspense } from 'react'
-
 import type { Metadata } from 'next'
+
 import PersonsClient from '../../../src/components/Persons/PersonsClient'
-import getAlbum from '../../../src/lib/album'
-import getAlbums from '../../../src/lib/albums'
 import getGalleries from '../../../src/lib/galleries'
-import indexKeywords, { addGeographyToSearch } from '../../../src/lib/search'
-import config from '../../../src/models/config'
-import type { AlbumMeta, Gallery, Item, ServerSideAllItem } from '../../../src/types/common'
-import type { All } from '../../../src/types/pages'
+import { getPersonsData } from '../../../src/lib/persons'
+import type { Gallery } from '../../../src/types/common'
+import { generateClusters } from '../../../src/lib/generate-clusters'
+import type { Item } from '../../../src/types/common'
+
+type AgeSummary = {
+  ages: { age: number; count: number }[];
+};
+
+function buildAgeSummary(items: Item[]): AgeSummary {
+  const counts = new Map<number, number>()
+  items.forEach(it => {
+    if (!it.persons || !it.filename) return
+    const filenameDate = Array.isArray(it.filename)
+      ? (it.filename[0] ?? '').substring(0, 10)
+      : String(it.filename).substring(0, 10)
+    const photoDate = (it as any).photoDate || filenameDate
+    it.persons.forEach(p => {
+      if (!p.dob) return
+      const birth = new Date(p.dob.substring(0, 10))
+      const shot = new Date(photoDate.substring(0, 10))
+      if (Number.isNaN(birth.getTime()) || Number.isNaN(shot.getTime())) return
+      let age = shot.getFullYear() - birth.getFullYear()
+      const m = shot.getMonth() - birth.getMonth()
+      if (m < 0 || (m === 0 && shot.getDate() < birth.getDate())) age -= 1
+      if (age >= 0) counts.set(age, (counts.get(age) || 0) + 1)
+    })
+  })
+  return {
+    ages: Array.from(counts.entries())
+      .map(([age, count]) => ({ age, count }))
+      .sort((a, b) => a.age - b.age),
+  }
+}
 
 export const metadata: Metadata = {
   title: 'Persons - History App',
 }
 
 export async function generateStaticParams() {
   const { galleries } = await getGalleries()
-
-  return galleries.map((gallery) => ({
-    gallery,
-  }))
-}
-
-async function getPersonsData({ gallery }: All.Params): Promise<All.ComponentProps> {
-  const { [gallery]: { albums } } = await getAlbums(gallery)
-
-  const prepareItems = (
-    { albumName, albumCoordinateAccuracy, items }:
-    {
-      albumName: AlbumMeta['albumName'],
-      albumCoordinateAccuracy: NonNullable<AlbumMeta['geo']>['zoom'],
-      items: Item[],
-    },
-  ) => items.map((item) => ({
-    ...item,
-    gallery,
-    album: albumName,
-    corpus: [item.description, item.caption, item.location, item.city, item.search].join(' '),
-    coordinateAccuracy: item.coordinateAccuracy ?? albumCoordinateAccuracy,
-    search: addGeographyToSearch(item),
-  }))
-
-  // reverse order for albums in ascending order (oldest on top)
-  const allItems = (await albums.reduce(async (previousPromise, album) => {
-    const prev = await previousPromise
-    const { album: { items, meta } } = await getAlbum(gallery, album.name)
-    const albumCoordinateAccuracy = meta?.geo?.zoom ?? config.defaultZoom
-    const preparedItems = prepareItems({
-      albumName: album.name,
-      albumCoordinateAccuracy,
-      items,
-    })
-    return prev.concat(preparedItems)
-  }, Promise.resolve([] as ServerSideAllItem[]))).reverse()
-
-  return {
-    items: allItems, ...indexKeywords(allItems),
-  }
+  return galleries.map((gallery) => ({ gallery }))
 }
 
 export default async function PersonsServer(props: { params: Promise<{ gallery: Gallery }> }) {
   const params = await props.params
-
-  const {
-    gallery,
-  } = params
+  const { gallery } = params
 
   const { items, indexedKeywords } = await getPersonsData({ gallery })
+  const clusterMarkers = generateClusters(items)
+  const initialAgeSummary = buildAgeSummary(items)
+
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <PersonsClient items={items} indexedKeywords={indexedKeywords} />
+    <Suspense fallback={<div>Loading Persons...</div>}>
+      <PersonsClient
+        items={items}
+        indexedKeywords={indexedKeywords}
+        clusteredMarkers={clusterMarkers}
+        initialAgeSummary={initialAgeSummary}
+      />
     </Suspense>
   )
 }

app/[gallery]/today/page.tsx

@@ -5,6 +5,7 @@ import AlbumPageComponent from '../../../src/components/Album/AlbumClient'
 import getAlbum from '../../../src/lib/album'
 import getAlbums from '../../../src/lib/albums'
 import getGalleries from '../../../src/lib/galleries'
+import { generateClusters } from '../../../src/lib/generate-clusters'
 import indexKeywords, { addGeographyToSearch } from '../../../src/lib/search'
 import config from '../../../src/models/config'
 import type { AlbumMeta, Gallery, Item } from '../../../src/types/common'
@@ -65,9 +66,10 @@ async function getTodayItems(gallery: Gallery) {
 export default async function TodayServer(props: { params: Promise<{ gallery: Gallery }> }) {
   const params = await props.params
   const { items, indexedKeywords } = await getTodayItems(params.gallery)
+  const clusteredMarkers = generateClusters(items)
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <AlbumPageComponent items={items} indexedKeywords={indexedKeywords} />
+    <Suspense fallback={<div>Loading Today...</div>}>
+      <AlbumPageComponent items={items} indexedKeywords={indexedKeywords} clusteredMarkers={clusteredMarkers} />
     </Suspense>
   )
 }

config.json

@@ -18,7 +18,7 @@
     "video": ["mp4", "webm"]
   },
   "rawFileTypes": {
-    "photo": ["arw", "raw", "dng"],
+    "photo": ["arw", "raw", "dng", "heic", "heif"],
     "video": ["avi", "mov", "m2ts", "mts"]
   }
 }

eslint.config.js

@@ -43,6 +43,7 @@ export default [
       'jsdoc/check-tag-names': 'error', // Validate JSDoc tag names
       'jsdoc/check-types': 'error', // Ensure TS types are correctly used
       'comma-dangle': ['error', 'always-multiline'],
+      // 'no-unused-vars': 2, // Turn off base rule (TypeScript handles this better)
     },
     settings: {
       jsdoc: {