fixed #21 Joomla Migrator, #22 Wordpress Migrator

package.json

@@ -53,6 +53,7 @@
     "react-select": "^5.4.0",
     "react-simple-maps": "^3.0.0",
     "react-spinners": "^0.13.6",
+    "react-step-wizard": "^5.3.11",
     "react-table": "^7.6.2",
     "react-timezone-select": "^1.0.7",
     "react-toastify": "^9.0.8",

src/components/Menu/index.jsx

@@ -93,12 +93,24 @@ const Menu = observer((props) => {
       icons_color: '/assets/images/image.png',
       width: 24,
       height: 24,
-      // submenu: [
-      //   {
-      //     text: "txt_menu_overview",
-      //     link: `/data-${dataStreamActive}/audience/overview`,
-      //   },
-      // ],
+    },
+    {
+      text: 'txt_migrator',
+      link: `/migrator`,
+      icons: '/assets/images/image.png',
+      icons_color: '/assets/images/image.png',
+      width: 24,
+      height: 24,
+      submenu: [
+        {
+          text: 'Joomla',
+          link: '/migrator/joomla',
+        },
+        {
+          text: 'Wordpress',
+          link: '/migrator/wordpress',
+        },
+      ],
     },
   ];
 

src/components/SbarLeft/index.scss

@@ -1,3 +0,0 @@
-.progress {
-  height: 4px;
-}

src/containers/MigratorPage/MigratorForm/JoomlaForm.jsx

