diff --git a/web/apps/photos/src/components/Export.tsx b/web/apps/photos/src/components/Export.tsx index 7aaa1bf53c..d22c6e52b4 100644 --- a/web/apps/photos/src/components/Export.tsx +++ b/web/apps/photos/src/components/Export.tsx @@ -44,7 +44,7 @@ import { } from "ente-shared/components/Container"; import { CustomError } from "ente-shared/error"; import { t } from "i18next"; -import React, { ReactElement, useEffect, useState } from "react"; +import React, { memo, useEffect, useState } from "react"; import { Trans } from "react-i18next"; import { areEqual, FixedSizeList, ListChildComponentProps } from "react-window"; import exportService, { @@ -576,7 +576,7 @@ const ExportPendingListDialog: React.FC = ({ return `${file.collectionID}/${file.id}`; }} > - {Row} + {ExportPendingListItem} = ({ ); }; +interface ExportPendingListItemData { + allCollectionsNameByID: Map; + pendingFiles: EnteFile[]; +} + +const ExportPendingListItem: React.FC< + ListChildComponentProps +> = memo(({ index, style, data }) => { + const { allCollectionsNameByID, pendingFiles } = data; + const file = pendingFiles[index] as EnteFile; + + const itemTitle = `${allCollectionsNameByID.get(file.collectionID)} / ${ + file.metadata.title + }`; + + return ( + +
+ {" "} + + + + + {itemTitle} + +
+
+ ); +}, areEqual); + const ItemContainer = styled("div")` position: relative; top: 5px; @@ -599,57 +647,3 @@ const ItemContainer = styled("div")` white-space: nowrap; text-overflow: ellipsis; `; - -interface ItemData { - allCollectionsNameByID: Map; - pendingFiles: EnteFile[]; -} - -// @ts-expect-error "TODO(MR): Understand and fix the type error here" -const Row: ({ - index, - style, - data, -}: ListChildComponentProps) => ReactElement = React.memo( - ({ index, style, data }) => { - const { allCollectionsNameByID, pendingFiles } = data; - const file = pendingFiles[index] as EnteFile; - - const itemTitle = `${allCollectionsNameByID.get(file.collectionID)} / ${ - file.metadata.title - }`; - - return ( - -
- {" "} - - - - - {itemTitle} - -
-
- ); - }, - areEqual, -);