Merge branch 'mobx'

src/pages/settings/panes/Sync.tsx

@@ -1,17 +1,16 @@
+import { observer } from "mobx-react-lite";
+
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 
-import { dispatch } from "../../../redux";
-import { connectState } from "../../../redux/connector";
-import { SyncKeys, SyncOptions } from "../../../redux/reducers/sync";
+import { useApplicationState } from "../../../mobx/State";
+import { SyncKeys } from "../../../mobx/stores/Sync";
 
 import Checkbox from "../../../components/ui/Checkbox";
 
-interface Props {
-    options?: SyncOptions;
-}
+export const Sync = observer(() => {
+    const sync = useApplicationState().sync;
 
-export function Component(props: Props) {
     return (
         <div className={styles.notifications}>
             {/*<h3>
@@ -31,22 +30,13 @@ export function Component(props: Props) {
             ).map(([key, title]) => (
                 <Checkbox
                     key={key}
-                    checked={
-                        (props.options?.disabled ?? []).indexOf(key) === -1
-                    }
+                    checked={sync.isEnabled(key)}
                     description={
                         <Text
                             id={`app.settings.pages.sync.descriptions.${key}`}
                         />
                     }
-                    onChange={(enabled) =>
-                        dispatch({
-                            type: enabled
-                                ? "SYNC_ENABLE_KEY"
-                                : "SYNC_DISABLE_KEY",
-                            key,
-                        })
-                    }>
+                    onChange={() => sync.toggle(key)}>
                     <Text id={`app.settings.pages.${title}`} />
                 </Checkbox>
             ))}
@@ -55,10 +45,4 @@ export function Component(props: Props) {
                 </h5>*/}
         </div>
     );
-}
-
-export const Sync = connectState(Component, (state) => {
-    return {
-        options: state.sync,
-    };
 });