parent
98898e9eb5
commit
db9f65cf77
@ -0,0 +1,63 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { HStack, Input } from 'soapbox/components/ui';
|
||||||
|
import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
|
||||||
|
import { useInstance } from 'soapbox/hooks';
|
||||||
|
|
||||||
|
interface IRelayEditor {
|
||||||
|
relays: RelayData[];
|
||||||
|
setRelays: (relays: RelayData[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const RelayEditor: React.FC<IRelayEditor> = ({ relays, setRelays }) => {
|
||||||
|
const handleAddRelay = (): void => {
|
||||||
|
setRelays([...relays, { url: '' }]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveRelay = (i: number): void => {
|
||||||
|
const newRelays = [...relays];
|
||||||
|
newRelays.splice(i, 1);
|
||||||
|
setRelays(newRelays);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Streamfield
|
||||||
|
values={relays}
|
||||||
|
onChange={setRelays}
|
||||||
|
component={RelayField}
|
||||||
|
onAddItem={handleAddRelay}
|
||||||
|
onRemoveItem={handleRemoveRelay}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface RelayData {
|
||||||
|
url: string;
|
||||||
|
marker?: 'read' | 'write';
|
||||||
|
}
|
||||||
|
|
||||||
|
const RelayField: StreamfieldComponent<RelayData> = ({ value, onChange }) => {
|
||||||
|
const instance = useInstance();
|
||||||
|
|
||||||
|
const handleChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {
|
||||||
|
return e => {
|
||||||
|
onChange({ ...value, [key]: e.currentTarget.value });
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HStack space={2} grow>
|
||||||
|
<Input
|
||||||
|
type='text'
|
||||||
|
outerClassName='w-2/5 grow'
|
||||||
|
value={value.url}
|
||||||
|
onChange={handleChange('url')}
|
||||||
|
placeholder={instance.nostr?.relay ?? `wss://${instance.domain}/relay`}
|
||||||
|
/>
|
||||||
|
</HStack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RelayEditor;
|
||||||
|
|
||||||
|
export type { RelayData };
|
@ -0,0 +1,45 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
|
||||||
|
|
||||||
|
import RelayEditor, { RelayData } from './components/relay-editor';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
title: { id: 'nostr_relays.title', defaultMessage: 'Relays' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const NostrRelays = () => {
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
const [relays, setRelays] = useState<RelayData[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const handleSubmit = (): void => {
|
||||||
|
setIsLoading(true);
|
||||||
|
// Save relays
|
||||||
|
setIsLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column label={intl.formatMessage(messages.title)}>
|
||||||
|
<Form onSubmit={handleSubmit}>
|
||||||
|
<Stack space={4}>
|
||||||
|
<RelayEditor relays={relays} setRelays={setRelays} />
|
||||||
|
|
||||||
|
<FormActions>
|
||||||
|
<Button to='/settings' theme='tertiary'>
|
||||||
|
<FormattedMessage id='common.cancel' defaultMessage='Cancel' />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button theme='primary' type='submit' disabled={isLoading}>
|
||||||
|
<FormattedMessage id='edit_profile.save' defaultMessage='Save' />
|
||||||
|
</Button>
|
||||||
|
</FormActions>
|
||||||
|
</Stack>
|
||||||
|
</Form>
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NostrRelays;
|
Loading…
Reference in new issue