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

60
src/components/library/LibraryMangaGrid.tsx
View File

@@ -24,8 +24,10 @@ const unreadFilter = (unread: NullAndUndefined<boolean>, { unreadCount }: IManga
}
};
const downloadedFilter = (downloaded: NullAndUndefined<boolean>,
{ downloadCount }: IMangaCard): boolean => {
const downloadedFilter = (
downloaded: NullAndUndefined<boolean>,
{ downloadCount }: IMangaCard,
): boolean => {
switch (downloaded) {
case true:
return !!downloadCount && downloadCount >= 1;
@@ -46,13 +48,14 @@ const filterManga = (
query: NullAndUndefined<string>,
unread: NullAndUndefined<boolean>,
downloaded: NullAndUndefined<boolean>,
): IMangaCard[] => manga.filter((m) => {
if (query) {
return queryFilter(query, m);
}
): IMangaCard[] =>
manga.filter((m) => {
if (query) {
return queryFilter(query, m);
}
return downloadedFilter(downloaded, m) && unreadFilter(unread, m);
});
return downloadedFilter(downloaded, m) && unreadFilter(unread, m);
});
const sortByUnread = (a: IMangaCard, b: IMangaCard): number =>
// eslint-disable-next-line implicit-arrow-linebreak
@@ -70,10 +73,17 @@ const sortManga = (
const result = [...manga];
switch (sort) {
case 'sortAlph': result.sort(sortByTitle); break;
case 'sortID': result.sort(sortById); break;
case 'sortToRead': result.sort(sortByUnread); break;
default: break;
case 'sortAlph':
result.sort(sortByTitle);
break;
case 'sortID':
result.sort(sortById);
break;
case 'sortToRead':
result.sort(sortByUnread);
break;
default:
break;
}
if (desc === true) {
@@ -84,20 +94,32 @@ const sortManga = (
};
const LibraryMangaGrid: React.FC<IMangaGridProps & { lastLibraryUpdate: number }> = ({
mangas, isLoading, hasNextPage, lastPageNum, setLastPageNum, message, lastLibraryUpdate,
mangas,
isLoading,
hasNextPage,
lastPageNum,
setLastPageNum,
message,
lastLibraryUpdate,
}) => {
const [query] = useQueryParam('query', StringParam);
const { options } = useLibraryOptionsContext();
const { unread, downloaded } = options;
const sortedManga = useMemo(() => sortManga(mangas, options.sorts, options.sortDesc),
[mangas, lastLibraryUpdate, options.sorts, options.sortDesc]);
const sortedManga = useMemo(
() => sortManga(mangas, options.sorts, options.sortDesc),
[mangas, lastLibraryUpdate, options.sorts, options.sortDesc],
);
const filteredManga = useMemo(() => filterManga(sortedManga, query, unread, downloaded),
[sortedManga, lastLibraryUpdate, query, unread, downloaded]);
const filteredManga = useMemo(
() => filterManga(sortedManga, query, unread, downloaded),
[sortedManga, lastLibraryUpdate, query, unread, downloaded],
);
const showFilteredOutMessage = (unread != null || downloaded != null || query)
&& filteredManga.length === 0 && mangas.length > 0;
const showFilteredOutMessage =
(unread != null || downloaded != null || query) &&
filteredManga.length === 0 &&
mangas.length > 0;
return (
<MangaGrid

56
src/components/library/LibraryOptionsPanel.tsx
View File

@@ -27,8 +27,8 @@ const SORT_OPTIONS: [LibrarySortMode, string][] = [
];
interface IProps {
open: boolean,
onClose: () => void,
open: boolean;
onClose: () => void;
}
const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
@@ -51,8 +51,16 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
if (key === 'filter') {
return (
<>
<ThreeStateCheckboxInput label="Unread" checked={options.unread} onChange={(c) => handleFilterChange('unread', c)} />
<ThreeStateCheckboxInput label="Downloaded" checked={options.downloaded} onChange={(c) => handleFilterChange('downloaded', c)} />
<ThreeStateCheckboxInput
label="Unread"
checked={options.unread}
onChange={(c) => handleFilterChange('unread', c)}
/>
<ThreeStateCheckboxInput
label="Downloaded"
checked={options.downloaded}
onChange={(c) => handleFilterChange('downloaded', c)}
/>
</>
);
}
@@ -63,9 +71,11 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
label={label}
checked={options.sorts === mode}
sortDescending={options.sortDesc}
onClick={() => (mode !== options.sorts
? handleFilterChange('sorts', mode)
: handleFilterChange('sortDesc', !options.sortDesc))}
onClick={() =>
mode !== options.sorts
? handleFilterChange('sorts', mode)
: handleFilterChange('sortDesc', !options.sortDesc)
}
/>
));
}
@@ -75,24 +85,44 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
<>
<FormLabel>Display mode</FormLabel>
<RadioGroup
onChange={(e) => handleFilterChange('gridLayout', Number(e.target.value))}
onChange={(e) =>
handleFilterChange('gridLayout', Number(e.target.value))
}
value={gridLayout}
>
<RadioInput label="Compact grid" value={GridLayout.Compact} checked={gridLayout == null || gridLayout === GridLayout.Compact} />
<RadioInput label="Comfortable grid" value={GridLayout.Comfortable} checked={gridLayout === GridLayout.Comfortable} />
<RadioInput label="List" value={GridLayout.List} checked={gridLayout === GridLayout.List} />
<RadioInput
label="Compact grid"
value={GridLayout.Compact}
checked={
gridLayout == null || gridLayout === GridLayout.Compact
}
/>
<RadioInput
label="Comfortable grid"
value={GridLayout.Comfortable}
checked={gridLayout === GridLayout.Comfortable}
/>
<RadioInput
label="List"
value={GridLayout.List}
checked={gridLayout === GridLayout.List}
/>
</RadioGroup>
<FormLabel sx={{ mt: 2 }}>Badges</FormLabel>
<CheckboxInput
label="Unread Badges"
checked={showUnreadBadge === true}
onChange={() => handleFilterChange('showUnreadBadge', !showUnreadBadge)}
onChange={() =>
handleFilterChange('showUnreadBadge', !showUnreadBadge)
}
/>
<CheckboxInput
label="Download Badges"
checked={showDownloadBadge === true}
onChange={() => handleFilterChange('showDownloadBadge', !showDownloadBadge)}
onChange={() =>
handleFilterChange('showDownloadBadge', !showDownloadBadge)
}
/>
</>
);

9
src/components/library/LibraryOptionsProvider.tsx
View File

@@ -5,7 +5,9 @@
* 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 LibraryOptionsContext, { DefaultLibraryOptions } from 'components/context/LibraryOptionsContext';
import LibraryOptionsContext, {
DefaultLibraryOptions,
} from 'components/context/LibraryOptionsContext';
import React from 'react';
import useLocalStorage from 'util/useLocalStorage';
@@ -14,7 +16,10 @@ interface IProps {
}
const LibraryOptionsContextProvider: React.FC<IProps> = ({ children }) => {
const [options, setOptions] = useLocalStorage<LibraryOptions>('libraryOptions', DefaultLibraryOptions);
const [options, setOptions] = useLocalStorage<LibraryOptions>(
'libraryOptions',
DefaultLibraryOptions,
);
return (
<LibraryOptionsContext.Provider value={{ options, setOptions }}>

5
src/components/library/LibraryToolbarMenu.tsx
View File

@@ -18,10 +18,7 @@ const LibraryToolbarMenu: React.FC = () => {
return (
<>
<IconButton
onClick={() => setOpen(!open)}
color={active ? 'warning' : 'default'}
>
<IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'default'}>
<FilterList />
</IconButton>
<LibraryOptionsPanel open={open} onClose={() => setOpen(false)} />

19
src/components/library/UpdateChecker.tsx
View File

@@ -8,7 +8,7 @@ import client from 'util/client';
import makeToast from 'components/util/Toast';
interface IProgressProps {
progress: number
progress: number;
}
function Progress({ progress }: IProgressProps) {
@@ -16,19 +16,19 @@ function Progress({ progress }: IProgressProps) {
<Box sx={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
<CircularProgress variant="determinate" value={progress} />
<Box sx={{ position: 'absolute' }}>
<Typography fontSize="0.8rem">
{`${Math.round(progress)}%`}
</Typography>
<Typography fontSize="0.8rem">{`${Math.round(progress)}%`}</Typography>
</Box>
</Box>
);
}
const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace(
'http',
'ws',
);
interface IUpdateCheckerProps {
handleFinishedUpdate: (time: number) => void
handleFinishedUpdate: (time: number) => void;
}
function UpdateChecker({ handleFinishedUpdate }: IUpdateCheckerProps) {
@@ -58,9 +58,8 @@ function UpdateChecker({ handleFinishedUpdate }: IUpdateCheckerProps) {
const { running, statusMap } = JSON.parse(e.data) as IUpdateStatus;
const { COMPLETE = [], RUNNING = [], PENDING = [] } = statusMap;
const currentProgress = 100 * (
COMPLETE.length / (COMPLETE.length + RUNNING.length + PENDING.length)
);
const currentProgress =
100 * (COMPLETE.length / (COMPLETE.length + RUNNING.length + PENDING.length));
const isUpdateFinished = currentProgress === 100;
const ignoreFaultyMessage = !updateStarted && !running && isUpdateFinished;

5
src/components/library/useSubscription.ts
View File

@@ -1,6 +1,9 @@
import { useEffect, useState } from 'react';
const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace(
'http',
'ws',
);
const useSubscription = <T>(path: string, callback?: (newValue: T) => boolean | void) => {
const [state, setState] = useState<T | undefined>();