Rename and pass file

web/apps/photos/src/components/PhotoViewer/index.tsx

@@ -1003,8 +1003,8 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
                 }
                 fileCollectionIDs={fileCollectionIDs}
                 allCollectionsNameByID={allCollectionsNameByID}
-                scheduleUpdate={scheduleUpdate}
-                refreshPhotoswipe={refreshPhotoswipe}
+                onNeedsRemoteSync={scheduleUpdate}
+                onUpdateCaption={refreshPhotoswipe}
                 onSelectCollection={handleSelectCollection}
                 onSelectPerson={handleSelectPerson}
             />

web/packages/gallery/components/FileInfo.tsx

@@ -154,8 +154,27 @@ export type FileInfoProps = ModalVisibilityProps & {
      * Used when {@link showCollections} is set.
      */
     allCollectionsNameByID?: Map<number, string>;
-    scheduleUpdate: () => void;
-    refreshPhotoswipe: () => void;
+    /**
+     * Called when the action on the file info drawer has changed some the
+     * metadata for some file, and we need to sync with remote to get our
+     * locally persisted file objects up to date.
+     *
+     * The sync is not performed immediately by the file info drawer to give
+     * faster feedback to the user, and to allow changes to multiple files to be
+     * batched together into a single sync when the file viewer is closed.
+     */
+    onNeedsRemoteSync: () => void;
+    /**
+     * Called when an action on the file info drawer change the caption of the
+     * given {@link EnteFile}.
+     *
+     * This hook allows the file viewer to update the caption it is displaying
+     * for the given file.
+     *
+     * @param updatedFile The updated file object, containing the updated
+     * caption.
+     */
+    onUpdateCaption: (updatedFile: EnteFile) => void;
     /**
      * Called when the user selects a collection from among the collections that
      * the file belongs to.
@@ -177,8 +196,8 @@ export const FileInfo: React.FC<FileInfoProps> = ({
     showCollections,
     fileCollectionIDs,
     allCollectionsNameByID,
-    scheduleUpdate,
-    refreshPhotoswipe,
+    onNeedsRemoteSync,
+    onUpdateCaption,
     onSelectCollection,
     onSelectPerson,
 }) => {
@@ -240,13 +259,13 @@ export const FileInfo: React.FC<FileInfoProps> = ({
                     {...{
                         file,
                         allowEdits,
-                        scheduleUpdate,
-                        refreshPhotoswipe,
+                        onNeedsRemoteSync,
+                        onUpdateCaption,
                     }}
                 />
-                <CreationTime {...{ file, allowEdits, scheduleUpdate }} />
+                <CreationTime {...{ file, allowEdits, onNeedsRemoteSync }} />
                 <FileName
-                    {...{ file, annotatedExif, allowEdits, scheduleUpdate }}
+                    {...{ file, annotatedExif, allowEdits, onNeedsRemoteSync }}
                 />
 
                 {annotatedExif?.takenOnDevice && (
@@ -521,7 +540,7 @@ const EditButton: React.FC<EditButtonProps> = ({ onClick, loading }) => (
 
 type CaptionProps = Pick<
     FileInfoProps,
-    "allowEdits" | "scheduleUpdate" | "refreshPhotoswipe"
+    "allowEdits" | "onNeedsRemoteSync" | "onUpdateCaption"
 > & {
     /* TODO(PS): This is DisplayFile, but that's meant to be removed */
     file: EnteFile & {
@@ -532,8 +551,8 @@ type CaptionProps = Pick<
 const Caption: React.FC<CaptionProps> = ({
     file,
     allowEdits,
-    scheduleUpdate,
-    refreshPhotoswipe,
+    onNeedsRemoteSync,
+    onUpdateCaption,
 }) => {
     const [isSaving, setIsSaving] = useState(false);
 
@@ -553,12 +572,12 @@ const Caption: React.FC<CaptionProps> = ({
                 updateExistingFilePubMetadata(file, updatedFile);
                 // @ts-ignore
                 file.title = file.pubMagicMetadata.data.caption;
+                onUpdateCaption(file);
             } catch (e) {
                 log.error("Failed to update caption", e);
                 setFieldError("caption", t("generic_error"));
             }
-            refreshPhotoswipe();
-            scheduleUpdate();
+            onNeedsRemoteSync();
             setIsSaving(false);
         },
     });
@@ -616,7 +635,7 @@ const CaptionForm = styled("form")(({ theme }) => ({
 
 type CreationTimeProps = Pick<
     FileInfoProps,
-    "allowEdits" | "scheduleUpdate"
+    "allowEdits" | "onNeedsRemoteSync"
 > & {
     file: EnteFile;
 };
@@ -624,7 +643,7 @@ type CreationTimeProps = Pick<
 const CreationTime: React.FC<CreationTimeProps> = ({
     file,
     allowEdits,
-    scheduleUpdate,
+    onNeedsRemoteSync,
 }) => {
     const { onGenericError } = useBaseContext();
 
@@ -665,7 +684,7 @@ const CreationTime: React.FC<CreationTimeProps> = ({
         } catch (e) {
             onGenericError(e);
         }
-        scheduleUpdate();
+        onNeedsRemoteSync();
         setIsSaving(false);
     };
 
@@ -695,7 +714,7 @@ const CreationTime: React.FC<CreationTimeProps> = ({
     );
 };
 
-type FileNameProps = Pick<FileInfoProps, "allowEdits" | "scheduleUpdate"> & {
+type FileNameProps = Pick<FileInfoProps, "allowEdits" | "onNeedsRemoteSync"> & {
     file: EnteFile;
     annotatedExif: AnnotatedExif | undefined;
 };
@@ -704,7 +723,7 @@ const FileName: React.FC<FileNameProps> = ({
     file,
     annotatedExif,
     allowEdits,
-    scheduleUpdate,
+    onNeedsRemoteSync,
 }) => {
     const { show: showRename, props: renameVisibilityProps } =
         useModalVisibility();
@@ -714,7 +733,7 @@ const FileName: React.FC<FileNameProps> = ({
     const handleRename = async (newFileName: string) => {
         const updatedFile = await changeFileName(file, newFileName);
         updateExistingFilePubMetadata(file, updatedFile);
-        scheduleUpdate();
+        onNeedsRemoteSync();
     };
 
     const icon =

web/packages/gallery/components/viewer/FileViewer.tsx

@@ -303,7 +303,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
         [user, isInTrashSection, isInHiddenSection, handleEditImage],
     );
 
-    const handleScheduleUpdate = useCallback(() => setNeedsSync(true), []);
+    const handleNeedsRemoteSync = useCallback(() => setNeedsSync(true), []);
 
     const handleSelectCollection = useCallback(
         (collectionID: number) => {
@@ -339,9 +339,9 @@ const FileViewer: React.FC<FileViewerProps> = ({
     const toggleFavorite = useCallback(
         ({ file }: FileViewerAnnotatedFile) =>
             onToggleFavorite!(file)
-                .then(handleScheduleUpdate)
+                .then(handleNeedsRemoteSync)
                 .catch(onGenericError),
-        [onToggleFavorite, handleScheduleUpdate, onGenericError],
+        [onToggleFavorite, handleNeedsRemoteSync, onGenericError],
     );
 
     // Initial value of delegate.
@@ -394,7 +394,8 @@ const FileViewer: React.FC<FileViewerProps> = ({
         handleMore,
     ]);
 
-    const handleRefreshPhotoswipe = useCallback(() => {
+    const handleUpdateCaption = useCallback((updatedFile: EnteFile) => {
+        console.log("TODO", updatedFile);
         psRef.current!.refreshCurrentSlideContent();
     }, []);
 
@@ -411,8 +412,8 @@ const FileViewer: React.FC<FileViewerProps> = ({
                 allowEdits={!!activeAnnotatedFile?.annotation.isOwnFile}
                 allowMap={haveUser}
                 showCollections={haveUser}
-                scheduleUpdate={handleScheduleUpdate}
-                refreshPhotoswipe={handleRefreshPhotoswipe}
+                onNeedsRemoteSync={handleNeedsRemoteSync}
+                onUpdateCaption={handleUpdateCaption}
                 onSelectCollection={handleSelectCollection}
                 onSelectPerson={handleSelectPerson}
                 {...{ fileCollectionIDs, allCollectionsNameByID }}

web/packages/gallery/components/viewer/data-source.ts

@@ -223,7 +223,8 @@ export const fileViewerDidClose = () => {
 };
 
 /**
- * Return the best available ItemData for rendering the given {@link file}.
+ * Return the best available {@link ItemData} for rendering the given
+ * {@link file}.
  *
  * If an entry does not exist for a particular file, then it is lazily added on
  * demand, and updated as we keep getting better data (thumbnail, original) for