diff --git a/apps/photos/src/components/Collections/AllCollections/CollectionSort/index.tsx b/apps/photos/src/components/Collections/AllCollections/CollectionSort/index.tsx
deleted file mode 100644
index 233eebcc9..000000000
--- a/apps/photos/src/components/Collections/AllCollections/CollectionSort/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { COLLECTION_SORT_BY } from 'constants/collection';
-import SortIcon from '@mui/icons-material/Sort';
-import CollectionSortOptions from './options';
-import OverflowMenu from 'components/OverflowMenu/menu';
-
-export interface CollectionSortProps {
- setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
- activeSortBy: COLLECTION_SORT_BY;
- nestedInDialog?: boolean;
- disableBG?: boolean;
-}
-
-export default function CollectionSort(props: CollectionSortProps) {
- return (
- }
- menuPaperProps={{
- sx: {
- backgroundColor: (theme) =>
- props.nestedInDialog &&
- theme.colors.background.elevated2,
- },
- }}
- triggerButtonProps={{
- sx: {
- background: (theme) =>
- !props.disableBG && theme.colors.fill.faint,
- },
- }}>
-
-
- );
-}
diff --git a/apps/photos/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx b/apps/photos/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
deleted file mode 100644
index 5488857fc..000000000
--- a/apps/photos/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { COLLECTION_SORT_BY } from 'constants/collection';
-import TickIcon from '@mui/icons-material/Done';
-import { CollectionSortProps } from '.';
-import { OverflowMenuOption } from 'components/OverflowMenu/option';
-import { SvgIcon } from '@mui/material';
-
-const SortByOptionCreator =
- ({ setCollectionSortBy, activeSortBy }: CollectionSortProps) =>
- (props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
- const handleClick = () => {
- setCollectionSortBy(props.sortBy);
- };
-
- return (
- :
- }>
- {props.children}
-
- );
- };
-
-export default SortByOptionCreator;
diff --git a/apps/photos/src/components/Collections/AllCollections/CollectionSort/options.tsx b/apps/photos/src/components/Collections/AllCollections/CollectionSort/options.tsx
deleted file mode 100644
index be7132313..000000000
--- a/apps/photos/src/components/Collections/AllCollections/CollectionSort/options.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { COLLECTION_SORT_BY } from 'constants/collection';
-import SortByOptionCreator from './optionCreator';
-import { CollectionSortProps } from '.';
-import { t } from 'i18next';
-
-export default function CollectionSortOptions(props: CollectionSortProps) {
- const SortByOption = SortByOptionCreator(props);
-
- return (
- <>
-
- {t('SORT_BY_NAME')}
-
-
- {t('SORT_BY_CREATION_TIME_ASCENDING')}
-
-
- {t('SORT_BY_UPDATION_TIME_DESCENDING')}
-
- >
- );
-}
diff --git a/apps/photos/src/components/Collections/AllCollections/header.tsx b/apps/photos/src/components/Collections/AllCollections/header.tsx
index 0eb1dc99c..0f1a86b18 100644
--- a/apps/photos/src/components/Collections/AllCollections/header.tsx
+++ b/apps/photos/src/components/Collections/AllCollections/header.tsx
@@ -5,7 +5,7 @@ import {
FluidContainer,
IconButtonWithBG,
} from 'components/Container';
-import CollectionSort from 'components/Collections/AllCollections/CollectionSort';
+import CollectionListSortBy from 'components/Collections/CollectionListSortBy';
import Close from '@mui/icons-material/Close';
import { t } from 'i18next';
@@ -27,9 +27,9 @@ export default function AllCollectionsHeader({
-
diff --git a/apps/photos/src/components/Collections/AllCollections/index.tsx b/apps/photos/src/components/Collections/AllCollections/index.tsx
index b6b7316ae..406f47b66 100644
--- a/apps/photos/src/components/Collections/AllCollections/index.tsx
+++ b/apps/photos/src/components/Collections/AllCollections/index.tsx
@@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import Divider from '@mui/material/Divider';
-import { COLLECTION_SORT_BY } from 'constants/collection';
+import { COLLECTION_LIST_SORT_BY } from 'constants/collection';
import {
Transition,
AllCollectionDialog,
@@ -15,8 +15,8 @@ interface Iprops {
onClose: () => void;
collectionSummaries: CollectionSummary[];
setActiveCollection: (id?: number) => void;
- collectionSortBy: COLLECTION_SORT_BY;
- setCollectionSortBy: (v: COLLECTION_SORT_BY) => void;
+ collectionListSortBy: COLLECTION_LIST_SORT_BY;
+ setCollectionListSortBy: (v: COLLECTION_LIST_SORT_BY) => void;
}
const LeftSlideTransition = Transition('up');
@@ -27,8 +27,8 @@ export default function AllCollections(props: Iprops) {
open,
onClose,
setActiveCollection,
- collectionSortBy,
- setCollectionSortBy,
+ collectionListSortBy,
+ setCollectionListSortBy,
} = props;
const { isMobile } = useContext(AppContext);
@@ -47,8 +47,8 @@ export default function AllCollections(props: Iprops) {
void;
collectionSummaries: CollectionSummary[];
showAllCollections: () => void;
- collectionSortBy: COLLECTION_SORT_BY;
- setCollectionSortBy: (v: COLLECTION_SORT_BY) => void;
+ collectionListSortBy: COLLECTION_LIST_SORT_BY;
+ setCollectionListSortBy: (v: COLLECTION_LIST_SORT_BY) => void;
}
interface ItemData {
@@ -125,9 +125,9 @@ const CollectionListBar = (props: IProps) => {
{t('ALBUMS')}
{appContext.isMobile && (
-
@@ -173,9 +173,9 @@ const CollectionListBar = (props: IProps) => {
alignItems={'center'}
gap={1}
height={'64px'}>
-
diff --git a/apps/photos/src/components/Collections/CollectionListSortBy.tsx b/apps/photos/src/components/Collections/CollectionListSortBy.tsx
new file mode 100644
index 000000000..3f9bde433
--- /dev/null
+++ b/apps/photos/src/components/Collections/CollectionListSortBy.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { COLLECTION_LIST_SORT_BY } from 'constants/collection';
+import SortIcon from '@mui/icons-material/Sort';
+import OverflowMenu from 'components/OverflowMenu/menu';
+import SvgIcon from '@mui/material/SvgIcon';
+import TickIcon from '@mui/icons-material/Done';
+import { OverflowMenuOption } from 'components/OverflowMenu/option';
+import { t } from 'i18next';
+
+interface CollectionSortProps {
+ setSortBy: (sortBy: COLLECTION_LIST_SORT_BY) => void;
+ activeSortBy: COLLECTION_LIST_SORT_BY;
+ nestedInDialog?: boolean;
+ disableBG?: boolean;
+}
+
+const SortByOptionCreator =
+ ({ setSortBy, activeSortBy }: CollectionSortProps) =>
+ (props: { sortBy: COLLECTION_LIST_SORT_BY; children: any }) => {
+ const handleClick = () => {
+ setSortBy(props.sortBy);
+ };
+
+ return (
+ :
+ }>
+ {props.children}
+
+ );
+ };
+
+export default function CollectionListSortBy(props: CollectionSortProps) {
+ const SortByOption = SortByOptionCreator(props);
+
+ return (
+ }
+ menuPaperProps={{
+ sx: {
+ backgroundColor: (theme) =>
+ props.nestedInDialog &&
+ theme.colors.background.elevated2,
+ },
+ }}
+ triggerButtonProps={{
+ sx: {
+ background: (theme) =>
+ !props.disableBG && theme.colors.fill.faint,
+ },
+ }}>
+
+ {t('SORT_BY_NAME')}
+
+
+ {t('SORT_BY_CREATION_TIME_ASCENDING')}
+
+
+ {t('SORT_BY_UPDATION_TIME_DESCENDING')}
+
+
+ );
+}
diff --git a/apps/photos/src/components/Collections/index.tsx b/apps/photos/src/components/Collections/index.tsx
index 14ae4e6dd..31dbd0e76 100644
--- a/apps/photos/src/components/Collections/index.tsx
+++ b/apps/photos/src/components/Collections/index.tsx
@@ -3,7 +3,7 @@ import CollectionListBar from 'components/Collections/CollectionListBar';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import AllCollections from 'components/Collections/AllCollections';
import CollectionInfoWithOptions from 'components/Collections/CollectionInfoWithOptions';
-import { ALL_SECTION, COLLECTION_SORT_BY } from 'constants/collection';
+import { ALL_SECTION, COLLECTION_LIST_SORT_BY } from 'constants/collection';
import CollectionShare from 'components/Collections/CollectionShare';
import { SetCollectionNamerAttributes } from 'components/Collections/CollectionNamer';
import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList';
@@ -41,10 +41,10 @@ export default function Collections(props: Iprops) {
const [collectionShareModalView, setCollectionShareModalView] =
useState(false);
- const [collectionSortBy, setCollectionSortBy] =
- useLocalState(
+ const [collectionListSortBy, setCollectionListSortBy] =
+ useLocalState(
LS_KEYS.COLLECTION_SORT_BY,
- COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING
+ COLLECTION_LIST_SORT_BY.UPDATION_TIME_DESCENDING
);
const collectionsMap = useRef