src/js/components/NewPattern.tsx
import React from 'react'
import { useNavigate } from 'react-router-dom'
import queryString from 'query-string'
import { useStore } from './StoreContext'
import { observer } from 'mobx-react'
import {
DialogContentText,
Dialog,
DialogTitle,
DialogContent,
FormControl,
TextField,
FormHelperText,
DialogActions,
Button
} from '@material-ui/core'
const Content = () => (
<DialogContentText>
To use regular expression match websites, please enter a valid regular
expression here. You can use{' '}
<a href='https://regex101.com/' target='_blank' rel='noopener noreferrer'>
Regex101
</a>{' '}
to validate your regular expression.
</DialogContentText>
)
const NewPatternDialog = observer(() => {
const navigate = useNavigate()
const { NewPatternStore } = useStore()
const { closeDialog, error, validPattern, pattern } = NewPatternStore
return (
<Dialog open onClose={closeDialog}>
<DialogTitle>New RegExp Pattern</DialogTitle>
<DialogContent>
<Content />
<FormControl fullWidth error={!validPattern}>
<TextField
autoFocus
margin='dense'
type='text'
placeholder='.*github.com'
label='RegExp Pattern'
error={!validPattern}
value={pattern}
onChange={(e) => {
NewPatternStore.setPattern(e.target.value)
}}
/>
<FormHelperText>{error}</FormHelperText>
</FormControl>
</DialogContent>
<DialogActions>
<Button onClick={closeDialog}>Cancel</Button>
<Button
color='primary'
onClick={() => {
const { addToHosts, host } = NewPatternStore
addToHosts()
navigate(`?${queryString.stringify(host)}`)
}}
disabled={!validPattern}
>
Add
</Button>
</DialogActions>
</Dialog>
)
})
export default observer(() => {
// TODO: support to use current domain
const { NewPatternStore } = useStore()
const { openDialog, open } = NewPatternStore
return (
<span>
<Button color='primary' onClick={openDialog}>
New RegExp
</Button>
{open && <NewPatternDialog />}
</span>
)
})