diff --git a/web/apps/photos/src/components/Export.tsx b/web/apps/photos/src/components/Export.tsx index 160e42ef52..7aaa1bf53c 100644 --- a/web/apps/photos/src/components/Export.tsx +++ b/web/apps/photos/src/components/Export.tsx @@ -44,8 +44,9 @@ import { } from "ente-shared/components/Container"; import { CustomError } from "ente-shared/error"; import { t } from "i18next"; -import { useEffect, useState } from "react"; +import React, { ReactElement, useEffect, useState } from "react"; import { Trans } from "react-i18next"; +import { areEqual, FixedSizeList, ListChildComponentProps } from "react-window"; import exportService, { ExportStage, selectAndPrepareExportDirectory, @@ -555,18 +556,6 @@ const ExportPendingListDialog: React.FC = ({ allCollectionsNameByID, pendingFiles, }) => { - const getItemTitle = (file: EnteFile) => { - return `${allCollectionsNameByID.get(file.collectionID)} / ${ - file.metadata.title - }`; - }; - - const itemData = createItemData( - allCollectionsNameByID, - getItemTitle, - pendingFiles, - ); - const itemSize = 50; /* px */ const itemCount = pendingFiles.length; const listHeight = Math.min(itemCount * itemSize, 240); @@ -578,12 +567,12 @@ const ExportPendingListDialog: React.FC = ({ title={t("pending_items")} > { - const file = items[index] as EnteFile; + itemKey={(index, { pendingFiles }) => { + const file = pendingFiles[index]!; return `${file.collectionID}/${file.id}`; }} > @@ -611,35 +600,25 @@ const ItemContainer = styled("div")` text-overflow: ellipsis; `; -import memoize from "memoize-one"; -import React, { ReactElement } from "react"; -import { areEqual, FixedSizeList, ListChildComponentProps } from "react-window"; - -interface ItemData { +interface ItemData { allCollectionsNameByID: Map; - getItemTitle: (item: T) => string; - items: T[]; + pendingFiles: EnteFile[]; } -const createItemData: ( - allCollectionsNameByID: Map, - getItemTitle: (item: T) => string, - items: T[], -) => ItemData = memoize((renderListItem, getItemTitle, items) => ({ - renderListItem, - getItemTitle, - items, -})); - // @ts-expect-error "TODO(MR): Understand and fix the type error here" -const Row: ({ +const Row: ({ index, style, data, -}: ListChildComponentProps>) => ReactElement = React.memo( +}: ListChildComponentProps) => ReactElement = React.memo( ({ index, style, data }) => { - const { allCollectionsNameByID, items, getItemTitle } = data; - const file = items[index] as EnteFile; + const { allCollectionsNameByID, pendingFiles } = data; + const file = pendingFiles[index] as EnteFile; + + const itemTitle = `${allCollectionsNameByID.get(file.collectionID)} / ${ + file.metadata.title + }`; + return ( ({ ], }, }} - title={getItemTitle(items[index])} + title={itemTitle} placement="bottom-start" enterDelay={300} enterNextDelay={100} @@ -666,11 +645,7 @@ const Row: ({ coverFile={file} /> - - {`${allCollectionsNameByID.get(file.collectionID)} / ${ - file.metadata.title - }`} - + {itemTitle}