diff --git a/src/features/nostr-relays/components/relay-editor.tsx b/src/features/nostr-relays/components/relay-editor.tsx new file mode 100644 index 000000000..6f6a5ae41 --- /dev/null +++ b/src/features/nostr-relays/components/relay-editor.tsx @@ -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 = ({ relays, setRelays }) => { + const handleAddRelay = (): void => { + setRelays([...relays, { url: '' }]); + }; + + const handleRemoveRelay = (i: number): void => { + const newRelays = [...relays]; + newRelays.splice(i, 1); + setRelays(newRelays); + }; + + return ( + + ); +}; + +interface RelayData { + url: string; + marker?: 'read' | 'write'; +} + +const RelayField: StreamfieldComponent = ({ value, onChange }) => { + const instance = useInstance(); + + const handleChange = (key: string): React.ChangeEventHandler => { + return e => { + onChange({ ...value, [key]: e.currentTarget.value }); + }; + }; + + return ( + + + + ); +}; + +export default RelayEditor; + +export type { RelayData }; \ No newline at end of file diff --git a/src/features/nostr-relays/index.tsx b/src/features/nostr-relays/index.tsx new file mode 100644 index 000000000..2921390e7 --- /dev/null +++ b/src/features/nostr-relays/index.tsx @@ -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([]); + const [isLoading, setIsLoading] = useState(false); + + const handleSubmit = (): void => { + setIsLoading(true); + // Save relays + setIsLoading(false); + }; + + return ( + +
+ + + + + + + + + +
+
+ ); +}; + +export default NostrRelays; diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx index b206a647b..5574196ab 100644 --- a/src/features/ui/index.tsx +++ b/src/features/ui/index.tsx @@ -139,6 +139,7 @@ import { BookmarkFolders, EditIdentity, Domains, + NostrRelays, } from './util/async-components'; import GlobalHotkeys from './util/global-hotkeys'; import { WrappedRoute } from './util/react-router-helpers'; @@ -313,6 +314,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {features.accountAliases && } {features.accountMoving && } {features.backups && } + diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts index b6dff63f3..c9fae695d 100644 --- a/src/features/ui/util/async-components.ts +++ b/src/features/ui/util/async-components.ts @@ -170,3 +170,4 @@ export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/ export const EditIdentity = lazy(() => import('soapbox/features/edit-identity')); export const Domains = lazy(() => import('soapbox/features/admin/domains')); export const EditDomainModal = lazy(() => import('soapbox/features/ui/components/modals/edit-domain-modal')); +export const NostrRelays = lazy(() => import('soapbox/features/nostr-relays')); \ No newline at end of file