From a34a07644e4415f67babf2ed5c7ca39ad31bfae4 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 8 Jul 2025 12:30:26 +0530 Subject: [PATCH] tsc --- web/apps/photos/src/components/FileList.tsx | 104 ++++++++++---------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/web/apps/photos/src/components/FileList.tsx b/web/apps/photos/src/components/FileList.tsx index bcf9d34246..aa05c2d6d8 100644 --- a/web/apps/photos/src/components/FileList.tsx +++ b/web/apps/photos/src/components/FileList.tsx @@ -73,7 +73,7 @@ interface TimeStampListItem { tag?: "date" | "file"; items?: FileListAnnotatedFile[]; itemStartIndex?: number; - date?: string; + date?: string | null; dates?: { date: string; span: number }[]; groups?: number[]; item?: any; @@ -225,8 +225,8 @@ export const FileList: React.FC = ({ const [checkedTimelineDateStrings, setCheckedTimelineDateStrings] = useState(new Set()); - const [rangeStart, setRangeStart] = useState(null); - const [currentHover, setCurrentHover] = useState(null); + const [rangeStart, setRangeStart] = useState(null); + const [currentHover, setCurrentHover] = useState(null); const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false); const fittableColumns = getFractionFittableColumns(width); @@ -237,14 +237,11 @@ export const FileList: React.FC = ({ columns = MIN_COLUMNS; skipMerge = true; } + const shrinkRatio = getShrinkRatio(width, columns); const listItemHeight = IMAGE_CONTAINER_MAX_HEIGHT * shrinkRatio + GAP_BTW_TILES; - const refreshList = () => { - listRef.current?.resetAfterIndex(0); - }; - useEffect(() => { // Since width and height are dependencies, there might be too many // updates to the list during a resize. The list computation too, while @@ -302,9 +299,12 @@ export const FileList: React.FC = ({ ]); useEffect(() => { - refreshList(); + // Refresh list. + listRef.current?.resetAfterIndex(0); }, [timeStampList]); + // TODO: Too many non-null assertions + const groupByTime = (timeStampList: TimeStampListItem[]) => { let listItemIndex = 0; let lastCreationTime: number | undefined; @@ -328,7 +328,7 @@ export const FileList: React.FC = ({ }); listItemIndex = 1; } else if (listItemIndex < columns) { - timeStampList[timeStampList.length - 1].items.push(item); + timeStampList[timeStampList.length - 1]!.items!.push(item); listItemIndex++; } else { listItemIndex = 1; @@ -345,7 +345,7 @@ export const FileList: React.FC = ({ let listItemIndex = columns; annotatedFiles.forEach((item, index) => { if (listItemIndex < columns) { - timeStampList[timeStampList.length - 1].items.push(item); + timeStampList[timeStampList.length - 1]!.items!.push(item); listItemIndex++; } else { listItemIndex = 1; @@ -387,7 +387,7 @@ export const FileList: React.FC = ({ let index = 0; let newIndex = 0; while (index < items.length) { - const currItem = items[index]; + const currItem = items[index]!; // If the current item is of type time, then it is not part of an ongoing date. // So, there is a possibility of merge. if (currItem.tag == "date") { @@ -397,21 +397,21 @@ export const FileList: React.FC = ({ const SPACE_BTW_DATES_TO_IMAGE_CONTAINER_WIDTH_RATIO = 0.244; // Check if items can be added to same list if ( - newList[newIndex + 1].items.length + - items[index + 1].items.length + + newList[newIndex + 1]!.items!.length + + items[index + 1]!.items!.length + Math.ceil( - newList[newIndex].dates.length * + newList[newIndex]!.dates!.length * SPACE_BTW_DATES_TO_IMAGE_CONTAINER_WIDTH_RATIO, ) <= columns ) { - newList[newIndex].dates.push({ - date: currItem.date, - span: items[index + 1].items.length, + newList[newIndex]!.dates!.push({ + date: currItem.date!, + span: items[index + 1]!.items!.length, }); - newList[newIndex + 1].items = [ - ...newList[newIndex + 1].items, - ...items[index + 1].items, + newList[newIndex + 1]!.items = [ + ...newList[newIndex + 1]!.items!, + ...items[index + 1]!.items!, ]; index += 2; } else { @@ -427,12 +427,12 @@ export const FileList: React.FC = ({ date: null, dates: [ { - date: currItem.date, - span: items[index + 1].items.length, + date: currItem.date!, + span: items[index + 1]!.items!.length, }, ], }); - newList.push(items[index + 1]); + newList.push(items[index + 1]!); index += 2; } } else { @@ -444,11 +444,11 @@ export const FileList: React.FC = ({ } } for (let i = 0; i < newList.length; i++) { - const currItem = newList[i]; - const nextItem = newList[i + 1]; + const currItem = newList[i]!; + const nextItem = newList[i + 1]!; if (currItem.tag == "date") { - if (currItem.dates.length > 1) { - currItem.groups = currItem.dates.map((item) => item.span); + if (currItem.dates!.length > 1) { + currItem.groups = currItem.dates!.map((item) => item.span); nextItem.groups = currItem.groups; } } @@ -467,14 +467,14 @@ export const FileList: React.FC = ({ } }; - const generateKey = (index) => { - switch (timeStampList[index].tag) { + const generateKey = (index: number) => { + switch (timeStampList[index]!.tag) { case "file": - return `${timeStampList[index].items[0].file.id}-${ - timeStampList[index].items.slice(-1)[0].file.id + return `${timeStampList[index]!.items![0]!.file.id}-${ + timeStampList[index]!.items!.slice(-1)[0]!.file.id }`; default: - return `${timeStampList[index].id}-${index}`; + return `${timeStampList[index]!.id}-${index}`; } }; @@ -558,23 +558,23 @@ export const FileList: React.FC = ({ const handleRangeSelect = (index: number) => () => { if (typeof rangeStart != "undefined" && rangeStart !== index) { const direction = - (index - rangeStart) / Math.abs(index - rangeStart); + (index - rangeStart!) / Math.abs(index - rangeStart!); let checked = true; for ( - let i = rangeStart; + let i = rangeStart!; (index - i) * direction >= 0; i += direction ) { - checked = checked && !!selected[annotatedFiles[i].file.id]; + checked = checked && !!selected[annotatedFiles[i]!.file.id]; } for ( - let i = rangeStart; + let i = rangeStart!; (index - i) * direction > 0; i += direction ) { - handleSelect(annotatedFiles[i].file)(!checked); + handleSelect(annotatedFiles[i]!.file)(!checked); } - handleSelect(annotatedFiles[index].file, index)(!checked); + handleSelect(annotatedFiles[index]!.file, index)(!checked); } }; @@ -616,7 +616,7 @@ export const FileList: React.FC = ({ {...{ user, emailByUserID }} file={file} onClick={() => onItemClick(index)} - selectable={selectable} + selectable={selectable!} onSelect={handleSelect(file, index)} selected={ (!mode @@ -632,8 +632,8 @@ export const FileList: React.FC = ({ onRangeSelect={handleRangeSelect(index)} isRangeSelectActive={isShiftKeyPressed && selected.count > 0} isInsSelectRange={ - (index >= rangeStart && index <= currentHover) || - (index >= currentHover && index <= rangeStart) + (index >= rangeStart! && index <= currentHover!) || + (index >= currentHover! && index <= rangeStart!) } activeCollectionID={activeCollectionID} showPlaceholder={isScrolling} @@ -643,7 +643,7 @@ export const FileList: React.FC = ({ const renderListItem = ( listItem: TimeStampListItem, - isScrolling: boolean, + isScrolling: boolean | undefined, ) => { const haveSelection = (selected.count ?? 0) > 0; switch (listItem.tag) { @@ -676,12 +676,12 @@ export const FileList: React.FC = ({ {haveSelection && ( - onChangeSelectAllCheckBox(listItem.date) + onChangeSelectAllCheckBox(listItem.date!) } size="small" sx={{ pl: 0 }} @@ -691,22 +691,22 @@ export const FileList: React.FC = ({ ); case "file": { - const ret = listItem.items.map((item, idx) => + const ret = listItem.items!.map((item, idx) => getThumbnail( item, - listItem.itemStartIndex + idx, - isScrolling, + listItem.itemStartIndex! + idx, + !!isScrolling, ), ); if (listItem.groups) { let sum = 0; for (let i = 0; i < listItem.groups.length - 1; i++) { - sum = sum + listItem.groups[i]; + sum = sum + listItem.groups[i]!; ret.splice( sum, 0,
, ); sum += 1; @@ -911,10 +911,10 @@ const PhotoListRow = React.memo( gridTemplateColumns={getTemplateColumns( columns, shrinkRatio, - timeStampList[index].groups, + timeStampList[index]!.groups, )} > - {renderListItem(timeStampList[index], isScrolling)} + {renderListItem(timeStampList[index]!, isScrolling)} ); @@ -935,7 +935,7 @@ type FileThumbnailProps = { isInsSelectRange: boolean; activeCollectionID: number; showPlaceholder: boolean; - isFav: boolean; + isFav: boolean | undefined; } & Pick; const FileThumbnail: React.FC = ({