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 { LargerCollectionTile } from './styledComponents';
|
||||||
import CollectionCard from './CollectionCard';
|
import CollectionCard from './CollectionCard';
|
||||||
import Divider from '@mui/material/Divider';
|
import Divider from '@mui/material/Divider';
|
||||||
import { useState } from 'react';
|
|
||||||
import CollectionSort from 'components/pages/gallery/CollectionSort';
|
import CollectionSort from 'components/pages/gallery/CollectionSort';
|
||||||
import { CollectionType, COLLECTION_SORT_BY } from 'constants/collection';
|
import { CollectionType, COLLECTION_SORT_BY } from 'constants/collection';
|
||||||
import { DialogTitleWithCloseButton } from 'components/MessageDialog';
|
import { DialogTitleWithCloseButton } from 'components/MessageDialog';
|
||||||
|
@ -24,6 +23,8 @@ import {
|
||||||
Transition,
|
Transition,
|
||||||
FloatingDrawer,
|
FloatingDrawer,
|
||||||
} from 'components/Collections/FloatingDrawer';
|
} from 'components/Collections/FloatingDrawer';
|
||||||
|
import { useLocalState } from 'hooks/useLocalState';
|
||||||
|
import { LS_KEYS } from 'utils/storage/localStorage';
|
||||||
|
|
||||||
const LeftSlideTransition = Transition('up');
|
const LeftSlideTransition = Transition('up');
|
||||||
|
|
||||||
|
@ -36,7 +37,10 @@ export default function AllCollections(props: Iprops) {
|
||||||
};
|
};
|
||||||
|
|
||||||
const [collectionSortBy, setCollectionSortBy] =
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -43,14 +43,20 @@ const CollectionSortOptions = (props: OptionProps) => {
|
||||||
return (
|
return (
|
||||||
<Paper sx={{ maxWidth: '100%' }}>
|
<Paper sx={{ maxWidth: '100%' }}>
|
||||||
<MenuList>
|
<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}>
|
<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>
|
</SortByOption>
|
||||||
</MenuList>
|
</MenuList>
|
||||||
</Paper>
|
</Paper>
|
||||||
|
|
|
@ -10,9 +10,10 @@ export enum CollectionType {
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum COLLECTION_SORT_BY {
|
export enum COLLECTION_SORT_BY {
|
||||||
LATEST_FILE,
|
|
||||||
MODIFICATION_TIME,
|
|
||||||
NAME,
|
NAME,
|
||||||
|
CREATION_TIME_ASCENDING,
|
||||||
|
CREATION_TIME_DESCENDING,
|
||||||
|
UPDATION_TIME_DESCENDING,
|
||||||
}
|
}
|
||||||
|
|
||||||
export const COLLECTION_SHARE_DEFAULT_VALID_DURATION =
|
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(
|
return moveFavCollectionToFront(
|
||||||
collectionSummaries.sort((a, b) => {
|
collectionSummaries.sort((a, b) => {
|
||||||
switch (sortBy) {
|
switch (sortBy) {
|
||||||
case COLLECTION_SORT_BY.LATEST_FILE:
|
case COLLECTION_SORT_BY.CREATION_TIME_DESCENDING:
|
||||||
return compareCollectionsLatestFile(
|
return compareCollectionsLatestFile(
|
||||||
b.latestFile,
|
b.latestFile,
|
||||||
a.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 (
|
return (
|
||||||
b.collectionAttributes.updationTime -
|
b.collectionAttributes.updationTime -
|
||||||
a.collectionAttributes.updationTime
|
a.collectionAttributes.updationTime
|
||||||
|
|
|
@ -17,6 +17,7 @@ export enum LS_KEYS {
|
||||||
FAILED_UPLOADS = 'failedUploads',
|
FAILED_UPLOADS = 'failedUploads',
|
||||||
LOGS = 'logs',
|
LOGS = 'logs',
|
||||||
USER_DETAILS = 'userDetails',
|
USER_DETAILS = 'userDetails',
|
||||||
|
COLLECTION_SORT_BY = 'collectionSortBy',
|
||||||
}
|
}
|
||||||
|
|
||||||
export const setData = (key: LS_KEYS, value: object) => {
|
export const setData = (key: LS_KEYS, value: object) => {
|
||||||
|
|
|
@ -585,9 +585,11 @@ const englishConstants = {
|
||||||
</p>
|
</p>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
SORT_BY_LATEST_PHOTO: 'recent photo',
|
|
||||||
SORT_BY_MODIFICATION_TIME: 'last updated',
|
SORT_BY_CREATION_TIME_ASCENDING: 'Oldest',
|
||||||
SORT_BY_COLLECTION_NAME: 'album name',
|
SORT_BY_CREATION_TIME_DESCENDING: 'Newest',
|
||||||
|
SORT_BY_UPDATION_TIME_DESCENDING: 'Last updated',
|
||||||
|
SORT_BY_NAME: 'Name',
|
||||||
COMPRESS_THUMBNAILS: 'Compress thumbnails',
|
COMPRESS_THUMBNAILS: 'Compress thumbnails',
|
||||||
THUMBNAIL_REPLACED: 'thumbnails compressed',
|
THUMBNAIL_REPLACED: 'thumbnails compressed',
|
||||||
FIX_THUMBNAIL: 'compress',
|
FIX_THUMBNAIL: 'compress',
|
||||||
|
|
Loading…
Reference in a new issue