Signed-off-by: marcin mikołajczak <git@mkljczk.pl>environments/review-main-yi2y9f/deployments/4540^2
parent
7320299b3c
commit
0fc158a7d0
@ -1,6 +1,9 @@
|
|||||||
export { useCreateDomain, type CreateDomainParams } from './useCreateDomain';
|
export { useCreateDomain, type CreateDomainParams } from './useCreateDomain';
|
||||||
|
export { useCreateRelay } from './useCreateRelay';
|
||||||
export { useDeleteDomain } from './useDeleteDomain';
|
export { useDeleteDomain } from './useDeleteDomain';
|
||||||
|
export { useDeleteRelay } from './useDeleteRelay';
|
||||||
export { useDomains } from './useDomains';
|
export { useDomains } from './useDomains';
|
||||||
|
export { useRelays } from './useRelays';
|
||||||
export { useSuggest } from './useSuggest';
|
export { useSuggest } from './useSuggest';
|
||||||
export { useUpdateDomain } from './useUpdateDomain';
|
export { useUpdateDomain } from './useUpdateDomain';
|
||||||
export { useVerify } from './useVerify';
|
export { useVerify } from './useVerify';
|
@ -0,0 +1,18 @@
|
|||||||
|
import { Entities } from 'soapbox/entity-store/entities';
|
||||||
|
import { useCreateEntity } from 'soapbox/entity-store/hooks';
|
||||||
|
import { useApi } from 'soapbox/hooks';
|
||||||
|
import { relaySchema } from 'soapbox/schemas';
|
||||||
|
|
||||||
|
const useCreateRelay = () => {
|
||||||
|
const api = useApi();
|
||||||
|
|
||||||
|
const { createEntity, ...rest } = useCreateEntity([Entities.RELAYS], (relayUrl: string) =>
|
||||||
|
api.post('/api/v1/pleroma/admin/relay', { relay_url: relayUrl }), { schema: relaySchema });
|
||||||
|
|
||||||
|
return {
|
||||||
|
createRelay: createEntity,
|
||||||
|
...rest,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export { useCreateRelay };
|
@ -0,0 +1,19 @@
|
|||||||
|
import { Entities } from 'soapbox/entity-store/entities';
|
||||||
|
import { useDeleteEntity } from 'soapbox/entity-store/hooks';
|
||||||
|
import { useApi } from 'soapbox/hooks';
|
||||||
|
|
||||||
|
const useDeleteRelay = () => {
|
||||||
|
const api = useApi();
|
||||||
|
|
||||||
|
const { deleteEntity, ...rest } = useDeleteEntity(Entities.RELAYS, (relayUrl: string) =>
|
||||||
|
api.delete('/api/v1/pleroma/admin/relay', {
|
||||||
|
data: { relay_url: relayUrl },
|
||||||
|
}));
|
||||||
|
|
||||||
|
return {
|
||||||
|
mutate: deleteEntity,
|
||||||
|
...rest,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export { useDeleteRelay };
|
@ -0,0 +1,25 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { useApi } from 'soapbox/hooks';
|
||||||
|
import { relaySchema, type Relay } from 'soapbox/schemas';
|
||||||
|
|
||||||
|
const useRelays = () => {
|
||||||
|
const api = useApi();
|
||||||
|
|
||||||
|
const getRelays = async () => {
|
||||||
|
const { data } = await api.get<{ relays: Relay[] }>('/api/v1/pleroma/admin/relay');
|
||||||
|
|
||||||
|
const normalizedData = data.relays?.map((relay) => relaySchema.parse(relay));
|
||||||
|
return normalizedData;
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = useQuery<ReadonlyArray<Relay>>({
|
||||||
|
queryKey: ['relays'],
|
||||||
|
queryFn: getRelays,
|
||||||
|
placeholderData: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { useRelays };
|
@ -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;
|
@ -0,0 +1,13 @@
|
|||||||
|
import z from 'zod';
|
||||||
|
|
||||||
|
const relaySchema = z.preprocess((data: any) => {
|
||||||
|
return { id: data.actor, ...data };
|
||||||
|
}, z.object({
|
||||||
|
actor: z.string().catch(''),
|
||||||
|
id: z.string(),
|
||||||
|
followed_back: z.boolean().catch(false),
|
||||||
|
}));
|
||||||
|
|
||||||
|
type Relay = z.infer<typeof relaySchema>
|
||||||
|
|
||||||
|
export { relaySchema, type Relay };
|
Loading…
Reference in new issue