Merge pull request #187 from sambecker/db-optimize

Profile and optimize database usage

src/photo/InfinitePhotoScroll.tsx

@@ -4,6 +4,7 @@ import useSwrInfinite from 'swr/infinite';
 import {
   ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
 } from 'react';
@@ -14,6 +15,8 @@ import { Photo, PhotoSetCategory } from '.';
 import { clsx } from 'clsx/lite';
 import { useAppState } from '@/state/AppState';
 import { GetPhotosOptions } from './db';
+import useVisible from '@/utility/useVisible';
+import { ADMIN_DB_OPTIMIZE_ENABLED } from '@/site/config';
 
 export type RevalidatePhoto = (
   photoId: string,
@@ -56,7 +59,10 @@ export default function InfinitePhotoScroll({
       : [key, size]
     , [key]);
 
-  const fetcher = useCallback(([_key, size]: [string, number]) =>
+  const fetcher = useCallback((
+    [_key, size]: [string, number],
+    warmOnly?: boolean,
+  ) =>
     (useCachedPhotos ? getPhotosCachedAction : getPhotosAction)({
       offset: initialOffset + size * itemsPerPage,
       sortBy,
@@ -65,7 +71,7 @@ export default function InfinitePhotoScroll({
       tag,
       camera,
       simulation,
-    })
+    }, warmOnly)
   , [
     useCachedPhotos,
     sortBy,
@@ -77,18 +83,24 @@ export default function InfinitePhotoScroll({
     simulation,
   ]);
 
-  const { data, isLoading, isValidating, error, mutate, setSize } =
+  const { data, isLoading, isValidating, error, mutate, size, setSize } =
     useSwrInfinite<Photo[]>(
       keyGenerator,
       fetcher,
       {
-        initialSize: 2,
+        initialSize: ADMIN_DB_OPTIMIZE_ENABLED ? 0 : 2,
         revalidateFirstPage: false,
         revalidateOnFocus: Boolean(isUserSignedIn),
         revalidateOnReconnect: Boolean(isUserSignedIn),
       },
     );
 
+  useEffect(() => {
+    if (ADMIN_DB_OPTIMIZE_ENABLED) {
+      fetcher(['', 0], true);
+    }
+  }, [fetcher]);
+
   const buttonContainerRef = useRef<HTMLDivElement>(null);
   
   const isLoadingOrValidating = isLoading || isValidating;
@@ -116,6 +128,12 @@ export default function InfinitePhotoScroll({
     },
   } as any), [data, mutate]);
 
+  useVisible({ ref: buttonContainerRef, onVisible: () => {
+    if (ADMIN_DB_OPTIMIZE_ENABLED && size === 0) {
+      advance();
+    }
+  }});
+
   const renderMoreButton = () =>
     <div ref={buttonContainerRef}>
       <button

src/photo/PhotoGridPage.tsx

@@ -4,7 +4,7 @@ import { Tags } from '@/tag';
 import { Photo } from '.';
 import { Cameras } from '@/camera';
 import { FilmSimulations } from '@/simulation';
-import { PATH_GRID } from '@/site/paths';
+import { PATH_GRID_INFERRED } from '@/site/paths';
 import PhotoGridSidebar from './PhotoGridSidebar';
 import PhotoGridContainer from './PhotoGridContainer';
 import { useEffect } from 'react';
@@ -33,7 +33,7 @@ export default function PhotoGridPage({
 
   return (
     <PhotoGridContainer
-      cacheKey={`page-${PATH_GRID}`}
+      cacheKey={`page-${PATH_GRID_INFERRED}`}
       photos={photos}
       count={photosCount}
       sidebar={

src/photo/PhotosLargeInfinite.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { PATH_ROOT } from '@/site/paths';
+import { PATH_FEED_INFERRED } from '@/site/paths';
 import InfinitePhotoScroll from './InfinitePhotoScroll';
 import PhotosLarge from './PhotosLarge';
 
@@ -13,7 +13,7 @@ export default function PhotosLargeInfinite({
 }) {
   return (
     <InfinitePhotoScroll
-      cacheKey={`page-${PATH_ROOT}`}
+      cacheKey={`page-${PATH_FEED_INFERRED}`}
       initialOffset={initialOffset}
       itemsPerPage={itemsPerPage}
       wrapMoreButtonInGrid

src/photo/actions.ts

@@ -406,15 +406,31 @@ export const getPhotosHiddenMetaCachedAction = async () =>
 
 // Public/Private actions
 
-export const getPhotosAction = async (options: GetPhotosOptions) =>
-  areOptionsSensitive(options)
-    ? runAuthenticatedAdminServerAction(() => getPhotos(options))
-    : getPhotos(options);
+export const getPhotosAction = async (
+  options: GetPhotosOptions,
+  warmOnly?: boolean,
+) => {
+  if (warmOnly) {
+    return [];
+  } else {
+    return areOptionsSensitive(options)
+      ? runAuthenticatedAdminServerAction(() => getPhotos(options))
+      : getPhotos(options);
+  }
+};
 
-export const getPhotosCachedAction = async (options: GetPhotosOptions) =>
-  areOptionsSensitive(options)
-    ? runAuthenticatedAdminServerAction(() => getPhotosCached(options))
-    : getPhotosCached(options);
+export const getPhotosCachedAction = async (
+  options: GetPhotosOptions,
+  warmOnly?: boolean,
+) => {
+  if (warmOnly) {
+    return [];
+  } else {
+    return areOptionsSensitive(options)
+      ? runAuthenticatedAdminServerAction(() => getPhotosCached(options))
+      : getPhotosCached(options);
+  }
+};
 
 // Public actions
 

src/photo/db/query.ts

@@ -14,7 +14,7 @@ import {
 import { Cameras, createCameraKey } from '@/camera';
 import { Tags } from '@/tag';
 import { FilmSimulation, FilmSimulations } from '@/simulation';
-import { SHOULD_DEBUG_SQL } from '@/site/config';
+import { ADMIN_DB_OPTIMIZE_ENABLED } from '@/site/config';
 import {
   GetPhotosOptions,
   getLimitAndOffsetFromOptions,
@@ -127,7 +127,7 @@ const safelyQueryPhotos = async <T>(
     }
   }
 
-  if (SHOULD_DEBUG_SQL && debugMessage) {
+  if (ADMIN_DB_OPTIMIZE_ENABLED && debugMessage) {
     const time =
       (((new Date()).getTime() - start.getTime()) / 1000).toFixed(2);
     console.log(`Executing sql query: ${debugMessage} (${time} seconds)`);

src/site/config.ts

@@ -227,6 +227,7 @@ export const OG_TEXT_BOTTOM_ALIGNMENT =
 // INTERNAL
 
 export const ADMIN_DEBUG_TOOLS_ENABLED = process.env.ADMIN_DEBUG_TOOLS === '1';
+export const ADMIN_DB_OPTIMIZE_ENABLED = process.env.ADMIN_DB_OPTIMIZE === '1';
 
 export const CONFIG_CHECKLIST_STATUS = {
   // Storage