Refactored query filters.

This commit is contained in:
Mike Cao 2023-08-04 00:51:52 -07:00
parent b65c478689
commit 157862834d
16 changed files with 118 additions and 147 deletions

View file

@ -2,16 +2,14 @@ import { useState } from 'react';
import { useMessages } from 'hooks';
import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
import styles from './UrlAddForm.module.css';
import PopupForm from '../PopupForm';
export function UrlAddForm({ defaultValue = '', element, onAdd, onClose }) {
export function UrlAddForm({ defaultValue = '', onAdd }) {
const [url, setUrl] = useState(defaultValue);
const { formatMessage, labels } = useMessages();
const handleSave = () => {
onAdd(url);
setUrl('');
onClose();
};
const handleChange = e => {
@ -26,25 +24,23 @@ export function UrlAddForm({ defaultValue = '', element, onAdd, onClose }) {
};
return (
<PopupForm element={element}>
<Form>
<FormRow label={formatMessage(labels.url)}>
<Flexbox gap={10}>
<TextField
className={styles.input}
value={url}
onChange={handleChange}
autoFocus={true}
autoComplete="off"
onKeyDown={handleKeyDown}
/>
<Button variant="primary" onClick={handleSave}>
{formatMessage(labels.add)}
</Button>
</Flexbox>
</FormRow>
</Form>
</PopupForm>
<Form>
<FormRow label={formatMessage(labels.url)}>
<Flexbox gap={10}>
<TextField
className={styles.input}
value={url}
onChange={handleChange}
autoFocus={true}
autoComplete="off"
onKeyDown={handleKeyDown}
/>
<Button variant="primary" onClick={handleSave}>
{formatMessage(labels.add)}
</Button>
</Flexbox>
</FormRow>
</Form>
);
}