Fix snapshots validation and links array component (#6613)

* Fixed snapshots link validation * Fixed webhooks disabled button --------- Co-authored-by: Jake Naviasky <[email protected]>
hicommonwealth · Feb 8, 2024 · 1d0b6e9 · 1d0b6e9
1 parent dc0a15b
commit 1d0b6e9
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 17 deletions.
diff --git a/packages/commonwealth/client/scripts/views/components/LinksArray/types.ts b/packages/commonwealth/client/scripts/views/components/LinksArray/types.ts
@@ -42,5 +42,5 @@ export type LinksArrayProps = {
 
 export type LinksArrayHookProps = {
   initialLinks: Link[];
-  linkValidation?: z.ZodEffects<z.ZodString, string, string> | z.ZodString;
+  linkValidation?: z.ZodTypeAny;
 };
diff --git a/packages/commonwealth/client/scripts/views/components/LinksArray/useLinksArray.tsx b/packages/commonwealth/client/scripts/views/components/LinksArray/useLinksArray.tsx
@@ -41,10 +41,6 @@ const useLinksArray = ({
   };
 
   const onLinkUpdatedAtIndex = (updatedLink: Link, index: number) => {
-    const splitLink = updatedLink.value.split('/');
-    const sanitizedLink = splitLink[splitLink.length - 1];
-    updatedLink.value = sanitizedLink;
-
     const updatedLinks = [...links];
     updatedLinks[index] = {
       ...updatedLink,

diff --git a/...ealth/client/scripts/views/pages/CommunityManagement/Integrations/Snapshots/Snapshots.tsx b/...ealth/client/scripts/views/pages/CommunityManagement/Integrations/Snapshots/Snapshots.tsx
@@ -1,6 +1,7 @@
 import { notifySuccess } from 'controllers/app/notifications';
 import React, { useState } from 'react';
 import app from 'state';
+import _ from 'underscore';
 import { LinksArray, useLinksArray } from 'views/components/LinksArray';
 import { CWText } from 'views/components/component_kit/cw_text';
 import { CWButton } from 'views/components/component_kit/new_designs/cw_button';
@@ -33,7 +34,18 @@ const Snapshots = () => {
     if (!areLinksValid()) return;
 
     try {
-      const newSnapshots = [...new Set(snapshots.map((x) => x.value))];
+      // get unique snapshot names from links (if any value in array was link)
+      const newSnapshots = [
+        ...new Set(
+          snapshots
+            .map((x) => x.value)
+            .map((link) => {
+              const splitLink = link.split('/');
+              const sanitizedLink = splitLink[splitLink.length - 1];
+              return sanitizedLink;
+            }),
+        ),
+      ];
       await community.updateChainData({
         snapshot: newSnapshots,
       });
@@ -80,7 +92,12 @@ const Snapshots = () => {
         <CWButton
           buttonType="secondary"
           label="Save Changes"
-          disabled={snapshots.length === community.snapshot.length}
+          disabled={_.isEqual(
+            [...snapshots.map((x) => x.value.trim())].sort((a, b) =>
+              a.localeCompare(b),
+            ),
+            [...(community.snapshot || [])].sort((a, b) => a.localeCompare(b)),
+          )}
           onClick={onSaveChanges}
         />
       ) : (

diff --git a/...ealth/client/scripts/views/pages/CommunityManagement/Integrations/Snapshots/validation.ts b/...ealth/client/scripts/views/pages/CommunityManagement/Integrations/Snapshots/validation.ts
@@ -1,13 +1,19 @@
 import z from 'zod';
 
-const snapshotValidationSchema = z.string().refine(
-  (space) => {
-    const extension = space.slice(space.length - 4);
-    return extension === '.eth' || extension === '.xyz';
-  },
-  {
-    message: 'Snapshot name must be in the form of *.eth or *.xyz',
-  },
-);
+const snapshotNameSchema = z.string().regex(/^[a-zA-Z0-9-.]+\.((xyz)|(eth))$/, {
+  message: 'Snapshot must be valid, and end in *.eth or *.xyz',
+});
+const snapshotLinkSchema = z
+  .string()
+  .regex(
+    /^https:\/\/(\w+\.)?snapshot\.org\/#\/[a-zA-Z0-9-.]+\.((xyz)|(eth))$/,
+    {
+      message: 'Snapshot link be valid, and end in *.eth or *.xyz',
+    },
+  );
+const snapshotValidationSchema = z.union([
+  snapshotNameSchema,
+  snapshotLinkSchema,
+]);
 
 export { snapshotValidationSchema };
diff --git a/...nwealth/client/scripts/views/pages/CommunityManagement/Integrations/Webhooks/Webhooks.tsx b/...nwealth/client/scripts/views/pages/CommunityManagement/Integrations/Webhooks/Webhooks.tsx
@@ -12,6 +12,7 @@ import {
   useEditWebhookMutation,
   useFetchWebhooksQuery,
 } from 'state/api/webhooks';
+import _ from 'underscore';
 import { LinksArray, useLinksArray } from 'views/components/LinksArray';
 import { CWText } from 'views/components/component_kit/cw_text';
 import { CWModal } from 'views/components/component_kit/new_designs/CWModal';
@@ -197,7 +198,14 @@ const Webhooks = () => {
           <CWButton
             buttonType="secondary"
             label="Save Changes"
-            disabled={webhooks.length === existingWebhooks.length}
+            disabled={_.isEqual(
+              [...(webhooks || []).map((x) => x.value.trim())].sort((a, b) =>
+                a.localeCompare(b),
+              ),
+              [...(existingWebhooks || []).map((x) => x.url.trim())].sort(
+                (a, b) => a.localeCompare(b),
+              ),
+            )}
             onClick={onSaveChanges}
           />
         ) : (