diff --git a/web/apps/photos/src/components/PhotoFrame.tsx b/web/apps/photos/src/components/PhotoFrame.tsx
index 835bdeb3a..524b555ef 100644
--- a/web/apps/photos/src/components/PhotoFrame.tsx
+++ b/web/apps/photos/src/components/PhotoFrame.tsx
@@ -17,12 +17,16 @@ import DownloadManager, {
LivePhotoSourceURL,
SourceURLs,
} from "services/download";
+import {
+ handleSelectCreator,
+ updateFileMsrcProps,
+ updateFileSrcProps,
+} from "utils/photoFrame";
import { EnteFile } from "types/file";
import {
SelectedState,
SetFilesDownloadProgressAttributesCreator,
} from "types/gallery";
-import { updateFileMsrcProps, updateFileSrcProps } from "utils/photoFrame";
import { PhotoList } from "./PhotoList";
import { DedupePhotoList } from "./PhotoList/dedupe";
import PreviewCard from "./pages/gallery/PreviewCard";
@@ -227,52 +231,12 @@ const PhotoFrame = ({
setIsPhotoSwipeOpen?.(true);
};
- const handleSelect =
- (id: number, isOwnFile: boolean, index?: number) =>
- (checked: boolean) => {
- if (typeof index !== "undefined") {
- if (checked) {
- setRangeStart(index);
- } else {
- setRangeStart(undefined);
- }
- }
- setSelected((selected) => {
- if (selected.collectionID !== activeCollectionID) {
- selected = { ownCount: 0, count: 0, collectionID: 0 };
- }
+ const handleSelect = handleSelectCreator(
+ setSelected,
+ activeCollectionID,
+ setRangeStart
+ );
- const handleCounterChange = (count: number) => {
- if (selected[id] === checked) {
- return count;
- }
- if (checked) {
- return count + 1;
- } else {
- return count - 1;
- }
- };
-
- const handleAllCounterChange = () => {
- if (isOwnFile) {
- return {
- ownCount: handleCounterChange(selected.ownCount),
- count: handleCounterChange(selected.count),
- };
- } else {
- return {
- count: handleCounterChange(selected.count),
- };
- }
- };
- return {
- ...selected,
- [id]: checked,
- collectionID: activeCollectionID,
- ...handleAllCounterChange(),
- };
- });
- };
const onHoverOver = (index: number) => () => {
setCurrentHover(index);
};
diff --git a/web/apps/photos/src/components/PhotoList/index.tsx b/web/apps/photos/src/components/PhotoList/index.tsx
index 4d0624215..a75adaf33 100644
--- a/web/apps/photos/src/components/PhotoList/index.tsx
+++ b/web/apps/photos/src/components/PhotoList/index.tsx
@@ -1,8 +1,7 @@
import { FlexWrapper } from "@ente/shared/components/Container";
import { ENTE_WEBSITE_LINK } from "@ente/shared/constants/urls";
-import { formatDate } from "@ente/shared/time/format";
import { convertBytesToHumanReadable } from "@ente/shared/utils/size";
-import { Box, Link, Typography, styled } from "@mui/material";
+import { Box, Link, Typography,Checkbox, styled } from "@mui/material";
import {
DATE_CONTAINER_HEIGHT,
GAP_BTW_TILES,
@@ -23,8 +22,10 @@ import {
ListChildComponentProps,
areEqual,
} from "react-window";
-import { EnteFile } from "types/file";
import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
+import { formatDate, getDate, isSameDay } from "@ente/shared/time/format";
+import { handleSelectCreator } from "utils/photoFrame";
+import { EnteFile } from "types/file";
const A_DAY = 24 * 60 * 60 * 1000;
const FOOTER_HEIGHT = 90;
@@ -185,6 +186,9 @@ const NothingContainer = styled(ListItemContainer)`
justify-content: center;
`;
+const SelectAllCheckBoxContainer = styled(Checkbox)<{ margin: number }>`
+ margin-left: ${(props) => props.margin}px;
+`;
interface Props {
height: number;
width: number;
@@ -265,6 +269,8 @@ export function PhotoList({
const shouldRefresh = useRef(false);
const listRef = useRef(null);
+ const [checkedDates, setCheckedDates] = useState({});
+
const fittableColumns = getFractionFittableColumns(width);
let columns = Math.floor(fittableColumns);
@@ -473,14 +479,6 @@ export function PhotoList({
});
};
- const isSameDay = (first, second) => {
- return (
- first.getFullYear() === second.getFullYear() &&
- first.getMonth() === second.getMonth() &&
- first.getDate() === second.getDate()
- );
- };
-
const getPhotoListHeader = (photoListHeader) => {
return {
...photoListHeader,
@@ -722,6 +720,62 @@ export function PhotoList({
}
};
+ useEffect(() => {
+ const notSelectedFiles = displayFiles?.filter(
+ (item) => !galleryContext.selectedFile[item.id]
+ );
+ const unselectedDates = [
+ ...new Set(notSelectedFiles?.map((item) => getDate(item))), // to get file's date which were manually unselected
+ ];
+
+ const localSelectedFiles = displayFiles.filter(
+ // to get files which were manually selected
+ (item) => !unselectedDates.includes(getDate(item))
+ );
+
+ const localSelectedDates = [
+ ...new Set(localSelectedFiles?.map((item) => getDate(item))),
+ ]; // to get file's date which were manually selected
+
+ unselectedDates.forEach((date) => {
+ setCheckedDates((prev) => ({
+ ...prev,
+ [date]: false,
+ })); // To uncheck select all checkbox if any of the file on the date is unselected
+ });
+
+ localSelectedDates.map((date) => {
+ setCheckedDates((prev) => ({
+ ...prev,
+ [date]: true,
+ }));
+ // To check select all checkbox if all of the files on the date is selected manually
+ });
+ }, [galleryContext.selectedFile]);
+
+ const handleSelect = handleSelectCreator(
+ galleryContext.setSelectedFiles,
+ activeCollectionID
+ );
+
+ const onChangeSelectAllCheckBox = (date: string) => {
+ const dates = { ...checkedDates, [date]: !checkedDates[date] };
+ const isDateSelected = !checkedDates[date];
+
+ setCheckedDates(dates);
+
+ const filesOnADay = displayFiles?.filter(
+ (item) => getDate(item) === date
+ ); // all files on a checked/unchecked day
+
+ filesOnADay.forEach((file) => {
+ handleSelect(
+ file.id,
+ file.ownerID === galleryContext?.user?.id
+ )(isDateSelected);
+ });
+ };
+
const renderListItem = (
listItem: TimeStampListItem,
isScrolling: boolean,
@@ -733,6 +787,15 @@ export function PhotoList({
.map((item) => [