From b97cf93c1291c6534a1b39e121cd1447812905cc Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 11:48:25 +0530
Subject: [PATCH] wip: checkpoint

---
 .../Collections/CollectionListBar.tsx         | 100 +++++++++++-------
 1 file changed, 60 insertions(+), 40 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index 883ec5cfc7..3fa4795d87 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -213,7 +213,7 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
                                 itemSize={94}
                                 useIsScrolling
                             >
-                                {CollectionCardContainer}
+                                {ListItem}
                             </FixedSizeList>
                         )}
                     </AutoSizer>
@@ -305,45 +305,6 @@ type ItemData =
           activePerson: Person;
       };
 
-const CollectionCardContainer = memo(
-    ({
-        data,
-        index,
-        style,
-        isScrolling,
-    }: ListChildComponentProps<ItemData>) => {
-        let card: React.ReactNode;
-        switch (data.type) {
-            case "collections": {
-                const {
-                    collectionSummaries,
-                    activeCollectionID,
-                    onCollectionClick,
-                } = data;
-                const collectionSummary = collectionSummaries[index];
-
-                card = (
-                    <CollectionListBarCard
-                        key={collectionSummary.id}
-                        activeCollectionID={activeCollectionID}
-                        isScrolling={isScrolling}
-                        collectionSummary={collectionSummary}
-                        onCollectionClick={onCollectionClick}
-                    />
-                );
-
-                break;
-            }
-            case "people":
-                card = "Person";
-                break;
-        }
-
-        return <div style={style}>{card}</div>;
-    },
-    areEqual,
-);
-
 const getItemCount = (data: ItemData) => {
     switch (data.type) {
         case "collections": {
@@ -370,6 +331,42 @@ const getItemKey = (index: number, data: ItemData) => {
     }
 };
 
+const ListItem = memo((props: ListChildComponentProps<ItemData>) => {
+    const { data, index, style, isScrolling } = props;
+
+    let card: React.ReactNode;
+
+    switch (data.type) {
+        case "collections": {
+            const {
+                collectionSummaries,
+                activeCollectionID,
+                onCollectionClick,
+            } = data;
+            const collectionSummary = collectionSummaries[index];
+            card = (
+                <CollectionListBarCard
+                    key={collectionSummary.id}
+                    activeCollectionID={activeCollectionID}
+                    isScrolling={isScrolling}
+                    collectionSummary={collectionSummary}
+                    onCollectionClick={onCollectionClick}
+                />
+            );
+            break;
+        }
+
+        case "people": {
+            const { people, activePerson } = data;
+            const person = people[index];
+            card = <PersonCard {...{ person, activePerson }} />;
+            break;
+        }
+    }
+
+    return <div style={style}>{card}</div>;
+}, areEqual);
+
 const ScrollButtonBase: React.FC<
     React.ButtonHTMLAttributes<HTMLButtonElement>
 > = (props) => (
@@ -523,3 +520,26 @@ const Ellipse = styled(Typography)`
     line-clamp: 2;
     -webkit-box-orient: vertical;
 `;
+
+interface PersondCardProps {
+    person: Person;
+    activePerson: Person;
+    // onCollectionClick: (collectionID: number) => void;
+    // isScrolling?: boolean;
+}
+
+const PersonCard = ({ person, activePerson }: PersondCardProps) => (
+    <Box>
+        <CollectionCard
+            collectionTile={CollectionBarTile}
+            coverFile={person.displayFaceFile}
+            onClick={() => {
+                //onCollectionClick(collectionSummary.id);
+            }}
+        >
+            <CollectionCardText collectionName={person.name} />
+            {/* <CollectionCardIcon collectionType={collectionSummary.type} /> */}
+        </CollectionCard>
+        {activePerson.id === person.id && <ActiveIndicator />}
+    </Box>
+);