From b8950dde09cb41eac5dba40ae034abf7a5e6bdb2 Mon Sep 17 00:00:00 2001
From: Muhamed <unknown>
Date: Sat, 27 May 2023 01:32:44 +0530
Subject: update react version to 18.2.0 and it related changes

---
 src/components/layout/AppLayout.tsx                         | 4 ++--
 src/components/services/tabs/TabBarSortableList.tsx         | 2 +-
 src/components/services/tabs/TabItem.tsx                    | 5 ++++-
 src/components/services/tabs/Tabbar.tsx                     | 1 +
 src/components/settings/SettingsLayout.tsx                  | 4 ++--
 src/components/settings/releaseNotes/ReleaseNotesLayout.tsx | 1 +
 src/components/ui/Select.tsx                                | 5 ++++-
 src/components/util/ErrorBoundary/index.tsx                 | 1 +
 8 files changed, 16 insertions(+), 7 deletions(-)

(limited to 'src/components')

diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 9ea5463a2..86b4e787e 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, PropsWithChildren } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar/renderer';
@@ -99,7 +99,7 @@ interface IState {
 }
 
 @observer
-class AppLayout extends Component<IProps, IState> {
+class AppLayout extends Component<PropsWithChildren<IProps>, IState> {
   constructor(props) {
     super(props);
 
diff --git a/src/components/services/tabs/TabBarSortableList.tsx b/src/components/services/tabs/TabBarSortableList.tsx
index e04f6268d..bb889ebef 100644
--- a/src/components/services/tabs/TabBarSortableList.tsx
+++ b/src/components/services/tabs/TabBarSortableList.tsx
@@ -10,7 +10,6 @@ interface IProps {
   showServiceNameSetting: boolean;
   showMessageBadgesEvenWhenMuted: boolean;
   services: Service[];
-
   setActive: (args: { serviceId: string }) => void;
   openSettings: (args: { path: string }) => void;
   reload: (args: { serviceId: string }) => void;
@@ -50,6 +49,7 @@ class TabBarSortableList extends Component<IProps> {
         {services.map((service, index) => (
           <TabItem
             key={service.id}
+            // @ts-ignore
             clickHandler={() => setActive({ serviceId: service.id })}
             service={service}
             index={index}
diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx
index fae788764..2ed595919 100644
--- a/src/components/services/tabs/TabItem.tsx
+++ b/src/components/services/tabs/TabItem.tsx
@@ -1,4 +1,5 @@
 import { app, dialog, Menu } from '@electron/remote';
+import { noop } from 'lodash';
 import { Component } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { inject, observer } from 'mobx-react';
@@ -6,7 +7,6 @@ import classnames from 'classnames';
 import { SortableElement } from 'react-sortable-hoc';
 import injectSheet, { WithStylesProps } from 'react-jss';
 import ms from 'ms';
-
 import { autorun, makeObservable, observable, reaction } from 'mobx';
 import { mdiExclamation, mdiVolumeSource } from '@mdi/js';
 import Service from '../../../models/Service';
@@ -348,6 +348,8 @@ class TabItem extends Component<IProps, IState> {
           'is-label-enabled': showServiceNameSetting,
         })}
         onClick={clickHandler}
+        onKeyDown={noop}
+        role="presentation"
         onContextMenu={() => menu.popup()}
         data-tip={`${service.name} ${
           shortcutIndex <= 9
@@ -407,5 +409,6 @@ class TabItem extends Component<IProps, IState> {
 }
 
 export default injectIntl(
+  // @ts-ignore
   SortableElement(injectSheet(styles, { injectTheme: true })(TabItem)),
 );
diff --git a/src/components/services/tabs/Tabbar.tsx b/src/components/services/tabs/Tabbar.tsx
index 64541cc8f..e3b5a7ba9 100644
--- a/src/components/services/tabs/Tabbar.tsx
+++ b/src/components/services/tabs/Tabbar.tsx
@@ -97,6 +97,7 @@ class TabBar extends Component<IProps> {
     return (
       <div>
         <TabBarSortableList
+          // @ts-ignore
           services={services}
           setActive={setActive}
           onSortEnd={this.onSortEnd}
diff --git a/src/components/settings/SettingsLayout.tsx b/src/components/settings/SettingsLayout.tsx
index 3b706571e..f96ad7394 100644
--- a/src/components/settings/SettingsLayout.tsx
+++ b/src/components/settings/SettingsLayout.tsx
@@ -1,4 +1,4 @@
-import { Component, ReactElement } from 'react';
+import { Component, PropsWithChildren, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiClose } from '@mdi/js';
@@ -21,7 +21,7 @@ interface IProps extends WrappedComponentProps {
 }
 
 @observer
-class SettingsLayout extends Component<IProps> {
+class SettingsLayout extends Component<PropsWithChildren<IProps>> {
   constructor(props: IProps) {
     super(props);
 
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
index 64ff25eab..bc38aa603 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
@@ -19,6 +19,7 @@ const messages = defineMessages({
 
 interface IProps extends WrappedComponentProps {
   actions?: Actions;
+  children?: React.ReactNode;
 }
 
 @inject('stores', 'actions')
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index 1d69a9acf..e8e305fdd 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -4,6 +4,7 @@ import {
   ReactElement,
   RefObject,
   ChangeEvent,
+  ReactNode,
 } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
@@ -103,7 +104,9 @@ class Select extends Component<IProps> {
             </option>
           ))}
         </select>
-        {field.error && <div className="franz-form__error">{field.error}</div>}
+        {field.error && (
+          <div className="franz-form__error">{field.error as ReactNode}</div>
+        )}
       </div>
     );
   }
diff --git a/src/components/util/ErrorBoundary/index.tsx b/src/components/util/ErrorBoundary/index.tsx
index b042e62c8..bef211ef9 100644
--- a/src/components/util/ErrorBoundary/index.tsx
+++ b/src/components/util/ErrorBoundary/index.tsx
@@ -20,6 +20,7 @@ const messages = defineMessages({
 
 interface ErrorBoundaryProps extends WithStylesProps<typeof styles> {
   intl: IntlShape;
+  children?: React.ReactNode;
 }
 
 class ErrorBoundary extends Component<ErrorBoundaryProps> {
-- 
cgit v1.2.3-70-g09d2