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/components/sourceConfiguration/EditTextPreference.tsx

@@ -17,9 +17,7 @@ import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 
 export default function EditTextPreference(props: EditTextPreferenceProps) {
-    const {
-        title, summary, dialogTitle, dialogMessage, currentValue, updateValue,
-    } = props;
+    const { title, summary, dialogTitle, dialogMessage, currentValue, updateValue } = props;
 
     const [internalCurrentValue, setInternalCurrentValue] = useState<string>(currentValue);
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
@@ -39,23 +37,13 @@ export default function EditTextPreference(props: EditTextPreferenceProps) {
 
     return (
         <>
-            <ListItem
-                button
-                onClick={() => setDialogOpen(true)}
-            >
-                <ListItemText
-                    primary={title}
-                    secondary={summary}
-                />
+            <ListItem button onClick={() => setDialogOpen(true)}>
+                <ListItemText primary={title} secondary={summary} />
             </ListItem>
             <Dialog open={dialogOpen} onClose={handleDialogCancel}>
-                <DialogTitle>
-                    {dialogTitle}
-                </DialogTitle>
+                <DialogTitle>{dialogTitle}</DialogTitle>
                 <DialogContent>
-                    <DialogContentText>
-                        {dialogMessage}
-                    </DialogContentText>
+                    <DialogContentText>{dialogMessage}</DialogContentText>
                     <TextField
                         autoFocus
                         margin="dense"

src/components/sourceConfiguration/ListPreference.tsx

@@ -17,18 +17,16 @@ import Radio from '@mui/material/Radio';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
 
-interface IListDialogProps{
-    value: string
-    open: boolean
-    onClose: (arg0: string | null) => void
-    options: string[]
-    title: string
+interface IListDialogProps {
+    value: string;
+    open: boolean;
+    onClose: (arg0: string | null) => void;
+    options: string[];
+    title: string;
 }
 
 function ListDialog(props: IListDialogProps) {
-    const {
-        value: valueProp, open, onClose, options, title,
-    } = props;
+    const { value: valueProp, open, onClose, options, title } = props;
     const [value, setValue] = React.useState(valueProp);
     const radioGroupRef = React.useRef<HTMLDivElement>(null);
 
@@ -65,11 +63,7 @@ function ListDialog(props: IListDialogProps) {
         >
             <DialogTitle>{title}</DialogTitle>
             <DialogContent dividers>
-                <RadioGroup
-                    ref={radioGroupRef}
-                    value={value}
-                    onChange={handleChange}
-                >
+                <RadioGroup ref={radioGroupRef} value={value} onChange={handleChange}>
                     {options.map((option) => (
                         <FormControlLabel
                             value={option}
@@ -91,9 +85,7 @@ function ListDialog(props: IListDialogProps) {
 }
 
 export default function ListPreference(props: ListPreferenceProps) {
-    const {
-        title, summary, currentValue, updateValue, entryValues, entries,
-    } = props;
+    const { title, summary, currentValue, updateValue, entryValues, entries } = props;
     const [internalCurrentValue, setInternalCurrentValue] = useState<string>(currentValue);
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
@@ -131,10 +123,7 @@ export default function ListPreference(props: ListPreferenceProps) {
 
     return (
         <>
-            <ListItem
-                button
-                onClick={() => setDialogOpen(true)}
-            >
+            <ListItem button onClick={() => setDialogOpen(true)}>
                 <ListItemText primary={title} secondary={getSummary()} />
             </ListItem>
             <ListDialog

src/components/sourceConfiguration/MultiSelectListPreference.tsx

@@ -18,18 +18,16 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
 import cloneObject from 'util/cloneObject';
 
-interface IListDialogProps{
-    selectedValues: string[]
-    open: boolean
-    onClose: (arg0: string[] | null) => void
-    values: string[]
-    title: string
+interface IListDialogProps {
+    selectedValues: string[];
+    open: boolean;
+    onClose: (arg0: string[] | null) => void;
+    values: string[];
+    title: string;
 }
 
 function ListDialog(props: IListDialogProps) {
-    const {
-        selectedValues: selectedValuesProp, open, onClose, values, title,
-    } = props;
+    const { selectedValues: selectedValuesProp, open, onClose, values, title } = props;
     const [selectedValues, setSelectedValues] = React.useState(selectedValuesProp);
 
     React.useEffect(() => {
@@ -56,7 +54,8 @@ function ListDialog(props: IListDialogProps) {
                 selectedValuesClone.push(value);
                 setSelectedValues(selectedValuesClone);
             }
-        } else if (hasEntry) { // not checked and has entry
+        } else if (hasEntry) {
+            // not checked and has entry
             const selectedValuesClone = cloneObject(selectedValues) as string[];
             const index = selectedValuesClone.indexOf(value);
             selectedValuesClone.splice(index, 1);
@@ -75,7 +74,7 @@ function ListDialog(props: IListDialogProps) {
                 <FormGroup>
                     {values.map((value) => (
                         <FormControlLabel
-                            control={(
+                            control={
                                 <Checkbox
                                     checked={selectedValues.some(
                                         (selectedValue) => value === selectedValue,
@@ -83,7 +82,7 @@ function ListDialog(props: IListDialogProps) {
                                     onChange={(e) => handleChange(e, value)}
                                     color="default"
                                 />
-                            )}
+                            }
                             label={value}
                             key={value}
                         />
@@ -101,9 +100,7 @@ function ListDialog(props: IListDialogProps) {
 }
 
 export default function MultiSelectListPreference(props: MultiSelectListPreferenceProps) {
-    const {
-        title, summary, currentValue, updateValue, entryValues, entries,
-    } = props;
+    const { title, summary, currentValue, updateValue, entryValues, entries } = props;
     const [internalCurrentValue, setInternalCurrentValue] = useState<string[]>(currentValue);
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
@@ -111,15 +108,17 @@ export default function MultiSelectListPreference(props: MultiSelectListPreferen
         setInternalCurrentValue(currentValue);
     }, [currentValue]);
 
-    const findEntriesOf = (values: string[]) => values.map((value) => {
-        const idx = entryValues.indexOf(value);
-        return entries[idx];
-    });
+    const findEntriesOf = (values: string[]) =>
+        values.map((value) => {
+            const idx = entryValues.indexOf(value);
+            return entries[idx];
+        });
 
-    const findEntryValuesOf = (values: string[]) => values.map((value) => {
-        const idx = entries.indexOf(value);
-        return entryValues[idx];
-    });
+    const findEntryValuesOf = (values: string[]) =>
+        values.map((value) => {
+            const idx = entries.indexOf(value);
+            return entryValues[idx];
+        });
 
     const getSummary = () => summary;
 
@@ -137,10 +136,7 @@ export default function MultiSelectListPreference(props: MultiSelectListPreferen
 
     return (
         <>
-            <ListItem
-                button
-                onClick={() => setDialogOpen(true)}
-            >
+            <ListItem button onClick={() => setDialogOpen(true)}>
                 <ListItemText primary={title} secondary={getSummary()} />
             </ListItem>
             <ListDialog

src/components/sourceConfiguration/TwoStatePreference.tsx

@@ -13,14 +13,14 @@ import Switch from '@mui/material/Switch';
 import Checkbox from '@mui/material/Checkbox';
 
 function getTwoStateType(type: 'Checkbox' | 'Switch') {
-    if (type === 'Switch') { return Switch; }
+    if (type === 'Switch') {
+        return Switch;
+    }
     return Checkbox;
 }
 
 function TwoSatePreference(props: TwoStatePreferenceProps) {
-    const {
-        title, summary, currentValue, updateValue, type,
-    } = props;
+    const { title, summary, currentValue, updateValue, type } = props;
     const [internalCurrentValue, setInternalCurrentValue] = useState<boolean>(currentValue);
 
     useEffect(() => {
@@ -31,17 +31,16 @@ function TwoSatePreference(props: TwoStatePreferenceProps) {
         <ListItem>
             <ListItemText primary={title} secondary={summary} />
             <ListItemSecondaryAction>
-                {React.createElement(getTwoStateType(type),
-                    {
-                        edge: 'end',
-                        checked: internalCurrentValue,
-                        onChange: () => {
-                            updateValue(!currentValue);
+                {React.createElement(getTwoStateType(type), {
+                    edge: 'end',
+                    checked: internalCurrentValue,
+                    onChange: () => {
+                        updateValue(!currentValue);
 
-                            // appear smooth
-                            setInternalCurrentValue(!currentValue);
-                        },
-                    })}
+                        // appear smooth
+                        setInternalCurrentValue(!currentValue);
+                    },
+                })}
             </ListItemSecondaryAction>
         </ListItem>
     );
@@ -50,6 +49,7 @@ function TwoSatePreference(props: TwoStatePreferenceProps) {
 export function CheckBoxPreference(props: CheckBoxPreferenceProps) {
     return <TwoSatePreference {...props} type="Checkbox" />;
 }
+
 export function SwitchPreferenceCompat(props: SwitchPreferenceCompatProps) {
     return <TwoSatePreference {...props} type="Switch" />;
 }