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

src/screens/settings/About.tsx

@@ -10,7 +10,10 @@ import { useQuery } from 'util/client';
 export default function About() {
     const { setTitle, setAction } = useContext(NavbarContext);
 
-    useEffect(() => { setTitle('About'); setAction(<></>); }, []);
+    useEffect(() => {
+        setTitle('About');
+        setAction(<></>);
+    }, []);
 
     const { data: about } = useQuery<IAbout>('/api/v1/settings/about');
 

src/screens/settings/Backup.tsx

@@ -17,7 +17,10 @@ import NavbarContext from 'components/context/NavbarContext';
 
 export default function Backup() {
     const { setTitle, setAction } = useContext(NavbarContext);
-    useEffect(() => { setTitle('Backup'); setAction(<></>); }, []);
+    useEffect(() => {
+        setTitle('Backup');
+        setAction(<></>);
+    }, []);
 
     const { baseURL } = client.defaults;
 
@@ -27,8 +30,10 @@ export default function Backup() {
             formData.append('backup.proto.gz', file);
 
             makeToast('Restoring backup....', 'info');
-            client.post('/api/v1/backup/import/file',
-                formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            client
+                .post('/api/v1/backup/import/file', formData, {
+                    headers: { 'Content-Type': 'multipart/form-data' },
+                })
                 .then(() => makeToast('Backup restore finished!', 'success'))
                 .catch(() => makeToast('Backup restore failed!', 'error'));
         } else if (file.name.toLowerCase().endsWith('json')) {
@@ -81,12 +86,7 @@ export default function Backup() {
                     />
                 </ListItem>
             </List>
-            <input
-                type="file"
-                id="backup-file"
-                style={{ display: 'none' }}
-            />
+            <input type="file" id="backup-file" style={{ display: 'none' }} />
         </>
-
     );
 }

src/screens/settings/Categories.tsx

@@ -7,18 +7,15 @@
  * 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 React, {
-    useMemo, useState, useContext, useEffect,
-} from 'react';
+import React, { useMemo, useState, useContext, useEffect } from 'react';
+import { List, ListItem, ListItemText, ListItemIcon, IconButton } from '@mui/material';
 import {
-    List,
-    ListItem,
-    ListItemText,
-    ListItemIcon,
-    IconButton,
-} from '@mui/material';
-import {
-    DragDropContext, Droppable, Draggable, DropResult, DraggingStyle, NotDraggingStyle,
+    DragDropContext,
+    Droppable,
+    Draggable,
+    DropResult,
+    DraggingStyle,
+    NotDraggingStyle,
 } from 'react-beautiful-dnd';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import EditIcon from '@mui/icons-material/Edit';
@@ -37,8 +34,11 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import NavbarContext from 'components/context/NavbarContext';
 import client, { useQuery } from 'util/client';
 
-const getItemStyle = (isDragging: boolean,
-    draggableStyle: DraggingStyle | NotDraggingStyle | undefined, palette: Palette) => ({
+const getItemStyle = (
+    isDragging: boolean,
+    draggableStyle: DraggingStyle | NotDraggingStyle | undefined,
+    palette: Palette,
+) => ({
     // styles we need to apply on draggables
     ...draggableStyle,
 
@@ -49,11 +49,14 @@ const getItemStyle = (isDragging: boolean,
 
 export default function Categories() {
     const { setTitle, setAction } = useContext(NavbarContext);
-    useEffect(() => { setTitle('Categories'); setAction(<></>); }, []);
+    useEffect(() => {
+        setTitle('Categories');
+        setAction(<></>);
+    }, []);
 
     const { data, mutate } = useQuery<ICategory[]>('/api/v1/category/');
     const categories = useMemo(() => {
-        const res = [...data ?? []];
+        const res = [...(data ?? [])];
         if (res.length > 0 && res[0].name === 'Default') {
             res.shift();
         }
@@ -84,11 +87,7 @@ export default function Categories() {
             return;
         }
 
-        categoryReorder(
-            categories,
-            result.source.index,
-            result.destination.index,
-        );
+        categoryReorder(categories, result.source.index, result.destination.index);
     };
 
     const resetDialog = () => {
@@ -102,7 +101,7 @@ export default function Categories() {
         setDialogOpen(true);
     };
 
-    const handleEditDialogOpen = (index:number) => {
+    const handleEditDialogOpen = (index: number) => {
         setDialogName(categories[index].name);
         setDialogDefault(categories[index].default);
         setCategoryToEdit(index);
@@ -121,19 +120,16 @@ export default function Categories() {
         formData.append('default', dialogDefault.toString());
 
         if (categoryToEdit === -1) {
-            client.post('/api/v1/category/', formData)
-                .finally(() => mutate());
+            client.post('/api/v1/category/', formData).finally(() => mutate());
         } else {
             const category = categories[categoryToEdit];
-            client.patch(`/api/v1/category/${category.id}`, formData)
-                .finally(() => mutate());
+            client.patch(`/api/v1/category/${category.id}`, formData).finally(() => mutate());
         }
     };
 
-    const deleteCategory = (index:number) => {
+    const deleteCategory = (index: number) => {
         const category = categories[index];
-        client.delete(`/api/v1/category/${category.id}`)
-            .finally(() => mutate());
+        client.delete(`/api/v1/category/${category.id}`).finally(() => mutate());
     };
 
     return (
@@ -163,9 +159,7 @@ export default function Categories() {
                                             <ListItemIcon>
                                                 <DragHandleIcon />
                                             </ListItemIcon>
-                                            <ListItemText
-                                                primary={item.name}
-                                            />
+                                            <ListItemText primary={item.name} />
                                             <IconButton
                                                 onClick={() => {
                                                     handleEditDialogOpen(index);
@@ -219,13 +213,13 @@ export default function Categories() {
                         onChange={(e) => setDialogName(e.target.value)}
                     />
                     <FormControlLabel
-                        control={(
+                        control={
                             <Checkbox
                                 checked={dialogDefault}
                                 onChange={(e) => setDialogDefault(e.target.checked)}
                                 color="default"
                             />
-                        )}
+                        }
                         label="Default category when adding new manga to library"
                     />
                 </DialogContent>

src/screens/settings/DefaultReaderSettings.tsx

@@ -31,22 +31,31 @@ export default function DefaultReaderSettings() {
     const { metadata, settings, loading } = useDefaultReaderSettings();
 
     const setSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
-        requestUpdateServerMetadata(metadata ?? {}, [[key, value]]).catch(() => makeToast('Failed to save the default reader settings to the server', 'warning'));
+        requestUpdateServerMetadata(metadata ?? {}, [[key, value]]).catch(() =>
+            makeToast('Failed to save the default reader settings to the server', 'warning'),
+        );
     };
 
     if (loading) {
         return (
-            <Box sx={{
-                height: '100vh', width: '100vw', display: 'grid', placeItems: 'center',
-            }}
+            <Box
+                sx={{
+                    height: '100vh',
+                    width: '100vw',
+                    display: 'grid',
+                    placeItems: 'center',
+                }}
             >
                 <CircularProgress thickness={5} />
             </Box>
         );
     }
 
-    checkAndHandleMissingStoredReaderSettings({ meta: metadata }, 'server', getDefaultSettings())
-        .catch(() => {});
+    checkAndHandleMissingStoredReaderSettings(
+        { meta: metadata },
+        'server',
+        getDefaultSettings(),
+    ).catch(() => {});
 
     return (
         <ReaderSettingsOptions