v3 - fix(SoMeInputs): remove useEffects and use proper form patches (#…

…530) * fix(SoMeInputs): remove useEffects and use proper form patches * fix(soMeInputs): add missing label identifiers
varianter · Sep 3, 2024 · b368e3b · b368e3b
1 parent e2c9d25
commit b368e3b
Showing 1 changed file with 37 additions and 32 deletions.
diff --git a/studio/components/SoMeInputs.tsx b/studio/components/SoMeInputs.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { ObjectInputProps, PatchEvent, set } from "sanity";
+import React from "react";
+import { ObjectInputProps, set } from "sanity";
 import { Box, TextInput, Select, Stack, Label } from "@sanity/ui";
 
 export const SoMePlatforms: { [key: string]: string } = {
@@ -14,62 +14,67 @@ export const SoMePlatforms: { [key: string]: string } = {
   tikTok: "Tiktok",
 };
 
+const detectPlatformFromUrl = (url: string): string | null => {
+  for (const key in SoMePlatforms) {
+    if (url.includes(key)) {
+      return SoMePlatforms[key];
+    }
+  }
+  return null;
+};
+
 const SoMeInputs: React.FC<ObjectInputProps<Record<string, any>>> = ({
   value = {},
   onChange,
 }) => {
-  const [url, setUrl] = useState(value.url || "");
-  const [platform, setPlatform] = useState(value.platform || "");
-
-  useEffect(() => {
-    let detectedPlatform = "";
-    for (const key in SoMePlatforms) {
-      if (url.includes(key)) {
-        detectedPlatform = SoMePlatforms[key];
-        break;
-      }
-    }
-    setPlatform(detectedPlatform);
-    if (onChange) {
-      onChange(
-        PatchEvent.from([set({ ...value, url, platform: detectedPlatform })]),
-      );
-    }
-  }, [url, onChange]);
-
   const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!onChange) return;
     const newUrl = event.target.value;
-    setUrl(newUrl);
+    onChange(set(newUrl, ["url"]));
+    const detectedPlatform = detectPlatformFromUrl(newUrl);
+    if (detectedPlatform !== null) {
+      onChange(set(detectedPlatform, ["platform"]));
+    }
   };
 
   const handlePlatformChange = (
     event: React.ChangeEvent<HTMLSelectElement>,
   ) => {
+    if (!onChange) return;
     const newPlatform = event.target.value;
-    setPlatform(newPlatform);
-    if (onChange) {
-      onChange(
-        PatchEvent.from([set({ ...value, url, platform: newPlatform })]),
-      );
-    }
+    onChange(set(newPlatform, ["platform"]));
   };
 
+  const urlInputName = "social-url-input";
+  const platformInputName = "social-platform-input";
+
   return (
     <Stack space={6}>
       <Box>
         <Stack space={3}>
-          <Label>URL</Label>
+          <Label htmlFor={urlInputName} as={"label"}>
+            URL
+          </Label>
           <TextInput
-            value={url}
+            id={urlInputName}
+            name={urlInputName}
+            value={value.url}
             onChange={handleUrlChange}
             placeholder="Enter URL"
           />
         </Stack>
       </Box>
       <Box>
         <Stack space={3}>
-          <Label>Platform</Label>
-          <Select value={platform} onChange={handlePlatformChange}>
+          <Label htmlFor={platformInputName} as={"label"}>
+            Platform
+          </Label>
+          <Select
+            id={platformInputName}
+            name={platformInputName}
+            value={value.platform}
+            onChange={handlePlatformChange}
+          >
             <option value="">Select Platform</option>
             {Object.values(SoMePlatforms).map((platform) => (
               <option key={platform} value={platform}>