pl-fe: make the form work

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/actions/settings.ts

@@ -50,14 +50,17 @@ const saveSettings = (opts?: SettingOpts) =>
   };
 
 /** Update settings store for Mastodon, etc. */
-const updateAuthAccount = (url: string, settings: any) => {
+const updateAuthAccount = async (url: string, settings: any) => {
   const key = `authAccount:${url}`;
-  return KVStore.getItem(key).then((oldAccount: any) => {
+  const oldAccount: any = await KVStore.getItem(key);
+  try {
     if (!oldAccount) return;
     if (!oldAccount.settings_store) oldAccount.settings_store = {};
     oldAccount.settings_store[FE_NAME] = settings;
-    KVStore.setItem(key, oldAccount);
-  }).catch(console.error);
+    await KVStore.setItem(key, oldAccount);
+  } catch (error) {
+    console.error(error);
+  }
 };
 
 const updateSettingsStore = (settings: any) =>

packages/pl-fe/src/features/url-privacy/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import { changeSetting } from 'pl-fe/actions/settings';
 import List, { ListItem } from 'pl-fe/components/list';
 import Button from 'pl-fe/components/ui/button';
 import Card, { CardBody, CardHeader, CardTitle } from 'pl-fe/components/ui/card';
@@ -31,6 +32,18 @@ const UrlPrivacy = () => {
   const [hashUrl, setHashUrl] = useState(urlPrivacy.hashUrl);
   const [rulesUrl, setRulesUrl] = useState(urlPrivacy.rulesUrl);
 
+  const onSubmit = () => {
+    dispatch(changeSetting(['urlPrivacy'], {
+      clearLinksInCompose,
+      clearLinksInContent,
+      allowReferralMarketing,
+      hashUrl,
+      rulesUrl,
+    }, {
+      save: true,
+      showAlert: true,
+    }));
+  };
 
   useEffect(() => {
   }, [dispatch]);
@@ -43,7 +56,7 @@ const UrlPrivacy = () => {
         </CardHeader>
 
         <CardBody>
-          <Form>
+          <Form onSubmit={onSubmit}>
             <List>
               <ListItem label={<FormattedMessage id='url_privacy.clear_links_in_compose' defaultMessage='Suggest removing tracking parameters when composing a post' />}>
                 <Toggle checked={clearLinksInCompose} onChange={({ target }) => setClearLinksInCompose(target.checked)} />

packages/pl-fe/src/stores/settings.ts

@@ -1,8 +1,10 @@
+import { defineMessages } from 'react-intl';
 import * as v from 'valibot';
 import { create } from 'zustand';
 import { mutative } from 'zustand-mutative';
 
 import { settingsSchema, type Settings } from 'pl-fe/schemas/pl-fe/settings';
+import toast from 'pl-fe/toast';
 import { updateRulesFromUrl } from 'pl-fe/utils/url-purify';
 
 import type { Emoji } from 'pl-fe/features/emoji';
@@ -12,6 +14,11 @@ import type { APIEntity } from 'pl-fe/types/entities';
 let lazyStore: typeof store;
 import('pl-fe/store').then(({ store }) => lazyStore = store).catch(() => {});
 
+const messages = defineMessages({
+  updateSuccess: { id: 'url_privacy.update.success', defaultMessage: 'Successfully updated rules database' },
+  updateFail: { id: 'url_privacy.update.fail', defaultMessage: 'Failed to update rules database URL' },
+});
+
 const settingsSchemaPartial = v.partial(settingsSchema);
 
 type State = {
@@ -38,12 +45,16 @@ const changeSetting = (object: APIEntity, path: string[], value: any) => {
   return changeSetting(object[path[0]], path.slice(1), value);
 };
 
-const mergeSettings = (state: State) => {
+const mergeSettings = (state: State, updating = false) => {
   const mergedSettings = { ...state.defaultSettings, ...state.userSettings };
-  if (mergedSettings.urlPrivacy.rulesUrl && state.settings.urlPrivacy.rulesUrl !== mergedSettings.urlPrivacy.rulesUrl) {
+  if (updating && mergedSettings.urlPrivacy.rulesUrl && state.settings.urlPrivacy.rulesUrl !== mergedSettings.urlPrivacy.rulesUrl) {
     const me = lazyStore?.getState().me;
     if (me) {
-      updateRulesFromUrl(me, mergedSettings.urlPrivacy.rulesUrl, mergedSettings.urlPrivacy.hashUrl);
+      updateRulesFromUrl(me, mergedSettings.urlPrivacy.rulesUrl, mergedSettings.urlPrivacy.hashUrl).then(() => {
+        toast.success(messages.updateSuccess);
+      }).catch(() => {
+        toast.error(messages.updateFail);
+      });
     }
   }
   state.settings = mergedSettings;
@@ -79,7 +90,7 @@ const useSettingsStore = create<State>()(mutative((set) => ({
     state.userSettings.saved = false;
     changeSetting(state.userSettings, path, value);
 
-    mergeSettings(state);
+    mergeSettings(state, true);
   }),
 
   rememberEmojiUse: (emoji: Emoji) => set((state: State) => {