Use gql for "sources" - preferences

src/components/source/filters/GroupFilter.tsx

@@ -10,14 +10,11 @@ import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
 import React from 'react';
 // eslint-disable-next-line import/no-cycle
-import { SourceFilters } from '@/typings';
+import { ExtractByKeyValue, SourceFilters } from '@/typings';
 import { Options } from '@/components/source/SourceOptions';
 
-// type ExcludeByName<T, K extends string> = T extends { __typename?: K } ? never : T;
-type PickByName<T, K extends string> = T extends { __typename?: K } ? T : never;
-
 interface Props {
-    state: PickByName<SourceFilters, 'GroupFilter'>['filters'];
+    state: ExtractByKeyValue<SourceFilters, '__typename', 'GroupFilter'>['filters'];
     name: string;
     position: number;
     updateFilterValue: Function;

src/components/sourceConfiguration/EditTextPreference.tsx

@@ -22,22 +22,29 @@ import { EditTextPreferenceProps } from '@/typings';
 export default function EditTextPreference(props: EditTextPreferenceProps) {
     const { t } = useTranslation();
 
-    const { title, summary, dialogTitle, dialogMessage, currentValue, updateValue } = props;
+    const {
+        EditTextPreferenceTitle: title,
+        summary,
+        dialogTitle,
+        dialogMessage,
+        EditTextPreferenceCurrentValue: currentValue,
+        updateValue,
+    } = props;
 
-    const [internalCurrentValue, setInternalCurrentValue] = useState<string>(currentValue);
+    const [internalCurrentValue, setInternalCurrentValue] = useState<string>(currentValue ?? '');
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
     const handleDialogCancel = () => {
         setDialogOpen(false);
 
         // reset the dialog
-        setInternalCurrentValue(currentValue);
+        setInternalCurrentValue(currentValue ?? '');
     };
 
     const handleDialogSubmit = () => {
         setDialogOpen(false);
 
-        updateValue(internalCurrentValue);
+        updateValue('editTextState', internalCurrentValue);
     };
 
     return (

src/components/sourceConfiguration/ListPreference.tsx

@@ -85,12 +85,20 @@ function ListDialog(props: IListDialogProps) {
 }
 
 export default function ListPreference(props: ListPreferenceProps) {
-    const { title, summary, currentValue, updateValue, entryValues, entries } = props;
-    const [internalCurrentValue, setInternalCurrentValue] = useState<string>(currentValue);
+    const {
+        ListPreferenceTitle: title,
+        summary,
+        ListPreferenceCurrentValue: currentValue,
+        ListPreferenceDefault: defaultValue,
+        updateValue,
+        entryValues,
+        entries,
+    } = props;
+    const [internalCurrentValue, setInternalCurrentValue] = useState(currentValue ?? defaultValue ?? '');
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
     useEffect(() => {
-        setInternalCurrentValue(currentValue);
+        setInternalCurrentValue(currentValue ?? defaultValue ?? '');
     }, [currentValue]);
 
     const findEntryOf = (value: string) => {
@@ -104,6 +112,10 @@ export default function ListPreference(props: ListPreferenceProps) {
     };
 
     const getSummary = () => {
+        if (currentValue == null) {
+            return '';
+        }
+
         if (summary === '%s') {
             return findEntryOf(currentValue);
         }
@@ -112,7 +124,7 @@ export default function ListPreference(props: ListPreferenceProps) {
 
     const handleDialogClose = (newValue: string | null) => {
         if (newValue !== null) {
-            updateValue(findEntryValueOf(newValue));
+            updateValue('listState', findEntryValueOf(newValue));
 
             // appear smooth
             setInternalCurrentValue(newValue);
@@ -127,7 +139,7 @@ export default function ListPreference(props: ListPreferenceProps) {
                 <ListItemText primary={title} secondary={getSummary()} />
             </ListItemButton>
             <ListDialog
-                title={title}
+                title={title ?? ''}
                 open={dialogOpen}
                 onClose={handleDialogClose}
                 value={findEntryOf(internalCurrentValue)}

src/components/sourceConfiguration/MultiSelectListPreference.tsx

@@ -99,32 +99,40 @@ function ListDialog(props: IListDialogProps) {
 }
 
 export default function MultiSelectListPreference(props: MultiSelectListPreferenceProps) {
-    const { title, summary, currentValue, updateValue, entryValues, entries } = props;
-    const [internalCurrentValue, setInternalCurrentValue] = useState<string[]>(currentValue);
+    const {
+        MultiSelectListPreferenceTitle: title,
+        summary,
+        MultiSelectListPreferenceCurrentValue: currentValue,
+        MultiSelectListPreferenceDefault: defaultValue,
+        updateValue,
+        entryValues,
+        entries,
+    } = props;
+    const [internalCurrentValue, setInternalCurrentValue] = useState(currentValue ?? defaultValue);
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
     useEffect(() => {
         setInternalCurrentValue(currentValue);
     }, [currentValue]);
 
-    const findEntriesOf = (values: string[]) =>
-        values.map((value) => {
+    const findEntriesOf = (values?: string[] | null) =>
+        values?.map((value) => {
             const idx = entryValues.indexOf(value);
             return entries[idx];
-        });
+        }) ?? [];
 
-    const findEntryValuesOf = (values: string[]) =>
-        values.map((value) => {
+    const findEntryValuesOf = (values?: string[] | null) =>
+        values?.map((value) => {
             const idx = entries.indexOf(value);
             return entryValues[idx];
-        });
+        }) ?? [];
 
     const getSummary = () => summary;
 
     const handleDialogClose = (newValue: string[] | null) => {
         if (newValue !== null) {
             // console.log(newValue);
-            updateValue(findEntryValuesOf(newValue));
+            updateValue('multiSelectState', findEntryValuesOf(newValue));
 
             // appear smooth
             setInternalCurrentValue(newValue);
@@ -139,7 +147,7 @@ export default function MultiSelectListPreference(props: MultiSelectListPreferen
                 <ListItemText primary={title} secondary={getSummary()} />
             </ListItemButton>
             <ListDialog
-                title={title}
+                title={title ?? ''}
                 open={dialogOpen}
                 onClose={handleDialogClose}
                 selectedValues={findEntriesOf(internalCurrentValue)}

src/components/sourceConfiguration/TwoStatePreference.tsx

@@ -21,23 +21,48 @@ function getTwoStateType(type: 'Checkbox' | 'Switch') {
     return Checkbox;
 }
 
+const getTwoStateValues = (
+    props: TwoStatePreferenceProps,
+): {
+    title: string;
+    defaultValue: boolean;
+    currentValue?: boolean | null | undefined;
+} => {
+    if (props.type === 'CheckBoxPreference') {
+        return {
+            title: props.CheckBoxTitle,
+            defaultValue: props.CheckBoxDefault,
+            currentValue: props.CheckBoxCheckBoxCurrentValue,
+        };
+    }
+
+    return {
+        title: props.SwitchPreferenceTitle,
+        defaultValue: props.SwitchPreferenceDefault,
+        currentValue: props.SwitchPreferenceCurrentValue,
+    };
+};
+
 function TwoSatePreference(props: TwoStatePreferenceProps) {
-    const { title, summary, currentValue, updateValue, type } = props;
-    const [internalCurrentValue, setInternalCurrentValue] = useState<boolean>(currentValue);
+    const { title, defaultValue, currentValue, summary, updateValue, twoStateType } = {
+        ...props,
+        ...getTwoStateValues(props),
+    };
+    const [internalCurrentValue, setInternalCurrentValue] = useState(currentValue ?? defaultValue);
 
     useEffect(() => {
-        setInternalCurrentValue(currentValue);
+        setInternalCurrentValue(currentValue ?? defaultValue);
     }, [currentValue]);
 
     return (
         <ListItem>
             <ListItemText primary={title} secondary={summary} />
             <ListItemSecondaryAction>
-                {createElement(getTwoStateType(type), {
+                {createElement(getTwoStateType(twoStateType), {
                     edge: 'end',
                     checked: internalCurrentValue,
                     onChange: () => {
-                        updateValue(!currentValue);
+                        updateValue(twoStateType === 'Switch' ? 'switchState' : 'checkBoxState', !currentValue);
 
                         // appear smooth
                         setInternalCurrentValue(!currentValue);
@@ -49,11 +74,11 @@ function TwoSatePreference(props: TwoStatePreferenceProps) {
 }
 
 export function CheckBoxPreference(props: CheckBoxPreferenceProps) {
-    return <TwoSatePreference {...props} type="Checkbox" />;
+    return <TwoSatePreference {...props} twoStateType="Checkbox" />;
 }
 
 export function SwitchPreferenceCompat(props: SwitchPreferenceCompatProps) {
-    return <TwoSatePreference {...props} type="Switch" />;
+    return <TwoSatePreference {...props} twoStateType="Switch" />;
 }
 
 export default { CheckBoxPreference, SwitchPreferenceCompat };