Move CommandK query to action.tsx

src/components/CommandKClient.tsx

@@ -18,6 +18,7 @@ import { useTheme } from 'next-themes';
 import { BiDesktop, BiMoon, BiSun } from 'react-icons/bi';
 import { IoInvertModeSharp } from 'react-icons/io5';
 import { useAppState } from '@/state/AppState';
+import { getPhotoItemsAction } from '@/photo/actions';
 
 const LISTENER_KEYDOWN = 'keydown';
 const MINIMUM_QUERY_LENGTH = 2;
@@ -36,11 +37,9 @@ export type CommandKSection = {
 }
 
 export default function CommandKClient({
-  onQueryChange,
   sections = [],
   footer,
 }: {
-  onQueryChange?: (query: string) => Promise<CommandKSection[]>
   sections?: CommandKSection[]
   footer?: string
 }) {
@@ -99,7 +98,7 @@ export default function CommandKClient({
   useEffect(() => {
     if (queryDebounced.length >= MINIMUM_QUERY_LENGTH) {
       setIsLoading(true);
-      onQueryChange?.(queryDebounced).then(querySections => {
+      getPhotoItemsAction(queryDebounced).then(querySections => {
         if (isOpenRef.current) {
           setQueriedSections(querySections);
         } else {
@@ -109,7 +108,7 @@ export default function CommandKClient({
         setIsLoading(false);
       });
     }
-  }, [queryDebounced, onQueryChange]);
+  }, [queryDebounced]);
 
   useEffect(() => {
     if (queryLive === '') {

src/photo/actions.tsx

@@ -7,6 +7,7 @@ import {
   sqlUpdatePhoto,
   sqlRenamePhotoTagGlobally,
   getPhoto,
+  getPhotos,
 } from '@/services/vercel-postgres';
 import {
   PhotoFormData,
@@ -29,10 +30,14 @@ import {
   PATH_ADMIN_PHOTOS,
   PATH_ADMIN_TAGS,
   PATH_ROOT,
+  pathForPhoto,
 } from '@/site/paths';
 import { extractExifDataFromBlobPath } from './server';
 import { TAG_FAVS, isTagFavs } from '@/tag';
-import { convertPhotoToPhotoDbInsert } from '.';
+import { convertPhotoToPhotoDbInsert, titleForPhoto } from '.';
+import { TbPhoto } from 'react-icons/tb';
+import PhotoTiny from './PhotoTiny';
+import { formatDate } from '@/utility/date';
 
 export async function createPhotoAction(formData: FormData) {
   const photo = convertFormDataToPhotoDbInsert(formData, true);
@@ -160,3 +165,19 @@ export async function syncPhotoExifDataAction(formData: FormData) {
 export async function syncCacheAction() {
   revalidateAllKeysAndPaths();
 }
+
+export async function getPhotoItemsAction(query: string) {
+  const photos = await getPhotos({ title: query, limit: 10 });
+  return photos.length > 0
+    ? [{
+      heading: 'Photos',
+      accessory: <TbPhoto size={14} />,
+      items: photos.map(photo => ({
+        accessory: <PhotoTiny photo={photo} />,
+        label: titleForPhoto(photo),
+        annotation: formatDate(photo.takenAt),
+        path: pathForPhoto(photo),
+      })),
+    }]
+    : [];
+}

src/site/CommandK.tsx

@@ -13,21 +13,16 @@ import {
   PATH_SIGN_IN,
   pathForCamera,
   pathForFilmSimulation,
-  pathForPhoto,
   pathForTag,
 } from './paths';
 import { formatCameraText } from '@/camera';
 import { authCachedSafe } from '@/auth/cache';
-import { getPhotos } from '@/services/vercel-postgres';
-import { photoQuantityText, titleForPhoto } from '@/photo';
-import PhotoTiny from '@/photo/PhotoTiny';
-import { formatDate } from '@/utility/date';
+import { photoQuantityText } from '@/photo';
 import { formatCount, formatCountDescriptive } from '@/utility/string';
 import { BiLockAlt, BiSolidUser } from 'react-icons/bi';
 import { sortTagsObject } from '@/tag';
 import PhotoFilmSimulationIcon from '@/simulation/PhotoFilmSimulationIcon';
 import { FaTag } from 'react-icons/fa';
-import { TbPhoto } from 'react-icons/tb';
 import { IoMdCamera } from 'react-icons/io';
 import { HiDocumentText } from 'react-icons/hi';
 import { signOutAction } from '@/auth/actions';
@@ -137,23 +132,6 @@ export default async function CommandK() {
       SECTION_PAGES,
       SECTION_ADMIN,
     ]}
-    onQueryChange={async (query) => {
-      'use server';
-      const photos = (await getPhotos({ title: query, limit: 10 }))
-        .filter(({ title }) => Boolean(title));
-      return photos.length > 0
-        ? [{
-          heading: 'Photos',
-          accessory: <TbPhoto size={14} />,
-          items: photos.map(photo => ({
-            accessory: <PhotoTiny photo={photo} />,
-            label: titleForPhoto(photo),
-            annotation: formatDate(photo.takenAt),
-            path: pathForPhoto(photo),
-          })),
-        }]
-        : [];
-    }}
     footer={photoQuantityText(count, false)}
   />;
 }