Feature/cleanup manga card (#716)
* Extract manga badge components * Extract list/grid manga card * Disable default promise error handler in production
This commit is contained in:
schroda
@@ -6,74 +6,19 @@
|
|||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import Card from '@mui/material/Card';
|
|
||||||
import CardActionArea from '@mui/material/CardActionArea';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { Link as RouterLink } from 'react-router-dom';
|
|
||||||
import { Avatar, Box, Button, CardContent, Link, Stack, styled, Tooltip } from '@mui/material';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import PopupState, { bindMenu } from 'material-ui-popup-state';
|
import PopupState, { bindMenu } from 'material-ui-popup-state';
|
||||||
import { useRef, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { useLongPress } from 'use-long-press';
|
import { useLongPress } from 'use-long-press';
|
||||||
import { isMobile } from 'react-device-detect';
|
|
||||||
import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
|
import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
|
||||||
import { SpinnerImage } from '@/components/util/SpinnerImage';
|
|
||||||
import { TManga, TPartialManga } from '@/typings.ts';
|
|
||||||
import { ContinueReadingButton } from '@/components/manga/ContinueReadingButton.tsx';
|
|
||||||
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
|
|
||||||
import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx';
|
|
||||||
import { MangaActionMenuItems, SingleModeProps } from '@/components/manga/MangaActionMenuItems.tsx';
|
import { MangaActionMenuItems, SingleModeProps } from '@/components/manga/MangaActionMenuItems.tsx';
|
||||||
import { Menu } from '@/components/menu/Menu.tsx';
|
import { Menu } from '@/components/menu/Menu.tsx';
|
||||||
import { MigrateDialog } from '@/components/MigrateDialog.tsx';
|
import { MigrateDialog } from '@/components/MigrateDialog.tsx';
|
||||||
import { Mangas } from '@/lib/data/Mangas.ts';
|
|
||||||
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
|
|
||||||
import { useManageMangaLibraryState } from '@/components/manga/useManageMangaLibraryState.tsx';
|
import { useManageMangaLibraryState } from '@/components/manga/useManageMangaLibraryState.tsx';
|
||||||
|
import { MangaGridCard } from '@/components/manga/MangaGridCard.tsx';
|
||||||
const BottomGradient = styled('div')({
|
import { MangaListCard } from '@/components/manga/MangaListCard.tsx';
|
||||||
position: 'absolute',
|
import { MangaCardMode, MangaCardProps } from '@/components/manga/MangaCard.types';
|
||||||
bottom: 0,
|
import { ContinueReadingButton } from '@/components/manga/ContinueReadingButton.tsx';
|
||||||
width: '100%',
|
import { MangaBadges } from '@/components/manga/MangaBadges.tsx';
|
||||||
height: '30%',
|
|
||||||
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
|
|
||||||
});
|
|
||||||
|
|
||||||
const BottomGradientDoubledDown = styled('div')({
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 0,
|
|
||||||
width: '100%',
|
|
||||||
height: '20%',
|
|
||||||
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
|
|
||||||
});
|
|
||||||
|
|
||||||
const MangaTitle = TypographyMaxLines;
|
|
||||||
|
|
||||||
const GridMangaTitle = styled(MangaTitle)({
|
|
||||||
fontSize: '1.05rem',
|
|
||||||
});
|
|
||||||
|
|
||||||
const BadgeContainer = styled('div')({
|
|
||||||
display: 'flex',
|
|
||||||
height: 'fit-content',
|
|
||||||
borderRadius: '5px',
|
|
||||||
overflow: 'hidden',
|
|
||||||
'& p': {
|
|
||||||
color: 'white',
|
|
||||||
padding: '0.1em',
|
|
||||||
paddingInline: '0.2em',
|
|
||||||
fontSize: '1.05rem',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
type MangaCardMode = 'default' | 'source' | 'migrate.search' | 'migrate.select';
|
|
||||||
|
|
||||||
export interface MangaCardProps {
|
|
||||||
manga: TPartialManga;
|
|
||||||
gridLayout?: GridLayout;
|
|
||||||
inLibraryIndicator?: boolean;
|
|
||||||
selected?: boolean | null;
|
|
||||||
handleSelection?: SelectableCollectionReturnType<TManga['id']>['handleSelection'];
|
|
||||||
mode?: MangaCardMode;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getMangaLinkTo = (
|
const getMangaLinkTo = (
|
||||||
mode: MangaCardMode,
|
mode: MangaCardMode,
|
||||||
@@ -95,15 +40,10 @@ const getMangaLinkTo = (
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const MangaCard = (props: MangaCardProps) => {
|
export const MangaCard = (props: MangaCardProps) => {
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const optionButtonRef = useRef<HTMLButtonElement>(null);
|
|
||||||
|
|
||||||
const { manga, gridLayout, inLibraryIndicator, selected, handleSelection, mode = 'default' } = props;
|
const { manga, gridLayout, inLibraryIndicator, selected, handleSelection, mode = 'default' } = props;
|
||||||
const { id, title, downloadCount, unreadCount: unread, latestReadChapter, firstUnreadChapter, chapters } = manga;
|
const { id, latestReadChapter, firstUnreadChapter, chapters, downloadCount, unreadCount } = manga;
|
||||||
const thumbnailUrl = Mangas.getThumbnailUrl(manga);
|
|
||||||
const {
|
const {
|
||||||
options: { showContinueReadingButton, showUnreadBadge, showDownloadBadge },
|
options: { showContinueReadingButton },
|
||||||
} = useLibraryOptionsContext();
|
} = useLibraryOptionsContext();
|
||||||
|
|
||||||
const { CategorySelectComponent, updateLibraryState, isInLibrary } = useManageMangaLibraryState(manga);
|
const { CategorySelectComponent, updateLibraryState, isInLibrary } = useManageMangaLibraryState(manga);
|
||||||
@@ -155,229 +95,35 @@ export const MangaCard = (props: MangaCardProps) => {
|
|||||||
handleClick(e, context as () => {});
|
handleClick(e, context as () => {});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (gridLayout !== GridLayout.List) {
|
const MangaCardComponent = useMemo(
|
||||||
return (
|
() => (gridLayout === GridLayout.List ? MangaListCard : MangaGridCard),
|
||||||
<>
|
[gridLayout],
|
||||||
{isMigrateDialogOpen && (
|
);
|
||||||
<MigrateDialog mangaIdToMigrateTo={manga.id} onClose={() => setIsMigrateDialogOpen(false)} />
|
|
||||||
)}
|
const continueReadingButton = useMemo(
|
||||||
<PopupState variant="popover" popupId="manga-card-action-menu">
|
() => (
|
||||||
{(popupState) => (
|
|
||||||
<>
|
|
||||||
<Link
|
|
||||||
component={RouterLink}
|
|
||||||
{...longPressBind(() => popupState.open(optionButtonRef.current))}
|
|
||||||
onClick={handleClick}
|
|
||||||
to={mangaLinkTo}
|
|
||||||
sx={{ textDecoration: 'none', touchCallout: 'none' }}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
margin: '2px',
|
|
||||||
outline: selected ? '4px solid' : undefined,
|
|
||||||
borderRadius: selected ? '1px' : undefined,
|
|
||||||
outlineColor: (theme) => theme.palette.primary.main,
|
|
||||||
backgroundColor: (theme) => (selected ? theme.palette.primary.main : undefined),
|
|
||||||
'@media (hover: hover) and (pointer: fine)': {
|
|
||||||
'&:hover .manga-option-button': {
|
|
||||||
visibility: 'visible',
|
|
||||||
pointerEvents: 'all',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'&:hover .source-manga-library-state-button': {
|
|
||||||
display: isMobile ? 'none' : 'inline-flex',
|
|
||||||
},
|
|
||||||
'&:hover .source-manga-library-state-indicator': {
|
|
||||||
display: 'none',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
// force standard aspect ratio of manga covers
|
|
||||||
aspectRatio: '225/350',
|
|
||||||
display: 'flex',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardActionArea
|
|
||||||
sx={{
|
|
||||||
position: 'relative',
|
|
||||||
height: '100%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SpinnerImage
|
|
||||||
alt={title}
|
|
||||||
src={thumbnailUrl}
|
|
||||||
imgStyle={
|
|
||||||
inLibraryIndicator && isInLibrary
|
|
||||||
? {
|
|
||||||
height: '100%',
|
|
||||||
width: '100%',
|
|
||||||
objectFit: 'cover',
|
|
||||||
filter: 'brightness(0.4)',
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
height: '100%',
|
|
||||||
width: '100%',
|
|
||||||
objectFit: 'cover',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
spinnerStyle={{
|
|
||||||
display: 'grid',
|
|
||||||
placeItems: 'center',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Stack
|
|
||||||
alignItems="start"
|
|
||||||
justifyContent="space-between"
|
|
||||||
direction="row"
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 5,
|
|
||||||
left: 5,
|
|
||||||
right: 5,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<BadgeContainer>
|
|
||||||
{inLibraryIndicator && (
|
|
||||||
<Button
|
|
||||||
className="source-manga-library-state-button"
|
|
||||||
component="div"
|
|
||||||
variant="contained"
|
|
||||||
size="small"
|
|
||||||
onMouseDown={(e) => e.stopPropagation()}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
updateLibraryState();
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
display: 'none',
|
|
||||||
}}
|
|
||||||
color={isInLibrary ? 'error' : 'primary'}
|
|
||||||
>
|
|
||||||
{t(
|
|
||||||
isInLibrary
|
|
||||||
? 'manga.action.library.remove.label.action'
|
|
||||||
: 'manga.button.add_to_library',
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{inLibraryIndicator && isInLibrary && (
|
|
||||||
<Typography
|
|
||||||
className="source-manga-library-state-indicator"
|
|
||||||
sx={{ backgroundColor: 'primary.dark' }}
|
|
||||||
>
|
|
||||||
{t('manga.button.in_library')}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
{showUnreadBadge && (unread ?? 0) > 0 && (
|
|
||||||
<Typography sx={{ backgroundColor: 'primary.dark' }}>
|
|
||||||
{unread}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
{showDownloadBadge && (downloadCount ?? 0) > 0 && (
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
backgroundColor: 'success.dark',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{downloadCount}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</BadgeContainer>
|
|
||||||
<MangaOptionButton
|
|
||||||
ref={optionButtonRef}
|
|
||||||
popupState={popupState}
|
|
||||||
id={id}
|
|
||||||
selected={selected}
|
|
||||||
handleSelection={handleSelection}
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
<>
|
|
||||||
{gridLayout !== GridLayout.Comfortable && (
|
|
||||||
<>
|
|
||||||
<BottomGradient />
|
|
||||||
<BottomGradientDoubledDown />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<Stack
|
|
||||||
direction="row"
|
|
||||||
justifyContent={
|
|
||||||
gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end'
|
|
||||||
}
|
|
||||||
alignItems="end"
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 0,
|
|
||||||
width: '100%',
|
|
||||||
margin: '0.5em 0',
|
|
||||||
padding: '0 0.5em',
|
|
||||||
gap: '0.5em',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{gridLayout !== GridLayout.Comfortable && (
|
|
||||||
<Tooltip title={title} placement="top">
|
|
||||||
<GridMangaTitle
|
|
||||||
sx={{
|
|
||||||
color: 'white',
|
|
||||||
textShadow: '0px 0px 3px #000000',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</GridMangaTitle>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
<ContinueReadingButton
|
<ContinueReadingButton
|
||||||
showContinueReadingButton={showContinueReadingButton}
|
showContinueReadingButton={showContinueReadingButton}
|
||||||
isLatestChapterRead={isLatestChapterRead}
|
isLatestChapterRead={isLatestChapterRead}
|
||||||
nextChapterIndexToRead={nextChapterIndexToRead}
|
nextChapterIndexToRead={nextChapterIndexToRead}
|
||||||
mangaLinkTo={mangaLinkTo}
|
mangaLinkTo={mangaLinkTo}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
),
|
||||||
</>
|
[showContinueReadingButton, isLatestChapterRead, nextChapterIndexToRead, mangaLinkTo],
|
||||||
</CardActionArea>
|
);
|
||||||
</Card>
|
|
||||||
{gridLayout === GridLayout.Comfortable && (
|
const mangaBadges = useMemo(
|
||||||
<Tooltip title={title} placement="top">
|
() => (
|
||||||
<GridMangaTitle
|
<MangaBadges
|
||||||
sx={{
|
inLibraryIndicator={inLibraryIndicator}
|
||||||
position: 'relative',
|
isInLibrary={isInLibrary}
|
||||||
width: '100%',
|
unread={unreadCount}
|
||||||
bottom: 0,
|
downloadCount={downloadCount}
|
||||||
margin: '0.5em 0',
|
updateLibraryState={updateLibraryState}
|
||||||
padding: '0 0.5em',
|
/>
|
||||||
color: 'text.primary',
|
),
|
||||||
height: '3rem',
|
[inLibraryIndicator, isInLibrary, unreadCount, downloadCount, updateLibraryState],
|
||||||
}}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</GridMangaTitle>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Link>
|
|
||||||
{!!handleSelection && popupState.isOpen && (
|
|
||||||
<Menu {...bindMenu(popupState)}>
|
|
||||||
{(onClose, setHideMenu) => (
|
|
||||||
<MangaActionMenuItems
|
|
||||||
manga={manga as SingleModeProps['manga']}
|
|
||||||
handleSelection={handleSelection}
|
|
||||||
onClose={onClose}
|
|
||||||
setHideMenu={setHideMenu}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Menu>
|
|
||||||
)}
|
|
||||||
{CategorySelectComponent}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</PopupState>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -387,139 +133,17 @@ export const MangaCard = (props: MangaCardProps) => {
|
|||||||
<PopupState variant="popover" popupId="manga-card-action-menu">
|
<PopupState variant="popover" popupId="manga-card-action-menu">
|
||||||
{(popupState) => (
|
{(popupState) => (
|
||||||
<>
|
<>
|
||||||
<Card>
|
<MangaCardComponent
|
||||||
<CardActionArea
|
{...props}
|
||||||
component={RouterLink}
|
longPressBind={longPressBind}
|
||||||
to={mangaLinkTo}
|
|
||||||
onClick={handleClick}
|
|
||||||
{...longPressBind(() => popupState.open(optionButtonRef.current))}
|
|
||||||
sx={{
|
|
||||||
touchCallout: 'none',
|
|
||||||
'@media (hover: hover) and (pointer: fine)': {
|
|
||||||
'&:hover .manga-option-button': {
|
|
||||||
visibility: 'visible',
|
|
||||||
pointerEvents: 'all',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'&:hover .source-manga-library-state-button': {
|
|
||||||
display: isMobile ? 'none' : 'inline-flex',
|
|
||||||
},
|
|
||||||
'&:hover .source-manga-library-state-indicator': {
|
|
||||||
display: 'none',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardContent
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: 2,
|
|
||||||
position: 'relative',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
variant="rounded"
|
|
||||||
sx={{
|
|
||||||
width: 56,
|
|
||||||
height: 56,
|
|
||||||
flex: '0 0 auto',
|
|
||||||
marginRight: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SpinnerImage
|
|
||||||
spinnerStyle={{ small: true }}
|
|
||||||
imgStyle={{
|
|
||||||
objectFit: 'cover',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
imageRendering: 'pixelated',
|
|
||||||
filter:
|
|
||||||
inLibraryIndicator && isInLibrary ? 'brightness(0.4)' : undefined,
|
|
||||||
}}
|
|
||||||
alt={manga.title}
|
|
||||||
src={thumbnailUrl}
|
|
||||||
/>
|
|
||||||
</Avatar>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row',
|
|
||||||
flexGrow: 1,
|
|
||||||
width: 'min-content',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Tooltip title={title} placement="top">
|
|
||||||
<MangaTitle variant="h5">{title}</MangaTitle>
|
|
||||||
</Tooltip>
|
|
||||||
</Box>
|
|
||||||
<Stack direction="row" alignItems="center" gap="5px">
|
|
||||||
<BadgeContainer>
|
|
||||||
{inLibraryIndicator && (
|
|
||||||
<Button
|
|
||||||
className="source-manga-library-state-button"
|
|
||||||
component="div"
|
|
||||||
variant="contained"
|
|
||||||
size="small"
|
|
||||||
onMouseDown={(e) => e.stopPropagation()}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
updateLibraryState();
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
display: 'none',
|
|
||||||
}}
|
|
||||||
color={isInLibrary ? 'error' : 'primary'}
|
|
||||||
>
|
|
||||||
{t(
|
|
||||||
isInLibrary
|
|
||||||
? 'manga.action.library.remove.label.action'
|
|
||||||
: 'manga.button.add_to_library',
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{inLibraryIndicator && isInLibrary && (
|
|
||||||
<Typography
|
|
||||||
className="source-manga-library-state-indicator"
|
|
||||||
sx={{ backgroundColor: 'primary.dark' }}
|
|
||||||
>
|
|
||||||
{t('manga.button.in_library')}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
{showUnreadBadge && (unread ?? 0) > 0 && (
|
|
||||||
<Typography sx={{ backgroundColor: 'primary.dark' }}>
|
|
||||||
{unread}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
{showDownloadBadge && (downloadCount ?? 0) > 0 && (
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
backgroundColor: 'success.dark',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{downloadCount}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</BadgeContainer>
|
|
||||||
<ContinueReadingButton
|
|
||||||
showContinueReadingButton={showContinueReadingButton}
|
|
||||||
isLatestChapterRead={isLatestChapterRead}
|
|
||||||
nextChapterIndexToRead={nextChapterIndexToRead}
|
|
||||||
mangaLinkTo={mangaLinkTo}
|
|
||||||
/>
|
|
||||||
<MangaOptionButton
|
|
||||||
ref={optionButtonRef}
|
|
||||||
popupState={popupState}
|
popupState={popupState}
|
||||||
id={id}
|
handleClick={handleClick}
|
||||||
selected={selected}
|
mangaLinkTo={mangaLinkTo}
|
||||||
handleSelection={handleSelection}
|
isInLibrary={isInLibrary}
|
||||||
asCheckbox
|
inLibraryIndicator={inLibraryIndicator}
|
||||||
|
continueReadingButton={continueReadingButton}
|
||||||
|
mangaBadges={mangaBadges}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
</CardActionArea>
|
|
||||||
</Card>
|
|
||||||
{!!handleSelection && popupState.isOpen && (
|
{!!handleSelection && popupState.isOpen && (
|
||||||
<Menu {...bindMenu(popupState)}>
|
<Menu {...bindMenu(popupState)}>
|
||||||
{(onClose, setHideMenu) => (
|
{(onClose, setHideMenu) => (
|
||||||
|
|||||||
@@ -13,13 +13,14 @@ import { GridItemProps, GridStateSnapshot, VirtuosoGrid } from 'react-virtuoso';
|
|||||||
import { useLocation } from 'react-router-dom';
|
import { useLocation } from 'react-router-dom';
|
||||||
import { EmptyView } from '@/components/util/EmptyView';
|
import { EmptyView } from '@/components/util/EmptyView';
|
||||||
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
|
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
|
||||||
import { MangaCard, MangaCardProps } from '@/components/MangaCard';
|
import { MangaCard } from '@/components/MangaCard';
|
||||||
import { GridLayout } from '@/components/context/LibraryOptionsContext';
|
import { GridLayout } from '@/components/context/LibraryOptionsContext';
|
||||||
import { useLocalStorage, useSessionStorage } from '@/util/useStorage.tsx';
|
import { useLocalStorage, useSessionStorage } from '@/util/useStorage.tsx';
|
||||||
import { TManga, TPartialManga } from '@/typings.ts';
|
import { TManga, TPartialManga } from '@/typings.ts';
|
||||||
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
|
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
|
||||||
import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab.tsx';
|
import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab.tsx';
|
||||||
import { AppStorage } from '@/util/AppStorage.ts';
|
import { AppStorage } from '@/util/AppStorage.ts';
|
||||||
|
import { MangaCardProps } from '@/components/manga/MangaCard.types.tsx';
|
||||||
|
|
||||||
const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
|
const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
|
||||||
<Grid {...props} ref={ref} container sx={{ paddingLeft: '5px', paddingRight: '13px' }}>
|
<Grid {...props} ref={ref} container sx={{ paddingLeft: '5px', paddingRight: '13px' }}>
|
||||||
|
|||||||
88
src/components/manga/MangaBadges.tsx
Normal file
88
src/components/manga/MangaBadges.tsx
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (C) Contributors to the Suwayomi project
|
||||||
|
*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import styled from '@mui/material/styles/styled';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import Button from '@mui/material/Button/Button';
|
||||||
|
import Typography from '@mui/material/Typography/Typography';
|
||||||
|
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
|
||||||
|
|
||||||
|
const BadgeContainer = styled('div')({
|
||||||
|
display: 'flex',
|
||||||
|
height: 'fit-content',
|
||||||
|
borderRadius: '5px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
'& p': {
|
||||||
|
color: 'white',
|
||||||
|
padding: '0.1em',
|
||||||
|
paddingInline: '0.2em',
|
||||||
|
fontSize: '1.05rem',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const MangaBadges = ({
|
||||||
|
inLibraryIndicator,
|
||||||
|
updateLibraryState,
|
||||||
|
isInLibrary,
|
||||||
|
unread,
|
||||||
|
downloadCount,
|
||||||
|
}: {
|
||||||
|
inLibraryIndicator?: boolean;
|
||||||
|
updateLibraryState: () => void;
|
||||||
|
isInLibrary: boolean;
|
||||||
|
unread?: number;
|
||||||
|
downloadCount?: number;
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const {
|
||||||
|
options: { showUnreadBadge, showDownloadBadge },
|
||||||
|
} = useLibraryOptionsContext();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BadgeContainer>
|
||||||
|
{inLibraryIndicator && (
|
||||||
|
<Button
|
||||||
|
className="source-manga-library-state-button"
|
||||||
|
component="div"
|
||||||
|
variant="contained"
|
||||||
|
size="small"
|
||||||
|
onMouseDown={(e) => e.stopPropagation()}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
updateLibraryState();
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
display: 'none',
|
||||||
|
}}
|
||||||
|
color={isInLibrary ? 'error' : 'primary'}
|
||||||
|
>
|
||||||
|
{t(isInLibrary ? 'manga.action.library.remove.label.action' : 'manga.button.add_to_library')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{inLibraryIndicator && isInLibrary && (
|
||||||
|
<Typography className="source-manga-library-state-indicator" sx={{ backgroundColor: 'primary.dark' }}>
|
||||||
|
{t('manga.button.in_library')}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
{showUnreadBadge && (unread ?? 0) > 0 && (
|
||||||
|
<Typography sx={{ backgroundColor: 'primary.dark' }}>{unread}</Typography>
|
||||||
|
)}
|
||||||
|
{showDownloadBadge && (downloadCount ?? 0) > 0 && (
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
backgroundColor: 'success.dark',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{downloadCount}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</BadgeContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
35
src/components/manga/MangaCard.types.tsx
Normal file
35
src/components/manga/MangaCard.types.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (C) Contributors to the Suwayomi project
|
||||||
|
*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { LongPressPointerHandlers, LongPressResult } from 'use-long-press/lib/use-long-press.types';
|
||||||
|
import { PopupState } from 'material-ui-popup-state/hooks';
|
||||||
|
import { TManga, TPartialManga } from '@/typings.ts';
|
||||||
|
import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx';
|
||||||
|
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
|
||||||
|
import { useManageMangaLibraryState } from '@/components/manga/useManageMangaLibraryState.tsx';
|
||||||
|
|
||||||
|
export type MangaCardMode = 'default' | 'source' | 'migrate.search' | 'migrate.select';
|
||||||
|
|
||||||
|
export interface MangaCardProps {
|
||||||
|
manga: TPartialManga;
|
||||||
|
gridLayout?: GridLayout;
|
||||||
|
inLibraryIndicator?: boolean;
|
||||||
|
selected?: boolean | null;
|
||||||
|
handleSelection?: SelectableCollectionReturnType<TManga['id']>['handleSelection'];
|
||||||
|
mode?: MangaCardMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SpecificMangaCardProps = Omit<MangaCardProps, 'mode'> &
|
||||||
|
Pick<ReturnType<typeof useManageMangaLibraryState>, 'isInLibrary'> & {
|
||||||
|
longPressBind: LongPressResult<LongPressPointerHandlers>;
|
||||||
|
popupState: PopupState;
|
||||||
|
handleClick: (event: React.MouseEvent | React.TouchEvent) => void;
|
||||||
|
mangaLinkTo: string;
|
||||||
|
continueReadingButton: JSX.Element;
|
||||||
|
mangaBadges: JSX.Element;
|
||||||
|
};
|
||||||
207
src/components/manga/MangaGridCard.tsx
Normal file
207
src/components/manga/MangaGridCard.tsx
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (C) Contributors to the Suwayomi project
|
||||||
|
*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Link from '@mui/material/Link/Link';
|
||||||
|
import { Link as RouterLink } from 'react-router-dom';
|
||||||
|
import Box from '@mui/material/Box/Box';
|
||||||
|
import Card from '@mui/material/Card/Card';
|
||||||
|
import CardActionArea from '@mui/material/CardActionArea/CardActionArea';
|
||||||
|
import Stack from '@mui/material/Stack/Stack';
|
||||||
|
import Tooltip from '@mui/material/Tooltip/Tooltip';
|
||||||
|
import styled from '@mui/material/styles/styled';
|
||||||
|
import { isMobile } from 'react-device-detect';
|
||||||
|
import { useRef } from 'react';
|
||||||
|
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
|
||||||
|
import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx';
|
||||||
|
import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx';
|
||||||
|
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
|
||||||
|
import { Mangas } from '@/lib/data/Mangas.ts';
|
||||||
|
import { SpecificMangaCardProps } from '@/components/manga/MangaCard.types.tsx';
|
||||||
|
|
||||||
|
const BottomGradient = styled('div')({
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: '30%',
|
||||||
|
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
|
||||||
|
});
|
||||||
|
|
||||||
|
const BottomGradientDoubledDown = styled('div')({
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: '20%',
|
||||||
|
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
|
||||||
|
});
|
||||||
|
|
||||||
|
const GridMangaTitle = styled(TypographyMaxLines)({
|
||||||
|
fontSize: '1.05rem',
|
||||||
|
});
|
||||||
|
|
||||||
|
export const MangaGridCard = ({
|
||||||
|
manga,
|
||||||
|
longPressBind,
|
||||||
|
popupState,
|
||||||
|
handleClick,
|
||||||
|
mangaLinkTo,
|
||||||
|
selected,
|
||||||
|
inLibraryIndicator,
|
||||||
|
isInLibrary,
|
||||||
|
gridLayout,
|
||||||
|
handleSelection,
|
||||||
|
continueReadingButton,
|
||||||
|
mangaBadges,
|
||||||
|
}: SpecificMangaCardProps) => {
|
||||||
|
const optionButtonRef = useRef<HTMLButtonElement>(null);
|
||||||
|
|
||||||
|
const { id, title } = manga;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
component={RouterLink}
|
||||||
|
{...longPressBind(() => popupState.open(optionButtonRef.current))}
|
||||||
|
onClick={handleClick}
|
||||||
|
to={mangaLinkTo}
|
||||||
|
sx={{ textDecoration: 'none', touchCallout: 'none' }}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
margin: '2px',
|
||||||
|
outline: selected ? '4px solid' : undefined,
|
||||||
|
borderRadius: selected ? '1px' : undefined,
|
||||||
|
outlineColor: (theme) => theme.palette.primary.main,
|
||||||
|
backgroundColor: (theme) => (selected ? theme.palette.primary.main : undefined),
|
||||||
|
'@media (hover: hover) and (pointer: fine)': {
|
||||||
|
'&:hover .manga-option-button': {
|
||||||
|
visibility: 'visible',
|
||||||
|
pointerEvents: 'all',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'&:hover .source-manga-library-state-button': {
|
||||||
|
display: isMobile ? 'none' : 'inline-flex',
|
||||||
|
},
|
||||||
|
'&:hover .source-manga-library-state-indicator': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Card
|
||||||
|
sx={{
|
||||||
|
// force standard aspect ratio of manga covers
|
||||||
|
aspectRatio: '225/350',
|
||||||
|
display: 'flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CardActionArea
|
||||||
|
sx={{
|
||||||
|
position: 'relative',
|
||||||
|
height: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SpinnerImage
|
||||||
|
alt={title}
|
||||||
|
src={Mangas.getThumbnailUrl(manga)}
|
||||||
|
imgStyle={
|
||||||
|
inLibraryIndicator && isInLibrary
|
||||||
|
? {
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
objectFit: 'cover',
|
||||||
|
filter: 'brightness(0.4)',
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
objectFit: 'cover',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
spinnerStyle={{
|
||||||
|
display: 'grid',
|
||||||
|
placeItems: 'center',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Stack
|
||||||
|
alignItems="start"
|
||||||
|
justifyContent="space-between"
|
||||||
|
direction="row"
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 5,
|
||||||
|
left: 5,
|
||||||
|
right: 5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{mangaBadges}
|
||||||
|
<MangaOptionButton
|
||||||
|
ref={optionButtonRef}
|
||||||
|
popupState={popupState}
|
||||||
|
id={id}
|
||||||
|
selected={selected}
|
||||||
|
handleSelection={handleSelection}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
<>
|
||||||
|
{gridLayout !== GridLayout.Comfortable && (
|
||||||
|
<>
|
||||||
|
<BottomGradient />
|
||||||
|
<BottomGradientDoubledDown />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
justifyContent={gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end'}
|
||||||
|
alignItems="end"
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
|
width: '100%',
|
||||||
|
margin: '0.5em 0',
|
||||||
|
padding: '0 0.5em',
|
||||||
|
gap: '0.5em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{gridLayout !== GridLayout.Comfortable && (
|
||||||
|
<Tooltip title={title} placement="top">
|
||||||
|
<GridMangaTitle
|
||||||
|
sx={{
|
||||||
|
color: 'white',
|
||||||
|
textShadow: '0px 0px 3px #000000',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</GridMangaTitle>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{continueReadingButton}
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
</CardActionArea>
|
||||||
|
</Card>
|
||||||
|
{gridLayout === GridLayout.Comfortable && (
|
||||||
|
<Tooltip title={title} placement="top">
|
||||||
|
<GridMangaTitle
|
||||||
|
sx={{
|
||||||
|
position: 'relative',
|
||||||
|
width: '100%',
|
||||||
|
bottom: 0,
|
||||||
|
margin: '0.5em 0',
|
||||||
|
padding: '0 0.5em',
|
||||||
|
color: 'text.primary',
|
||||||
|
height: '3rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</GridMangaTitle>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
124
src/components/manga/MangaListCard.tsx
Normal file
124
src/components/manga/MangaListCard.tsx
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (C) Contributors to the Suwayomi project
|
||||||
|
*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Card from '@mui/material/Card/Card';
|
||||||
|
import CardContent from '@mui/material/CardContent/CardContent';
|
||||||
|
import CardActionArea from '@mui/material/CardActionArea/CardActionArea';
|
||||||
|
import Avatar from '@mui/material/Avatar/Avatar';
|
||||||
|
import Box from '@mui/material/Box/Box';
|
||||||
|
import Stack from '@mui/material/Stack/Stack';
|
||||||
|
import Tooltip from '@mui/material/Tooltip/Tooltip';
|
||||||
|
import { isMobile } from 'react-device-detect';
|
||||||
|
import { Link as RouterLink } from 'react-router-dom';
|
||||||
|
import { useRef } from 'react';
|
||||||
|
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
|
||||||
|
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
|
||||||
|
import { SpecificMangaCardProps } from '@/components/manga/MangaCard.types.tsx';
|
||||||
|
import { Mangas } from '@/lib/data/Mangas.ts';
|
||||||
|
import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx';
|
||||||
|
|
||||||
|
export const MangaListCard = ({
|
||||||
|
manga,
|
||||||
|
longPressBind,
|
||||||
|
popupState,
|
||||||
|
handleClick,
|
||||||
|
mangaLinkTo,
|
||||||
|
selected,
|
||||||
|
inLibraryIndicator,
|
||||||
|
isInLibrary,
|
||||||
|
handleSelection,
|
||||||
|
continueReadingButton,
|
||||||
|
mangaBadges,
|
||||||
|
}: SpecificMangaCardProps) => {
|
||||||
|
const optionButtonRef = useRef<HTMLButtonElement>(null);
|
||||||
|
|
||||||
|
const { id, title } = manga;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardActionArea
|
||||||
|
component={RouterLink}
|
||||||
|
to={mangaLinkTo}
|
||||||
|
onClick={handleClick}
|
||||||
|
{...longPressBind(() => popupState.open(optionButtonRef.current))}
|
||||||
|
sx={{
|
||||||
|
touchCallout: 'none',
|
||||||
|
'@media (hover: hover) and (pointer: fine)': {
|
||||||
|
'&:hover .manga-option-button': {
|
||||||
|
visibility: 'visible',
|
||||||
|
pointerEvents: 'all',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'&:hover .source-manga-library-state-button': {
|
||||||
|
display: isMobile ? 'none' : 'inline-flex',
|
||||||
|
},
|
||||||
|
'&:hover .source-manga-library-state-indicator': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CardContent
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: 2,
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
variant="rounded"
|
||||||
|
sx={{
|
||||||
|
width: 56,
|
||||||
|
height: 56,
|
||||||
|
flex: '0 0 auto',
|
||||||
|
marginRight: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SpinnerImage
|
||||||
|
spinnerStyle={{ small: true }}
|
||||||
|
imgStyle={{
|
||||||
|
objectFit: 'cover',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
imageRendering: 'pixelated',
|
||||||
|
filter: inLibraryIndicator && isInLibrary ? 'brightness(0.4)' : undefined,
|
||||||
|
}}
|
||||||
|
alt={manga.title}
|
||||||
|
src={Mangas.getThumbnailUrl(manga)}
|
||||||
|
/>
|
||||||
|
</Avatar>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
flexGrow: 1,
|
||||||
|
width: 'min-content',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tooltip title={title} placement="top">
|
||||||
|
<TypographyMaxLines variant="h5">{title}</TypographyMaxLines>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
<Stack direction="row" alignItems="center" gap="5px">
|
||||||
|
{mangaBadges}
|
||||||
|
{continueReadingButton}
|
||||||
|
<MangaOptionButton
|
||||||
|
ref={optionButtonRef}
|
||||||
|
popupState={popupState}
|
||||||
|
id={id}
|
||||||
|
selected={selected}
|
||||||
|
handleSelection={handleSelection}
|
||||||
|
asCheckbox
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</CardContent>
|
||||||
|
</CardActionArea>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -21,7 +21,7 @@ import { LangSelect } from '@/components/navbar/action/LangSelect';
|
|||||||
import { MangaGrid } from '@/components/MangaGrid';
|
import { MangaGrid } from '@/components/MangaGrid';
|
||||||
import { useDebounce } from '@/util/useDebounce.ts';
|
import { useDebounce } from '@/util/useDebounce.ts';
|
||||||
import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
|
import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
|
||||||
import { MangaCardProps } from '@/components/MangaCard.tsx';
|
import { MangaCardProps } from '@/components/manga/MangaCard.types.tsx';
|
||||||
|
|
||||||
type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean };
|
type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean };
|
||||||
type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
|
type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
|
||||||
|
|||||||
@@ -6,6 +6,11 @@
|
|||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const defaultPromiseErrorHandler = (name: string) => (error: any) =>
|
export const defaultPromiseErrorHandler = (name: string) => (error: any) => {
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
console.error(`${name} failed due to`, error);
|
console.error(`${name} failed due to`, error);
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user