From de6a494da72a94a6e10367b1dfff0b12f66a530e Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 26 Sep 2024 21:36:30 +0530
Subject: [PATCH] Reset selection

---
 .../Collections/GalleryBarAndListHeader.tsx   |  5 +-
 web/apps/photos/src/pages/gallery.tsx         |  4 +-
 .../new/photos/components/Gallery/BarImpl.tsx |  8 ++--
 .../components/Gallery/PeopleHeader.tsx       | 48 +++++++++++++------
 4 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx
index b423698edb..0e9c83dde4 100644
--- a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx
+++ b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx
@@ -174,9 +174,10 @@ export const GalleryBarAndListHeader: React.FC<CollectionsProps> = ({
                 ) : (
                     <PeopleHeader
                         person={ensure(
-                            people.find((p) => p.id == activePersonID),
+                            people.find((p) => p.id == activePersonID) ??
+                                people[0],
                         )}
-                        appContext={appContext}
+                        {...{ onSelectPerson, appContext }}
                     />
                 ),
             itemType: ITEM_TYPE.HEADER,
diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index cb1cba1f38..32adaf4d61 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -553,7 +553,7 @@ export default function Gallery() {
             );
         } else if (barMode == "people") {
             const activePerson = ensure(
-                people.find((p) => p.id == activePersonID),
+                people.find((p) => p.id == activePersonID) ?? people[0],
             );
             const pfSet = new Set(activePerson.fileIDs);
             filteredFiles = getUniqueFiles(
@@ -1058,7 +1058,7 @@ export default function Gallery() {
         // when the user clicks the "People" header in the search empty state (it
         // is guaranteed that this header will only be shown if there is at
         // least one person).
-        setActivePersonID(person.id ?? ensure(people[0]).id);
+        setActivePersonID(person?.id ?? ensure(people[0]).id);
         setBarMode("people");
     };
 
diff --git a/web/packages/new/photos/components/Gallery/BarImpl.tsx b/web/packages/new/photos/components/Gallery/BarImpl.tsx
index 92e951b96e..80a65e8dde 100644
--- a/web/packages/new/photos/components/Gallery/BarImpl.tsx
+++ b/web/packages/new/photos/components/Gallery/BarImpl.tsx
@@ -100,9 +100,10 @@ export interface GalleryBarImplProps {
      */
     activePersonID: string | undefined;
     /**
-     * Called when the user selects a new person in the bar.
+     * Called when the selection should be moved to a new person in the bar, or
+     * reset to the default state (when {@link person} is `undefined`).
      */
-    onSelectPerson: (person: Person) => void;
+    onSelectPerson: (person: Person | undefined) => void;
 }
 
 export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
@@ -212,7 +213,8 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
                       type: "people",
                       people,
                       activePerson: ensure(
-                          people.find((p) => p.id == activePersonID),
+                          people.find((p) => p.id == activePersonID) ??
+                              people[0],
                       ),
                       onSelectPerson,
                   },
diff --git a/web/packages/new/photos/components/Gallery/PeopleHeader.tsx b/web/packages/new/photos/components/Gallery/PeopleHeader.tsx
index 013e034c0e..616ae53acd 100644
--- a/web/packages/new/photos/components/Gallery/PeopleHeader.tsx
+++ b/web/packages/new/photos/components/Gallery/PeopleHeader.tsx
@@ -28,17 +28,18 @@ import type { CGroup } from "../../services/user-entity";
 import type { NewAppContextPhotos } from "../../types/context";
 import { SpaceBetweenFlex } from "../mui-custom";
 import { NameInputDialog } from "../NameInputDialog";
-import { useWrapLoadError } from "../use-wrap";
+import type { GalleryBarImplProps } from "./BarImpl";
 import { GalleryItemsHeaderAdapter, GalleryItemsSummary } from "./ListHeader";
 
-interface PeopleHeaderProps {
+type PeopleHeaderProps = Pick<GalleryBarImplProps, "onSelectPerson"> & {
     person: Person;
     appContext: NewAppContextPhotos;
-}
+};
 
 export const PeopleHeader: React.FC<PeopleHeaderProps> = ({
     person,
     appContext,
+    onSelectPerson,
 }) => {
     return (
         <GalleryItemsHeaderAdapter>
@@ -53,7 +54,7 @@ export const PeopleHeader: React.FC<PeopleHeaderProps> = ({
                 {person.type == "cgroup" ? (
                     <CGroupPersonOptions
                         cgroup={person.cgroup}
-                        appContext={appContext}
+                        {...{ onSelectPerson, appContext }}
                     />
                 ) : (
                     <ClusterPersonOptions
@@ -66,19 +67,24 @@ export const PeopleHeader: React.FC<PeopleHeaderProps> = ({
     );
 };
 
-interface CGroupPersonOptionsProps {
+type CGroupPersonOptionsProps = Pick<
+    PeopleHeaderProps,
+    "appContext" | "onSelectPerson"
+> & {
     cgroup: CGroup;
-    appContext: NewAppContextPhotos;
-}
+};
 
 const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
     cgroup,
     appContext,
+    onSelectPerson,
 }) => {
-    const { startLoading, finishLoading, setDialogBoxAttributesV2 } =
-        appContext;
-
-    const wrap = useWrapLoadError(appContext);
+    const {
+        startLoading,
+        finishLoading,
+        onGenericError,
+        setDialogBoxAttributesV2,
+    } = appContext;
 
     const [openAddNameInput, setOpenAddNameInput] = useState(false);
 
@@ -102,11 +108,24 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
             close: { text: t("cancel") },
             proceed: {
                 text: t("RESET"),
-                action: wrap(() => deletePerson(cgroup)),
+                action: doDeletePerson,
             },
             buttonDirection: "row",
         });
 
+    const doDeletePerson = async () => {
+        startLoading();
+        try {
+            await deletePerson(cgroup);
+            // Reset the selection to the default state.
+            onSelectPerson(undefined);
+        } catch (e) {
+            onGenericError(e);
+        } finally {
+            finishLoading();
+        }
+    };
+
     return (
         <>
             <OverflowMenu
@@ -142,10 +161,9 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
     );
 };
 
-interface ClusterPersonOptionsProps {
+type ClusterPersonOptionsProps = Pick<PeopleHeaderProps, "appContext"> & {
     cluster: FaceCluster;
-    appContext: NewAppContextPhotos;
-}
+};
 
 const ClusterPersonOptions: React.FC<ClusterPersonOptionsProps> = ({
     cluster,