kopia lustrzana https://github.com/Stopka/fedisearch
50 wiersze
1.4 KiB
TypeScript
50 wiersze
1.4 KiB
TypeScript
'use client'
|
|
import { faSearch } from '@fortawesome/free-solid-svg-icons'
|
|
import React, { ReactElement } from 'react'
|
|
import { NodeQueryInput } from '../../graphql/generated/types'
|
|
import SearchInput from '../form/SearchInput'
|
|
import SubmitButton from '../form/SubmitButton'
|
|
|
|
export default function NodeForm (
|
|
{ onSubmit, onQueryChange, query }: {
|
|
onSubmit: () => void
|
|
onQueryChange: (query: NodeQueryInput) => void
|
|
query: NodeQueryInput
|
|
}
|
|
): ReactElement {
|
|
const handleQueryChange = (event): void => {
|
|
const inputElement = event.target
|
|
const value = inputElement.value
|
|
const name = inputElement.name
|
|
const newQuery = {
|
|
...query
|
|
}
|
|
newQuery[name] = value
|
|
onQueryChange(newQuery)
|
|
event.preventDefault()
|
|
}
|
|
|
|
const handleSubmit = (event): void => {
|
|
event.preventDefault()
|
|
onSubmit()
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<div className={'input-group mb-3'}>
|
|
<SearchInput
|
|
label={'Search Fediverse servers'}
|
|
value={query.search}
|
|
onChange={handleQueryChange}
|
|
describedBy={'search-nodes-button'}
|
|
/>
|
|
<SubmitButton
|
|
label={'Search'}
|
|
faIcon={faSearch}
|
|
id={'search-nodes-button'}
|
|
/>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|