From de9f5268e1c3e207f8c0b982798ab6d727066d1e Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Sun, 26 Sep 2021 13:19:10 +0530 Subject: [PATCH 01/12] updated exisitng components --- src/components/Container.ts | 1 + .../pages/gallery/CollectionOptions.tsx | 39 +++++++++++-------- .../pages/gallery/SelectedFileOptions.tsx | 16 ++++---- 3 files changed, 31 insertions(+), 25 deletions(-) diff --git a/src/components/Container.ts b/src/components/Container.ts index 5c9175e31..88e183559 100644 --- a/src/components/Container.ts +++ b/src/components/Container.ts @@ -57,6 +57,7 @@ export const Value = styled.div<{ width?: string }>` `; export const FlexWrapper = styled.div` + width: 100%; display: flex; text-align: center; justify-content: center; diff --git a/src/components/pages/gallery/CollectionOptions.tsx b/src/components/pages/gallery/CollectionOptions.tsx index cd8bb56f9..de336c027 100644 --- a/src/components/pages/gallery/CollectionOptions.tsx +++ b/src/components/pages/gallery/CollectionOptions.tsx @@ -21,6 +21,28 @@ interface Props { showCollectionShareModal: () => void; redirectToAll: () => void; } + +export const MenuLink = (props) => ( + + {props.children} + +); + +export const MenuItem = (props) => ( + + {props.children} + +); + const CollectionOptions = (props: Props) => { const collectionRename = async ( selectedCollection: Collection, @@ -75,23 +97,6 @@ const CollectionOptions = (props: Props) => { }); }; - const MenuLink = (props) => ( - - {props.children} - - ); - - const MenuItem = (props) => ( - - {props.children} - - ); return ( diff --git a/src/components/pages/gallery/SelectedFileOptions.tsx b/src/components/pages/gallery/SelectedFileOptions.tsx index ebf041aca..7fa000092 100644 --- a/src/components/pages/gallery/SelectedFileOptions.tsx +++ b/src/components/pages/gallery/SelectedFileOptions.tsx @@ -51,6 +51,14 @@ const SelectionContainer = styled.div` display: flex; `; +export const IconWithMessage = (props) => ( + {props.message}

}> + {props.children} + +); + const SelectedFileOptions = ({ addToCollectionHelper, moveToCollectionHelper, @@ -94,14 +102,6 @@ const SelectedFileOptions = ({ }); }; - const IconWithMessage = (props) => ( - {props.message}

}> - {props.children} - - ); - return ( From 4a5a36a0df32cbfd28a690d6c766ce628e64b2ce Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Sun, 26 Sep 2021 13:19:21 +0530 Subject: [PATCH 02/12] Adds new icons --- src/components/icons/SortIcon.tsx | 20 ++++++++++++++++++++ src/components/icons/TickIcon.tsx | 20 ++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 src/components/icons/SortIcon.tsx create mode 100644 src/components/icons/TickIcon.tsx diff --git a/src/components/icons/SortIcon.tsx b/src/components/icons/SortIcon.tsx new file mode 100644 index 000000000..07c2c0460 --- /dev/null +++ b/src/components/icons/SortIcon.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export default function SortIcon(props) { + return ( + + + + + ); +} + +SortIcon.defaultProps = { + height: 24, + width: 24, + viewBox: '0 0 24 24', +}; diff --git a/src/components/icons/TickIcon.tsx b/src/components/icons/TickIcon.tsx new file mode 100644 index 000000000..8bd76968f --- /dev/null +++ b/src/components/icons/TickIcon.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export default function TickIcon(props) { + return ( + + + + ); +} + +TickIcon.defaultProps = { + height: 28, + width: 20, + viewBox: '0 0 24 24', +}; From 45f098b29a7348ee4d1e6188a0992ba552be371b Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Sun, 26 Sep 2021 14:13:53 +0530 Subject: [PATCH 03/12] adds collection sort --- .../pages/gallery/CollectionSort.tsx | 35 ++++ .../pages/gallery/CollectionSortOptions.tsx | 61 ++++++ src/components/pages/gallery/Collections.tsx | 176 ++++++++++-------- src/utils/collection/index.ts | 15 ++ src/utils/strings/englishConstants.tsx | 4 + 5 files changed, 214 insertions(+), 77 deletions(-) create mode 100644 src/components/pages/gallery/CollectionSort.tsx create mode 100644 src/components/pages/gallery/CollectionSortOptions.tsx diff --git a/src/components/pages/gallery/CollectionSort.tsx b/src/components/pages/gallery/CollectionSort.tsx new file mode 100644 index 000000000..4eba8d835 --- /dev/null +++ b/src/components/pages/gallery/CollectionSort.tsx @@ -0,0 +1,35 @@ +import { IconButton } from 'components/Container'; +import SortIcon from 'components/icons/SortIcon'; +import React from 'react'; +import { OverlayTrigger } from 'react-bootstrap'; +import constants from 'utils/strings/constants'; +import CollectionSortOptions from './CollectionSortOptions'; +import { IconWithMessage } from './SelectedFileOptions'; + +export enum COLLECTION_SORT_BY { + CREATION_TIME = 'creationTime', + MODIFICATION_TIME = 'updationTime', + NAME = 'name', +} + +interface Props { + setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; +} +export default function CollectionSort(props: Props) { + const collectionSortOptions = CollectionSortOptions(props); + return ( + +
+ + + + + +
+ + ); +} diff --git a/src/components/pages/gallery/CollectionSortOptions.tsx b/src/components/pages/gallery/CollectionSortOptions.tsx new file mode 100644 index 000000000..6c6efd801 --- /dev/null +++ b/src/components/pages/gallery/CollectionSortOptions.tsx @@ -0,0 +1,61 @@ +import TickIcon from 'components/icons/TickIcon'; +import React from 'react'; +import { ListGroup, Popover } from 'react-bootstrap'; +import styled from 'styled-components'; +import constants from 'utils/strings/constants'; +import { MenuItem, MenuLink } from './CollectionOptions'; +import { COLLECTION_SORT_BY } from './CollectionSort'; + +interface Props { + setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; +} + +const TickWrapper = styled.span` + color: #aaa; + margin-left: 5px; +`; +const CollectionSortOptions = (props: Props) => { + return ( + + + + + + + + + props.setCollectionSortBy( + COLLECTION_SORT_BY.CREATION_TIME + ) + }> + {constants.SORT_BY_CREATION_TIME} + + + + + props.setCollectionSortBy( + COLLECTION_SORT_BY.MODIFICATION_TIME + ) + }> + {constants.SORT_BY_MODIFICATION_TIME} + + + + + props.setCollectionSortBy( + COLLECTION_SORT_BY.NAME + ) + }> + {constants.SORT_BY_COLLECTION_NAME} + + + + + + ); +}; + +export default CollectionSortOptions; diff --git a/src/components/pages/gallery/Collections.tsx b/src/components/pages/gallery/Collections.tsx index a8d9294a1..a48927fb5 100644 --- a/src/components/pages/gallery/Collections.tsx +++ b/src/components/pages/gallery/Collections.tsx @@ -9,11 +9,12 @@ import { Collection, CollectionType } from 'services/collectionService'; import { User } from 'services/userService'; import styled from 'styled-components'; import { IMAGE_CONTAINER_MAX_WIDTH } from 'types'; -import { getSelectedCollection } from 'utils/collection'; +import { getSelectedCollection, sortCollections } from 'utils/collection'; import { getData, LS_KEYS } from 'utils/storage/localStorage'; import constants from 'utils/strings/constants'; import { SetCollectionNamerAttributes } from './CollectionNamer'; import CollectionOptions from './CollectionOptions'; +import CollectionSort, { COLLECTION_SORT_BY } from './CollectionSort'; import OptionIcon, { OptionIconWrapper } from './OptionIcon'; export const ARCHIVE_SECTION = -1; @@ -31,12 +32,11 @@ interface CollectionProps { collectionFilesCount: Map; } -const Container = styled.div` - margin: 10px auto; +const CollectionContainer = styled.div` overflow-y: hidden; height: 40px; display: flex; - width: 100%; + width: calc(100% - 80px); position: relative; padding: 0 24px; @@ -54,6 +54,14 @@ const Wrapper = styled.div` scroll-behavior: smooth; `; +const CollectionBar = styled.div` + width: 100%; + margin: 10px auto; + display: flex; + align-items: center; + justify-content: flex-start; +`; + const Chip = styled.button<{ active: boolean }>` border-radius: 8px; padding: 4px; @@ -84,6 +92,8 @@ export default function Collections(props: CollectionProps) { scrollWidth?: number; clientWidth?: number; }>({}); + const [collectionSortBy, setCollectionSortBy] = + useState(COLLECTION_SORT_BY.MODIFICATION_TIME); const updateScrollObj = () => { if (collectionRef.current) { @@ -165,81 +175,93 @@ export default function Collections(props: CollectionProps) { )} syncWithRemote={props.syncWithRemote} /> - - {scrollObj.scrollLeft > 0 && ( - - )} - - - {constants.ALL} -
+ + {scrollObj.scrollLeft > 0 && ( + - - {collections?.map((item) => ( - - - {item.name} - {item.type !== CollectionType.favorites && - item.owner.id === user?.id ? ( - - - setSelectedCollectionID( - item.id - ) - } - /> - - ) : ( -
- )} - - - ))} - - {constants.ARCHIVE} -
+ + {constants.ALL} +
+ + {sortCollections(collections, collectionSortBy).map( + (item) => ( + + + {item.name} + {item.type !== + CollectionType.favorites && + item.owner.id === user?.id ? ( + + + setSelectedCollectionID( + item.id + ) + } + /> + + ) : ( +
+ )} + + + ) + )} + + {constants.ARCHIVE} +
+ + + {scrollObj.scrollLeft < + scrollObj.scrollWidth - scrollObj.clientWidth && ( + - - - {scrollObj.scrollLeft < - scrollObj.scrollWidth - scrollObj.clientWidth && ( - - )} - + )} + + + ) ); diff --git a/src/utils/collection/index.ts b/src/utils/collection/index.ts index 1c13c40c1..34c67124d 100644 --- a/src/utils/collection/index.ts +++ b/src/utils/collection/index.ts @@ -11,6 +11,7 @@ import { CustomError } from 'utils/common/errorUtil'; import { SelectedState } from 'pages/gallery'; import { User } from 'services/userService'; import { getData, LS_KEYS } from 'utils/storage/localStorage'; +import { COLLECTION_SORT_BY } from 'components/pages/gallery/CollectionSort'; export enum COLLECTION_OPS_TYPE { ADD, @@ -75,3 +76,17 @@ export function isSharedCollection( } return collection?.owner.id !== user.id; } +export function sortCollections( + collections: Collection[], + sortBy: COLLECTION_SORT_BY +) { + console.log(sortBy, collections[0]); + return collections.sort((collection1, collection2) => { + const a = collection1[sortBy]; + const b = collection2[sortBy]; + if (typeof a === 'string') return a.localeCompare(b); + else { + return b - a; + } + }); +} diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 7960ec6ca..ffa9fd179 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -548,6 +548,10 @@ const englishConstants = { UNARCHIVE: 'un-archive', MOVE: 'move', ADD: 'add', + SORT: 'sort', + SORT_BY_CREATION_TIME: 'most recent photo', + SORT_BY_MODIFICATION_TIME: 'last modified', + SORT_BY_COLLECTION_NAME: 'album title', }; export default englishConstants; From b9c41ea5328d64bc7c1534f7b8c4ca7c3993c3fa Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Mon, 27 Sep 2021 11:36:06 +0530 Subject: [PATCH 04/12] adds sharedCollections to collectionAndTheirLatestFile This is needed because when sorting we use collectionsAndThierLatestFile to sort based on latest file and we need shared Collection file there --- .../pages/gallery/CollectionSelector.tsx | 16 +++++++++++----- src/services/collectionService.ts | 6 +----- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/pages/gallery/CollectionSelector.tsx b/src/components/pages/gallery/CollectionSelector.tsx index 2556ed26f..ee9e27925 100644 --- a/src/components/pages/gallery/CollectionSelector.tsx +++ b/src/components/pages/gallery/CollectionSelector.tsx @@ -7,6 +7,8 @@ import { } from 'services/collectionService'; import AddCollectionButton from './AddCollectionButton'; import PreviewCard from './PreviewCard'; +import { getData, LS_KEYS } from 'utils/storage/localStorage'; +import { User } from 'services/userService'; export const CollectionIcon = styled.div` width: 200px; @@ -53,14 +55,18 @@ function CollectionSelector({ if (!attributes) { return; } - const collectionsOtherThanFrom = collectionsAndTheirLatestFile?.filter( - (item) => !(item.collection.id === attributes.fromCollection) - ); - if (collectionsOtherThanFrom.length === 0) { + const user: User = getData(LS_KEYS.USER); + const personalCollectionsOtherThanFrom = + collectionsAndTheirLatestFile?.filter( + (item) => + item.collection.id !== attributes.fromCollection && + item.collection.owner.id === user?.id + ); + if (personalCollectionsOtherThanFrom.length === 0) { props.onHide(); attributes.showNextModal(); } else { - setCollectionToShow(collectionsOtherThanFrom); + setCollectionToShow(personalCollectionsOtherThanFrom); } }, [props.show]); diff --git a/src/services/collectionService.ts b/src/services/collectionService.ts index ea6b69ee9..03ab29596 100644 --- a/src/services/collectionService.ts +++ b/src/services/collectionService.ts @@ -219,13 +219,9 @@ export const getCollectionsAndTheirLatestFile = ( } }); const collectionsAndTheirLatestFile: CollectionAndItsLatestFile[] = []; - const userID = getData(LS_KEYS.USER)?.id; for (const collection of collections) { - if ( - collection.owner.id !== userID || - collection.type === CollectionType.favorites - ) { + if (collection.type === CollectionType.favorites) { continue; } collectionsAndTheirLatestFile.push({ From d54e27b0bed571f8a63cff34b0e067dc2d522291 Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Mon, 27 Sep 2021 11:51:26 +0530 Subject: [PATCH 05/12] passes CollectionAndThierLatest file to Collection component and add sorting by latest file logic --- .../pages/gallery/CollectionSort.tsx | 7 +- src/components/pages/gallery/Collections.tsx | 93 ++++++++++--------- src/pages/gallery/index.tsx | 1 + src/services/collectionService.ts | 65 +++++++++++++ src/utils/collection/index.ts | 15 --- 5 files changed, 117 insertions(+), 64 deletions(-) diff --git a/src/components/pages/gallery/CollectionSort.tsx b/src/components/pages/gallery/CollectionSort.tsx index 4eba8d835..2146c2507 100644 --- a/src/components/pages/gallery/CollectionSort.tsx +++ b/src/components/pages/gallery/CollectionSort.tsx @@ -2,16 +2,11 @@ import { IconButton } from 'components/Container'; import SortIcon from 'components/icons/SortIcon'; import React from 'react'; import { OverlayTrigger } from 'react-bootstrap'; +import { COLLECTION_SORT_BY } from 'services/collectionService'; import constants from 'utils/strings/constants'; import CollectionSortOptions from './CollectionSortOptions'; import { IconWithMessage } from './SelectedFileOptions'; -export enum COLLECTION_SORT_BY { - CREATION_TIME = 'creationTime', - MODIFICATION_TIME = 'updationTime', - NAME = 'name', -} - interface Props { setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; } diff --git a/src/components/pages/gallery/Collections.tsx b/src/components/pages/gallery/Collections.tsx index a48927fb5..cf872ff1f 100644 --- a/src/components/pages/gallery/Collections.tsx +++ b/src/components/pages/gallery/Collections.tsx @@ -5,16 +5,22 @@ import NavigationButton, { } from 'components/NavigationButton'; import React, { useEffect, useRef, useState } from 'react'; import { OverlayTrigger, Tooltip } from 'react-bootstrap'; -import { Collection, CollectionType } from 'services/collectionService'; +import { + Collection, + CollectionAndItsLatestFile, + CollectionType, + COLLECTION_SORT_BY, + sortCollections, +} from 'services/collectionService'; import { User } from 'services/userService'; import styled from 'styled-components'; import { IMAGE_CONTAINER_MAX_WIDTH } from 'types'; -import { getSelectedCollection, sortCollections } from 'utils/collection'; +import { getSelectedCollection } from 'utils/collection'; import { getData, LS_KEYS } from 'utils/storage/localStorage'; import constants from 'utils/strings/constants'; import { SetCollectionNamerAttributes } from './CollectionNamer'; import CollectionOptions from './CollectionOptions'; -import CollectionSort, { COLLECTION_SORT_BY } from './CollectionSort'; +import CollectionSort from './CollectionSort'; import OptionIcon, { OptionIconWrapper } from './OptionIcon'; export const ARCHIVE_SECTION = -1; @@ -22,6 +28,7 @@ export const ALL_SECTION = 0; interface CollectionProps { collections: Collection[]; + collectionAndTheirLatestFile: CollectionAndItsLatestFile[]; activeCollection?: number; setActiveCollection: (id?: number) => void; setDialogMessage: SetDialogMessage; @@ -197,47 +204,47 @@ export default function Collections(props: CollectionProps) { }} /> - {sortCollections(collections, collectionSortBy).map( - (item) => ( - - - {item.name} - {item.type !== - CollectionType.favorites && - item.owner.id === user?.id ? ( - - - setSelectedCollectionID( - item.id - ) - } - /> - - ) : ( -
( + + + {item.name} + {item.type !== + CollectionType.favorites && + item.owner.id === user?.id ? ( + + + setSelectedCollectionID( + item.id + ) + } /> - )} - - - ) - )} + + ) : ( +
+ )} + + + ))} diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 7bb813ed3..b4cc05874 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -526,6 +526,7 @@ export default function Gallery() { /> { + switch (sortBy) { + case COLLECTION_SORT_BY.LATEST_FILE: + return compareCollectionsLatestFile( + collectionAndTheirLatestFile, + collectionA, + collectionB + ); + case COLLECTION_SORT_BY.MODIFICATION_TIME: + return collectionB.updationTime - collectionA.updationTime; + case COLLECTION_SORT_BY.NAME: + return collectionA.name.localeCompare(collectionB.name); + } + }); +} + +function compareCollectionsLatestFile( + collectionAndTheirLatestFile: CollectionAndItsLatestFile[], + collectionA: Collection, + collectionB: Collection +) { + const CollectionALatestFile = getCollectionLatestFile( + collectionAndTheirLatestFile, + collectionA + ); + const CollectionBLatestFile = getCollectionLatestFile( + collectionAndTheirLatestFile, + collectionB + ); + + return ( + CollectionBLatestFile.updationTime - CollectionALatestFile.updationTime + ); +} + +function getCollectionLatestFile( + collectionAndTheirLatestFile: CollectionAndItsLatestFile[], + collection: Collection +) { + const collectionAndItsLatestFile = collectionAndTheirLatestFile.filter( + (collectionAndItsLatestFile) => + collectionAndItsLatestFile.collection.id === collection.id + ); + if (collectionAndItsLatestFile.length === 1) { + return collectionAndItsLatestFile[0].file; + } else { + logError( + Error('collection missing from collectionLatestFile list'), + '' + ); + return { updationTime: 0 }; + } +} diff --git a/src/utils/collection/index.ts b/src/utils/collection/index.ts index 34c67124d..1c13c40c1 100644 --- a/src/utils/collection/index.ts +++ b/src/utils/collection/index.ts @@ -11,7 +11,6 @@ import { CustomError } from 'utils/common/errorUtil'; import { SelectedState } from 'pages/gallery'; import { User } from 'services/userService'; import { getData, LS_KEYS } from 'utils/storage/localStorage'; -import { COLLECTION_SORT_BY } from 'components/pages/gallery/CollectionSort'; export enum COLLECTION_OPS_TYPE { ADD, @@ -76,17 +75,3 @@ export function isSharedCollection( } return collection?.owner.id !== user.id; } -export function sortCollections( - collections: Collection[], - sortBy: COLLECTION_SORT_BY -) { - console.log(sortBy, collections[0]); - return collections.sort((collection1, collection2) => { - const a = collection1[sortBy]; - const b = collection2[sortBy]; - if (typeof a === 'string') return a.localeCompare(b); - else { - return b - a; - } - }); -} From fef607072158a166348a1a19929ea17d6c816f5f Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Mon, 27 Sep 2021 11:52:35 +0530 Subject: [PATCH 06/12] updates colletion sort option to set collection sort by to latest file --- src/components/pages/gallery/CollectionSortOptions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/pages/gallery/CollectionSortOptions.tsx b/src/components/pages/gallery/CollectionSortOptions.tsx index 6c6efd801..b928cc7e5 100644 --- a/src/components/pages/gallery/CollectionSortOptions.tsx +++ b/src/components/pages/gallery/CollectionSortOptions.tsx @@ -1,10 +1,10 @@ import TickIcon from 'components/icons/TickIcon'; import React from 'react'; import { ListGroup, Popover } from 'react-bootstrap'; +import { COLLECTION_SORT_BY } from 'services/collectionService'; import styled from 'styled-components'; import constants from 'utils/strings/constants'; import { MenuItem, MenuLink } from './CollectionOptions'; -import { COLLECTION_SORT_BY } from './CollectionSort'; interface Props { setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; @@ -26,7 +26,7 @@ const CollectionSortOptions = (props: Props) => { props.setCollectionSortBy( - COLLECTION_SORT_BY.CREATION_TIME + COLLECTION_SORT_BY.LATEST_FILE ) }> {constants.SORT_BY_CREATION_TIME} From a9d64196070311a4128a0b83d684b194282fbff5 Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Mon, 27 Sep 2021 12:27:13 +0530 Subject: [PATCH 07/12] added ui sortBy state changes --- .../pages/gallery/CollectionSort.tsx | 1 + .../pages/gallery/CollectionSortOptions.tsx | 74 ++++++++++--------- src/components/pages/gallery/Collections.tsx | 5 +- src/utils/strings/englishConstants.tsx | 2 +- 4 files changed, 45 insertions(+), 37 deletions(-) diff --git a/src/components/pages/gallery/CollectionSort.tsx b/src/components/pages/gallery/CollectionSort.tsx index 2146c2507..772d18886 100644 --- a/src/components/pages/gallery/CollectionSort.tsx +++ b/src/components/pages/gallery/CollectionSort.tsx @@ -9,6 +9,7 @@ import { IconWithMessage } from './SelectedFileOptions'; interface Props { setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; + collectionSortBy: COLLECTION_SORT_BY; } export default function CollectionSort(props: Props) { const collectionSortOptions = CollectionSortOptions(props); diff --git a/src/components/pages/gallery/CollectionSortOptions.tsx b/src/components/pages/gallery/CollectionSortOptions.tsx index b928cc7e5..9dce7e4da 100644 --- a/src/components/pages/gallery/CollectionSortOptions.tsx +++ b/src/components/pages/gallery/CollectionSortOptions.tsx @@ -1,12 +1,14 @@ +import { Label, Value } from 'components/Container'; import TickIcon from 'components/icons/TickIcon'; import React from 'react'; -import { ListGroup, Popover } from 'react-bootstrap'; +import { ListGroup, Popover, Row } from 'react-bootstrap'; import { COLLECTION_SORT_BY } from 'services/collectionService'; import styled from 'styled-components'; import constants from 'utils/strings/constants'; import { MenuItem, MenuLink } from './CollectionOptions'; interface Props { + collectionSortBy: COLLECTION_SORT_BY; setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; } @@ -14,44 +16,46 @@ const TickWrapper = styled.span` color: #aaa; margin-left: 5px; `; + const CollectionSortOptions = (props: Props) => { - return ( - - - - + const { setCollectionSortBy, collectionSortBy: activeSortBy } = props; + const SortByOption = (props: { + sortBy: COLLECTION_SORT_BY; + children: any; + }) => ( + + + - - - props.setCollectionSortBy( - COLLECTION_SORT_BY.MODIFICATION_TIME - ) - }> - {constants.SORT_BY_MODIFICATION_TIME} - - - - - props.setCollectionSortBy( - COLLECTION_SORT_BY.NAME - ) - }> - {constants.SORT_BY_COLLECTION_NAME} - - + )} + + + setCollectionSortBy(props.sortBy)} + variant={activeSortBy === props.sortBy && 'success'}> + {props.children} + + + + + ); + return ( + + + + + {constants.SORT_BY_LATEST_PHOTO} + + + {constants.SORT_BY_MODIFICATION_TIME} + + + {constants.SORT_BY_COLLECTION_NAME} + diff --git a/src/components/pages/gallery/Collections.tsx b/src/components/pages/gallery/Collections.tsx index cf872ff1f..3907226c3 100644 --- a/src/components/pages/gallery/Collections.tsx +++ b/src/components/pages/gallery/Collections.tsx @@ -267,7 +267,10 @@ export default function Collections(props: CollectionProps) { /> )} - + ) diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index ffa9fd179..29aeda2e8 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -549,7 +549,7 @@ const englishConstants = { MOVE: 'move', ADD: 'add', SORT: 'sort', - SORT_BY_CREATION_TIME: 'most recent photo', + SORT_BY_LATEST_PHOTO: 'most recent photo', SORT_BY_MODIFICATION_TIME: 'last modified', SORT_BY_COLLECTION_NAME: 'album title', }; From d7d8b3d3aa7196a74e9ba82857c0f6f16c1359b3 Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Mon, 27 Sep 2021 13:39:28 +0530 Subject: [PATCH 08/12] renamed varaiable and refactoring --- .../pages/gallery/CollectionSort.tsx | 2 +- .../pages/gallery/CollectionSortOptions.tsx | 58 ++++++++++--------- src/components/pages/gallery/Collections.tsx | 2 +- 3 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/components/pages/gallery/CollectionSort.tsx b/src/components/pages/gallery/CollectionSort.tsx index 772d18886..9d0c2a68c 100644 --- a/src/components/pages/gallery/CollectionSort.tsx +++ b/src/components/pages/gallery/CollectionSort.tsx @@ -9,7 +9,7 @@ import { IconWithMessage } from './SelectedFileOptions'; interface Props { setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; - collectionSortBy: COLLECTION_SORT_BY; + activeSortBy: COLLECTION_SORT_BY; } export default function CollectionSort(props: Props) { const collectionSortOptions = CollectionSortOptions(props); diff --git a/src/components/pages/gallery/CollectionSortOptions.tsx b/src/components/pages/gallery/CollectionSortOptions.tsx index 9dce7e4da..73241c145 100644 --- a/src/components/pages/gallery/CollectionSortOptions.tsx +++ b/src/components/pages/gallery/CollectionSortOptions.tsx @@ -7,8 +7,8 @@ import styled from 'styled-components'; import constants from 'utils/strings/constants'; import { MenuItem, MenuLink } from './CollectionOptions'; -interface Props { - collectionSortBy: COLLECTION_SORT_BY; +interface OptionProps { + activeSortBy: COLLECTION_SORT_BY; setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; } @@ -17,31 +17,35 @@ const TickWrapper = styled.span` margin-left: 5px; `; -const CollectionSortOptions = (props: Props) => { - const { setCollectionSortBy, collectionSortBy: activeSortBy } = props; - const SortByOption = (props: { - sortBy: COLLECTION_SORT_BY; - children: any; - }) => ( - - - - - setCollectionSortBy(props.sortBy)} - variant={activeSortBy === props.sortBy && 'success'}> - {props.children} - - - - - ); +const SortByOptionCreator = + ({ setCollectionSortBy, activeSortBy }: OptionProps) => + (props: { sortBy: COLLECTION_SORT_BY; children: any }) => + ( + + + + + setCollectionSortBy(props.sortBy)} + variant={ + activeSortBy === props.sortBy && 'success' + }> + {props.children} + + + + + ); + +const CollectionSortOptions = (props: OptionProps) => { + const SortByOption = SortByOptionCreator(props); + return ( From 8a1ec02ce2fefd2cac6fa72a5e6bdc96ad2eb1a3 Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Mon, 27 Sep 2021 14:04:49 +0530 Subject: [PATCH 09/12] better type definations --- src/components/pages/gallery/CollectionOptions.tsx | 10 +++++----- src/components/pages/gallery/LinkButton.tsx | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/pages/gallery/CollectionOptions.tsx b/src/components/pages/gallery/CollectionOptions.tsx index de336c027..041d58f07 100644 --- a/src/components/pages/gallery/CollectionOptions.tsx +++ b/src/components/pages/gallery/CollectionOptions.tsx @@ -9,7 +9,7 @@ import { import { getSelectedCollection } from 'utils/collection'; import constants from 'utils/strings/constants'; import { SetCollectionNamerAttributes } from './CollectionNamer'; -import LinkButton from './LinkButton'; +import LinkButton, { ButtonVariant, LinkButtonProps } from './LinkButton'; interface Props { syncWithRemote: () => Promise; @@ -22,15 +22,15 @@ interface Props { redirectToAll: () => void; } -export const MenuLink = (props) => ( +export const MenuLink = ({ children, ...props }: LinkButtonProps) => ( - {props.children} + {children} ); -export const MenuItem = (props) => ( +export const MenuItem = (props: { children: any }) => ( { {constants.DELETE} diff --git a/src/components/pages/gallery/LinkButton.tsx b/src/components/pages/gallery/LinkButton.tsx index eb4765852..537aca9f4 100644 --- a/src/components/pages/gallery/LinkButton.tsx +++ b/src/components/pages/gallery/LinkButton.tsx @@ -6,10 +6,10 @@ export enum ButtonVariant { secondary = 'secondary', warning = 'warning', } -type Props = React.PropsWithChildren<{ - onClick: any; - variant?: string; - style?: any; +export type LinkButtonProps = React.PropsWithChildren<{ + onClick: () => void; + variant?: ButtonVariant; + style?: React.CSSProperties; }>; export function getVariantColor(variant: string) { @@ -26,7 +26,7 @@ export function getVariantColor(variant: string) { return '#d1d1d1'; } } -export default function LinkButton(props: Props) { +export default function LinkButton(props: LinkButtonProps) { return (
Date: Mon, 27 Sep 2021 14:22:20 +0530 Subject: [PATCH 10/12] fix console warning --- src/components/pages/gallery/SelectedFileOptions.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/pages/gallery/SelectedFileOptions.tsx b/src/components/pages/gallery/SelectedFileOptions.tsx index 7fa000092..29e3b6f32 100644 --- a/src/components/pages/gallery/SelectedFileOptions.tsx +++ b/src/components/pages/gallery/SelectedFileOptions.tsx @@ -54,7 +54,11 @@ const SelectionContainer = styled.div` export const IconWithMessage = (props) => ( {props.message}

}> + overlay={ + <> +

{props.message}

+ + }> {props.children} ); From 0909280453e836e25f0470080dc8d1c81705df55 Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Mon, 27 Sep 2021 15:23:30 +0530 Subject: [PATCH 11/12] build fix --- src/components/pages/gallery/LinkButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/gallery/LinkButton.tsx b/src/components/pages/gallery/LinkButton.tsx index 537aca9f4..6316402fb 100644 --- a/src/components/pages/gallery/LinkButton.tsx +++ b/src/components/pages/gallery/LinkButton.tsx @@ -8,7 +8,7 @@ export enum ButtonVariant { } export type LinkButtonProps = React.PropsWithChildren<{ onClick: () => void; - variant?: ButtonVariant; + variant?: string; style?: React.CSSProperties; }>; From 10282924ebb5f8cefc41458a3a713be4305f4dfc Mon Sep 17 00:00:00 2001 From: abhinav-grd Date: Mon, 27 Sep 2021 17:30:37 +0530 Subject: [PATCH 12/12] Revert "fix console warning" This reverts commit fa1c48ef95d8348a1fada11a2aecde6622175398. --- src/components/pages/gallery/SelectedFileOptions.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/pages/gallery/SelectedFileOptions.tsx b/src/components/pages/gallery/SelectedFileOptions.tsx index 29e3b6f32..7fa000092 100644 --- a/src/components/pages/gallery/SelectedFileOptions.tsx +++ b/src/components/pages/gallery/SelectedFileOptions.tsx @@ -54,11 +54,7 @@ const SelectionContainer = styled.div` export const IconWithMessage = (props) => ( -

{props.message}

- - }> + overlay={

{props.message}

}> {props.children} );