ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier for auto formatting (#231)

Browse Source 
* [Prettier] Add "prettier"

Makes the formatting of the code consistent.
By using the eslint-plugin-prettier formatting issues will be highlighted as a lint error.
These errors will be auto fixed by running "lint --fix" (which can be done automatically on file save)

* [Prettier] Add "prettier" - Fix formatting
This commit is contained in:
Daniel
2023-02-06 10:06:33 +01:00
committed by GitHub
parent 2eeea41a45
commit 4e0a860dfd
101 changed files with 2065 additions and 1886 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/navbar/DefaultNavBar.tsx
View File

@@ -39,37 +39,43 @@ const navbarItems: Array<NavbarItem> = [
SelectedIconComponent: CollectionsBookmarkIcon,
IconComponent: CollectionsOutlinedBookmarkIcon,
show: 'both',
}, {
},
{
path: '/updates',
title: 'Updates',
SelectedIconComponent: NewReleasesIcon,
IconComponent: NewReleasesOutlinedIcon,
show: 'both',
}, {
},
{
path: '/extensions',
title: 'Extensions',
SelectedIconComponent: ExtensionIcon,
IconComponent: ExtensionOutlinedIcon,
show: 'desktop',
}, {
},
{
path: '/sources',
title: 'Sources',
SelectedIconComponent: ExploreIcon,
IconComponent: ExploreOutlinedIcon,
show: 'desktop',
}, {
},
{
path: '/browse',
title: 'Browse',
SelectedIconComponent: ExploreIcon,
IconComponent: ExploreOutlinedIcon,
show: 'mobile',
}, {
},
{
path: '/downloads',
title: 'Downloads',
SelectedIconComponent: GetAppIcon,
IconComponent: GetAppOutlinedIcon,
show: 'both',
}, {
},
{
path: '/settings',
title: 'Settings',
SelectedIconComponent: SettingsIcon,
@@ -94,7 +100,9 @@ export default function DefaultNavBar() {
let navbar = <></>;
if (isMobileWidth) {
if (isMainRoute) {
navbar = <MobileBottomBar navBarItems={navbarItems.filter((it) => it.show !== 'desktop')} />;
navbar = (
<MobileBottomBar navBarItems={navbarItems.filter((it) => it.show !== 'desktop')} />
);
}
} else {
navbar = <DesktopSideBar navBarItems={navbarItems.filter((it) => it.show !== 'mobile')} />;
@@ -124,7 +132,12 @@ export default function DefaultNavBar() {
<ArrowBack />
</IconButton>
)}
<Typography variant={isMobileWidth ? 'h6' : 'h5'} sx={{ flexGrow: 1 }} noWrap textOverflow="ellipsis">
<Typography
variant={isMobileWidth ? 'h6' : 'h5'}
sx={{ flexGrow: 1 }}
noWrap
textOverflow="ellipsis"
>
{title}
</Typography>
{action}
@@ -137,7 +150,7 @@ export default function DefaultNavBar() {
}
interface INavbarToolbarProps {
children?: React.ReactNode
children?: React.ReactNode;
}
export const NavbarToolbar: React.FC<INavbarToolbarProps> = ({ children }) => {

12
src/components/navbar/NavBarContextProvider.tsx
View File

@@ -8,11 +8,11 @@
import React, { useState } from 'react';
import NavBarContext from 'components/context/NavbarContext';
interface IProps{
children: React.ReactNode
interface IProps {
children: React.ReactNode;
}
export default function NavBarProvider({ children }:IProps) {
export default function NavBarProvider({ children }: IProps) {
const [defaultBackTo, setDefaultBackTo] = useState<string | undefined>();
const [title, setTitle] = useState<string>('Tachidesk');
const [action, setAction] = useState<any>(<div />);
@@ -36,9 +36,5 @@ export default function NavBarProvider({ children }:IProps) {
override,
setOverride,
};
return (
<NavBarContext.Provider value={value}>
{children}
</NavBarContext.Provider>
);
return <NavBarContext.Provider value={value}>{children}</NavBarContext.Provider>;
}

61
src/components/navbar/ReaderNavBar.tsx
View File

@@ -104,28 +104,23 @@ const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
}));
interface IProps {
settings: IReaderSettings
setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void
manga: IManga | IMangaCard
chapter: IChapter
curPage: number
settings: IReaderSettings;
setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;
manga: IManga | IMangaCard;
chapter: IChapter;
curPage: number;
}
export default function ReaderNavBar(props: IProps) {
const history = useHistory();
const backTo = useBackTo();
const location = useLocation<{
prevDrawerOpen?: boolean,
prevSettingsCollapseOpen?: boolean
prevDrawerOpen?: boolean;
prevSettingsCollapseOpen?: boolean;
}>();
const {
prevDrawerOpen,
prevSettingsCollapseOpen,
} = location.state ?? {};
const { prevDrawerOpen, prevSettingsCollapseOpen } = location.state ?? {};
const {
settings, setSettingValue, manga, chapter, curPage,
} = props;
const { settings, setSettingValue, manga, chapter, curPage } = props;
const [drawerOpen, setDrawerOpen] = useState(settings.staticNav || prevDrawerOpen);
const [updateDrawerOnRender, setUpdateDrawerOnRender] = useState(true);
@@ -164,8 +159,8 @@ export default function ReaderNavBar(props: IProps) {
useEffect(() => {
window.addEventListener('scroll', handleScroll);
const rootEl:HTMLDivElement = document.querySelector('#root')!;
const mainContainer:HTMLDivElement = document.querySelector('#appMainContainer')!;
const rootEl: HTMLDivElement = document.querySelector('#root')!;
const mainContainer: HTMLDivElement = document.querySelector('#appMainContainer')!;
// main container and root div need to change styles...
rootEl.style.display = 'flex';
@@ -176,7 +171,7 @@ export default function ReaderNavBar(props: IProps) {
mainContainer.style.display = 'block';
window.removeEventListener('scroll', handleScroll);
};
}, [handleScroll]);// handleScroll changes on every render
}, [handleScroll]); // handleScroll changes on every render
const handleClose = () => {
if (backTo.back) history.goBack();
@@ -194,13 +189,13 @@ export default function ReaderNavBar(props: IProps) {
mountOnEnter
unmountOnExit
>
<Root sx={{
position: settings.staticNav ? 'sticky' : 'fixed',
}}
<Root
sx={{
position: settings.staticNav ? 'sticky' : 'fixed',
}}
>
<header>
{!settings.staticNav
&& (
{!settings.staticNav && (
<IconButton
edge="start"
color="inherit"
@@ -212,7 +207,12 @@ export default function ReaderNavBar(props: IProps) {
<KeyboardArrowLeftIcon />
</IconButton>
)}
<Typography variant="h1" textOverflow="ellipsis" overflow="hidden" sx={{ py: 1 }}>
<Typography
variant="h1"
textOverflow="ellipsis"
overflow="hidden"
sx={{ py: 1 }}
>
{chapter.name}
</Typography>
<IconButton
@@ -262,12 +262,9 @@ export default function ReaderNavBar(props: IProps) {
</Collapse>
<Divider sx={{ my: 1, mx: 2 }} />
<Navigation>
<span>
{`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
</span>
<span>{`Currently on page ${curPage + 1} of ${chapter.pageCount}`}</span>
<ChapterNavigation>
{chapter.index > 1
&& (
{chapter.index > 1 && (
<Link
replace
to={{
@@ -287,8 +284,7 @@ export default function ReaderNavBar(props: IProps) {
</Button>
</Link>
)}
{chapter.index < chapter.chapterCount
&& (
{chapter.index < chapter.chapterCount && (
<Link
replace
style={{ gridArea: 'next' }}
@@ -300,10 +296,7 @@ export default function ReaderNavBar(props: IProps) {
},
}}
>
<Button
variant="outlined"
endIcon={<KeyboardArrowRightIcon />}
>
<Button variant="outlined" endIcon={<KeyboardArrowRightIcon />}>
Next Chapter
</Button>
</Link>

33
src/components/navbar/action/CategorySelect.tsx
View File

@@ -17,15 +17,17 @@ import FormGroup from '@mui/material/FormGroup';
import client, { useQuery } from 'util/client';
interface IProps {
open: boolean
setOpen: (value: boolean) => void
mangaId: number
open: boolean;
setOpen: (value: boolean) => void;
mangaId: number;
}
export default function CategorySelect(props: IProps) {
const { open, setOpen, mangaId } = props;
const { data: mangaCategoriesData, mutate } = useQuery<ICategory[]>(`/api/v1/manga/${mangaId}/category`);
const { data: mangaCategoriesData, mutate } = useQuery<ICategory[]>(
`/api/v1/manga/${mangaId}/category`,
);
const { data: categoriesData } = useQuery<ICategory[]>('/api/v1/category');
const allCategories = useMemo(() => {
@@ -50,8 +52,7 @@ export default function CategorySelect(props: IProps) {
const { checked } = event.target as HTMLInputElement;
const method = checked ? client.get : client.delete;
method(`/api/v1/manga/${mangaId}/category/${categoryId}`)
.then(() => mutate());
method(`/api/v1/manga/${mangaId}/category/${categoryId}`).then(() => mutate());
};
return (
@@ -68,29 +69,27 @@ export default function CategorySelect(props: IProps) {
<DialogTitle>Set categories</DialogTitle>
<DialogContent dividers>
<FormGroup>
{allCategories.length === 0
&& (
<span>
No categories found!
<br />
You should make some from settings.
</span>
)}
{allCategories.length === 0 && (
<span>
No categories found!
<br />
You should make some from settings.
</span>
)}
{allCategories.map((category) => (
<FormControlLabel
control={(
control={
<Checkbox
checked={selectedIds.includes(category.id)}
onChange={(e) => handleChange(e, category.id)}
color="default"
/>
)}
}
label={category.name}
key={category.id}
/>
))}
</FormGroup>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleCancel} color="primary">

14
src/components/navbar/action/LangSelect.tsx
View File

@@ -31,16 +31,14 @@ function removeAll(firstList: any[], secondList: any[]) {
}
interface IProps {
shownLangs: string[]
setShownLangs: (arg0: string[]) => void
allLangs: string[]
forcedLangs?: string[]
shownLangs: string[];
setShownLangs: (arg0: string[]) => void;
allLangs: string[];
forcedLangs?: string[];
}
export default function LangSelect(props: IProps) {
const {
shownLangs, setShownLangs, allLangs, forcedLangs,
} = props;
const { shownLangs, setShownLangs, allLangs, forcedLangs } = props;
// hold a copy and only sate state on parent when OK pressed, improves performance
const [mShownLangs, setMShownLangs] = useState(
removeAll(cloneObject(shownLangs), forcedLangs!),
@@ -102,11 +100,9 @@ export default function LangSelect(props: IProps) {
onChange={(e) => handleChange(e, lang)}
/>
</ListItemSecondaryAction>
</ListItem>
))}
</List>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleCancel} color="primary">

42
src/components/navbar/navigation/DesktopSideBar.tsx
View File

@@ -24,7 +24,7 @@ const SideNavBarContainer = styled('div')(({ theme }) => ({
}));
interface IProps {
navBarItems: Array<NavbarItem>
navBarItems: Array<NavbarItem>;
}
export default function DesktopSideBar({ navBarItems }: IProps) {
@@ -32,27 +32,37 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
const theme = useTheme();
const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="large" />;
return <IconComponent sx={{ color: (theme.palette.mode === 'dark') ? 'grey.A400' : 'grey.600' }} fontSize="large" />;
if (location.pathname === path)
return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="large" />;
return (
<IconComponent
sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }}
fontSize="large"
/>
);
};
return (
<SideNavBarContainer>
{
// eslint-disable-next-line react/destructuring-assignment
navBarItems.map(({
path, title, IconComponent, SelectedIconComponent,
}: NavbarItem) => (
<Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
<ListItem disableRipple button key={title}>
<ListItemIcon sx={{ minWidth: '0' }}>
<Tooltip placement="right" title={title}>
{iconFor(path, IconComponent, SelectedIconComponent)}
</Tooltip>
</ListItemIcon>
</ListItem>
</Link>
))
navBarItems.map(
({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
<Link
to={path}
style={{ color: 'inherit', textDecoration: 'none' }}
key={path}
>
<ListItem disableRipple button key={title}>
<ListItemIcon sx={{ minWidth: '0' }}>
<Tooltip placement="right" title={title}>
{iconFor(path, IconComponent, SelectedIconComponent)}
</Tooltip>
</ListItemIcon>
</ListItem>
</Link>
),
)
}
</SideNavBarContainer>
);

57
src/components/navbar/navigation/MobileBottomBar.tsx
View File

@@ -33,7 +33,7 @@ const Link = styled(RRDLink)({
});
interface IProps {
navBarItems: Array<NavbarItem>
navBarItems: Array<NavbarItem>;
}
export default function MobileBottomBar({ navBarItems }: IProps) {
@@ -41,43 +41,48 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
const theme = useTheme();
const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="medium" />;
return <IconComponent sx={{ color: (theme.palette.mode === 'dark') ? 'grey.A400' : 'grey.600' }} fontSize="medium" />;
if (location.pathname === path)
return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="medium" />;
return (
<IconComponent
sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }}
fontSize="medium"
/>
);
};
return (
<BottomNavContainer>
{
navBarItems.map((
{
path, title, IconComponent, SelectedIconComponent,
}: NavbarItem,
) => (
{navBarItems.map(
({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
<Link to={path} key={path}>
<ListItem disableRipple button sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
<Box
display="flex"
flexDirection="column"
alignItems="center"
>
<ListItem
disableRipple
button
sx={{ justifyContent: 'center', padding: '8px' }}
key={title}
>
<Box display="flex" flexDirection="column" alignItems="center">
{iconFor(path, IconComponent, SelectedIconComponent)}
<Box sx={{
fontSize: '0.65rem',
// eslint-disable-next-line no-nested-ternary
color: location.pathname === path
? 'primary.main'
: ((theme.palette.mode === 'dark')
? 'grey.A400'
: 'grey.600'),
}}
<Box
sx={{
fontSize: '0.65rem',
color:
// eslint-disable-next-line no-nested-ternary
location.pathname === path
? 'primary.main'
: theme.palette.mode === 'dark'
? 'grey.A400'
: 'grey.600',
}}
>
{title}
</Box>
</Box>
</ListItem>
</Link>
))
}
),
)}
</BottomNavContainer>
);
}