@@ -0,0 +1,119 @@
+import Input from 'components/Form/Input';
+import { FORM_FIELD_TYPE } from 'constants/FormFieldType';
+import React, { Component } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import SimpleReactValidator from 'simple-react-validator';
+import { observer } from 'mobx-react';
+import { notify } from 'components/Toast';
+import { withMigratorViewModel } from '../MigratorViewModels/MigratorViewModelContextProvider';
+import { JOOMLA_FIELDS } from '../MigratorUtils/joomla';
+import { withTranslation } from 'react-i18next';
+const JoomlaForm = observer(
+  class JoomlaForm extends Component {
+    joomlaFormViewmodel = '';
+    formPropsData = {
+      [JOOMLA_FIELDS.URL]: '',
+      [JOOMLA_FIELDS.TOKEN]: '',
+    };
+    constructor(props) {
+      super(props);
+      this.joomlaFormViewmodel = props.viewModel?.getJoomlaFormViewModel();
+      this.validator = new SimpleReactValidator({ autoForceUpdate: this });
+      this.state = {
+        loading: false,
+      };
+    }
+    hanldeClick = () => {
+      const { nextStep } = this.props;
+      this.setState({ loading: true });
+      if (this.validator.allValid()) {
+        nextStep();
+      } else {
+        notify('Please input all required fields', 'warn');
+        this.validator.showMessages();
+      }
+      this.setState({ loading: false });
+    };
+
+    render() {
+      const { t } = this.props;
+      const { loading } = this.state;
+      return (
+        <>
+          <h2 className="text-blue-0 fw-bold mb-4">{t('txt_migrator_joomla')}</h2>
+
+          <div className="bg-white p-4 rounded-2">
+            <div className="row justify-content-between align-items-end mb-3">
+              <Form className="col-10 row">
+                <Form.Group className="col-lg-6">
+                  <Form.Label className={`mb-8px ws-nowrap fw-semibold`}>
+                    Joomla Bearer Token
+                    <span className="text-red-1">*</span>
+                  </Form.Label>
+                  <Input
+                    field={{
+                      type: FORM_FIELD_TYPE.INPUT,
+                      value: this.joomlaFormViewmodel.formPropsData[JOOMLA_FIELDS.TOKEN],
+                      changed: (e) => {
+                        this.joomlaFormViewmodel.formPropsData[JOOMLA_FIELDS.TOKEN] =
+                          e.target.value;
+                      },
+                      blurred: () => {
+                        this.validator.showMessageFor('Joomla Bearer Token');
+                      },
+                    }}
+                  />
+                  {this.validator.message(
+                    'Joomla Bearer Token',
+                    this.joomlaFormViewmodel?.formPropsData[JOOMLA_FIELDS.TOKEN],
+                    'required',
+                    {
+                      className: 'text-danger mt-1',
+                    }
+                  )}
+                </Form.Group>
+                <Form.Group className="col-lg-6">
+                  <Form.Label className={`mb-8px ws-nowrap fw-semibold`}>
+                    Joomla API URL
+                    <span className="text-red-1">*</span>
+                  </Form.Label>
+                  <Input
+                    field={{
+                      type: FORM_FIELD_TYPE.INPUT,
+                      value: this.joomlaFormViewmodel.formPropsData[JOOMLA_FIELDS.URL],
+                      changed: (e) => {
+                        this.joomlaFormViewmodel.formPropsData[JOOMLA_FIELDS.URL] = e.target.value;
+                      },
+                      blurred: () => {
+                        this.validator.showMessageFor('Joomla API URL');
+                      },
+                    }}
+                  />
+                  {this.validator.message(
+                    'Joomla API URL',
+                    this.joomlaFormViewmodel?.formPropsData[JOOMLA_FIELDS.URL],
+                    'required',
+                    {
+                      className: 'text-danger mt-1',
+                    }
+                  )}
+                </Form.Group>
+              </Form>
+              <div className="col-2 text-end">
+                <Button
+                  disabled={loading}
+                  variant="success"
+                  className="fw-semibold rounded-1 px-4"
+                  onClick={this.hanldeClick}
+                >
+                  {t('txt_next_step')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </>
+      );
+    }
+  }
+);
+export default withTranslation('common')(withMigratorViewModel(JoomlaForm));

src/containers/MigratorPage/MigratorForm/MergeDataPage.jsx

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import { Button } from 'react-bootstrap';
+import ProgressBar from 'react-bootstrap/ProgressBar';
+import { observer } from 'mobx-react';
+import { withTranslation } from 'react-i18next';
+
+const MergeDataPage = observer(
+  class MergeDataPage extends Component {
+    constructor(props) {
+      super(props);
+      this.viewModel = props.viewModel;
+      this.state = {
+        isMerging: false,
+        percent: 0,
+      };
+    }
+    increasePercentPerSecond = () => {
+      if (this.state.percent < 99) {
+        this.setState({ percent: this.state.percent + 3 });
+      }
+    };
+    handleClick = async () => {
+      this.setState({ isMerging: true });
+      const increasePercent = setInterval(this.increasePercentPerSecond, 500);
+      const response = await this.viewModel.migratorData();
+      if (response) {
+        this.setState({ percent: 100 });
+      }
+      clearInterval(increasePercent);
+      this.setState({ isMerging: false });
+    };
+    render() {
+      const { previousStep, t } = this.props;
+      const { isMerging, percent } = this.state;
+      return (
+        <>
+          <div className="bg-white p-4 rounded-2 ">
+            <div className="row align-items-center">
+              <div className="col-2">
+                <Button
+                  disabled={isMerging}
+                  onClick={this.handleClick}
+                  variant="success"
+                  className="fw-semibold px-4"
+                >
+                  {isMerging ? 'Merging...' : 'Merge Data'}
+                </Button>
+              </div>
+              <div className="col-10">
+                <ProgressBar
+                  className="fw-bold"
+                  striped
+                  animated
+                  variant="success"
+                  now={percent}
+                  label={`${percent}%`}
+                />
+              </div>
+            </div>
+          </div>
+          <Button
+            onClick={previousStep}
+            variant="outline-secondary"
+            className=" fs-14 fw-semibold p-2 mt-4"
+          >
+            {t('txt_previous_step')}
+          </Button>
+        </>
+      );
+    }
+  }
+);
+export default withTranslation('common')(MergeDataPage);

src/containers/MigratorPage/MigratorForm/WordPressForm.jsx

@@ -0,0 +1,91 @@
+import Input from 'components/Form/Input';
+import { FORM_FIELD_TYPE } from 'constants/FormFieldType';
+import React, { Component } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import SimpleReactValidator from 'simple-react-validator';
+import { observer } from 'mobx-react';
+import { notify } from 'components/Toast';
+import { withMigratorViewModel } from '../MigratorViewModels/MigratorViewModelContextProvider';
+import { WORDPRESS_FIELDS } from '../MigratorUtils/wordpress';
+import { withTranslation } from 'react-i18next';
+const WordPressForm = observer(
+  class WordPressForm extends Component {
+    wordPressFormViewModel = '';
+    formPropsData = {
+      [WORDPRESS_FIELDS.URL]: '',
+    };
+    constructor(props) {
+      super(props);
+      this.wordPressFormViewModel = props.viewModel.getWordPressFormViewModel();
+      this.validator = new SimpleReactValidator({ autoForceUpdate: this });
+      this.state = {
+        loading: false,
+      };
+    }
+    hanldeClick = () => {
+      const { nextStep } = this.props;
+      this.setState({ loading: true });
+      if (this.validator.allValid()) {
+        nextStep();
+      } else {
+        notify('Please input WordPress API URL fields', 'warn');
+        this.validator.showMessages();
+      }
+      this.setState({ loading: false });
+    };
+
+    render() {
+      const { t } = this.props;
+      const { loading } = this.state;
+      return (
+        <>
+          <h2 className="text-blue-0 fw-bold mb-4">{t('txt_migrator_wordpress')}</h2>
+          <div className="bg-white p-4 rounded-2">
+            <div className="row justify-content-between align-items-end mb-3">
+              <Form className="col-6">
+                <Form.Group>
+                  <Form.Label className={`mb-8px ws-nowrap fw-semibold`}>
+                    WordPress API URL
+                    <span className="text-red-1">*</span>
+                  </Form.Label>
+                  <Input
+                    field={{
+                      type: FORM_FIELD_TYPE.INPUT,
+                      value: this.wordPressFormViewModel.formPropsData[WORDPRESS_FIELDS.URL],
+                      changed: (e) => {
+                        this.wordPressFormViewModel.formPropsData[WORDPRESS_FIELDS.URL] =
+                          e.target.value;
+                      },
+                      blurred: () => {
+                        this.validator.showMessageFor('WordPress API URL');
+                      },
+                    }}
+                  />
+                  {this.validator.message(
+                    'WordPress API URL',
+                    this.wordPressFormViewModel.formPropsData[WORDPRESS_FIELDS.URL],
+                    'required',
+                    {
+                      className: 'text-danger mt-1',
+                    }
+                  )}
+                </Form.Group>
+              </Form>
+              <div className="col-2 text-end">
+                <Button
+                  disabled={loading}
+                  variant="success"
+                  className="fw-semibold rounded-1 px-4"
+                  onClick={this.hanldeClick}
+                >
+                  {t('txt_next_step')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </>
+      );
+    }
+  }
+);
+export default withTranslation('common')(withMigratorViewModel(WordPressForm));

src/containers/MigratorPage/MigratorStore/MigratorStore.js

@@ -0,0 +1,32 @@
+import { AUTHORIZATION_KEY, Storage } from 'aesirx-dma-lib';
+import { AesirX } from '../MigratorUtils/aesirx';
+import { Joomla } from '../MigratorUtils/joomla';
+import { Wordpress } from '../MigratorUtils/wordpress';
+
+export default class MigratorStore {
+  migratorData = async (aesirx_migrate_type, data, callbackSuccess, callbackError) => {
+    try {
+      const aesirx_bearer_token = Storage.getItem(AUTHORIZATION_KEY.ACCESS_TOKEN);
+      const aesirx = new AesirX(
+        aesirx_bearer_token,
+        process.env.REACT_APP_ENDPOINT_URL,
+        aesirx_migrate_type
+      );
+      switch (aesirx_migrate_type) {
+        case 'WORDPRESS':
+          await new Wordpress(aesirx, data?.wordpress_api_url).runAll();
+          break;
+        case 'JOOMLA':
+        default:
+          await new Joomla(aesirx, data?.joomla_api_url, data?.joomla_bearer_token).runAll();
+          break;
+      }
+      callbackSuccess();
+      return true;
+    } catch (error) {
+      console.log(error);
+      callbackError();
+      return false;
+    }
+  };
+}