add prettier for auto formatting (#231)

* [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
2023-02-06 10:06:33 +01:00
parent 2eeea41a45
commit 4e0a860dfd
101 changed files with 2065 additions and 1886 deletions
--- a/src/components/util/AppbarSearch.tsx
+++ b/src/components/util/AppbarSearch.tsx
@@ -13,7 +13,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import { useQueryParam, StringParam } from 'use-query-params';

 interface IProps {
-    autoOpen?: boolean
+    autoOpen?: boolean;
 }

 const defaultProps = {
@@ -29,11 +29,14 @@ const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
        setQuery(e.target.value === '' ? undefined : e.target.value);
    }
+
    const cancelSearch = () => {
        setQuery(null);
        setSearchOpen(false);
    };
-    const handleBlur = () => { if (!query) setSearchOpen(false); };
+    const handleBlur = () => {
+        if (!query) setSearchOpen(false);
+    };
    const openSearch = () => {
        setSearchOpen(true);
        // Put Focus Action at the end of the Callstack so Input actually exists on the dom
@@ -43,7 +46,7 @@ const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
    };

    const handleSearchShortcut = (e: KeyboardEvent) => {
-        if ((e.code === 'F3') || (e.ctrlKey && e.code === 'KeyF')) {
+        if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) {
            e.preventDefault();
            openSearch();
        }
@@ -65,26 +68,23 @@ const AppbarSearch: React.FunctionComponent<IProps> = (props) => {

    return (
        <>
-            {searchOpen
-                ? (
-                    <Input
-                        value={query || ''}
-                        onChange={handleChange}
-                        onBlur={handleBlur}
-                        inputRef={inputRef}
-                        endAdornment={(
-                            <IconButton
-                                onClick={cancelSearch}
-                            >
-                                <CancelIcon />
-                            </IconButton>
-                        )}
-                    />
-                ) : (
-                    <IconButton onClick={openSearch}>
-                        <SearchIcon />
-                    </IconButton>
-                )}
+            {searchOpen ? (
+                <Input
+                    value={query || ''}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    inputRef={inputRef}
+                    endAdornment={
+                        <IconButton onClick={cancelSearch}>
+                            <CancelIcon />
+                        </IconButton>
+                    }
+                />
+            ) : (
+                <IconButton onClick={openSearch}>
+                    <SearchIcon />
+                </IconButton>
+            )}
        </>
    );
 };
--- a/src/components/util/CustomExtensionOutlinedIcon.tsx
+++ b/src/components/util/CustomExtensionOutlinedIcon.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import createSvgIcon from '@mui/material/utils/createSvgIcon';

-const d = 'M 11 1 C 9.3550302 1 8 2.3550302 8 4 L 4 4 C 2.9069372 4 2 4.9069372 2 6 L 2 12 L 4 12 C 4.5650302 12 5 12.43497 5 13 C 5 13.56503 4.5650302 14 4 14 L 2 14 L 2 20 C 2 21.093063 2.9069372 22 4 22 L 10 22 L 10 20 C 10 19.43497 10.43497 19 11 19 C 11.56503 19 12 19.43497 12 20 L 12 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 16 C 21.64497 16 23 14.64497 23 13 C 23 11.35503 21.64497 10 20 10 L 20 6 C 20 4.9069372 19.093063 4 18 4 L 14 4 C 14 2.3550302 12.64497 1 11 1 z M 11 3 C 11.56503 3 12 3.4349698 12 4 L 12 6 L 18 6 L 18 12 L 20 12 C 20.56503 12 21 12.43497 21 13 C 21 13.56503 20.56503 14 20 14 L 18 14 L 18 20 L 14 20 C 14 18.35503 12.64497 17 11 17 C 9.3550302 17 8 18.35503 8 20 L 4 20 L 4 16 C 5.6449698 16 7 14.64497 7 13 C 7 11.35503 5.6449698 10 4 10 L 4 6 L 10 6 L 10 4 C 10 3.4349698 10.43497 3 11 3 z';
+const d =
+    'M 11 1 C 9.3550302 1 8 2.3550302 8 4 L 4 4 C 2.9069372 4 2 4.9069372 2 6 L 2 12 L 4 12 C 4.5650302 12 5 12.43497 5 13 C 5 13.56503 4.5650302 14 4 14 L 2 14 L 2 20 C 2 21.093063 2.9069372 22 4 22 L 10 22 L 10 20 C 10 19.43497 10.43497 19 11 19 C 11.56503 19 12 19.43497 12 20 L 12 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 16 C 21.64497 16 23 14.64497 23 13 C 23 11.35503 21.64497 10 20 10 L 20 6 C 20 4.9069372 19.093063 4 18 4 L 14 4 C 14 2.3550302 12.64497 1 11 1 z M 11 3 C 11.56503 3 12 3.4349698 12 4 L 12 6 L 18 6 L 18 12 L 20 12 C 20.56503 12 21 12.43497 21 13 C 21 13.56503 20.56503 14 20 14 L 18 14 L 18 20 L 14 20 C 14 18.35503 12.64497 17 11 17 C 9.3550302 17 8 18.35503 8 20 L 4 20 L 4 16 C 5.6449698 16 7 14.64497 7 13 C 7 11.35503 5.6449698 10 4 10 L 4 6 L 10 6 L 10 4 C 10 3.4349698 10.43497 3 11 3 z';

 const icon = createSvgIcon(<path d={d} />, 'CustomExtensionOutlined');

--- a/src/components/util/EmptyView.tsx
+++ b/src/components/util/EmptyView.tsx
@@ -12,14 +12,7 @@ import { useTheme } from '@mui/material/styles';
 import { useMediaQuery } from '@mui/material';
 import { Box } from '@mui/system';

-const ERROR_FACES = [
-    '(･o･;)',
-    'Σ(ಠ_ಠ)',
-    'ಥ_ಥ',
-    '(˘･_･˘)',
-    '(；￣Д￣)',
-    '(･Д･。',
-];
+const ERROR_FACES = ['(･o･;)', 'Σ(ಠ_ಠ)', 'ಥ_ಥ', '(˘･_･˘)', '(；￣Д￣)', '(･Д･。'];

 function getRandomErrorFace() {
    const randIndex = Math.floor(Math.random() * ERROR_FACES.length);
@@ -27,8 +20,8 @@ function getRandomErrorFace() {
 }

 interface IProps {
-    message: string
-    messageExtra?: JSX.Element
+    message: string;
+    messageExtra?: JSX.Element;
 }

 export default function EmptyView({ message, messageExtra }: IProps) {
@@ -38,20 +31,19 @@ export default function EmptyView({ message, messageExtra }: IProps) {
    const errorFace = useMemo(() => getRandomErrorFace(), []);

    return (
-        <Box sx={{
-            position: 'absolute',
-            left: `calc(50% + ${isMobileWidth ? '0px' : theme.spacing(8 / 2)})`,
-            top: '50%',
-            transform: 'translate(-50%, -50%)',
-            textAlign: 'center',
-        }}
+        <Box
+            sx={{
+                position: 'absolute',
+                left: `calc(50% + ${isMobileWidth ? '0px' : theme.spacing(8 / 2)})`,
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                textAlign: 'center',
+            }}
        >
            <Typography variant="h3" gutterBottom>
                {errorFace}
            </Typography>
-            <Typography variant="h5">
-                {message}
-            </Typography>
+            <Typography variant="h5">{message}</Typography>
            {messageExtra}
        </Box>
    );
--- a/src/components/util/LoadingPlaceholder.tsx
+++ b/src/components/util/LoadingPlaceholder.tsx
@@ -10,16 +10,14 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { Box } from '@mui/system';

 interface IProps {
-    shouldRender?: boolean | (() => boolean)
-    children?: React.ReactNode
-    component?: string | React.FunctionComponent<any> | React.ComponentClass<any, any>
-    componentProps?: any
+    shouldRender?: boolean | (() => boolean);
+    children?: React.ReactNode;
+    component?: string | React.FunctionComponent<any> | React.ComponentClass<any, any>;
+    componentProps?: any;
 }

 export default function LoadingPlaceholder(props: IProps) {
-    const {
-        children, shouldRender, component, componentProps,
-    } = props;
+    const { children, shouldRender, component, componentProps } = props;

    let condition = true;
    if (shouldRender !== undefined) {
@@ -32,20 +30,17 @@ export default function LoadingPlaceholder(props: IProps) {
        }

        if (children) {
-            return (
-                <>
-                    {children}
-                </>
-            );
+            return <>{children}</>;
        }
    }

    return (
-        <Box sx={{
-            margin: '10px auto',
-            display: 'flex',
-            justifyContent: 'center',
-        }}
+        <Box
+            sx={{
+                margin: '10px auto',
+                display: 'flex',
+                justifyContent: 'center',
+            }}
        >
            <CircularProgress thickness={5} />
        </Box>
--- a/src/components/util/SpinnerImage.tsx
+++ b/src/components/util/SpinnerImage.tsx
@@ -12,21 +12,19 @@ import { Theme } from '@mui/system/createTheme';
 import { SxProps } from '@mui/system/styleFunctionSx';

 interface IProps {
-    src: string
-    alt: string
+    src: string;
+    alt: string;

-    imgRef?: React.RefObject<HTMLImageElement>
+    imgRef?: React.RefObject<HTMLImageElement>;

-    spinnerStyle?: SxProps<Theme>
-    imgStyle?: CSSProperties
+    spinnerStyle?: SxProps<Theme>;
+    imgStyle?: CSSProperties;

-    onImageLoad?: () => void
+    onImageLoad?: () => void;
 }

 export default function SpinnerImage(props: IProps) {
-    const {
-        src, alt, onImageLoad, imgRef, spinnerStyle, imgStyle,
-    } = props;
+    const { src, alt, onImageLoad, imgRef, spinnerStyle, imgStyle } = props;
    const [imageSrc, setImagsrc] = useState<string>('');

    useEffect(() => {
@@ -61,14 +59,7 @@ export default function SpinnerImage(props: IProps) {
        return <Box sx={spinnerStyle} />;
    }

-    return (
-        <img
-            style={imgStyle}
-            ref={imgRef}
-            src={imageSrc}
-            alt={alt}
-        />
-    );
+    return <img style={imgStyle} ref={imgRef} src={imageSrc} alt={alt} />;
 }

 SpinnerImage.defaultProps = {
--- a/src/components/util/TabPanel.tsx
+++ b/src/components/util/TabPanel.tsx
@@ -14,16 +14,10 @@ interface IProps {
 }

 export default function TabPanel(props: IProps) {
-    const {
-        children, index, currentIndex,
-    } = props;
+    const { children, index, currentIndex } = props;

    return (
-        <div
-            role="tabpanel"
-            hidden={index !== currentIndex}
-            id={`simple-tabpanel-${index}`}
-        >
+        <div role="tabpanel" hidden={index !== currentIndex} id={`simple-tabpanel-${index}`}>
            {currentIndex === index && children}
        </div>
    );
--- a/src/components/util/Toast.tsx
+++ b/src/components/util/Toast.tsx
@@ -21,9 +21,9 @@ function Transition(props: SlideProps) {
    return <Slide {...props} direction="up" />;
 }

-interface IToastProps{
-    message: string
-    severity: Severity
+interface IToastProps {
+    message: string;
+    severity: Severity;
 }

 export function Toast(props: IToastProps) {
@@ -61,15 +61,20 @@ export default function makeToast(message: string, severity: Severity) {
    setTimeout(() => removeToast(container.id), 3500);
 }

-export function makeToaster(
-    [toasts, setToasts] : [React.ReactElement[],
-        (arg0: React.ReactElement[]) => void],
-): [React.ReactElement[], ((message: string, severity: Severity) => void)] {
-    return [toasts, (message: string, severity: Severity) => {
-        setToasts([<Toast
-            key={Math.floor(Math.random() * 1000) + 1}
-            message={message}
-            severity={severity}
-        />]);
-    }];
+export function makeToaster([toasts, setToasts]: [
+    React.ReactElement[],
+    (arg0: React.ReactElement[]) => void,
+]): [React.ReactElement[], (message: string, severity: Severity) => void] {
+    return [
+        toasts,
+        (message: string, severity: Severity) => {
+            setToasts([
+                <Toast
+                    key={Math.floor(Math.random() * 1000) + 1}
+                    message={message}
+                    severity={severity}
+                />,
+            ]);
+        },
+    ];
 }
--- a/src/components/util/helpers.ts
+++ b/src/components/util/helpers.ts
@@ -6,14 +6,14 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

 // eslint-disable-next-line import/prefer-default-export
-export const pluralize = (count: number, input: string | { one: string, many: string }) => {
+export const pluralize = (count: number, input: string | { one: string; many: string }) => {
    if (typeof input === 'string') {
        return `${input}${count === 1 ? '' : 's'}`;
    }
    return input[count === 1 ? 'one' : 'many'];
 };

-export const interpolate = (count: number, input: { one: string, many: string }) => {
+export const interpolate = (count: number, input: { one: string; many: string }) => {
    const text = count === 1 ? input.one : input.many;
    return text.replaceAll('%count%', count.toString());
 };