Fix feeds config UI not allowing notifyOnFailure to be toggled.

matrix-org · Dec 27, 2023 · 8c364d4 · 8c364d4
1 parent 30bb52f
commit 8c364d4
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/web/components/roomConfig/FeedsConfig.tsx b/web/components/roomConfig/FeedsConfig.tsx
@@ -32,9 +32,10 @@ const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<Se
     const urlRef = createRef<HTMLInputElement>();
     const labelRef = createRef<HTMLInputElement>();
     const templateRef = createRef<HTMLInputElement>();
-    const notifyRef = createRef<HTMLInputElement>();
     const canSave = !existingConnection?.id || (existingConnection?.canEdit ?? false);
     const canEdit = canSave && !isMigrationCandidate;
+    const [notifyOnFailure, setNotifyOnFailure] = useState<string>(existingConnection?.config.notifyOnFailure ?? false);
+
     const handleSave = useCallback((evt: Event) => {
         evt.preventDefault();
         if (!canSave) {
@@ -46,12 +47,13 @@ const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<Se
                 url,
                 label: labelRef?.current?.value || existingConnection?.config.label,
                 template: templateRef.current?.value || existingConnection?.config.template,
-                notifyOnFailure: notifyRef.current?.checked || existingConnection?.config.notifyOnFailure,
+                notifyOnFailure,
             })
         }
-    }, [canSave, onSave, urlRef, labelRef, templateRef, notifyRef, existingConnection]);
+    }, [canSave, onSave, urlRef, labelRef, templateRef, notifyOnFailure, existingConnection]);
 
     const onlyVisibleOnExistingConnection = !!existingConnection;
+
 
     return <form onSubmit={handleSave}>
         { existingConnection && <FeedRecentResults item={existingConnection} />}
@@ -63,7 +65,7 @@ const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<Se
             <input ref={labelRef} disabled={!canSave} type="text" value={existingConnection?.config.label} />
         </InputField>
         <InputField visible={onlyVisibleOnExistingConnection} label="Send a notice on read failure" noPadding={true}>
-            <input ref={notifyRef} disabled={!canSave} type="checkbox" checked={existingConnection?.config.notifyOnFailure} />
+            <input disabled={!canSave} type="checkbox" checked={notifyOnFailure} onChange={useCallback(() => setNotifyOnFailure(v => !v), [])} />
         </InputField>
         <InputField visible={onlyVisibleOnExistingConnection} label="Template" noPadding={true}>
             <input ref={templateRef} disabled={!canSave} type="text" value={existingConnection?.config.template} placeholder={DEFAULT_TEMPLATE} />