renamed varaiable and refactoring

This commit is contained in:
abhinav-grd 2021-09-27 13:39:28 +05:30
parent a9d6419607
commit d7d8b3d3aa
3 changed files with 33 additions and 29 deletions

View file

@ -9,7 +9,7 @@ import { IconWithMessage } from './SelectedFileOptions';
interface Props { interface Props {
setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
collectionSortBy: COLLECTION_SORT_BY; activeSortBy: COLLECTION_SORT_BY;
} }
export default function CollectionSort(props: Props) { export default function CollectionSort(props: Props) {
const collectionSortOptions = CollectionSortOptions(props); const collectionSortOptions = CollectionSortOptions(props);

View file

@ -7,8 +7,8 @@ import styled from 'styled-components';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import { MenuItem, MenuLink } from './CollectionOptions'; import { MenuItem, MenuLink } from './CollectionOptions';
interface Props { interface OptionProps {
collectionSortBy: COLLECTION_SORT_BY; activeSortBy: COLLECTION_SORT_BY;
setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void; setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
} }
@ -17,31 +17,35 @@ const TickWrapper = styled.span`
margin-left: 5px; margin-left: 5px;
`; `;
const CollectionSortOptions = (props: Props) => { const SortByOptionCreator =
const { setCollectionSortBy, collectionSortBy: activeSortBy } = props; ({ setCollectionSortBy, activeSortBy }: OptionProps) =>
const SortByOption = (props: { (props: { sortBy: COLLECTION_SORT_BY; children: any }) =>
sortBy: COLLECTION_SORT_BY; (
children: any; <MenuItem>
}) => ( <Row>
<MenuItem> <Label width="20px">
<Row> {activeSortBy === props.sortBy && (
<Label width="20px"> <TickWrapper>
{activeSortBy === props.sortBy && ( <TickIcon />
<TickWrapper> </TickWrapper>
<TickIcon /> )}
</TickWrapper> </Label>
)} <Value width="165px">
</Label> <MenuLink
<Value width="165px"> onClick={() => setCollectionSortBy(props.sortBy)}
<MenuLink variant={
onClick={() => setCollectionSortBy(props.sortBy)} activeSortBy === props.sortBy && 'success'
variant={activeSortBy === props.sortBy && 'success'}> }>
{props.children} {props.children}
</MenuLink> </MenuLink>
</Value> </Value>
</Row> </Row>
</MenuItem> </MenuItem>
); );
const CollectionSortOptions = (props: OptionProps) => {
const SortByOption = SortByOptionCreator(props);
return ( return (
<Popover id="collection-sort-options" style={{ borderRadius: '10px' }}> <Popover id="collection-sort-options" style={{ borderRadius: '10px' }}>
<Popover.Content <Popover.Content

View file

@ -269,7 +269,7 @@ export default function Collections(props: CollectionProps) {
</CollectionContainer> </CollectionContainer>
<CollectionSort <CollectionSort
setCollectionSortBy={setCollectionSortBy} setCollectionSortBy={setCollectionSortBy}
collectionSortBy={collectionSortBy} activeSortBy={collectionSortBy}
/> />
</CollectionBar> </CollectionBar>
</> </>