beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

random refactoring

Browse source
This commit is contained in:
Abhinav 2022-06-25 15:52:50 +05:30
parent 4cd9cad5b8
commit 42f7cad252
13 changed files with 72 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Collections/AllCollections/CollectionCard.tsx
View file

@ -1,29 +1,29 @@
import { Box } from '@mui/material';
import { Typography } from '@mui/material';
import constants from 'utils/strings/constants';
import React from 'react';
import CollectionCard from '../CollectionCard';
import { CollectionSummary } from 'types/collection';
import { AllCollectionTileText } from '../styledComponents';
import { AllCollectionTile, AllCollectionTileText } from '../styledComponents';
interface Iprops {
collectionTile: any;
collectionSummary: CollectionSummary;
onCollectionClick: (collectionID: number) => void;
}
export default function AllCollectionCard({
collectionTile,
onCollectionClick,
collectionSummary,
}: Iprops) {
return (
<CollectionCard
collectionTile={collectionTile}
collectionTile={AllCollectionTile}
latestFile={collectionSummary.latestFile}
onClick={() => onCollectionClick(collectionSummary.id)}>
<AllCollectionTileText zIndex={1}>
<Box fontWeight={'bold'}>{collectionSummary.name}</Box>
<Box>{constants.PHOTO_COUNT(collectionSummary.fileCount)}</Box>
<Typography>{collectionSummary.name}</Typography>
<Typography variant="body2" color="text.secondary">
{constants.PHOTO_COUNT(collectionSummary.fileCount)}
</Typography>
</AllCollectionTileText>
</CollectionCard>
);

36
src/components/Collections/CollectionBar/CollectionCardWithActiveIndicator.tsx
View file

@ -1,36 +0,0 @@
import React from 'react';
import { EnteFile } from 'types/file';
import {
CollectionTileWrapper,
ActiveIndicator,
CollectionBarTile,
CollectionBarTileText,
} from '../styledComponents';
import CollectionCard from '../CollectionCard';
import TruncateText from 'components/TruncateText';
interface Iprops {
active: boolean;
latestFile: EnteFile;
collectionName: string;
onClick: () => void;
}
const CollectionCardWithActiveIndicator = React.forwardRef(
(props: Iprops, ref: any) => {
const { active, collectionName, ...others } = props;
return (
<CollectionTileWrapper ref={ref}>
<CollectionCard collectionTile={CollectionBarTile} {...others}>
<CollectionBarTileText>
<TruncateText text={collectionName} />
</CollectionBarTileText>
</CollectionCard>
{active && <ActiveIndicator />}
</CollectionTileWrapper>
);
}
);
export default CollectionCardWithActiveIndicator;

34
src/components/Collections/CollectionListBar/CollectionCard.tsx Normal file
View file

@ -0,0 +1,34 @@
import React from 'react';
import { EnteFile } from 'types/file';
import {
ActiveIndicator,
CollectionBarTile,
CollectionBarTileText,
} from '../styledComponents';
import CollectionCard from '../CollectionCard';
import TruncateText from 'components/TruncateText';
import { Box } from '@mui/material';
interface Iprops {
active: boolean;
latestFile: EnteFile;
collectionName: string;
onClick: () => void;
}
const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => {
const { active, collectionName, ...others } = props;
return (
<Box ref={ref}>
<CollectionCard collectionTile={CollectionBarTile} {...others}>
<CollectionBarTileText zIndex={1}>
<TruncateText text={collectionName} />
</CollectionBarTileText>
</CollectionCard>
{active && <ActiveIndicator />}
</Box>
);
});
export default CollectionListBarCard;

0
src/components/Collections/CollectionBar/CreateCollectionTile.tsx → src/components/Collections/CollectionListBar/CreateCollectionTile.tsx
View file

2
src/components/Collections/CollectionBar/ScrollButton.tsx → src/components/Collections/CollectionListBar/ScrollButton.tsx
View file

