diff --git a/frontend/src/component/form/TextField.tsx b/frontend/src/component/form/TextField.tsx index 3bcebe1b1..275fd8858 100644 --- a/frontend/src/component/form/TextField.tsx +++ b/frontend/src/component/form/TextField.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, Component } from 'react'; +import React, { ChangeEvent, Component, createRef } from 'react'; import './TextField.scss'; interface Props { @@ -13,6 +13,8 @@ interface State { } export class TextField extends Component { + textInput = createRef(); + handleChange = (event: ChangeEvent) => { if (!this.props.onChange) { return; @@ -27,9 +29,14 @@ export class TextField extends Component { this.props.onBlur(); }; + focus = () => { + this.textInput.current!.focus(); + }; + render = () => { return ( { errModal = React.createRef(); signInModal = React.createRef(); + shortLinkTextField = React.createRef(); constructor(props: Props) { super(props); @@ -69,7 +70,19 @@ export class Home extends Component { this.showSignInModal(); return; } + this.handleStateChange(); + this.autoFillLongLink(); + } + + autoFillLongLink() { + const longLink = this.getLongLinkFromQueryParams(); + if (validateLongLinkFormat(longLink) == null) { + this.props.store.dispatch(updateLongLink(longLink)); + this.shortLinkTextField.current!.focus(); + } + } + handleStateChange() { this.props.store.subscribe(async () => { const state = this.props.store.getState(); @@ -150,6 +163,11 @@ export class Home extends Component { }); }; + getLongLinkFromQueryParams(): string { + let urlParams = new URLSearchParams(window.location.search); + return urlParams.get('long_link')!; + } + showError(error?: IErr) { if (!error) { return; @@ -175,6 +193,7 @@ export class Home extends Component {