improve editing and saving app settings

.changeset/slimy-peas-sit.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Improve editing and saving app settings

src/views/settings/database-settings.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
   Button,
   AccordionItem,
@@ -7,7 +8,6 @@ import {
   AccordionIcon,
   ButtonGroup,
 } from "@chakra-ui/react";
-import { useState } from "react";
 import { clearCacheData, deleteDatabase } from "../../services/db";
 
 export default function DatabaseSettings() {

src/views/settings/display-settings.tsx

@@ -1,3 +1,4 @@
+import { useFormContext } from "react-hook-form";
 import {
   Flex,
   FormControl,
@@ -10,41 +11,11 @@ import {
   AccordionIcon,
   FormHelperText,
   Input,
-  InputProps,
 } from "@chakra-ui/react";
-import { useEffect, useRef, useState } from "react";
-import useAppSettings from "../../hooks/use-app-settings";
-
-function ColorPicker({ value, onPickColor, ...props }: { onPickColor?: (color: string) => void } & InputProps) {
-  const [tmpColor, setTmpColor] = useState(value);
-  const ref = useRef<HTMLInputElement>();
-
-  useEffect(() => setTmpColor(value), [value]);
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.onchange = () => {
-        if (onPickColor && ref.current?.value) {
-          onPickColor(ref.current.value);
-        }
-      };
-    }
-  });
-
-  return (
-    <Input
-      {...props}
-      ref={ref}
-      value={tmpColor}
-      onChange={(e) => {
-        setTmpColor(e.target.value);
-        if (props.onChange) props.onChange(e);
-      }}
-    />
-  );
-}
+import { AppSettings } from "../../services/user-app-settings";
 
 export default function DisplaySettings() {
-  const { blurImages, colorMode, primaryColor, updateSettings, showContentWarning } = useAppSettings();
+  const { register } = useFormContext<AppSettings>();
 
   return (
     <AccordionItem>
@@ -60,14 +31,10 @@ export default function DisplaySettings() {
         <Flex direction="column" gap="4">
           <FormControl>
             <Flex alignItems="center">
-              <FormLabel htmlFor="use-dark-theme" mb="0">
+              <FormLabel htmlFor="colorMode" mb="0">
                 Use dark theme
               </FormLabel>
-              <Switch
-                id="use-dark-theme"
-                isChecked={colorMode === "dark"}
-                onChange={(v) => updateSettings({ colorMode: v.target.checked ? "dark" : "light" })}
-              />
+              <Switch id="colorMode" {...register("colorMode")} />
             </Flex>
             <FormHelperText>
               <span>Enables hacker mode</span>
@@ -75,17 +42,10 @@ export default function DisplaySettings() {
           </FormControl>
           <FormControl>
             <Flex alignItems="center">
-              <FormLabel htmlFor="primary-color" mb="0">
+              <FormLabel htmlFor="primaryColor" mb="0">
                 Primary Color
               </FormLabel>
-              <ColorPicker
-                id="primary-color"
-                type="color"
-                value={primaryColor}
-                onPickColor={(color) => updateSettings({ primaryColor: color })}
-                maxW="120"
-                size="sm"
-              />
+              <Input id="primaryColor" type="color" maxW="120" size="sm" {...register("primaryColor")} />
             </Flex>
             <FormHelperText>
               <span>The primary color of the theme</span>
@@ -93,14 +53,10 @@ export default function DisplaySettings() {
           </FormControl>
           <FormControl>
             <Flex alignItems="center">
-              <FormLabel htmlFor="blur-images" mb="0">
+              <FormLabel htmlFor="blurImages" mb="0">
                 Blur images from strangers
               </FormLabel>
-              <Switch
-                id="blur-images"
-                isChecked={blurImages}
-                onChange={(v) => updateSettings({ blurImages: v.target.checked })}
-              />
+              <Switch id="blurImages" {...register("blurImages")} />
             </Flex>
             <FormHelperText>
               <span>Enabled: blur images for people you aren't following</span>
@@ -111,31 +67,12 @@ export default function DisplaySettings() {
               <FormLabel htmlFor="show-content-warning" mb="0">
                 Show content warning
               </FormLabel>
-              <Switch
-                id="show-content-warning"
-                isChecked={showContentWarning}
-                onChange={(v) => updateSettings({ showContentWarning: v.target.checked })}
-              />
+              <Switch id="show-content-warning" {...register("showContentWarning")} />
             </Flex>
             <FormHelperText>
               <span>Enabled: shows a warning for notes with NIP-36 Content Warning</span>
             </FormHelperText>
           </FormControl>
-          <FormControl>
-            <Flex alignItems="center">
-              <FormLabel htmlFor="show-ads" mb="0">
-                Show Ads
-              </FormLabel>
-              <Switch
-                id="show-ads"
-                isChecked={false}
-                onChange={(v) => alert("Sorry, that feature will never be finished.")}
-              />
-            </Flex>
-            <FormHelperText>
-              <span>Enabled: shows ads so I can steal your data</span>
-            </FormHelperText>
-          </FormControl>
         </Flex>
       </AccordionPanel>
     </AccordionItem>

src/views/settings/index.tsx

@@ -1,38 +1,56 @@
 import { Button, Flex, Accordion, Link } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
-import accountService from "../../services/account";
-import { GithubIcon, LogoutIcon, ToolsIcon } from "../../components/icons";
+import { GithubIcon, ToolsIcon } from "../../components/icons";
 import LightningSettings from "./lightning-settings";
 import DatabaseSettings from "./database-settings";
 import DisplaySettings from "./display-settings";
 import PerformanceSettings from "./performance-settings";
 import PrivacySettings from "./privacy-settings";
+import useAppSettings from "../../hooks/use-app-settings";
+import { FormProvider, useForm } from "react-hook-form";
 
 export default function SettingsView() {
+  const { updateSettings, ...settings } = useAppSettings();
+
+  const form = useForm({
+    mode: "onBlur",
+    values: settings,
+  });
+
+  const saveSettings = form.handleSubmit(async (values) => {
+    await updateSettings(values);
+  });
+
   return (
     <Flex direction="column" pt="2" pb="2" overflow="auto">
-      <Accordion defaultIndex={[0]} allowMultiple>
-        <DisplaySettings />
-
-        <PerformanceSettings />
-
-        <PrivacySettings />
-
-        <LightningSettings />
-
-        <DatabaseSettings />
-      </Accordion>
-      <Flex gap="2" padding="4" alignItems="center">
-        <Button leftIcon={<LogoutIcon />} onClick={() => accountService.logout()}>
-          Logout
-        </Button>
-        <Button as={RouterLink} to="/tools" leftIcon={<ToolsIcon />}>
-          Tools
-        </Button>
-        <Link isExternal href="https://github.com/hzrd149/nostrudel" ml="auto">
-          <GithubIcon /> Github
-        </Link>
-      </Flex>
+      <form onSubmit={saveSettings}>
+        <FormProvider {...form}>
+          <Accordion defaultIndex={[0]} allowMultiple>
+            <DisplaySettings />
+            <PerformanceSettings />
+            <PrivacySettings />
+            <LightningSettings />
+            <DatabaseSettings />
+          </Accordion>
+        </FormProvider>
+        <Flex gap="4" padding="4" alignItems="center">
+          <Button as={RouterLink} to="/tools" leftIcon={<ToolsIcon />}>
+            Tools
+          </Button>
+          <Link isExternal href="https://github.com/hzrd149/nostrudel">
+            <GithubIcon /> Github
+          </Link>
+          <Button
+            ml="auto"
+            isLoading={form.formState.isLoading}
+            isDisabled={!form.formState.isDirty}
+            colorScheme="brand"
+            type="submit"
+          >
+            Save Settings
+          </Button>
+        </Flex>
+      </form>
     </Flex>
   );
 }

src/views/settings/lightning-settings.tsx

@@ -11,18 +11,12 @@ import {
   Input,
   Select,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import appSettings, { replaceSettings } from "../../services/app-settings";
-import useSubject from "../../hooks/use-subject";
 import { LightningIcon } from "../../components/icons";
-import { LightningPayMode } from "../../services/user-app-settings";
-import useAppSettings from "../../hooks/use-app-settings";
+import { AppSettings } from "../../services/user-app-settings";
+import { useFormContext } from "react-hook-form";
 
 export default function LightningSettings() {
-  const { lightningPayMode, zapAmounts, updateSettings } = useAppSettings();
-
-  const [zapInput, setZapInput] = useState(zapAmounts.join(","));
-  useEffect(() => setZapInput(zapAmounts.join(",")), [zapAmounts.join(",")]);
+  const { register } = useFormContext<AppSettings>();
 
   return (
     <AccordionItem>
@@ -37,14 +31,10 @@ export default function LightningSettings() {
       <AccordionPanel>
         <Flex direction="column" gap="4">
           <FormControl>
-            <FormLabel htmlFor="lightning-payment-mode" mb="0">
+            <FormLabel htmlFor="lightningPayMode" mb="0">
               Payment mode
             </FormLabel>
-            <Select
-              id="lightning-payment-mode"
-              value={lightningPayMode}
-              onChange={(e) => updateSettings({ lightningPayMode: e.target.value as LightningPayMode })}
-            >
+            <Select id="lightningPayMode" {...register("lightningPayMode")}>
               <option value="prompt">Prompt</option>
               <option value="webln">WebLN</option>
               <option value="external">External</option>
@@ -64,18 +54,20 @@ export default function LightningSettings() {
             </FormLabel>
             <Input
               id="zap-amounts"
-              value={zapInput}
-              onChange={(e) => setZapInput(e.target.value)}
-              onBlur={() => {
-                const amounts = zapInput
-                  .split(",")
-                  .map((v) => parseInt(v))
-                  .filter(Boolean)
-                  .sort((a, b) => a - b);
-
-                updateSettings({ zapAmounts: amounts });
-                setZapInput(amounts.join(","));
-              }}
+              autoComplete="off"
+              {...register("zapAmounts", {
+                setValueAs: (value: number[] | string) => {
+                  if (Array.isArray(value)) {
+                    return Array.from(value).join(",");
+                  } else {
+                    return value
+                      .split(",")
+                      .map((v) => parseInt(v))
+                      .filter(Boolean)
+                      .sort((a, b) => a - b);
+                  }
+                },
+              })}
             />
             <FormHelperText>
               <span>Comma separated list of custom zap amounts</span>

src/views/settings/performance-settings.tsx

@@ -1,3 +1,4 @@
+import { useFormContext } from "react-hook-form";
 import {
   Flex,
   FormControl,
@@ -11,16 +12,13 @@ import {
   FormHelperText,
   Input,
   Link,
+  FormErrorMessage,
 } from "@chakra-ui/react";
-import useAppSettings from "../../hooks/use-app-settings";
-import { useEffect, useState } from "react";
+import { AppSettings } from "../../services/user-app-settings";
+import { safeUrl } from "../../helpers/parse";
 
 export default function PerformanceSettings() {
-  const { autoShowMedia, proxyUserMedia, showReactions, showSignatureVerification, updateSettings, imageProxy } =
-    useAppSettings();
-
-  const [proxyInput, setProxyInput] = useState(imageProxy);
-  useEffect(() => setProxyInput(imageProxy), [imageProxy]);
+  const { register, formState } = useFormContext<AppSettings>();
 
   return (
     <AccordionItem>
@@ -39,11 +37,7 @@ export default function PerformanceSettings() {
               <FormLabel htmlFor="proxy-user-media" mb="0">
                 Proxy user media
               </FormLabel>
-              <Switch
-                id="proxy-user-media"
-                isChecked={proxyUserMedia}
-                onChange={(v) => updateSettings({ proxyUserMedia: v.target.checked })}
-              />
+              <Switch id="proxy-user-media" {...register("proxyUserMedia")} />
             </Flex>
             <FormHelperText>
               <span>Enabled: Use media.nostr.band to get smaller profile pictures (saves ~50Mb of data)</span>
@@ -52,24 +46,17 @@ export default function PerformanceSettings() {
             </FormHelperText>
           </FormControl>
           <FormControl>
-            <FormLabel htmlFor="image-proxy" mb="0">
+            <FormLabel htmlFor="imageProxy" mb="0">
               Image proxy service
             </FormLabel>
             <Input
-              id="image-proxy"
+              id="imageProxy"
               type="url"
-              value={proxyInput}
-              onChange={(e) => setProxyInput(e.target.value)}
-              onBlur={() => {
-                try {
-                  const url = proxyInput ? new URL(proxyInput).toString() : "";
-                  if (url !== imageProxy) {
-                    updateSettings({ imageProxy: url });
-                    setProxyInput(url);
-                  }
-                } catch (e) {}
-              }}
+              {...register("imageProxy", {
+                setValueAs: (v) => safeUrl(v) || v,
+              })}
             />
+            {formState.errors.imageProxy && <FormErrorMessage>{formState.errors.imageProxy.message}</FormErrorMessage>}
             <FormHelperText>
               <span>
                 A URL to an instance of{" "}
@@ -81,40 +68,28 @@ export default function PerformanceSettings() {
           </FormControl>
           <FormControl>
             <Flex alignItems="center">
-              <FormLabel htmlFor="auto-show-embeds" mb="0">
-                Automatically show media
+              <FormLabel htmlFor="autoShowMedia" mb="0">
+                Show embeds
               </FormLabel>
-              <Switch
-                id="auto-show-embeds"
-                isChecked={autoShowMedia}
-                onChange={(v) => updateSettings({ autoShowMedia: v.target.checked })}
-              />
+              <Switch id="autoShowMedia" {...register("autoShowMedia")} />
             </Flex>
-            <FormHelperText>Disabled: Images and videos will show expandable buttons</FormHelperText>
+            <FormHelperText>Disabled: Embeds will show an expandable button</FormHelperText>
           </FormControl>
           <FormControl>
             <Flex alignItems="center">
-              <FormLabel htmlFor="show-reactions" mb="0">
+              <FormLabel htmlFor="showReactions" mb="0">
                 Show reactions
               </FormLabel>
-              <Switch
-                id="show-reactions"
-                isChecked={showReactions}
-                onChange={(v) => updateSettings({ showReactions: v.target.checked })}
-              />
+              <Switch id="showReactions" {...register("showReactions")} />
             </Flex>
             <FormHelperText>Enabled: Show reactions on notes</FormHelperText>
           </FormControl>
           <FormControl>
             <Flex alignItems="center">
-              <FormLabel htmlFor="show-sig-verify" mb="0">
+              <FormLabel htmlFor="showSignatureVerification" mb="0">
                 Show signature verification
               </FormLabel>
-              <Switch
-                id="show-sig-verify"
-                isChecked={showSignatureVerification}
-                onChange={(v) => updateSettings({ showSignatureVerification: v.target.checked })}
-              />
+              <Switch id="showSignatureVerification" {...register("showSignatureVerification")} />
             </Flex>
             <FormHelperText>Enabled: show signature verification on notes</FormHelperText>
           </FormControl>

src/views/settings/privacy-settings.tsx

@@ -2,7 +2,6 @@ import {
   Flex,
   FormControl,
   FormLabel,
-  Switch,
   AccordionItem,
   AccordionPanel,
   AccordionButton,
@@ -11,12 +10,10 @@ import {
   FormHelperText,
   Input,
   Link,
-  Button,
   FormErrorMessage,
 } from "@chakra-ui/react";
-import useAppSettings from "../../hooks/use-app-settings";
-import { useForm } from "react-hook-form";
-import { useAsync } from "react-use";
+import { useFormContext } from "react-hook-form";
+import { AppSettings } from "../../services/user-app-settings";
 
 async function validateInvidiousUrl(url?: string) {
   if (!url) return true;
@@ -29,21 +26,7 @@ async function validateInvidiousUrl(url?: string) {
 }
 
 export default function PrivacySettings() {
-  const { youtubeRedirect, twitterRedirect, redditRedirect, corsProxy, updateSettings } = useAppSettings();
-
-  const { register, handleSubmit, formState } = useForm({
-    mode: "onBlur",
-    defaultValues: {
-      youtubeRedirect,
-      twitterRedirect,
-      redditRedirect,
-      corsProxy,
-    },
-  });
-
-  const save = handleSubmit(async (values) => {
-    await updateSettings(values);
-  });
+  const { register, formState } = useFormContext<AppSettings>();
 
   return (
     <AccordionItem>
@@ -56,88 +39,76 @@ export default function PrivacySettings() {
         </AccordionButton>
       </h2>
       <AccordionPanel>
-        <form onSubmit={save}>
-          <Flex direction="column" gap="4">
-            <FormControl isInvalid={!!formState.errors.twitterRedirect}>
-              <FormLabel>Nitter instance</FormLabel>
-              <Input type="url" placeholder="https://nitter.net/" {...register("twitterRedirect")} />
-              {formState.errors.twitterRedirect && (
-                <FormErrorMessage>{formState.errors.twitterRedirect.message}</FormErrorMessage>
-              )}
-              <FormHelperText>
-                Nitter is a privacy focused UI for twitter.{" "}
-                <Link href="https://github.com/zedeus/nitter/wiki/Instances" isExternal color="blue.500">
-                  Nitter instances
-                </Link>
-              </FormHelperText>
-            </FormControl>
+        <Flex direction="column" gap="4">
+          <FormControl isInvalid={!!formState.errors.twitterRedirect}>
+            <FormLabel>Nitter instance</FormLabel>
+            <Input type="url" placeholder="https://nitter.net/" {...register("twitterRedirect")} />
+            {formState.errors.twitterRedirect && (
+              <FormErrorMessage>{formState.errors.twitterRedirect.message}</FormErrorMessage>
+            )}
+            <FormHelperText>
+              Nitter is a privacy focused UI for twitter.{" "}
+              <Link href="https://github.com/zedeus/nitter/wiki/Instances" isExternal color="blue.500">
+                Nitter instances
+              </Link>
+            </FormHelperText>
+          </FormControl>
 
-            <FormControl isInvalid={!!formState.errors.youtubeRedirect}>
-              <FormLabel>Invidious instance</FormLabel>
-              <Input
-                type="url"
-                placeholder="Invidious instance url"
-                {...register("youtubeRedirect", {
-                  validate: validateInvidiousUrl,
-                })}
-              />
-              {formState.errors.youtubeRedirect && (
-                <FormErrorMessage>{formState.errors.youtubeRedirect.message}</FormErrorMessage>
-              )}
-              <FormHelperText>
-                Invidious is a privacy focused UI for youtube.{" "}
-                <Link href="https://docs.invidious.io/instances" isExternal color="blue.500">
-                  Invidious instances
-                </Link>
-              </FormHelperText>
-            </FormControl>
+          <FormControl isInvalid={!!formState.errors.youtubeRedirect}>
+            <FormLabel>Invidious instance</FormLabel>
+            <Input
+              type="url"
+              placeholder="Invidious instance url"
+              {...register("youtubeRedirect", {
+                validate: validateInvidiousUrl,
+              })}
+            />
+            {formState.errors.youtubeRedirect && (
+              <FormErrorMessage>{formState.errors.youtubeRedirect.message}</FormErrorMessage>
+            )}
+            <FormHelperText>
+              Invidious is a privacy focused UI for youtube.{" "}
+              <Link href="https://docs.invidious.io/instances" isExternal color="blue.500">
+                Invidious instances
+              </Link>
+            </FormHelperText>
+          </FormControl>
 
-            <FormControl isInvalid={!!formState.errors.redditRedirect}>
-              <FormLabel>Teddit / Libreddit instance</FormLabel>
-              <Input type="url" placeholder="https://nitter.net/" {...register("redditRedirect")} />
-              {formState.errors.redditRedirect && (
-                <FormErrorMessage>{formState.errors.redditRedirect.message}</FormErrorMessage>
-              )}
-              <FormHelperText>
-                Libreddit and Teddit are both privacy focused UIs for reddit.{" "}
-                <Link
-                  href="https://github.com/libreddit/libreddit-instances/blob/master/instances.md"
-                  isExternal
-                  color="blue.500"
-                >
-                  Libreddit instances
-                </Link>
-                {", "}
-                <Link href="https://codeberg.org/teddit/teddit#instances" isExternal color="blue.500">
-                  Teddit instances
-                </Link>
-              </FormHelperText>
-            </FormControl>
+          <FormControl isInvalid={!!formState.errors.redditRedirect}>
+            <FormLabel>Teddit / Libreddit instance</FormLabel>
+            <Input type="url" placeholder="https://nitter.net/" {...register("redditRedirect")} />
+            {formState.errors.redditRedirect && (
+              <FormErrorMessage>{formState.errors.redditRedirect.message}</FormErrorMessage>
+            )}
+            <FormHelperText>
+              Libreddit and Teddit are both privacy focused UIs for reddit.{" "}
+              <Link
+                href="https://github.com/libreddit/libreddit-instances/blob/master/instances.md"
+                isExternal
+                color="blue.500"
+              >
+                Libreddit instances
+              </Link>
+              {", "}
+              <Link href="https://codeberg.org/teddit/teddit#instances" isExternal color="blue.500">
+                Teddit instances
+              </Link>
+            </FormHelperText>
+          </FormControl>
 
-            <FormControl isInvalid={!!formState.errors.corsProxy}>
-              <FormLabel>CORS Proxy</FormLabel>
-              <Input type="url" placeholder="https://cors.example.com/" {...register("corsProxy")} />
-              {formState.errors.corsProxy && <FormErrorMessage>{formState.errors.corsProxy.message}</FormErrorMessage>}
-              <FormHelperText>
-                This is used as a fallback when verifying NIP-05 ids and fetching open-graph metadata. URL to an
-                instance of{" "}
-                <Link href="https://github.com/Rob--W/cors-anywhere" isExternal color="blue.500">
-                  cors-anywhere
-                </Link>
-              </FormHelperText>
-            </FormControl>
-
-            <Button
-              colorScheme="brand"
-              ml="auto"
-              isLoading={formState.isSubmitting}
-              type="submit"
-              isDisabled={!formState.isDirty}
-            >
-              Save
-            </Button>
-          </Flex>
-        </form>
+          <FormControl isInvalid={!!formState.errors.corsProxy}>
+            <FormLabel>CORS Proxy</FormLabel>
+            <Input type="url" placeholder="https://cors.example.com/" {...register("corsProxy")} />
+            {formState.errors.corsProxy && <FormErrorMessage>{formState.errors.corsProxy.message}</FormErrorMessage>}
+            <FormHelperText>
+              This is used as a fallback when verifying NIP-05 ids and fetching open-graph metadata. URL to an instance
+              of{" "}
+              <Link href="https://github.com/Rob--W/cors-anywhere" isExternal color="blue.500">
+                cors-anywhere
+              </Link>
+            </FormHelperText>
+          </FormControl>
+        </Flex>
       </AccordionPanel>
     </AccordionItem>
   );