beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'refactored-collection-sort-components' into add-option-to-change-sort-order

Browse source
This commit is contained in:
Abhinav 2023-05-30 09:50:49 +05:30
parent 112738d2bb 7ffe07e804
commit f3e14e6ac9
10 changed files with 104 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
apps/photos/src/components/Collections/AllCollections/CollectionSort/index.tsx
View file

@ -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 (
<OverflowMenu
ariaControls="collection-sort"
triggerButtonIcon={<SortIcon />}
menuPaperProps={{
sx: {
backgroundColor: (theme) =>
props.nestedInDialog &&
theme.colors.background.elevated2,
},
}}
triggerButtonProps={{
sx: {
background: (theme) =>
!props.disableBG && theme.colors.fill.faint,
},
}}>
<CollectionSortOptions {...props} />
</OverflowMenu>
);
}

26
apps/photos/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
View file

@ -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 (
<OverflowMenuOption
onClick={handleClick}
endIcon={
activeSortBy === props.sortBy ? <TickIcon /> : <SvgIcon />
}>
{props.children}
</OverflowMenuOption>
);
};
export default SortByOptionCreator;

23
apps/photos/src/components/Collections/AllCollections/CollectionSort/options.tsx
View file

@ -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 (
<>
<SortByOption sortBy={COLLECTION_SORT_BY.NAME}>
{t('SORT_BY_NAME')}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.CREATION_TIME_ASCENDING}>
{t('SORT_BY_CREATION_TIME_ASCENDING')}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING}>
{t('SORT_BY_UPDATION_TIME_DESCENDING')}
</SortByOption>
</>
);
}

6
apps/photos/src/components/Collections/AllCollections/header.tsx
View file

