Migrate components to eslint

ts/components/MainHeader.tsx

@@ -76,7 +76,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     };
   }
 
-  public componentDidUpdate(prevProps: PropsType) {
+  public componentDidUpdate(prevProps: PropsType): void {
     const { searchConversationId, startSearchCounter } = this.props;
 
     // When user chooses to search in a given conversation we focus the field for them
@@ -92,7 +92,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     }
   }
 
-  public handleOutsideClick = ({ target }: MouseEvent) => {
+  public handleOutsideClick = ({ target }: MouseEvent): void => {
     const { popperRoot, showingAvatarPopup } = this.state;
 
     if (
@@ -104,13 +104,13 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     }
   };
 
-  public handleOutsideKeyDown = (event: KeyboardEvent) => {
+  public handleOutsideKeyDown = (event: KeyboardEvent): void => {
     if (event.key === 'Escape') {
       this.hideAvatarPopup();
     }
   };
 
-  public showAvatarPopup = () => {
+  public showAvatarPopup = (): void => {
     const popperRoot = document.createElement('div');
     document.body.appendChild(popperRoot);
 
@@ -122,7 +122,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     document.addEventListener('keydown', this.handleOutsideKeyDown);
   };
 
-  public hideAvatarPopup = () => {
+  public hideAvatarPopup = (): void => {
     const { popperRoot } = this.state;
 
     document.removeEventListener('click', this.handleOutsideClick);
@@ -138,7 +138,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     }
   };
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     const { popperRoot } = this.state;
 
     document.removeEventListener('click', this.handleOutsideClick);
@@ -149,8 +149,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     }
   }
 
-  // tslint:disable-next-line member-ordering
-  public search = debounce((searchTerm: string) => {
+  public search = debounce((searchTerm: string): void => {
     const {
       i18n,
       ourConversationId,
@@ -179,7 +178,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     }
   }, 200);
 
-  public updateSearch = (event: React.FormEvent<HTMLInputElement>) => {
+  public updateSearch = (event: React.FormEvent<HTMLInputElement>): void => {
     const {
       updateSearchTerm,
       clearConversationSearch,
@@ -209,21 +208,23 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     this.search(searchTerm);
   };
 
-  public clearSearch = () => {
+  public clearSearch = (): void => {
     const { clearSearch } = this.props;
 
     clearSearch();
     this.setFocus();
   };
 
-  public clearConversationSearch = () => {
+  public clearConversationSearch = (): void => {
     const { clearConversationSearch } = this.props;
 
     clearConversationSearch();
     this.setFocus();
   };
 
-  public handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  public handleKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ): void => {
     const {
       clearConversationSearch,
       clearSearch,
@@ -258,7 +259,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     event.stopPropagation();
   };
 
-  public handleXButton = () => {
+  public handleXButton = (): void => {
     const {
       searchConversationId,
       clearConversationSearch,
@@ -274,22 +275,19 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     this.setFocus();
   };
 
-  public setFocus = () => {
+  public setFocus = (): void => {
     if (this.inputRef.current) {
-      // @ts-ignore
       this.inputRef.current.focus();
     }
   };
 
-  public setSelected = () => {
+  public setSelected = (): void => {
     if (this.inputRef.current) {
-      // @ts-ignore
       this.inputRef.current.select();
     }
   };
 
-  // tslint:disable-next-line:max-func-body-length
-  public render() {
+  public render(): JSX.Element {
     const {
       avatarPath,
       color,
@@ -366,6 +364,8 @@ export class MainHeader extends React.Component<PropsType, StateType> {
               className="module-main-header__search__in-conversation-pill"
               onClick={this.clearSearch}
               tabIndex={-1}
+              type="button"
+              aria-label={i18n('clearSearch')}
             >
               <div className="module-main-header__search__in-conversation-pill__avatar-container">
                 <div className="module-main-header__search__in-conversation-pill__avatar" />
@@ -377,6 +377,8 @@ export class MainHeader extends React.Component<PropsType, StateType> {
               className="module-main-header__search__icon"
               onClick={this.setFocus}
               tabIndex={-1}
+              type="button"
+              aria-label={i18n('search')}
             />
           )}
           <input
@@ -402,6 +404,8 @@ export class MainHeader extends React.Component<PropsType, StateType> {
               tabIndex={-1}
               className="module-main-header__search__cancel-icon"
               onClick={this.handleXButton}
+              type="button"
+              aria-label={i18n('cancel')}
             />
           ) : null}
         </div>