From f79727a8632490f11c1423773fdd6adfb6337a7b Mon Sep 17 00:00:00 2001
From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>
Date: Tue, 25 Oct 2022 12:51:28 +0530
Subject: Transform 'AuthLayoutContainer' component hierarchy to tsx (#699)

Co-authored-by: Muhamed <>
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
---
 src/features/publishDebugInfo/Component.js  | 219 ----------------------------
 src/features/publishDebugInfo/Component.tsx | 208 ++++++++++++++++++++++++++
 src/features/publishDebugInfo/index.ts      |  14 +-
 3 files changed, 213 insertions(+), 228 deletions(-)
 delete mode 100644 src/features/publishDebugInfo/Component.js
 create mode 100644 src/features/publishDebugInfo/Component.tsx

(limited to 'src/features/publishDebugInfo')

diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
deleted file mode 100644
index 27661d917..000000000
--- a/src/features/publishDebugInfo/Component.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import { inject, observer } from 'mobx-react';
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import injectSheet from 'react-jss';
-import { state as ModalState } from './store';
-
-import { H1 } from '../../components/ui/headline';
-import { sendAuthRequest } from '../../api/utils/auth';
-import Button from '../../components/ui/button';
-import Input from '../../components/ui/input/index';
-import Modal from '../../components/ui/Modal';
-import { DEBUG_API } from '../../config';
-import AppStore from '../../stores/AppStore';
-import ServicesStore from '../../stores/ServicesStore';
-
-const debug = require('../../preload-safe-debug')(
-  'Ferdium:feature:publishDebugInfo',
-);
-
-const messages = defineMessages({
-  title: {
-    id: 'feature.publishDebugInfo.title',
-    defaultMessage: 'Publish debug information',
-  },
-  info: {
-    id: 'feature.publishDebugInfo.info',
-    defaultMessage:
-      "Publishing your debug information helps us find issues and errors in Ferdium. By publishing your debug information you accept Ferdium Debugger's privacy policy and terms of service",
-  },
-  error: {
-    id: 'feature.publishDebugInfo.error',
-    defaultMessage:
-      'There was an error while trying to publish the debug information. Please try again later or view the console for more information.',
-  },
-  privacy: {
-    id: 'feature.publishDebugInfo.privacy',
-    defaultMessage: 'Privacy policy',
-  },
-  terms: {
-    id: 'feature.publishDebugInfo.terms',
-    defaultMessage: 'Terms of service',
-  },
-  publish: {
-    id: 'feature.publishDebugInfo.publish',
-    defaultMessage: 'Accept and publish',
-  },
-  published: {
-    id: 'feature.publishDebugInfo.published',
-    defaultMessage: 'Your debug log was published and is now availible at',
-  },
-});
-
-const styles = theme => ({
-  modal: {
-    width: '80%',
-    maxWidth: 600,
-    background: theme.styleTypes.primary.contrast,
-    paddingTop: 30,
-  },
-  headline: {
-    fontSize: 20,
-    marginBottom: 20,
-    marginTop: -27,
-  },
-  info: {
-    paddingBottom: 20,
-  },
-  link: {
-    color: `${theme.styleTypes.primary.accent} !important`,
-    padding: 10,
-    cursor: 'pointer',
-  },
-  button: {
-    width: '100%',
-    marginTop: 10,
-    cursor: 'pointer',
-  },
-});
-
-class PublishDebugLogModal extends Component {
-  state = {
-    log: null,
-    error: false,
-    isSendingLog: false,
-  };
-
-  // Close this modal
-  close() {
-    ModalState.isModalVisible = false;
-    this.setState({
-      log: null,
-      error: false,
-      isSendingLog: false,
-    });
-  }
-
-  async publishDebugInfo() {
-    debug('debugInfo: starting publish');
-    this.setState({
-      isSendingLog: true,
-    });
-
-    const debugInfo = JSON.stringify(this.props.stores.app.debugInfo);
-
-    const request = await sendAuthRequest(
-      `${DEBUG_API}/create`,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          log: debugInfo,
-        }),
-      },
-      false,
-    );
-
-    debug(`debugInfo: publishing status: ${request.status}`);
-    if (request.status === 200) {
-      const response = await request.json();
-      if (response.id) {
-        this.setState({
-          log: response.id,
-        });
-      } else {
-        this.setState({
-          error: true,
-        });
-      }
-    } else {
-      this.setState({
-        error: true,
-      });
-    }
-
-    debug('debugInfo: finished publishing');
-  }
-
-  render() {
-    const { isModalVisible } = ModalState;
-
-    const { classes } = this.props;
-
-    const { log, error, isSendingLog } = this.state;
-
-    const { intl } = this.props;
-
-    return (
-      <Modal
-        isOpen={isModalVisible}
-        shouldCloseOnOverlayClick
-        className={`${classes.modal} publish-debug`}
-        close={() => this.close()}
-      >
-        <H1 className={classes.headline}>
-          {intl.formatMessage(messages.title)}
-        </H1>
-        {log && (
-          <>
-            <p className={classes.info}>
-              {intl.formatMessage(messages.published)}
-            </p>
-            <Input showLabel={false} value={`${DEBUG_API}/${log}`} readonly />
-          </>
-        )}
-
-        {error && (
-          <p className={classes.info}>{intl.formatMessage(messages.error)}</p>
-        )}
-
-        {!log && !error && (
-          <>
-            <p className={classes.info}>{intl.formatMessage(messages.info)}</p>
-
-            <a
-              href={`${DEBUG_API}/privacy.html`}
-              target="_blank"
-              className={classes.link}
-              rel="noreferrer"
-            >
-              {intl.formatMessage(messages.privacy)}
-            </a>
-            <a
-              href={`${DEBUG_API}/terms.html`}
-              target="_blank"
-              className={classes.link}
-              rel="noreferrer"
-            >
-              {intl.formatMessage(messages.terms)}
-            </a>
-
-            <Button
-              type="button"
-              label={intl.formatMessage(messages.publish)}
-              className={classes.button}
-              onClick={() => this.publishDebugInfo()}
-              disabled={isSendingLog}
-            />
-          </>
-        )}
-      </Modal>
-    );
-  }
-}
-
-PublishDebugLogModal.propTypes = {
-  stores: PropTypes.shape({
-    app: PropTypes.instanceOf(AppStore).isRequired,
-  }).isRequired,
-  actions: PropTypes.shape({
-    service: PropTypes.instanceOf(ServicesStore).isRequired,
-  }).isRequired,
-  classes: PropTypes.object.isRequired,
-};
-
-export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(
-    inject('stores', 'actions')(observer(PublishDebugLogModal)),
-  ),
-);
diff --git a/src/features/publishDebugInfo/Component.tsx b/src/features/publishDebugInfo/Component.tsx
new file mode 100644
index 000000000..e265902dd
--- /dev/null
+++ b/src/features/publishDebugInfo/Component.tsx
@@ -0,0 +1,208 @@
+import { inject, observer } from 'mobx-react';
+import { Component, ReactElement } from 'react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import withStyles, { WithStylesProps } from 'react-jss';
+import { StoresProps } from '../../@types/ferdium-components.types';
+import { state as ModalState } from './store';
+import { H1 } from '../../components/ui/headline';
+import { sendAuthRequest } from '../../api/utils/auth';
+import Button from '../../components/ui/button';
+import Input from '../../components/ui/input/index';
+import Modal from '../../components/ui/Modal';
+import { DEBUG_API } from '../../config';
+
+const debug = require('../../preload-safe-debug')(
+  'Ferdium:feature:publishDebugInfo',
+);
+
+const messages = defineMessages({
+  title: {
+    id: 'feature.publishDebugInfo.title',
+    defaultMessage: 'Publish debug information',
+  },
+  info: {
+    id: 'feature.publishDebugInfo.info',
+    defaultMessage:
+      "Publishing your debug information helps us find issues and errors in Ferdium. By publishing your debug information you accept Ferdium Debugger's privacy policy and terms of service",
+  },
+  error: {
+    id: 'feature.publishDebugInfo.error',
+    defaultMessage:
+      'There was an error while trying to publish the debug information. Please try again later or view the console for more information.',
+  },
+  privacy: {
+    id: 'feature.publishDebugInfo.privacy',
+    defaultMessage: 'Privacy policy',
+  },
+  terms: {
+    id: 'feature.publishDebugInfo.terms',
+    defaultMessage: 'Terms of service',
+  },
+  publish: {
+    id: 'feature.publishDebugInfo.publish',
+    defaultMessage: 'Accept and publish',
+  },
+  published: {
+    id: 'feature.publishDebugInfo.published',
+    defaultMessage: 'Your debug log was published and is now availible at',
+  },
+});
+
+const styles = theme => ({
+  modal: {
+    width: '80%',
+    maxWidth: 600,
+    background: theme.styleTypes.primary.contrast,
+    paddingTop: 30,
+  },
+  headline: {
+    fontSize: 20,
+    marginBottom: 20,
+    marginTop: -27,
+  },
+  info: {
+    paddingBottom: 20,
+  },
+  link: {
+    color: `${theme.styleTypes.primary.accent} !important`,
+    padding: 10,
+    cursor: 'pointer',
+  },
+  button: {
+    width: '100%',
+    marginTop: 10,
+    cursor: 'pointer',
+  },
+});
+
+interface IProps
+  extends Partial<StoresProps>,
+    WithStylesProps<typeof styles>,
+    WrappedComponentProps {}
+
+interface IState {
+  log: null;
+  error: boolean;
+  isSendingLogs: boolean;
+}
+
+@inject('stores', 'actions')
+@observer
+class PublishDebugLogModal extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      log: null,
+      error: false,
+      isSendingLogs: false,
+    };
+  }
+
+  // Close this modal
+  close(): void {
+    ModalState.isModalVisible = false;
+    this.setState({
+      log: null,
+      error: false,
+      isSendingLogs: false,
+    });
+  }
+
+  async publishDebugInfo(): Promise<void> {
+    debug('debugInfo: starting publish');
+    this.setState({
+      isSendingLogs: true,
+    });
+
+    const debugInfo = JSON.stringify(this.props.stores?.app?.debugInfo);
+
+    const request = await sendAuthRequest(
+      `${DEBUG_API}/create`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          log: debugInfo,
+        }),
+      },
+      false,
+    );
+
+    debug(`debugInfo: publishing status: ${request.status}`);
+    if (request.status === 200) {
+      const response = await request.json();
+      if (response.id) {
+        this.setState({ log: response.id });
+      } else {
+        this.setState({ error: true });
+      }
+    } else {
+      this.setState({ error: true });
+    }
+
+    debug('debugInfo: finished publishing');
+  }
+
+  render(): ReactElement {
+    const { isModalVisible } = ModalState;
+    const { classes, intl } = this.props;
+    const { log, error, isSendingLogs } = this.state;
+
+    return (
+      <Modal
+        isOpen={isModalVisible}
+        shouldCloseOnOverlayClick
+        className={`${classes.modal} publish-debug`}
+        close={() => this.close()}
+      >
+        <H1 className={classes.headline}>
+          {intl.formatMessage(messages.title)}
+        </H1>
+        {log && (
+          <>
+            <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 />
+          </>
+        )}
+        {error && (
+          <p className={classes.info}>{intl.formatMessage(messages.error)}</p>
+        )}
+        {!log && !error && (
+          <>
+            <p className={classes.info}>{intl.formatMessage(messages.info)}</p>
+            <a
+              href={`${DEBUG_API}/privacy.html`}
+              target="_blank"
+              className={classes.link}
+              rel="noreferrer"
+            >
+              {intl.formatMessage(messages.privacy)}
+            </a>
+            <a
+              href={`${DEBUG_API}/terms.html`}
+              target="_blank"
+              className={classes.link}
+              rel="noreferrer"
+            >
+              {intl.formatMessage(messages.terms)}
+            </a>
+            <Button
+              type="button"
+              label={intl.formatMessage(messages.publish)}
+              className={classes.button}
+              onClick={() => this.publishDebugInfo()}
+              disabled={isSendingLogs}
+            />
+          </>
+        )}
+      </Modal>
+    );
+  }
+}
+
+export default injectIntl(
+  withStyles(styles, { injectTheme: true })(PublishDebugLogModal),
+);
diff --git a/src/features/publishDebugInfo/index.ts b/src/features/publishDebugInfo/index.ts
index 80714a104..cbbdbc594 100644
--- a/src/features/publishDebugInfo/index.ts
+++ b/src/features/publishDebugInfo/index.ts
@@ -1,21 +1,17 @@
-import { state as ModalState } from './store';
+import { state } from './store';
 
 export { default as Component } from './Component';
 
-const state = ModalState;
 const debug = require('../../preload-safe-debug')(
   'Ferdium:feature:publishDebugInfo',
 );
 
-export default function initialize() {
+export default function initialize(): void {
   debug('Initialize publishDebugInfo feature');
 
-  function showModal() {
+  const showModal = (): void => {
     state.isModalVisible = true;
-  }
-
-  window['ferdium'].features.publishDebugInfo = {
-    state,
-    showModal,
   };
+
+  window['ferdium'].features.publishDebugInfo = { state, showModal };
 }
-- 
cgit v1.2.3-70-g09d2