update all collections
This commit is contained in:
parent
42f7cad252
commit
9dc1025729
|
@ -1,28 +1,22 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { DialogContent } from '@mui/material';
|
import { DialogContent } from '@mui/material';
|
||||||
import { FlexWrapper } from 'components/Container';
|
import { FlexWrapper } from 'components/Container';
|
||||||
import AllCollectionCard from './CollectionCard';
|
import AllCollectionCard from './collectionCard';
|
||||||
import { CollectionSummary } from 'types/collection';
|
import { CollectionSummary } from 'types/collection';
|
||||||
|
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
collectionSummaries: CollectionSummary[];
|
collectionSummaries: CollectionSummary[];
|
||||||
onCollectionClick: (id?: number) => void;
|
onCollectionClick: (id?: number) => void;
|
||||||
collectionTile: any;
|
|
||||||
}
|
}
|
||||||
export default function AllCollectionContent({
|
export default function AllCollectionContent({
|
||||||
collectionSummaries,
|
collectionSummaries,
|
||||||
onCollectionClick,
|
onCollectionClick,
|
||||||
collectionTile,
|
|
||||||
}: Iprops) {
|
}: Iprops) {
|
||||||
return (
|
return (
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<FlexWrapper
|
<FlexWrapper flexWrap="wrap">
|
||||||
style={{
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
}}>
|
|
||||||
{collectionSummaries.map((collectionSummary) => (
|
{collectionSummaries.map((collectionSummary) => (
|
||||||
<AllCollectionCard
|
<AllCollectionCard
|
||||||
collectionTile={collectionTile}
|
|
||||||
onCollectionClick={onCollectionClick}
|
onCollectionClick={onCollectionClick}
|
||||||
collectionSummary={collectionSummary}
|
collectionSummary={collectionSummary}
|
||||||
key={collectionSummary.id}
|
key={collectionSummary.id}
|
||||||
|
|
|
@ -2,22 +2,33 @@ import { Dialog, Slide, styled } from '@mui/material';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
export const AllCollectionContainer = styled(Dialog)(({ theme }) => ({
|
export const AllCollectionDialog = styled(Dialog)<{
|
||||||
|
position: 'flex-start' | 'center' | 'flex-end';
|
||||||
|
}>(({ theme, position }) => ({
|
||||||
'& .MuiDialog-container': {
|
'& .MuiDialog-container': {
|
||||||
justifyContent: 'flex-end',
|
justifyContent: position,
|
||||||
},
|
},
|
||||||
'& .MuiPaper-root': {
|
'& .MuiPaper-root': {
|
||||||
maxWidth: '498px',
|
maxWidth: '494px',
|
||||||
},
|
},
|
||||||
'& .MuiDialogTitle-root': {
|
'& .MuiDialogTitle-root': {
|
||||||
padding: theme.spacing(3, 2),
|
padding: theme.spacing(2),
|
||||||
|
paddingRight: theme.spacing(1),
|
||||||
},
|
},
|
||||||
'& .MuiDialogContent-root': {
|
'& .MuiDialogContent-root': {
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
},
|
},
|
||||||
|
[theme.breakpoints.down(559)]: {
|
||||||
|
'& .MuiPaper-root': {
|
||||||
|
width: '324px',
|
||||||
|
},
|
||||||
|
'& .MuiDialogContent-root': {
|
||||||
|
padding: 6,
|
||||||
|
},
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
AllCollectionContainer.propTypes = {
|
AllCollectionDialog.propTypes = {
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
onClose: PropTypes.func.isRequired,
|
onClose: PropTypes.func.isRequired,
|
||||||
};
|
};
|
|
@ -1,18 +1,18 @@
|
||||||
import React, { useMemo } from 'react';
|
import React, { useContext, useMemo } from 'react';
|
||||||
import Divider from '@mui/material/Divider';
|
import Divider from '@mui/material/Divider';
|
||||||
import { COLLECTION_SORT_BY } from 'constants/collection';
|
import { COLLECTION_SORT_BY } from 'constants/collection';
|
||||||
import { sortCollectionSummaries } from 'services/collectionService';
|
import { sortCollectionSummaries } from 'services/collectionService';
|
||||||
import {
|
import {
|
||||||
Transition,
|
Transition,
|
||||||
AllCollectionDialog,
|
AllCollectionDialog,
|
||||||
} from 'components/Collections/AllCollections/Container';
|
} from 'components/Collections/AllCollections/dialog';
|
||||||
import { useLocalState } from 'hooks/useLocalState';
|
import { useLocalState } from 'hooks/useLocalState';
|
||||||
import { LS_KEYS } from 'utils/storage/localStorage';
|
import { LS_KEYS } from 'utils/storage/localStorage';
|
||||||
import AllCollectionsHeader from './header';
|
import AllCollectionsHeader from './header';
|
||||||
import { CollectionSummaries } from 'types/collection';
|
import { CollectionSummaries } from 'types/collection';
|
||||||
import AllCollectionContent from './content';
|
import AllCollectionContent from './content';
|
||||||
import { AllCollectionTile } from '../styledComponents';
|
|
||||||
import { isSystemCollection } from 'utils/collection';
|
import { isSystemCollection } from 'utils/collection';
|
||||||
|
import { AppContext } from 'pages/_app';
|
||||||
|
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
@ -25,7 +25,7 @@ const LeftSlideTransition = Transition('up');
|
||||||
|
|
||||||
export default function AllCollections(props: Iprops) {
|
export default function AllCollections(props: Iprops) {
|
||||||
const { collectionSummaries, open, onClose, setActiveCollection } = props;
|
const { collectionSummaries, open, onClose, setActiveCollection } = props;
|
||||||
|
const { isMobile } = useContext(AppContext);
|
||||||
const [collectionSortBy, setCollectionSortBy] =
|
const [collectionSortBy, setCollectionSortBy] =
|
||||||
useLocalState<COLLECTION_SORT_BY>(
|
useLocalState<COLLECTION_SORT_BY>(
|
||||||
LS_KEYS.COLLECTION_SORT_BY,
|
LS_KEYS.COLLECTION_SORT_BY,
|
||||||
|
@ -50,18 +50,19 @@ export default function AllCollections(props: Iprops) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AllCollectionDialog
|
<AllCollectionDialog
|
||||||
|
position="flex-end"
|
||||||
TransitionComponent={LeftSlideTransition}
|
TransitionComponent={LeftSlideTransition}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}>
|
open={open}
|
||||||
|
fullScreen={isMobile}>
|
||||||
<AllCollectionsHeader
|
<AllCollectionsHeader
|
||||||
onClose={close}
|
onClose={onClose}
|
||||||
collectionCount={props.collectionSummaries.size}
|
collectionCount={props.collectionSummaries.size}
|
||||||
collectionSortBy={collectionSortBy}
|
collectionSortBy={collectionSortBy}
|
||||||
setCollectionSortBy={setCollectionSortBy}
|
setCollectionSortBy={setCollectionSortBy}
|
||||||
/>
|
/>
|
||||||
<Divider />
|
<Divider />
|
||||||
<AllCollectionContent
|
<AllCollectionContent
|
||||||
collectionTile={AllCollectionTile}
|
|
||||||
collectionSummaries={sortedCollectionSummaries}
|
collectionSummaries={sortedCollectionSummaries}
|
||||||
onCollectionClick={onCollectionClick}
|
onCollectionClick={onCollectionClick}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue