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>(new Map()); const activeCollection = useRef(null); @@ -72,9 +72,9 @@ export default function Collections(props: Iprops) { () => sortCollectionSummaries( [...collectionSummaries.values()], - collectionSortBy + collectionListSortBy ), - [collectionSortBy, collectionSummaries] + [collectionListSortBy, collectionSummaries] ); useEffect(() => { @@ -114,8 +114,8 @@ export default function Collections(props: Iprops) { shouldBeShownOnCollectionBar(x.type) )} showAllCollections={openAllCollections} - setCollectionSortBy={setCollectionSortBy} - collectionSortBy={collectionSortBy} + setCollectionListSortBy={setCollectionListSortBy} + collectionListSortBy={collectionListSortBy} /> !isSystemCollection(x.type) )} setActiveCollection={setActiveCollectionID} - setCollectionSortBy={setCollectionSortBy} - collectionSortBy={collectionSortBy} + setCollectionListSortBy={setCollectionListSortBy} + collectionListSortBy={collectionListSortBy} />