Add query parameter to autofill long link (#485)

* Add query parameter to autofill long link

* Add query parameter to autofill long link

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<Props, State> {
+  textInput = createRef<HTMLInputElement>();
+
   handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (!this.props.onChange) {
       return;
@@ -27,9 +29,14 @@ export class TextField extends Component<Props, State> {
     this.props.onBlur();
   };
 
+  focus = () => {
+    this.textInput.current!.focus();
+  };
+
   render = () => {
     return (
       <input
+        ref={this.textInput}
         className={'text-field'}
         type={'text'}
         value={this.props.text}

frontend/src/component/pages/Home.tsx

@@ -57,6 +57,7 @@ interface State {
 export class Home extends Component<Props, State> {
   errModal = React.createRef<Modal>();
   signInModal = React.createRef<SignInModal>();
+  shortLinkTextField = React.createRef<TextField>();
 
   constructor(props: Props) {
     super(props);
@@ -69,7 +70,19 @@ export class Home extends Component<Props, State> {
       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<Props, State> {
       });
   };
 
+  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<Props, State> {
               </div>
               <div className={'text-field-wrapper'}>
                 <TextField
+                  ref={this.shortLinkTextField}
                   text={this.state.alias}
                   placeHolder={'Custom Short Link ( Optional )'}
                   onBlur={this.handlerCustomAliasTextFieldBlur}