diff --git a/source/options/components/editor.ts b/source/options/components/editor.ts index c817960..934f001 100644 --- a/source/options/components/editor.ts +++ b/source/options/components/editor.ts @@ -20,13 +20,16 @@ type Props = { saveRedirect: (redirect: Redirect) => void; }; -type State = RedirectParameters; +type State = { + hasBeenEdited: boolean; +} & RedirectParameters; export default class Editor extends Component { constructor(props: Props) { super(props); this.state = { + hasBeenEdited: false, ...props.redirect.parameters, }; } @@ -34,27 +37,37 @@ export default class Editor extends Component { onInput = (event: Event, input: 'matcher' | 'redirect') => { const target = event.target as HTMLInputElement; const value = target.value; + const newState: Partial = { + hasBeenEdited: true, + }; if (input === 'matcher') { - this.setState({matcherValue: value}); + newState.matcherValue = value; } else if (input === 'redirect') { - this.setState({redirectValue: value}); + newState.redirectValue = value; } else { throw new Error(`Unexpected input changed: ${input as string}`); } + + this.setState(newState); }; onSelectChange = (event: Event, select: 'matcher' | 'redirect') => { const target = event.target as HTMLSelectElement; const value = target.value; + const newState: Partial = { + hasBeenEdited: true, + }; if (select === 'matcher' && narrowMatcherType(value)) { - this.setState({matcherType: value}); + newState.matcherType = value; } else if (select === 'redirect' && narrowRedirectType(value)) { - this.setState({redirectType: value}); + newState.redirectType = value; } else { throw new Error(`${value} is not a valid MatcherType or RedirectType`); } + + this.setState(newState); }; onMatcherInput = (event: Event) => { @@ -99,6 +112,7 @@ export default class Editor extends Component { const redirect = this.parseRedirect(); await storage.save(redirect); this.props.saveRedirect(redirect); + this.setState({hasBeenEdited: false}); }; toggleEnabled = async () => { @@ -111,8 +125,14 @@ export default class Editor extends Component { }; render() { - const {enabled, matcherType, matcherValue, redirectType, redirectValue} = - this.state; + const { + enabled, + hasBeenEdited, + matcherType, + matcherValue, + redirectType, + redirectValue, + } = this.state; const matcherTypeOptions = matcherTypes.map( (value) => html``, @@ -122,7 +142,7 @@ export default class Editor extends Component { ); return html` -
+