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

30
src/components/source/GridLayouts.tsx
View File

@@ -5,16 +5,17 @@
* 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 {
IconButton, Menu, MenuItem, FormControlLabel, Radio,
} from '@mui/material';
import { IconButton, Menu, MenuItem, FormControlLabel, Radio } from '@mui/material';
import React from 'react';
import ViewModuleIcon from '@mui/icons-material/ViewModule';
import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
// TODO: clean up this to use a FormControl, and remove dependency on name o radio button
export default function SourceGridLayout() {
const { options: { SourcegridLayout }, setOptions } = useLibraryOptionsContext();
const {
options: { SourcegridLayout },
setOptions,
} = useLibraryOptionsContext();
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
@@ -25,10 +26,7 @@ export default function SourceGridLayout() {
setAnchorEl(null);
};
function setGridContextOptions(
e: React.ChangeEvent<HTMLInputElement>,
checked: boolean,
) {
function setGridContextOptions(e: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
if (checked) {
setOptions((prev: any) => ({ ...prev, SourcegridLayout: parseInt(e.target.name, 10) }));
}
@@ -57,40 +55,40 @@ export default function SourceGridLayout() {
<FormControlLabel
label="Compact grid"
value={GridLayout.Compact}
control={(
control={
<Radio
name={GridLayout.Compact.toString()}
checked={
SourcegridLayout === GridLayout.Compact
|| SourcegridLayout === undefined
SourcegridLayout === GridLayout.Compact ||
SourcegridLayout === undefined
}
onChange={setGridContextOptions}
/>
)}
}
/>
</MenuItem>
<MenuItem onClick={handleClose}>
<FormControlLabel
label="Comfortable grid"
control={(
control={
<Radio
name={GridLayout.Comfortable.toString()}
checked={SourcegridLayout === GridLayout.Comfortable}
onChange={setGridContextOptions}
/>
)}
}
/>
</MenuItem>
<MenuItem onClick={handleClose}>
<FormControlLabel
label="List"
control={(
control={
<Radio
name={GridLayout.List.toString()}
checked={SourcegridLayout === GridLayout.List}
onChange={setGridContextOptions}
/>
)}
}
/>
</MenuItem>
</Menu>

10
src/components/source/SourceMangaGrid.tsx
View File

@@ -17,8 +17,14 @@ function filterManga(mangas: IMangaCard[]): IMangaCard[] {
export default function SourceMangaGrid(props: IMangaGridProps) {
const {
mangas, isLoading, hasNextPage, lastPageNum,
setLastPageNum, message, messageExtra, gridLayout,
mangas,
isLoading,
hasNextPage,
lastPageNum,
setLastPageNum,
message,
messageExtra,
gridLayout,
} = props;
const filteredManga = filterManga(mangas);

70
src/components/source/SourceOptions.tsx
View File

@@ -23,33 +23,29 @@ import GroupFilter from 'components/source/filters/GroupFilter';
import SeperatorFilter from 'components/source/filters/SeparatorFilter';
interface IFilters {
sourceFilter: ISourceFilters[]
updateFilterValue: Function
group: number | undefined
update: any
sourceFilter: ISourceFilters[];
updateFilterValue: Function;
group: number | undefined;
update: any;
}
interface IFilters1 {
sourceFilter: ISourceFilters[]
updateFilterValue: Function
resetFilterValue: Function
setTriggerUpdate: Function
setSearch: Function
update: any
sourceFilter: ISourceFilters[];
updateFilterValue: Function;
resetFilterValue: Function;
setTriggerUpdate: Function;
setSearch: Function;
update: any;
}
export function Options({
sourceFilter,
group,
updateFilterValue,
update,
}: IFilters) {
export function Options({ sourceFilter, group, updateFilterValue, update }: IFilters) {
return (
<Stack key={`filters ${group}`}>
{ sourceFilter.map((e: ISourceFilters, index) => {
let checkif = update.find((el: {
group: number | undefined; position: number;
}) => el.group === group && el.position === index);
{sourceFilter.map((e: ISourceFilters, index) => {
let checkif = update.find(
(el: { group: number | undefined; position: number }) =>
el.group === group && el.position === index,
);
checkif = checkif ? checkif.state : checkif;
switch (e.type) {
case 'CheckBox':
@@ -57,7 +53,7 @@ export function Options({
<CheckBoxFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
state={checkif === 'false' || e.filter.state as boolean}
state={checkif === 'false' || (e.filter.state as boolean)}
position={index}
group={group}
updateFilterValue={updateFilterValue}
@@ -77,10 +73,7 @@ export function Options({
);
case 'Header':
return (
<HeaderFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
/>
<HeaderFilter key={`filters ${e.filter.name}`} name={e.filter.name} />
);
case 'Select':
return (
@@ -88,7 +81,7 @@ export function Options({
key={`filters ${e.filter.name}`}
name={e.filter.name}
values={e.filter.displayValues}
state={parseInt(checkif, 10) || e.filter.state as number}
state={parseInt(checkif, 10) || (e.filter.state as number)}
selected={e.filter.selected}
position={index}
group={group}
@@ -109,7 +102,7 @@ export function Options({
key={`filters ${e.filter.name}`}
name={e.filter.name}
values={e.filter.values}
state={checkif ? JSON.parse(checkif) : e.filter.state as IState}
state={checkif ? JSON.parse(checkif) : (e.filter.state as IState)}
position={index}
group={group}
updateFilterValue={updateFilterValue}
@@ -121,7 +114,7 @@ export function Options({
<TextFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
state={checkif || e.filter.state as string}
state={checkif || (e.filter.state as string)}
position={index}
group={group}
updateFilterValue={updateFilterValue}
@@ -133,7 +126,7 @@ export function Options({
<TriStateFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
state={parseInt(checkif, 10) || e.filter.state as number}
state={parseInt(checkif, 10) || (e.filter.state as number)}
position={index}
group={group}
updateFilterValue={updateFilterValue}
@@ -141,7 +134,7 @@ export function Options({
/>
);
default:
return (<Box key={`${e.filter.name}null`} />);
return <Box key={`${e.filter.name}null`} />;
}
})}
</Stack>
@@ -181,21 +174,10 @@ export default function SourceOptions({
Filter
</Fab>
<OptionsPanel
open={FilterOptions}
onClose={() => setFilterOptions(false)}
>
<OptionsPanel open={FilterOptions} onClose={() => setFilterOptions(false)}>
<Box sx={{ display: 'flex', p: 2, pb: 0 }}>
<Button
onClick={handleReset}
>
Reset
</Button>
<Button
sx={{ marginLeft: 'auto' }}
variant="contained"
onClick={handleSubmit}
>
<Button onClick={handleReset}>Reset</Button>
<Button sx={{ marginLeft: 'auto' }} variant="contained" onClick={handleSubmit}>
Submit
</Button>
</Box>

34
src/components/source/filters/CheckBoxFilter.tsx
View File

@@ -9,37 +9,29 @@ import CheckboxInput from 'components/atoms/CheckboxInput';
import React from 'react';
interface Props {
state: boolean
name: string
position: number
group: number | undefined
updateFilterValue: Function
update: any
state: boolean;
name: string;
position: number;
group: number | undefined;
updateFilterValue: Function;
update: any;
}
const CheckBoxFilter: React.FC<Props> = (props: Props) => {
const {
state,
name,
position,
group,
updateFilterValue,
update,
} = props;
const { state, name, position, group, updateFilterValue, update } = props;
const [val, setval] = React.useState(state);
const handleChange = (event: { target: { name: any; checked: any; }; }) => {
const handleChange = (event: { target: { name: any; checked: any } }) => {
setval(event.target.checked);
const upd = update.filter((e: {
position: number; group: number | undefined;
}) => !(position === e.position && group === e.group));
const upd = update.filter(
(e: { position: number; group: number | undefined }) =>
!(position === e.position && group === e.group),
);
updateFilterValue([...upd, { position, state: event.target.checked.toString(), group }]);
};
if (state !== undefined) {
return (
<CheckboxInput label={name} checked={val} onChange={handleChange} />
);
return <CheckboxInput label={name} checked={val} onChange={handleChange} />;
}
return null;
};

22
src/components/source/filters/GroupFilter.tsx
View File

@@ -6,30 +6,22 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ExpandLess, ExpandMore } from '@mui/icons-material';
import {
Collapse, ListItemButton, ListItemText, Stack,
} from '@mui/material';
import { Collapse, ListItemButton, ListItemText, Stack } from '@mui/material';
import { Box } from '@mui/system';
import React from 'react';
// eslint-disable-next-line import/no-cycle
import { Options } from 'components/source/SourceOptions';
interface Props {
state: ISourceFilters[]
name: string
position: number
updateFilterValue: Function
update: any
state: ISourceFilters[];
name: string;
position: number;
updateFilterValue: Function;
update: any;
}
const GroupFilter: React.FC<Props> = (props: Props) => {
const {
state,
name,
position,
updateFilterValue,
update,
} = props;
const { state, name, position, updateFilterValue, update } = props;
const [open, setOpen] = React.useState(false);

8
src/components/source/filters/HeaderFilter.tsx
View File

@@ -10,9 +10,13 @@ import { Typography } from '@mui/material';
import React from 'react';
interface Props {
name: string
name: string;
}
const HeaderFilter: React.FC<Props> = ({ name }) => (<Typography key={name} sx={{ mt: 2 }} variant="subtitle2">{name}</Typography>);
const HeaderFilter: React.FC<Props> = ({ name }) => (
<Typography key={name} sx={{ mt: 2 }} variant="subtitle2">
{name}
</Typography>
);
export default HeaderFilter;

90
src/components/source/filters/SelectFilter.tsx
View File

@@ -13,20 +13,20 @@ import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
interface Props {
values: any
name: string
state: number
selected: Selected | undefined
position: number
updateFilterValue: Function
group: number | undefined
update: any
values: any;
name: string;
state: number;
selected: Selected | undefined;
position: number;
updateFilterValue: Function;
group: number | undefined;
update: any;
}
interface Selected {
displayname: string
value: string
_value: string
displayname: string;
value: string;
_value: string;
}
function hasSelect(
@@ -40,30 +40,24 @@ function hasSelect(
) {
const [val, setval] = React.useState(state);
if (values) {
const handleChange = (event: { target: { name: any; value: any; }; }) => {
const handleChange = (event: { target: { name: any; value: any } }) => {
const vall = values.map((e) => e.displayname).indexOf(`${event.target.value}`);
setval(vall);
const upd = update.filter((e: {
position: number; group: number | undefined;
}) => !(position === e.position && group === e.group));
const upd = update.filter(
(e: { position: number; group: number | undefined }) =>
!(position === e.position && group === e.group),
);
updateFilterValue([...upd, { position, state: vall.toString(), group }]);
};
const rett = values.map((e: Selected) => (
<MenuItem
key={`${name} ${e.displayname}`}
value={e.displayname}
>
{
e.displayname
}
<MenuItem key={`${name} ${e.displayname}`} value={e.displayname}>
{e.displayname}
</MenuItem>
));
return (
<FormControl sx={{ my: 1 }} variant="standard">
<InputLabel>
{name}
</InputLabel>
<InputLabel>{name}</InputLabel>
<Select
name={name}
value={values[val].displayname}
@@ -90,27 +84,25 @@ function noSelect(
const [val, setval] = React.useState(state);
if (values) {
const handleChange = (event: { target: { name: any; value: any; }; }) => {
const handleChange = (event: { target: { name: any; value: any } }) => {
const vall = values.indexOf(`${event.target.value}`);
setval(vall);
const upd = update.filter((e: {
position: number; group: number | undefined;
}) => !(position === e.position && group === e.group));
const upd = update.filter(
(e: { position: number; group: number | undefined }) =>
!(position === e.position && group === e.group),
);
updateFilterValue([...upd, { position, state: vall.toString(), group }]);
};
const rett = values.map((value: string) => (<MenuItem key={`${name} ${value}`} value={value}>{value}</MenuItem>));
const rett = values.map((value: string) => (
<MenuItem key={`${name} ${value}`} value={value}>
{value}
</MenuItem>
));
return (
<FormControl sx={{ my: 1 }} variant="standard">
<InputLabel>
{name}
</InputLabel>
<Select
name={name}
value={values[val]}
label={name}
onChange={handleChange}
>
<InputLabel>{name}</InputLabel>
<Select name={name} value={values[val]} label={name} onChange={handleChange}>
{rett}
</Select>
</FormControl>
@@ -130,26 +122,10 @@ const SelectFilter: React.FC<Props> = ({
group,
}) => {
if (selected === undefined) {
return noSelect(
values,
name,
state,
position,
updateFilterValue,
update,
group,
);
return noSelect(values, name, state, position, updateFilterValue, update, group);
}
return hasSelect(
values,
name,
state,
position,
updateFilterValue,
update,
group,
);
return hasSelect(values, name, state, position, updateFilterValue, update, group);
};
export default SelectFilter;

8
src/components/source/filters/SeparatorFilter.tsx
View File

@@ -9,9 +9,13 @@ import { Divider } from '@mui/material';
import React from 'react';
interface Props {
name: string
name: string;
}
const SeparatorFilter: React.FC<Props> = ({ name }) => (<Divider key={name} sx={{ my: 1 }} textAlign="center">{name}</Divider>);
const SeparatorFilter: React.FC<Props> = ({ name }) => (
<Divider key={name} sx={{ my: 1 }} textAlign="center">
{name}
</Divider>
);
export default SeparatorFilter;

35
src/components/source/filters/SortFilter.tsx
View File

@@ -6,33 +6,23 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ExpandLess, ExpandMore } from '@mui/icons-material';
import {
Collapse, ListItemButton, ListItemText, Stack,
} from '@mui/material';
import { Collapse, ListItemButton, ListItemText, Stack } from '@mui/material';
import { Box } from '@mui/system';
import SortRadioInput from 'components/atoms/SortRadioInput';
import React from 'react';
interface Props {
values: any
name: string
state: IState
position: number
group: number | undefined
updateFilterValue: Function
update: any
values: any;
name: string;
state: IState;
position: number;
group: number | undefined;
updateFilterValue: Function;
update: any;
}
const SortFilter: React.FC<Props> = (props: Props) => {
const {
values,
name,
state,
position,
group,
updateFilterValue,
update,
} = props;
const { values, name, state, position, group, updateFilterValue, update } = props;
const [val, setval] = React.useState(state);
const [open, setOpen] = React.useState(false);
@@ -51,9 +41,10 @@ const SortFilter: React.FC<Props> = (props: Props) => {
}
tmp.index = index;
setval(tmp);
const upd = update.filter((e: {
position: number; group: number | undefined;
}) => !(position === e.position && group === e.group));
const upd = update.filter(
(e: { position: number; group: number | undefined }) =>
!(position === e.position && group === e.group),
);
updateFilterValue([...upd, { position, state: JSON.stringify(tmp), group }]);
};

46
src/components/source/filters/TextFilter.tsx
View File

@@ -6,36 +6,28 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import SearchIcon from '@mui/icons-material/Search';
import {
FormControl, Input, InputAdornment, InputLabel,
} from '@mui/material';
import { FormControl, Input, InputAdornment, InputLabel } from '@mui/material';
import React from 'react';
interface Props {
state: string
name: string
position: number
group: number | undefined
updateFilterValue: Function
update: any
state: string;
name: string;
position: number;
group: number | undefined;
updateFilterValue: Function;
update: any;
}
const TextFilter: React.FC<Props> = (props) => {
const {
state,
name,
position,
group,
updateFilterValue,
update,
} = props;
const { state, name, position, group, updateFilterValue, update } = props;
const [Search, setsearch] = React.useState(state || '');
let typingTimer: NodeJS.Timeout;
function doneTyping(e: React.ChangeEvent<HTMLInputElement>) {
const upd = update.filter((el: {
position: number; group: number | undefined;
}) => !(position === el.position && group === el.group));
const upd = update.filter(
(el: { position: number; group: number | undefined }) =>
!(position === el.position && group === el.group),
);
updateFilterValue([...upd, { position, state: e.target.value, group }]);
}
@@ -43,29 +35,29 @@ const TextFilter: React.FC<Props> = (props) => {
setsearch(e.target.value);
clearTimeout(typingTimer);
typingTimer = setTimeout(() => { doneTyping(e); }, 2500);
typingTimer = setTimeout(() => {
doneTyping(e);
}, 2500);
}
if (state !== undefined) {
return (
<FormControl sx={{ my: 1 }} variant="standard">
<InputLabel>
{name}
</InputLabel>
<InputLabel>{name}</InputLabel>
<Input
name={name}
value={Search || ''}
onChange={handleChange}
endAdornment={(
endAdornment={
<InputAdornment position="end">
<SearchIcon />
</InputAdornment>
)}
}
/>
</FormControl>
);
}
return (<></>);
return <></>;
};
export default TextFilter;

43
src/components/source/filters/TriStateFilter.tsx
View File

@@ -9,37 +9,34 @@ import ThreeStateCheckboxInput from 'components/atoms/ThreeStateCheckboxInput';
import React from 'react';
interface Props {
state: number
name: string
position: number
group: number | undefined
updateFilterValue: Function
update: any
state: number;
name: string;
position: number;
group: number | undefined;
updateFilterValue: Function;
update: any;
}
const TriStateFilter: React.FC<Props> = (props) => {
const {
state,
name,
position,
group,
updateFilterValue,
update,
} = props;
const { state, name, position, group, updateFilterValue, update } = props;
const [val, setval] = React.useState<number>(Number(state));
const handleChange = (checked: boolean | null | undefined) => {
// eslint-disable-next-line no-nested-ternary
const newState = checked === undefined ? 0 : checked ? 1 : 2;
setval(newState);
const upd = update.filter((e: {
position: number; group: number | undefined;
}) => !(position === e.position && group === e.group));
updateFilterValue([...upd, {
position,
state: newState.toString(),
group,
}]);
const upd = update.filter(
(e: { position: number; group: number | undefined }) =>
!(position === e.position && group === e.group),
);
updateFilterValue([
...upd,
{
position,
state: newState.toString(),
group,
},
]);
};
if (state !== undefined) {
@@ -51,7 +48,7 @@ const TriStateFilter: React.FC<Props> = (props) => {
/>
);
}
return (<></>);
return <></>;
};
export default TriStateFilter;