@ -15,7 +15,7 @@ const Wrapper = styled('button')<{ direction: SCROLL_DIRECTION }>`
border-radius: 50%;
background-color: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.primary};
color: ${({ theme }) => theme.palette.primary.main};
${(props) =>
props.direction === SCROLL_DIRECTION.LEFT

6
src/components/Collections/CollectionBar/index.tsx → src/components/Collections/CollectionListBar/index.tsx
View file

@ -1,4 +1,4 @@
import ScrollButton from 'components/Collections/CollectionBar/ScrollButton';
import ScrollButton from 'components/Collections/CollectionListBar/ScrollButton';
import React, { useEffect, useMemo } from 'react';
import { CollectionSummaries } from 'types/collection';
import constants from 'utils/strings/constants';
@ -9,7 +9,7 @@ import {
ScrollContainer,
CollectionListWrapper,
} from 'components/Collections/styledComponents';
import CollectionCardWithActiveIndicator from 'components/Collections/CollectionBar/CollectionCardWithActiveIndicator';
import CollectionListBarCard from 'components/Collections/CollectionListBar/CollectionCard';
import useComponentScroll, { SCROLL_DIRECTION } from 'hooks/useComponentScroll';
import useWindowSize from 'hooks/useWindowSize';
import LinkButton from 'components/pages/gallery/LinkButton';
@ -92,7 +92,7 @@ export default function CollectionListBar(props: IProps) {
)}
<ScrollContainer ref={componentRef}>
{sortedCollectionSummary.map((item) => (
<CollectionCardWithActiveIndicator
<CollectionListBarCard
key={item.id}
latestFile={item.latestFile}
ref={collectionChipsRef[item.id]}

8
src/components/Collections/CollectionShare/index.tsx
View file

@ -12,15 +12,15 @@ import PublicShare from './publicShare';
import { AppContext } from 'pages/_app';
interface Props {
show: boolean;
onHide: () => void;
open: boolean;
onClose: () => void;
collection: Collection;
}
function CollectionShare(props: Props) {
const { isMobile } = useContext(AppContext);
const handleClose = dialogCloseHandler({
onClose: props.onHide,
onClose: props.onClose,
});
if (!props.collection) {
@ -30,7 +30,7 @@ function CollectionShare(props: Props) {
return (
<>
<CollectionShareContainer
open={props.show}
open={props.open}
onClose={handleClose}
fullScreen={isMobile}>
<DialogTitleWithCloseButton onClose={handleClose}>

14
src/components/Collections/index.tsx
View file

@ -1,5 +1,5 @@
import { Collection, CollectionSummaries } from 'types/collection';
import CollectionListBar from 'components/Collections/CollectionBar';
import CollectionListBar from 'components/Collections/CollectionListBar';
import React, { useEffect, useRef, useState } from 'react';
import AllCollections from 'components/Collections/AllCollections';
import CollectionInfoWithOptions from 'components/Collections/CollectionInfoWithOptions';
@ -79,25 +79,29 @@ export default function Collections(props: Iprops) {
return <></>;
}
const closeAllCollections = () => setAllCollectionView(false);
const openAllCollections = () => setAllCollectionView(true);
const closeCollectionShare = () => setCollectionShareModalView(false);
return (
<>
<CollectionListBar
activeCollection={activeCollectionID}
setActiveCollection={setActiveCollectionID}
collectionSummaries={collectionSummaries}
showAllCollections={() => setAllCollectionView(true)}
showAllCollections={openAllCollections}
/>
<AllCollections
open={allCollectionView}
onClose={() => setAllCollectionView(false)}
onClose={closeAllCollections}
collectionSummaries={collectionSummaries}
setActiveCollection={setActiveCollectionID}
/>
<CollectionShare
show={collectionShareModalView}
onHide={() => setCollectionShareModalView(false)}
open={collectionShareModalView}
onClose={closeCollectionShare}
collection={activeCollection.current}
/>
</>

13
src/components/Collections/styledComponents.ts
View file

@ -27,6 +27,9 @@ export const ScrollContainer = styled('div')`
overflow: auto;
scroll-behavior: smooth;
display: flex;
& > *:not(:last-child) {
margin-right: 4px;
}
`;
export const CollectionTile = styled('div')`
@ -44,13 +47,9 @@ export const CollectionTile = styled('div')`
}
`;
export const CollectionTileWrapper = styled('div')`
margin-right: 4px;
`;
export const ActiveIndicator = styled('div')`
height: 3px;
background-color: ${({ theme }) => theme.palette.text.primary};
background-color: ${({ theme }) => theme.palette.primary.main};
margin-top: 18px;
border-radius: 2px;
`;
@ -81,9 +80,7 @@ export const ResultPreviewTile = styled(CollectionTile)`
`;
export const CollectionTileTextOverlay = styled(Overlay)`
font-size: 14px;
line-height: 20px;
padding: 4px 6px;
padding: 8px;
`;
export const CollectionBarTileText = styled(CollectionTileTextOverlay)`

6
src/components/TruncateText.tsx
View file

@ -1,7 +1,7 @@
import Tooltip from '@mui/material/Tooltip';
import React from 'react';
import { styled } from '@mui/material';
export const EllipseText = styled('div')`
import { styled, Typography } from '@mui/material';
export const EllipseText = styled(Typography)`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -10,7 +10,7 @@ export const EllipseText = styled('div')`
export default function TruncateText({ text }) {
return (
<Tooltip title={text}>
<EllipseText>{text}</EllipseText>
<EllipseText variant="body2">{text}</EllipseText>
</Tooltip>
);
}

2
src/components/pages/gallery/SelectedFileOptions.tsx
View file

@ -1,5 +1,5 @@
import React, { useContext, useEffect, useState } from 'react';
import { SetCollectionSelectorAttributes } from './CollectionSelector';
import { SetCollectionSelectorAttributes } from 'types/gallery';
import { FluidContainer } from 'components/Container';
import constants from 'utils/strings/constants';
import { COLLECTION_OPS_TYPE } from 'utils/collection';

2
src/components/pages/gallery/Upload.tsx
View file

@ -6,7 +6,7 @@ import UploadProgress from '../../UploadProgress';
import UploadStrategyChoiceModal from './UploadStrategyChoiceModal';
import { SetCollectionNamerAttributes } from '../../Collections/CollectionNamer';
import { SetCollectionSelectorAttributes } from './CollectionSelector';
import { SetCollectionSelectorAttributes } from 'types/gallery';
import { GalleryContext } from 'pages/gallery';
import { AppContext } from 'pages/_app';
import { logError } from 'utils/sentry';

4
src/types/gallery/index.ts
View file

@ -1,3 +1,4 @@
import { CollectionSelectorAttributes } from 'components/Collections/CollectionSelector';
import { TimeStampListItem } from 'components/PhotoList';
import { Collection } from 'types/collection';
import { EnteFile } from 'types/file';
@ -11,6 +12,9 @@ export type SelectedState = {
export type SetFiles = React.Dispatch<React.SetStateAction<EnteFile[]>>;
export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
export type SetLoading = React.Dispatch<React.SetStateAction<Boolean>>;
export type SetCollectionSelectorAttributes = React.Dispatch<
React.SetStateAction<CollectionSelectorAttributes>
>;
export type GalleryContextType = {
thumbs: Map<number, string>;