Allow to manage instance relays

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/features/admin/domains.tsx

@@ -37,7 +37,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
     dispatch(openModal('EDIT_DOMAIN', { domainId: domain.id }));
   };
 
-  const handleDeleteDomain = (id: string) => () => {
+  const handleDeleteDomain = () => () => {
     dispatch(openModal('CONFIRM', {
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
@@ -90,7 +90,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
           <Button theme='primary' onClick={handleEditDomain(domain)}>
             <FormattedMessage id='admin.domains.edit' defaultMessage='Edit' />
           </Button>
-          <Button theme='primary' onClick={handleDeleteDomain(domain.id)}>
+          <Button theme='primary' onClick={handleDeleteDomain()}>
             <FormattedMessage id='admin.domains.delete' defaultMessage='Delete' />
           </Button>
         </HStack>

src/features/admin/relays.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { useCreateRelay, useDeleteRelay, useRelays } from 'soapbox/api/hooks/admin';
+import ScrollableList from 'soapbox/components/scrollable-list';
+import { Button, Column, Form, HStack, Input, Stack, Text } from 'soapbox/components/ui';
+import { useTextField } from 'soapbox/hooks/forms';
+import toast from 'soapbox/toast';
+
+import type { Relay as RelayEntity } from 'soapbox/schemas';
+
+const messages = defineMessages({
+  heading: { id: 'column.admin.relays', defaultMessage: 'Instance relays' },
+  relayDeleteSuccess: { id: 'admin.relays.deleted', defaultMessage: 'Relay unfollowed' },
+  label: { id: 'admin.relays.new.url_placeholder', defaultMessage: 'Instance relay URL' },
+  createSuccess: { id: 'admin.relays.add.success', defaultMessage: 'Instance relay followed' },
+  createFail: { id: 'admin.relays.add.fail', defaultMessage: 'Failed to follow the instance relay' },
+});
+
+interface IRelay {
+  relay: RelayEntity;
+}
+
+const Relay: React.FC<IRelay> = ({ relay }) => {
+  const { mutate: deleteRelay } = useDeleteRelay();
+  const { refetch } = useRelays();
+
+  const handleDeleteRelay = () => () => {
+    deleteRelay(relay.actor).then(() => {
+      refetch();
+      toast.success(messages.relayDeleteSuccess);
+    }).catch(() => {});
+  };
+
+  return (
+    <div key={relay.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+      <Stack space={2}>
+        <HStack alignItems='center' space={4} wrap>
+          <Text size='sm'>
+            <Text tag='span' size='sm' weight='medium'>
+              <FormattedMessage id='admin.relays.url' defaultMessage='Instance URL:' />
+            </Text>
+            {' '}
+            {relay.actor}
+          </Text>
+          {relay.followed_back && (
+            <Text tag='span' size='sm' weight='medium'>
+              <FormattedMessage id='admin.relays.followed_back' defaultMessage='Followed back' />
+            </Text>
+          )}
+        </HStack>
+        <HStack justifyContent='end' space={2}>
+          <Button theme='primary' onClick={handleDeleteRelay()}>
+            <FormattedMessage id='admin.relays.unfollow' defaultMessage='Unfollow' />
+          </Button>
+        </HStack>
+      </Stack>
+    </div>
+  );
+};
+
+const NewRelayForm: React.FC = () => {
+  const intl = useIntl();
+
+  const name = useTextField();
+
+  const { createRelay, isSubmitting } = useCreateRelay();
+  const { refetch } = useRelays();
+
+  const handleSubmit = (e: React.FormEvent<Element>) => {
+    e.preventDefault();
+    createRelay(name.value, {
+      onSuccess() {
+        toast.success(messages.createSuccess);
+        refetch();
+      },
+      onError() {
+        toast.success(messages.createFail);
+      },
+    });
+  };
+
+  const label = intl.formatMessage(messages.label);
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <HStack space={2} alignItems='center'>
+        <label className='grow'>
+          <span style={{ display: 'none' }}>{label}</span>
+
+          <Input
+            type='text'
+            placeholder={label}
+            disabled={isSubmitting}
+            {...name}
+          />
+        </label>
+
+        <Button
+          disabled={isSubmitting}
+          onClick={handleSubmit}
+          theme='primary'
+        >
+          <FormattedMessage id='admin.relays.new.follow' defaultMessage='Follow' />
+        </Button>
+      </HStack>
+    </Form>
+  );
+};
+
+const Relays: React.FC = () => {
+  const intl = useIntl();
+
+  const { data: relays, isFetching } = useRelays();
+
+  const emptyMessage = <FormattedMessage id='empty_column.admin.relays' defaultMessage='There are no relays followed yet.' />;
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      <Stack className='gap-4'>
+        <NewRelayForm />
+
+        {relays && (
+          <ScrollableList
+            scrollKey='relays'
+            emptyMessage={emptyMessage}
+            itemClassName='py-3 first:pt-0 last:pb-0'
+            isLoading={isFetching}
+            showLoading={isFetching && !relays?.length}
+          >
+            {relays.map((relay) => (
+              <Relay key={relay.id} relay={relay} />
+            ))}
+          </ScrollableList>
+        )}
+      </Stack>
+    </Column>
+  );
+};
+
+export default Relays;