Merge branch 'collections-redesign' into sidebar-redesign
This commit is contained in:
commit
1ce7655f5d
|
@ -15,7 +15,6 @@ import { FlexWrapper, SpaceBetweenFlex } from 'components/Container';
|
|||
import { LargerCollectionTile } from './styledComponents';
|
||||
import CollectionCard from './CollectionCard';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import { useState } from 'react';
|
||||
import CollectionSort from 'components/pages/gallery/CollectionSort';
|
||||
import { CollectionType, COLLECTION_SORT_BY } from 'constants/collection';
|
||||
import { DialogTitleWithCloseButton } from 'components/MessageDialog';
|
||||
|
@ -24,6 +23,8 @@ import {
|
|||
Transition,
|
||||
FloatingDrawer,
|
||||
} from 'components/Collections/FloatingDrawer';
|
||||
import { useLocalState } from 'hooks/useLocalState';
|
||||
import { LS_KEYS } from 'utils/storage/localStorage';
|
||||
|
||||
const LeftSlideTransition = Transition('up');
|
||||
|
||||
|
@ -36,7 +37,10 @@ export default function AllCollections(props: Iprops) {
|
|||
};
|
||||
|
||||
const [collectionSortBy, setCollectionSortBy] =
|
||||
useState<COLLECTION_SORT_BY>(COLLECTION_SORT_BY.LATEST_FILE);
|
||||
useLocalState<COLLECTION_SORT_BY>(
|
||||
LS_KEYS.COLLECTION_SORT_BY,
|
||||
COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
@ -43,14 +43,20 @@ const CollectionSortOptions = (props: OptionProps) => {
|
|||
return (
|
||||
<Paper sx={{ maxWidth: '100%' }}>
|
||||
<MenuList>
|
||||
<SortByOption sortBy={COLLECTION_SORT_BY.LATEST_FILE}>
|
||||
{constants.SORT_BY_LATEST_PHOTO}
|
||||
</SortByOption>
|
||||
<SortByOption sortBy={COLLECTION_SORT_BY.MODIFICATION_TIME}>
|
||||
{constants.SORT_BY_MODIFICATION_TIME}
|
||||
</SortByOption>
|
||||
<SortByOption sortBy={COLLECTION_SORT_BY.NAME}>
|
||||
{constants.SORT_BY_COLLECTION_NAME}
|
||||
{constants.SORT_BY_NAME}
|
||||
</SortByOption>
|
||||
<SortByOption
|
||||
sortBy={COLLECTION_SORT_BY.CREATION_TIME_DESCENDING}>
|
||||
{constants.SORT_BY_CREATION_TIME_DESCENDING}
|
||||
</SortByOption>
|
||||
<SortByOption
|
||||
sortBy={COLLECTION_SORT_BY.CREATION_TIME_ASCENDING}>
|
||||
{constants.SORT_BY_CREATION_TIME_ASCENDING}
|
||||
</SortByOption>
|
||||
<SortByOption
|
||||
sortBy={COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING}>
|
||||
{constants.SORT_BY_UPDATION_TIME_DESCENDING}
|
||||
</SortByOption>
|
||||
</MenuList>
|
||||
</Paper>
|
||||
|
|
|
@ -10,9 +10,10 @@ export enum CollectionType {
|
|||
}
|
||||
|
||||
export enum COLLECTION_SORT_BY {
|
||||
LATEST_FILE,
|
||||
MODIFICATION_TIME,
|
||||
NAME,
|
||||
CREATION_TIME_ASCENDING,
|
||||
CREATION_TIME_DESCENDING,
|
||||
UPDATION_TIME_DESCENDING,
|
||||
}
|
||||
|
||||
export const COLLECTION_SHARE_DEFAULT_VALID_DURATION =
|
||||
|
|
20
src/hooks/useLocalState.tsx
Normal file
20
src/hooks/useLocalState.tsx
Normal file
|
@ -0,0 +1,20 @@
|
|||
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
|
||||
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
|
||||
|
||||
export function useLocalState<T>(
|
||||
key: LS_KEYS,
|
||||
initialValue?: T
|
||||
): [T, Dispatch<SetStateAction<T>>] {
|
||||
const [value, setValue] = useState<T>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const { value } = getData(key) ?? {};
|
||||
setValue(value ?? initialValue);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setData(key, { value });
|
||||
}, [value]);
|
||||
|
||||
return [value, setValue];
|
||||
}
|
|
@ -718,12 +718,17 @@ export function sortCollectionSummaries(
|
|||
return moveFavCollectionToFront(
|
||||
collectionSummaries.sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case COLLECTION_SORT_BY.LATEST_FILE:
|
||||
case COLLECTION_SORT_BY.CREATION_TIME_DESCENDING:
|
||||
return compareCollectionsLatestFile(
|
||||
b.latestFile,
|
||||
a.latestFile
|
||||
);
|
||||
case COLLECTION_SORT_BY.MODIFICATION_TIME:
|
||||
case COLLECTION_SORT_BY.CREATION_TIME_ASCENDING:
|
||||
return (
|
||||
-1 *
|
||||
compareCollectionsLatestFile(b.latestFile, a.latestFile)
|
||||
);
|
||||
case COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING:
|
||||
return (
|
||||
b.collectionAttributes.updationTime -
|
||||
a.collectionAttributes.updationTime
|
||||
|
|
|
@ -17,6 +17,7 @@ export enum LS_KEYS {
|
|||
FAILED_UPLOADS = 'failedUploads',
|
||||
LOGS = 'logs',
|
||||
USER_DETAILS = 'userDetails',
|
||||
COLLECTION_SORT_BY = 'collectionSortBy',
|
||||
}
|
||||
|
||||
export const setData = (key: LS_KEYS, value: object) => {
|
||||
|
|
|
@ -585,9 +585,11 @@ const englishConstants = {
|
|||
</p>
|
||||
</>
|
||||
),
|
||||
SORT_BY_LATEST_PHOTO: 'recent photo',
|
||||
SORT_BY_MODIFICATION_TIME: 'last updated',
|
||||
SORT_BY_COLLECTION_NAME: 'album name',
|
||||
|
||||
SORT_BY_CREATION_TIME_ASCENDING: 'Oldest',
|
||||
SORT_BY_CREATION_TIME_DESCENDING: 'Newest',
|
||||
SORT_BY_UPDATION_TIME_DESCENDING: 'Last updated',
|
||||
SORT_BY_NAME: 'Name',
|
||||
COMPRESS_THUMBNAILS: 'Compress thumbnails',
|
||||
THUMBNAIL_REPLACED: 'thumbnails compressed',
|
||||
FIX_THUMBNAIL: 'compress',
|
||||
|
|
Loading…
Reference in a new issue