Apply best practices

Author: danactive

src/components/AdminAlbum/AdminAlbumClient.tsx

@@ -31,7 +31,6 @@ export default function AdminAlbumClient(
   const [currentIndex, setCurrentIndex] = useState<number>(-1)
   const [selectedIndices, setSelectedIndices] = useState<Set<number>>(new Set())
   const [searchQuery, setSearchQuery] = useState<string>('')
-  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
   const [isSearching, setIsSearching] = useState(false)
   const {
     EditCountPill,
@@ -198,19 +197,14 @@ export default function AdminAlbumClient(
       const data: { results: SearchResult[] } = await response.json()
 
       if (data.results && data.results.length > 0) {
-        setSearchResults(data.results)
         // Load the first result automatically
         const firstResult = data.results[0]
         setCurrentGallery(firstResult.gallery)
 
         const selectedAlbum = galleryAlbum[firstResult.gallery].albums.find(a => a.name === firstResult.album)
         if (selectedAlbum) {
           setAlbum(selectedAlbum)
-          // Wait for the album to load, then select the item
-          setTimeout(async () => {
-            await mutate()
-            setCurrentIndex(firstResult.index)
-          }, 100)
+          setCurrentIndex(firstResult.index)
         }
       } else {
         alert('No matching files found')

src/components/AdminAlbum/Fields.tsx

@@ -319,6 +319,7 @@ export default function Fields(
             }}
             disabled={!editedItem?.ref?.source || !editedItem?.ref?.name}
             title="Copy reference URL to clipboard"
+            aria-label="Copy reference URL to clipboard"
             sx={{ minWidth: 'auto', px: 1 }}
           >
             📋

src/components/AdminAlbum/useGeoCopy.tsx

@@ -30,6 +30,7 @@ export function useGeoCopy(editedItem: RawXmlItem | null) {
       onClick={copyGeoCoordinates}
       disabled={disabled}
       title={title}
+      aria-label={title}
       sx={{ minWidth: 'auto', px: 1 }}
     >
       📋

src/components/SplitViewer/index.tsx

@@ -128,7 +128,7 @@ function SplitViewer({
         coordinates: clearCoordinates,
       } as Item)
     }
-  }, [isClearing, clearCoordinates])
+  }, [isClearing, clearCoordinates, dynamicCentroid])
 
   // Update locked centroid during normal navigation only
   useEffect(() => {

src/hooks/useMemory.tsx

@@ -61,7 +61,7 @@ const useMemory = (
         {Array.isArray(details.filename) ? details.filename.join(', ') : String(details.filename)}
       </h5>
       {details.reference && details.reference.length >= 2 && (
-        <Link href={details.reference[0]} target='_blank'>
+        <Link href={details.reference[0]} target='_blank' rel="noopener noreferrer">
           {decodeURI(details.reference[1]).replaceAll('_', ' ')}
         </Link>
       )}

src/hooks/useSearch.tsx

@@ -63,13 +63,10 @@ export default function useSearch<ItemType extends ServerSideItem>({
     setVisibleCount((prev) => (prev === count ? prev : count))
   }, [])
 
-  // Adjust visibleCount when filtered items change during render
-  // This avoids a double render caused by useEffect synchronization
-  const [prevFiltered, setPrevFiltered] = useState(filtered)
-  if (filtered !== prevFiltered) {
-    setPrevFiltered(filtered)
-    setVisibleCount(filtered.length)
-  }
+  // Sync visibleCount when filtered items change (avoids state-update-during-render)
+  useEffect(() => {
+    setVisibleCount((prev) => (prev === filtered.length ? prev : filtered.length))
+  }, [filtered.length])
 
   const handleSubmit = useCallback((event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
@@ -84,19 +81,14 @@ export default function useSearch<ItemType extends ServerSideItem>({
     const currentIndex = refImageGallery?.current?.getCurrentIndex?.() ?? 0
     const itemsToUse = displayedItems || filtered
     const currentItem = itemsToUse[currentIndex]
-    if (!currentItem) return
-
-    // Use filename as unique identifier (works across all albums)
-    const identifier = Array.isArray((currentItem as any).filename)
-      ? (currentItem as any).filename[0]
-      : (currentItem as any).filename
-    if (!identifier) return
-
-    // Extract coordinates from current item
-    const coordinates = (currentItem as any).coordinates as [number, number] | null
-
-    // Set selectedId with clear flag for immediate processing
-    if (selectById) {
+    const identifier = currentItem
+      ? (Array.isArray((currentItem as any).filename)
+          ? (currentItem as any).filename[0]
+          : (currentItem as any).filename)
+      : null
+    const coordinates = (currentItem as any)?.coordinates as [number, number] | null
+
+    if (selectById && identifier) {
       selectById(identifier, true)
     }
 
@@ -111,7 +103,7 @@ export default function useSearch<ItemType extends ServerSideItem>({
     }
 
     // Update URL to reflect the selection (use filename for global uniqueness)
-    router.replace(`${pathname}?select=${identifier}`)
+    router.replace(identifier ? `${pathname}?select=${identifier}` : pathname)
   }, [refImageGallery, displayedItems, filtered, selectById, mapFilterEnabled, onClearMapFilter, router, pathname])
 
   const { BookmarkButton } = useBookmark({

src/lib/paths.ts

@@ -1,21 +1,12 @@
 import type { Gallery, Item, XmlItem } from '../types/common'
 
-const type = (filepath: string): string => {
-  const lastDot = filepath.lastIndexOf('.')
-  if (lastDot === 0) {
-    return filepath.substring(1)
-  }
-  if (lastDot === -1) {
-    return ''
-  }
-  return filepath.substring(lastDot + 1)
-}
-
 const filenameAsJpg = (filename: Item['filename'][0]) => {
-  const currentExt = type(filename)
+  const lastDot = filename.lastIndexOf('.')
+  if (lastDot === -1) return `${filename}.jpg`
+  const base = filename.slice(0, lastDot)
+  const currentExt = filename.slice(lastDot + 1)
   const futureExt = (currentExt.toLowerCase() === 'jpg' || currentExt.toLowerCase() === 'jpeg') ? currentExt : 'jpg'
-  const imageFilename = filename.replace(currentExt, futureExt)
-  return imageFilename
+  return `${base}.${futureExt}`
 }
 
 /**
@@ -27,7 +18,7 @@ const filenameAsJpg = (filename: Item['filename'][0]) => {
  */
 export const rasterPath = (filename: XmlItem['filename'], gallery: Gallery, rasterType: 'photo' | 'thumb') => {
   const imageFilename = filenameAsJpg(Array.isArray(filename) ? filename[0] : filename)
-  const year = imageFilename.indexOf('-') >= 0 && imageFilename.split('-')[0]
+  const year = imageFilename.indexOf('-') >= 0 ? imageFilename.split('-')[0] : ''
 
   return `/galleries/${gallery}/media/${rasterType}s/${year}/${imageFilename}`
 }
@@ -52,7 +43,7 @@ export const getVideoPaths = (filename: XmlItem['filename'], gallery: Gallery) =
   const filenames = Array.isArray(filename) ? filename : [filename]
 
   return filenames.map(fn => {
-    const year = fn.indexOf('-') >= 0 && fn.split('-')[0]
+    const year = fn.indexOf('-') >= 0 ? fn.split('-')[0] : ''
     return `/galleries/${gallery}/media/videos/${year}/${fn}`
   })
 }

src/lib/xml.ts

@@ -16,7 +16,7 @@ async function readAlbum(gallery: NonNullable<AlbumMeta['gallery']>, album: stri
 async function readAlbum(gallery: NonNullable<AlbumMeta['gallery']>, album: string, options: ParserOptions): Promise<RawXmlAlbum>
 async function readAlbum(gallery: NonNullable<AlbumMeta['gallery']>, album: string, options?: ParserOptions): Promise<XmlAlbum | RawXmlAlbum> {
   const fileBuffer = await fs.readFile(`public/galleries/${gallery}/${album}.xml`)
-  const selectedParser = options ? new xml2js.Parser(options) : parser
+  const selectedParser = options === rawParseOptions ? rawParser : (options ? new xml2js.Parser(options) : parser)
   return selectedParser.parseStringPromise(fileBuffer)
 }
 

src/utils/reference.ts

@@ -1,6 +1,6 @@
 import type { ItemReferenceSource, XmlItem } from '../types/common'
 
-export function buildReferenceUrl(source: ItemReferenceSource, name: string): string | null {
+export function buildReferenceUrl(source: ItemReferenceSource, name: string): string {
   const baseUrls: Record<ItemReferenceSource, string> = {
     facebook: 'https://www.facebook.com/',
     google: 'https://www.google.com/search?q=',
@@ -9,7 +9,7 @@ export function buildReferenceUrl(source: ItemReferenceSource, name: string): st
     youtube: 'https://www.youtube.com/watch?v=',
   }
 
-  return baseUrls[source] + name
+  return baseUrls[source] + encodeURIComponent(name)
 }
 
 export function transformReference(ref: XmlItem['ref']): [string, string] | null {
@@ -18,7 +18,6 @@ export function transformReference(ref: XmlItem['ref']): [string, string] | null
   }
   if ('name' in ref && 'source' in ref) {
     const url = buildReferenceUrl(ref.source, ref.name)
-    if (!url) return null
     return [url, ref.name]
   }
   return null