From 302d595f7c289387e53a0ef7df4d574ed4e25d70 Mon Sep 17 00:00:00 2001
From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>
Date: Wed, 2 Nov 2022 06:31:36 +0530
Subject: Transform to TS and refactored components w.r.t deletion if
 duplicated Input component (#729)

---
 src/features/basicAuth/Component.js         | 101 ----------------------------
 src/features/basicAuth/Component.tsx        | 100 +++++++++++++++++++++++++++
 src/features/basicAuth/store.ts             |  12 +++-
 src/features/publishDebugInfo/Component.tsx |   1 -
 4 files changed, 111 insertions(+), 103 deletions(-)
 delete mode 100644 src/features/basicAuth/Component.js
 create mode 100644 src/features/basicAuth/Component.tsx

(limited to 'src/features')

diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
deleted file mode 100644
index acba5a90d..000000000
--- a/src/features/basicAuth/Component.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import injectSheet from 'react-jss';
-import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import classnames from 'classnames';
-
-import Modal from '../../components/ui/Modal';
-import Input from '../../components/ui/Input';
-import Button from '../../components/ui/button';
-
-import { state, resetState, sendCredentials, cancelLogin } from './store';
-import Form from './Form';
-
-import styles from './styles';
-import globalMessages from '../../i18n/globalMessages';
-import { H1 } from '../../components/ui/headline';
-
-const messages = defineMessages({
-  signIn: {
-    id: 'feature.basicAuth.signIn',
-    defaultMessage: 'Sign In',
-  },
-});
-
-class BasicAuthModal extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
-
-  submit(e) {
-    e.preventDefault();
-
-    const values = Form.values();
-
-    sendCredentials(values.user, values.password);
-    resetState();
-  }
-
-  cancel() {
-    cancelLogin();
-    this.close();
-  }
-
-  close() {
-    resetState();
-    state.isModalVisible = false;
-  }
-
-  render() {
-    const { classes } = this.props;
-
-    const { isModalVisible, authInfo } = state;
-
-    if (!authInfo) {
-      return null;
-    }
-
-    const { intl } = this.props;
-
-    return (
-      <Modal
-        isOpen={isModalVisible}
-        className={classes.modal}
-        close={this.cancel.bind(this)}
-        showClose={false}
-      >
-        <H1>{intl.formatMessage(messages.signIn)}</H1>
-        <p>
-          http
-          {authInfo.port === 443 && 's'}
-          ://
-          {authInfo.host}
-        </p>
-        <form
-          onSubmit={this.submit.bind(this)}
-          className={classnames('franz-form', classes.form)}
-        >
-          <Input field={Form.$('user')} showLabel={false} />
-          <Input
-            field={Form.$('password')}
-            showLabel={false}
-            showPasswordToggle
-          />
-          <div className={classes.buttons}>
-            <Button
-              type="button"
-              label={intl.formatMessage(globalMessages.cancel)}
-              buttonType="secondary"
-              onClick={this.cancel.bind(this)}
-            />
-            <Button type="submit" label={intl.formatMessage(messages.signIn)} />
-          </div>
-        </form>
-      </Modal>
-    );
-  }
-}
-export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(BasicAuthModal)),
-);
diff --git a/src/features/basicAuth/Component.tsx b/src/features/basicAuth/Component.tsx
new file mode 100644
index 000000000..e20f7641b
--- /dev/null
+++ b/src/features/basicAuth/Component.tsx
@@ -0,0 +1,100 @@
+import { Component, FormEvent, ReactElement } from 'react';
+import injectSheet, { WithStylesProps } from 'react-jss';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import classnames from 'classnames';
+import { noop } from 'lodash';
+import Modal from '../../components/ui/Modal';
+import Input from '../../components/ui/input/index';
+import Button from '../../components/ui/button';
+import { state, resetState, sendCredentials, cancelLogin } from './store';
+import Form from './Form';
+import styles from './styles';
+import globalMessages from '../../i18n/globalMessages';
+import { H1 } from '../../components/ui/headline';
+
+const messages = defineMessages({
+  signIn: {
+    id: 'feature.basicAuth.signIn',
+    defaultMessage: 'Sign In',
+  },
+});
+
+interface IProps
+  extends WithStylesProps<typeof styles>,
+    WrappedComponentProps {}
+
+@observer
+class BasicAuthModal extends Component<IProps> {
+  submit(e: FormEvent<HTMLFormElement>): void {
+    e.preventDefault();
+    const values = Form.values();
+    sendCredentials(values.user, values.password);
+    resetState();
+  }
+
+  cancel(): void {
+    cancelLogin();
+    this.close();
+  }
+
+  close(): void {
+    resetState();
+    state.isModalVisible = false;
+  }
+
+  render(): ReactElement | null {
+    const { classes } = this.props;
+    const { isModalVisible, authInfo } = state;
+
+    if (!authInfo) {
+      return null;
+    }
+
+    const { intl } = this.props;
+
+    return (
+      <Modal
+        isOpen={isModalVisible}
+        className={classes.modal}
+        close={this.cancel.bind(this)}
+        showClose={false}
+      >
+        <H1>{intl.formatMessage(messages.signIn)}</H1>
+        <p>
+          http
+          {authInfo.port === 443 && 's'}
+          ://
+          {authInfo.host}
+        </p>
+        <form
+          onSubmit={this.submit.bind(this)}
+          className={classnames('franz-form', classes.form)}
+        >
+          <Input {...Form.$('user').bind()} showLabel={false} />
+          <Input
+            {...Form.$('password').bind()}
+            showLabel={false}
+            showPasswordToggle
+          />
+          <div className={classes.buttons}>
+            <Button
+              type="button"
+              label={intl.formatMessage(globalMessages.cancel)}
+              buttonType="secondary"
+              onClick={this.cancel.bind(this)}
+            />
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.signIn)}
+              onClick={noop}
+            />
+          </div>
+        </form>
+      </Modal>
+    );
+  }
+}
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(BasicAuthModal),
+);
diff --git a/src/features/basicAuth/store.ts b/src/features/basicAuth/store.ts
index e0ae8ba17..0fc289916 100644
--- a/src/features/basicAuth/store.ts
+++ b/src/features/basicAuth/store.ts
@@ -3,7 +3,17 @@ import { ipcRenderer } from 'electron';
 
 const debug = require('../../preload-safe-debug')('Ferdium:feature:basicAuth');
 
-const defaultState = {
+interface IAuthInfo {
+  host: string;
+  port: number;
+}
+interface IDefaultState {
+  isModalVisible: boolean;
+  service: null;
+  authInfo: IAuthInfo | null;
+}
+
+const defaultState: IDefaultState = {
   isModalVisible: true,
   service: null,
   authInfo: null,
diff --git a/src/features/publishDebugInfo/Component.tsx b/src/features/publishDebugInfo/Component.tsx
index e265902dd..3c6729ba0 100644
--- a/src/features/publishDebugInfo/Component.tsx
+++ b/src/features/publishDebugInfo/Component.tsx
@@ -163,7 +163,6 @@ class PublishDebugLogModal extends Component<IProps, IState> {
             <p className={classes.info}>
               {intl.formatMessage(messages.published)}
             </p>
-            {/* TODO - [TS DEBT] need to check if <Input/> take readOnly and use it  */}
             <Input showLabel={false} value={`${DEBUG_API}/${log}`} readOnly />
           </>
         )}
-- 
cgit v1.2.3-54-g00ecf