wip: checkpoint

web/apps/photos/src/components/Collections/AllCollections/header.tsx

@@ -5,7 +5,7 @@ import {
 } from "@ente/shared/components/Container";
 import Close from "@mui/icons-material/Close";
 import { Box, DialogTitle, Stack, Typography } from "@mui/material";
-import { CollectionListSortOptions } from "components/Collections/CollectionListSortOptions";
+import { CollectionsSortOptions } from "components/Collections/CollectionListSortOptions";
 import { t } from "i18next";
 
 export default function AllCollectionsHeader({
@@ -31,7 +31,7 @@ export default function AllCollectionsHeader({
                     </Box>
                 </FluidContainer>
                 <Stack direction="row" spacing={1.5}>
-                    <CollectionListSortOptions
+                    <CollectionsSortOptions
                         activeSortBy={collectionSortBy}
                         setSortBy={setCollectionSortBy}
                         nestedInDialog

web/apps/photos/src/components/Collections/CollectionListBar.tsx

@@ -33,7 +33,7 @@ import React, {
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList, ListChildComponentProps, areEqual } from "react-window";
 import type { GalleryBarMode } from ".";
-import { CollectionListSortOptions } from "./CollectionListSortOptions";
+import { CollectionsSortOptions } from "./CollectionListSortOptions";
 
 export interface CollectionListBarProps {
     /**
@@ -62,14 +62,13 @@ export interface CollectionListBarProps {
      */
     onShowAllCollections: () => void;
     /**
-     * The sort order that should be used for showing the collections in the
-     * bar.
+     * The scheme that should be used for sorting the collections in the bar.
      */
-    collectionListSortBy: CollectionsSortBy;
+    collectionsSortBy: CollectionsSortBy;
     /**
-     * Called when the user changes the sort order.
+     * Called when the user changes the sorting scheme.
      */
-    setCollectionListSortBy: (order: CollectionsSortBy) => void;
+    onChangeCollectionsSortBy: (by: CollectionsSortBy) => void;
     /**
      * The list of people that should be shown in the bar.
      */
@@ -92,8 +91,8 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     activeCollectionID,
     setActiveCollectionID,
     onShowAllCollections,
-    collectionListSortBy,
-    setCollectionListSortBy,
+    collectionsSortBy,
+    onChangeCollectionsSortBy,
     people,
     activePerson,
     onSelectPerson,
@@ -200,10 +199,10 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
 
     const controls1 = isMobile && (
         <Box display="flex" alignItems={"center"} gap={1}>
-            <CollectionListSortOptions
-                setSortBy={setCollectionListSortBy}
-                activeSortBy={collectionListSortBy}
-                disableBG
+            <CollectionsSortOptions
+                activeSortBy={collectionsSortBy}
+                onChangeSortBy={onChangeCollectionsSortBy}
+                disableTriggerButtonBackground
             />
             <IconButton onClick={onShowAllCollections}>
                 <ExpandMore />
@@ -213,9 +212,9 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
 
     const controls2 = !isMobile && (
         <Box display="flex" alignItems={"center"} gap={1} height={"64px"}>
-            <CollectionListSortOptions
-                setSortBy={setCollectionListSortBy}
-                activeSortBy={collectionListSortBy}
+            <CollectionsSortOptions
+                activeSortBy={collectionsSortBy}
+                onChangeSortBy={onChangeCollectionsSortBy}
             />
             <IconButtonWithBG onClick={onShowAllCollections}>
                 <ExpandMore />

web/apps/photos/src/components/Collections/CollectionsSortOptions.tsx

@@ -6,16 +6,35 @@ import SortIcon from "@mui/icons-material/Sort";
 import SvgIcon from "@mui/material/SvgIcon";
 import { t } from "i18next";
 
-interface CollectionListSortOptionsProps {
-    setSortBy: (order: CollectionsSortBy) => void;
+interface CollectionsSortOptionsProps {
+    /**
+     * The sorting scheme currently active.
+     */
     activeSortBy: CollectionsSortBy;
+    /**
+     * Change the scheme that should be used.
+     */
+    onChangeSortBy: (by: CollectionsSortBy) => void;
+    /**
+     * Set this to true if we're being shown inside a dialog, to further
+     * increase the elevation of the menu.
+     */
     nestedInDialog?: boolean;
-    disableBG?: boolean;
+    /**
+     * Set this to true to disable the background in the button that triggers
+     * the menu.
+     */
+    disableTriggerButtonBackground?: boolean;
 }
 
-export const CollectionListSortOptions: React.FC<
-    CollectionListSortOptionsProps
-> = (props) => {
+/**
+ * A button that shows an overflow menu allowing the user to choose from amongst
+ * the {@link CollectionsSortBy} values that should be used for sorting the
+ * lists of collections.
+ */
+export const CollectionsSortOptions: React.FC<CollectionsSortOptionsProps> = (
+    props,
+) => {
     const SortByOption = SortByOptionCreator(props);
 
     return (
@@ -32,7 +51,8 @@ export const CollectionListSortOptions: React.FC<
             triggerButtonProps={{
                 sx: {
                     background: (theme) =>
-                        !props.disableBG && theme.colors.fill.faint,
+                        !props.disableTriggerButtonBackground &&
+                        theme.colors.fill.faint,
                 },
             }}
         >
@@ -48,10 +68,10 @@ export const CollectionListSortOptions: React.FC<
 };
 
 const SortByOptionCreator =
-    ({ setSortBy, activeSortBy }: CollectionListSortOptionsProps) =>
+    ({ onChangeSortBy, activeSortBy }: CollectionsSortOptionsProps) =>
     (props: { sortBy: CollectionsSortBy; children: any }) => {
         const handleClick = () => {
-            setSortBy(props.sortBy);
+            onChangeSortBy(props.sortBy);
         };
 
         return (

web/apps/photos/src/components/Collections/index.tsx

@@ -172,9 +172,9 @@ export const Collections: React.FC<CollectionsProps> = ({
                     people,
                     activePerson,
                     onSelectPerson,
-                    collectionListSortBy: collectionsSortBy,
-                    setCollectionListSortBy: setCollectionsSortBy,
+                    collectionsSortBy,
                 }}
+                onChangeCollectionsSortBy={setCollectionsSortBy}
                 onShowAllCollections={() => setOpenAllCollectionDialog(true)}
                 collectionSummaries={sortedCollectionSummaries.filter((x) =>
                     shouldBeShownOnCollectionBar(x.type),
@@ -256,5 +256,5 @@ const useCollectionsSortByLocalState = (initialValue: CollectionsSortBy) => {
         setValue(value);
     };
 
-    return [value, setter];
+    return [value, setter] as const;
 };

web/apps/photos/src/services/collectionService.ts

@@ -1068,13 +1068,13 @@ export const getFavCollection = async () => {
     }
 };
 
-export function sortCollectionSummaries(
+export const sortCollectionSummaries = (
     collectionSummaries: CollectionSummary[],
-    sortBy: CollectionsSortBy,
-) {
-    return collectionSummaries
+    by: CollectionsSortBy,
+) =>
+    collectionSummaries
         .sort((a, b) => {
-            switch (sortBy) {
+            switch (by) {
                 case "name":
                     return a.name.localeCompare(b.name);
                 case "creation-time-asc":
@@ -1092,7 +1092,6 @@ export function sortCollectionSummaries(
                 COLLECTION_SORT_ORDER.get(a.type) -
                 COLLECTION_SORT_ORDER.get(b.type),
         );
-}
 
 function compareCollectionsLatestFile(first: EnteFile, second: EnteFile) {
     if (!first) {