@ -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({
</Box>
</FluidContainer>
<Stack direction="row" spacing={1.5}>
<CollectionSort
<CollectionListSortBy
activeSortBy={collectionSortBy}
setCollectionSortBy={setCollectionSortBy}
setSortBy={setCollectionSortBy}
nestedInDialog
/>
<IconButtonWithBG onClick={onClose}>

14
apps/photos/src/components/Collections/AllCollections/index.tsx
View file

@ -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) {
<AllCollectionsHeader
onClose={onClose}
collectionCount={props.collectionSummaries.length}
collectionSortBy={collectionSortBy}
setCollectionSortBy={setCollectionSortBy}
collectionSortBy={collectionListSortBy}
setCollectionSortBy={setCollectionListSortBy}
/>
<Divider />
<AllCollectionContent

20
apps/photos/src/components/Collections/CollectionListBar/index.tsx
View file

@ -1,5 +1,5 @@
import React, { useContext, useEffect } from 'react';
import { ALL_SECTION, COLLECTION_SORT_BY } from 'constants/collection';
import { ALL_SECTION, COLLECTION_LIST_SORT_BY } from 'constants/collection';
import { Box, IconButton, Typography } from '@mui/material';
import {
CollectionListBarWrapper,
@ -10,7 +10,7 @@ import { IconButtonWithBG, SpaceBetweenFlex } from 'components/Container';
import ExpandMore from '@mui/icons-material/ExpandMore';
import { AppContext } from 'pages/_app';
import { CollectionSummary } from 'types/collection';
import CollectionSort from '../AllCollections/CollectionSort';
import CollectionListSortBy from '../CollectionListSortBy';
import { t } from 'i18next';
import {
FixedSizeList as List,
@ -28,8 +28,8 @@ interface IProps {
setActiveCollection: (id?: number) => 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) => {
<Typography>{t('ALBUMS')}</Typography>
{appContext.isMobile && (
<Box display="flex" alignItems={'center'} gap={1}>
<CollectionSort
setCollectionSortBy={props.setCollectionSortBy}
activeSortBy={props.collectionSortBy}
<CollectionListSortBy
setSortBy={props.setCollectionListSortBy}
activeSortBy={props.collectionListSortBy}
disableBG
/>
<IconButton onClick={showAllCollections}>
@ -173,9 +173,9 @@ const CollectionListBar = (props: IProps) => {
alignItems={'center'}
gap={1}
height={'64px'}>
<CollectionSort
setCollectionSortBy={props.setCollectionSortBy}
activeSortBy={props.collectionSortBy}
<CollectionListSortBy
setSortBy={props.setCollectionListSortBy}
activeSortBy={props.collectionListSortBy}
/>
<IconButtonWithBG onClick={showAllCollections}>
<ExpandMore />

68
apps/photos/src/components/Collections/CollectionListSortBy.tsx Normal file
View file

@ -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 (
<OverflowMenuOption
onClick={handleClick}
endIcon={
activeSortBy === props.sortBy ? <TickIcon /> : <SvgIcon />
}>
{props.children}
</OverflowMenuOption>
);
};
export default function CollectionListSortBy(props: CollectionSortProps) {
const SortByOption = SortByOptionCreator(props);
return (
<OverflowMenu
ariaControls="collection-sort"
triggerButtonIcon={<SortIcon />}
menuPaperProps={{
sx: {
backgroundColor: (theme) =>
props.nestedInDialog &&
theme.colors.background.elevated2,
},
}}
triggerButtonProps={{
sx: {
background: (theme) =>
!props.disableBG && theme.colors.fill.faint,
},
}}>
<SortByOption sortBy={COLLECTION_LIST_SORT_BY.NAME}>
{t('SORT_BY_NAME')}
</SortByOption>
<SortByOption
sortBy={COLLECTION_LIST_SORT_BY.CREATION_TIME_ASCENDING}>
{t('SORT_BY_CREATION_TIME_ASCENDING')}
</SortByOption>
<SortByOption
sortBy={COLLECTION_LIST_SORT_BY.UPDATION_TIME_DESCENDING}>
{t('SORT_BY_UPDATION_TIME_DESCENDING')}
</SortByOption>
</OverflowMenu>
);
}

20
apps/photos/src/components/Collections/index.tsx
View file

@ -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<COLLECTION_SORT_BY>(
const [collectionListSortBy, setCollectionListSortBy] =
useLocalState<COLLECTION_LIST_SORT_BY>(
LS_KEYS.COLLECTION_SORT_BY,
COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING
COLLECTION_LIST_SORT_BY.UPDATION_TIME_DESCENDING
);
const collectionsMap = useRef<Map<number, Collection>>(new Map());
const activeCollection = useRef<Collection>(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}
/>
<AllCollections
@ -125,8 +125,8 @@ export default function Collections(props: Iprops) {
(x) => !isSystemCollection(x.type)
)}
setActiveCollection={setActiveCollectionID}
setCollectionSortBy={setCollectionSortBy}
collectionSortBy={collectionSortBy}
setCollectionListSortBy={setCollectionListSortBy}
collectionListSortBy={collectionListSortBy}
/>
<CollectionShare

2
apps/photos/src/constants/collection.ts
View file

@ -24,7 +24,7 @@ export enum CollectionSummaryType {
archived = 'archived',
hidden = 'hidden',
}
export enum COLLECTION_SORT_BY {
export enum COLLECTION_LIST_SORT_BY {
NAME,
CREATION_TIME_ASCENDING,
UPDATION_TIME_DESCENDING,

10
apps/photos/src/services/collectionService.ts
View file

@ -32,7 +32,7 @@ import {
RemoveFromCollectionRequest,
} from 'types/collection';
import {
COLLECTION_SORT_BY,
COLLECTION_LIST_SORT_BY,
CollectionType,
ARCHIVE_SECTION,
TRASH_SECTION,
@ -985,19 +985,19 @@ export const getNonEmptyCollections = (
export function sortCollectionSummaries(
collectionSummaries: CollectionSummary[],
sortBy: COLLECTION_SORT_BY
sortBy: COLLECTION_LIST_SORT_BY
) {
return collectionSummaries
.sort((a, b) => {
switch (sortBy) {
case COLLECTION_SORT_BY.CREATION_TIME_ASCENDING:
case COLLECTION_LIST_SORT_BY.CREATION_TIME_ASCENDING:
return (
-1 *
compareCollectionsLatestFile(b.latestFile, a.latestFile)
);
case COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING:
case COLLECTION_LIST_SORT_BY.UPDATION_TIME_DESCENDING:
return b.updationTime - a.updationTime;
case COLLECTION_SORT_BY.NAME:
case COLLECTION_LIST_SORT_BY.NAME:
return a.name.localeCompare(b.name);
}
})