Add counter to upload sections (#1570)

This commit is contained in:
Vishnu Mohandas 2024-01-19 13:57:07 +05:30 committed by GitHub
commit ae3606384a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 6 deletions

View file

@ -12,6 +12,7 @@ import UploadProgressContext from 'contexts/uploadProgress';
import { t } from 'i18next'; import { t } from 'i18next';
import { UPLOAD_STAGES } from 'constants/upload'; import { UPLOAD_STAGES } from 'constants/upload';
import { CaptionedText } from 'components/CaptionedText';
export const InProgressSection = () => { export const InProgressSection = () => {
const { inProgressUploads, hasLivePhotos, uploadFileNames, uploadStage } = const { inProgressUploads, hasLivePhotos, uploadFileNames, uploadStage } =
@ -44,9 +45,14 @@ export const InProgressSection = () => {
return ( return (
<UploadProgressSection> <UploadProgressSection>
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}> <UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
{uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA <CaptionedText
? t('INPROGRESS_METADATA_EXTRACTION') mainText={
: t('INPROGRESS_UPLOADS')} uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA
? t('INPROGRESS_METADATA_EXTRACTION')
: t('INPROGRESS_UPLOADS')
}
subText={String(inProgressUploads?.length ?? 0)}
/>
</UploadProgressSectionTitle> </UploadProgressSectionTitle>
<UploadProgressSectionContent> <UploadProgressSectionContent>
{hasLivePhotos && ( {hasLivePhotos && (

View file

@ -1,6 +1,5 @@
import React, { useContext } from 'react'; import { useContext } from 'react';
import ItemList from 'components/ItemList'; import ItemList from 'components/ItemList';
import { Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { ResultItemContainer } from './styledComponents'; import { ResultItemContainer } from './styledComponents';
import { UPLOAD_RESULT } from 'constants/upload'; import { UPLOAD_RESULT } from 'constants/upload';
@ -11,6 +10,7 @@ import {
UploadProgressSectionTitle, UploadProgressSectionTitle,
} from './section'; } from './section';
import UploadProgressContext from 'contexts/uploadProgress'; import UploadProgressContext from 'contexts/uploadProgress';
import { CaptionedText } from 'components/CaptionedText';
export interface ResultSectionProps { export interface ResultSectionProps {
uploadResult: UPLOAD_RESULT; uploadResult: UPLOAD_RESULT;
@ -46,7 +46,10 @@ export const ResultSection = (props: ResultSectionProps) => {
return ( return (
<UploadProgressSection> <UploadProgressSection>
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}> <UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
<Typography> {props.sectionTitle}</Typography> <CaptionedText
mainText={props.sectionTitle}
subText={String(fileList?.length ?? 0)}
/>
</UploadProgressSectionTitle> </UploadProgressSectionTitle>
<UploadProgressSectionContent> <UploadProgressSectionContent>
{props.sectionInfo && ( {props.sectionInfo && (