Migrate conversations to ESLint

ts/components/conversation/MessageDetail.tsx

@@ -37,10 +37,14 @@ export interface Props {
   i18n: LocalizerType;
 }
 
+const _keyForError = (error: Error): string => {
+  return `${error.name}-${error.message}`;
+};
+
 export class MessageDetail extends React.Component<Props> {
   private readonly focusRef = React.createRef<HTMLDivElement>();
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     // When this component is created, it's initially not part of the DOM, and then it's
     //   added off-screen and animated in. This ensures that the focus takes.
     setTimeout(() => {
@@ -50,7 +54,7 @@ export class MessageDetail extends React.Component<Props> {
     });
   }
 
-  public renderAvatar(contact: Contact) {
+  public renderAvatar(contact: Contact): JSX.Element {
     const { i18n } = this.props;
     const {
       avatarPath,
@@ -76,12 +80,13 @@ export class MessageDetail extends React.Component<Props> {
     );
   }
 
-  public renderDeleteButton() {
+  public renderDeleteButton(): JSX.Element {
     const { i18n, message } = this.props;
 
     return (
       <div className="module-message-detail__delete-button-container">
         <button
+          type="button"
           onClick={() => {
             message.deleteMessage(message.id);
           }}
@@ -93,19 +98,21 @@ export class MessageDetail extends React.Component<Props> {
     );
   }
 
-  public renderContact(contact: Contact) {
+  public renderContact(contact: Contact): JSX.Element {
     const { i18n } = this.props;
     const errors = contact.errors || [];
 
     const errorComponent = contact.isOutgoingKeyError ? (
       <div className="module-message-detail__contact__error-buttons">
         <button
+          type="button"
           className="module-message-detail__contact__show-safety-number"
           onClick={contact.onShowSafetyNumber}
         >
           {i18n('showSafetyNumber')}
         </button>
         <button
+          type="button"
           className="module-message-detail__contact__send-anyway"
           onClick={contact.onSendAnyway}
         >
@@ -138,8 +145,11 @@ export class MessageDetail extends React.Component<Props> {
               i18n={i18n}
             />
           </div>
-          {errors.map((error, index) => (
-            <div key={index} className="module-message-detail__contact__error">
+          {errors.map(error => (
+            <div
+              key={_keyForError(error)}
+              className="module-message-detail__contact__error"
+            >
               {error.message}
             </div>
           ))}
@@ -151,7 +161,7 @@ export class MessageDetail extends React.Component<Props> {
     );
   }
 
-  public renderContacts() {
+  public renderContacts(): JSX.Element | null {
     const { contacts } = this.props;
 
     if (!contacts || !contacts.length) {
@@ -165,18 +175,19 @@ export class MessageDetail extends React.Component<Props> {
     );
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { errors, message, receivedAt, sentAt, i18n } = this.props;
 
     return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       <div className="module-message-detail" tabIndex={0} ref={this.focusRef}>
         <div className="module-message-detail__message-container">
           <Message i18n={i18n} {...message} />
         </div>
         <table className="module-message-detail__info">
           <tbody>
-            {(errors || []).map((error, index) => (
-              <tr key={index}>
+            {(errors || []).map(error => (
+              <tr key={_keyForError(error)}>
                 <td className="module-message-detail__label">
                   {i18n('error')}
                 </td>