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 { useCreateRelay } from './useCreateRelay';
|
||||
export { useDeleteDomain } from './useDeleteDomain';
|
||||
export { useDeleteRelay } from './useDeleteRelay';
|
||||
export { useDomains } from './useDomains';
|
||||
export { useRelays } from './useRelays';
|
||||
export { useSuggest } from './useSuggest';
|
||||
export { useUpdateDomain } from './useUpdateDomain';
|
||||
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