Merge branch 'collections-redesign' into sidebar-redesign

src/components/Collections/AllCollections.tsx

@@ -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 (
         <>

src/components/pages/gallery/CollectionSort.tsx

@@ -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>

src/constants/collection/index.ts

@@ -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 =

src/hooks/useLocalState.tsx

@@ -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];
+}

src/services/collectionService.ts

@@ -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

src/utils/storage/localStorage.ts

@@ -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) => {

src/utils/strings/englishConstants.tsx

@@ -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',