Allow updating admin relays

src/features/admin/hooks/useAdminNostrRelays.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+
+import { useApi } from 'soapbox/hooks';
+
+const relayEntitySchema = z.object({
+  url: z.string().url(),
+  marker: z.enum(['read', 'write']).optional(),
+});
+
+export function useAdminNostrRelays() {
+  const api = useApi();
+
+  return useQuery({
+    queryKey: ['NostrRelay'],
+    queryFn: async () => {
+      const { data } = await api.get('/api/v1/admin/ditto/relays');
+      return relayEntitySchema.array().parse(data);
+    },
+  });
+}

src/features/admin/nostr-relays.tsx

@@ -1,23 +1,36 @@
-import React, { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import React, { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
 import RelayEditor, { RelayData } from 'soapbox/features/nostr-relays/components/relay-editor';
+import { useApi } from 'soapbox/hooks';
+
+import { useAdminNostrRelays } from './hooks/useAdminNostrRelays';
 
 const messages = defineMessages({
   title: { id: 'column.admin.nostr_relays', defaultMessage: 'Relays' },
 });
 
 const AdminNostrRelays: React.FC = () => {
+  const api = useApi();
   const intl = useIntl();
+  const result = useAdminNostrRelays();
 
-  const [relays, setRelays] = useState<RelayData[]>([]);
+  const [relays, setRelays] = useState<RelayData[]>(result.data ?? []);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const handleSubmit = async () => {
+  const mutation = useMutation({
-    setIsLoading(true);
+    mutationFn: async () => api.put('/api/v1/admin/ditto/relays', relays),
+  });
+
+  const handleSubmit = () => {
+    mutation.mutate();
   };
 
+  useEffect(() => {
+    setRelays(result.data ?? []);
+  }, [result.data]);
+
   return (
     <Column label={intl.formatMessage(messages.title)}>
       <Form onSubmit={handleSubmit}>
@@ -25,11 +38,11 @@ const AdminNostrRelays: React.FC = () => {
           <RelayEditor relays={relays} setRelays={setRelays} />
 
           <FormActions>
-            <Button to='/settings' theme='tertiary'>
+            <Button to='/soapbox/admin' theme='tertiary'>
               <FormattedMessage id='common.cancel' defaultMessage='Cancel' />
             </Button>
 
-            <Button theme='primary' type='submit' disabled={isLoading}>
+            <Button theme='primary' type='submit' disabled={mutation.isPending}>
               <FormattedMessage id='edit_profile.save' defaultMessage='Save' />
             </Button>
           </FormActions>