Refine outdated page

src/admin/AdminPhotosTable.tsx

@@ -25,6 +25,7 @@ export default function AdminPhotosTable({
   onLastPhotoVisible,
   revalidatePhoto,
   hasAiTextGeneration,
+  showCreatedAt,
   canEdit = true,
   canDelete = true,
 }: {
@@ -32,6 +33,7 @@ export default function AdminPhotosTable({
   onLastPhotoVisible?: () => void
   revalidatePhoto?: RevalidatePhoto
   hasAiTextGeneration?: boolean
+  showCreatedAt?: boolean
   canEdit?: boolean
   canDelete?: boolean
 }) {
@@ -79,7 +81,9 @@ export default function AdminPhotosTable({
               'lg:w-[50%] uppercase',
               'text-dim',
             )}>
-              <PhotoDate {...{ photo }} />
+              {showCreatedAt
+                ? <PhotoDate {...{ photo, dateType: 'createdAt' }} />
+                : <PhotoDate {...{ photo }} />}
             </div>
           </div>
           <div className={clsx(

src/app/admin/outdated/page.tsx

@@ -29,10 +29,10 @@ export default async function AdminPhotosPage() {
         className="primary"
       >
         <span className="hidden sm:inline-block">
-          Sync oldest {UPDATE_BATCH_SIZE} photos
+          Sync Oldest {UPDATE_BATCH_SIZE} Photos
         </span>
         <span className="sm:hidden">
-          Sync oldest
+          Sync Oldest
         </span>
       </LoaderButton>}
     >
@@ -56,6 +56,7 @@ export default async function AdminPhotosPage() {
             hasAiTextGeneration={AI_TEXT_GENERATION_ENABLED}
             canEdit={false}
             canDelete={false}
+            showCreatedAt
           />
         </div>
       </div>

src/photo/PhotoDate.tsx

@@ -3,16 +3,24 @@ import { Photo } from '.';
 import { useMemo } from 'react';
 
 export default function PhotoDate({
-  photo: { takenAtNaive },
+  photo,
   className,
+  dateType = 'takenAt',
 }: {
   photo: Photo
   className?: string
+  dateType?: 'takenAt' | 'createdAt'
 }) {
   const date = useMemo(() => {
-    const date = new Date(takenAtNaive);
+    const date = new Date(dateType === 'takenAt'
+      ? photo.takenAt
+      : photo.createdAt);
     return isNaN(date.getTime()) ? new Date() : date;
-  }, [takenAtNaive]);
+  }, [
+    dateType,
+    photo.createdAt,
+    photo.takenAt,
+  ]);
   return (
     <ResponsiveDate {...{ date, className }} />
   );