Add router to simplify navidation

2024-11-10 17:33:24 +01:00 · 2020-12-04 20:05:42 -08:00 · 2020-12-04 20:05:42 -08:00 · 08517ca3f2
commit 08517ca3f2
parent 0d3414dcb5
5 changed files with 128 additions and 75 deletions
--- a/.eslintcache
+++ b/.eslintcache
@ -1 +1 @@
-[{"/Users/pveiga/repos/wisemapping-react/src/Footer.js":"1","/Users/pveiga/repos/wisemapping-react/src/Header.js":"2","/Users/pveiga/repos/wisemapping-react/src/index.js":"3","/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js":"4","/Users/pveiga/repos/wisemapping-react/src/LoginApp.js":"5"},{"size":1609,"mtime":1607011308675,"results":"6","hashOfConfig":"7"},{"size":1924,"mtime":1607015196109,"results":"8","hashOfConfig":"7"},{"size":1883,"mtime":1607118506285,"results":"9","hashOfConfig":"7"},{"size":4123,"mtime":1607126426627,"results":"10","hashOfConfig":"7"},{"size":3519,"mtime":1607114188755,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",[],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js",["22"],"/Users/pveiga/repos/wisemapping-react/src/LoginApp.js",[],{"ruleId":"23","severity":1,"message":"24","line":59,"column":13,"nodeType":"25","messageId":"26","endLine":59,"endColumn":19},"no-unused-vars","'status' is assigned a value but never used.","Identifier","unusedVar"]
+[{"/Users/pveiga/repos/wisemapping-react/src/Footer.js":"1","/Users/pveiga/repos/wisemapping-react/src/Header.js":"2","/Users/pveiga/repos/wisemapping-react/src/index.js":"3","/Users/pveiga/repos/wisemapping-react/src/LoginPage.js":"4","/Users/pveiga/repos/wisemapping-react/src/RegistrationPage.js":"5"},{"size":1609,"mtime":1607011308675,"results":"6","hashOfConfig":"7"},{"size":1924,"mtime":1607015196109,"results":"8","hashOfConfig":"7"},{"size":1385,"mtime":1607144319143,"results":"9","hashOfConfig":"7"},{"size":3359,"mtime":1607141115584,"results":"10","hashOfConfig":"7"},{"size":4573,"mtime":1607143971378,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",[],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginPage.js",["22"],"/Users/pveiga/repos/wisemapping-react/src/RegistrationPage.js",[],{"ruleId":"23","severity":1,"message":"24","line":4,"column":28,"nodeType":"25","messageId":"26","endLine":4,"endColumn":40},"no-unused-vars","'IntlProvider' is defined but never used.","Identifier","unusedVar"]
--- a/src/App.js
+++ b/src/App.js
@ -0,0 +1,72 @@
+import React from 'react';
+
+import RegistrationApp from './RegistrationApp.js';
+import LoginPage from './LoginPage.js';
+
+const Apps = Object.freeze({
+    LOGIN: {
+        id: 'login',
+        path: '/c/login'
+    },
+    REGISTRATION: {
+        id: 'registration',
+        path: '/c/user/registration'
+    }
+});
+
+function router() {
+    let result = null;
+
+    // Is it running ebedded ?.
+    const location = window.location;
+    if (location.pathname.indexOf('/c/') !== -1) {
+        const pathname = location.pathname;
+        result = Object.values(Apps).find(value => value.path.endsWith(pathname));
+    } else {
+        // It's loaded from the npm start
+        const pageId = new URLSearchParams(location.search).get('app');
+        result = Object.values(Apps).find(value => value.id === pageId);
+    }
+    if (result === null) {
+        result = Apps.LOGIN;
+    }
+
+    console.log("router():" + result);
+    return result;
+}
+
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+   
+    render()
+    {
+        const locale = this.props.locale;
+        const messages = this.props.messages;
+
+        // Todo: This is a temporal hack to rudimentary dispatch application.
+        let rootPage;
+        switch (router()) {
+            case Apps.LOGIN:
+                rootPage = <LoginPage locale = { locale }
+                messages = { messages }
+                />;
+                break
+            case Apps.REGISTRATION:
+                rootPage = <RegistrationApp locale = { locale }
+                messages = { messages }
+                />;
+                break
+            default:
+                rootPage = <LoginPage locale = { locale }
+                messages = { messages }
+                />;
+        }
+
+        return rootPage;
+        
+    }
+
+}
+export default App;
--- a/src/LoginPage.js
+++ b/src/LoginPage.js
@ -47,7 +47,6 @@ const LoginError = (props) => {

 class LoginForm extends React.Component {
  render() {
-
    const intl = this.props.intl;
    return (
      <div className="wrapper">
@ -74,23 +73,18 @@ class LoginForm extends React.Component {
  }
 }

-const LoginApp = (props) => {
-  const messages = props.messages;
-  const locale = props.locale;
-
+const LoginPage = (props) => {
  return (
-    <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
      <div>
        <Header type='only-signup' />
        <LoginForm />
        <ConfigStatusMessage enabled='false' />
        <Footer />
      </div>
-    </IntlProvider>
  );
 }

 LoginForm = injectIntl(LoginForm)

-export default LoginApp;
+export default LoginPage;

--- a/src/RegistrationPage.js
+++ b/src/RegistrationPage.js
@ -2,7 +2,9 @@ import './css/registration.css';

 import React from 'react';
 import axios from 'axios';
-import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
+import { useHistory } from "react-router-dom";
+
 import ReCAPTCHA from "react-google-recaptcha";

 import Header from './Header.js';
@ -51,12 +53,12 @@ class RegistrationForm extends React.Component {
      rest,
      { headers: { 'Content-Type': 'application/json' } }
    ).then(response => {
-      alert(response.data);
-      this.setState({ errorMsg: "Error Message" });
+      const history = useHistory();
+      history.push("/c/user/registrationSuccess");
    }).catch(error => {
      // Handle error ...
      const data = error.response.data;
-      const status = error.response.status;
+      // const status = error.response.status;

      const errorMsg = Object.values(data.fieldErrors)[0];
      this.setState({ "errorMsg": errorMsg });
@ -98,23 +100,33 @@ class RegistrationForm extends React.Component {
    );
  }
 }
+RegistrationForm = injectIntl(RegistrationForm);

-const RegistationApp = props => {
-  const messages = props.messages;
-  const locale = props.locale;
-
+const RegistationFormPage = props => {
  return (
-    <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
    <div>
      <Header type='only-signin' />
      <RegistrationForm />
      <Footer />
    </div>
-    </IntlProvider>
  );
 }

-RegistrationForm = injectIntl(RegistrationForm)
+const RegistrationSuccessPage = (props) => {
+  return (
+    <div>
+      <Header type='only-signup' />
+      <div className="wrapper">
+        <div className="content">
+          <h1><FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" /></h1>
+          <p><FormattedMessage id="registration.success.desc" defaultMessage="Your account has been created successfully, click to sign in and start enjoying  WiseMapping." /></p>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export { RegistationFormPage, RegistrationSuccessPage };

-export default RegistationApp;

--- a/src/index.js
+++ b/src/index.js
@ -1,7 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import LoginApp from './LoginApp.js';
-import RegistationApp from './RegistrationApp';
+import LoginPage from './LoginPage.js';
+import { RegistrationSuccessPage, RegistationFormPage } from './RegistrationPage';
+import { IntlProvider } from 'react-intl'
+import {
+  BrowserRouter as Router,
+  Route,
+  Switch,
+  Redirect
+} from 'react-router-dom';
+

 function loadLocaleData(language) {
  switch (language) {
@ -12,38 +20,6 @@ function loadLocaleData(language) {
  }
 }

-const Apps = Object.freeze({
-  LOGIN: {
-    id: 'login',
-    path: '/c/login'
-  },
-  REGISTRATION: {
-    id: 'registration',
-    path: '/c/user/registration'
-  }
-});
-
-function router() {
-  let result = null;
-
-  // Is it running ebedded ?.
-  const location = window.location;
-  if (location.pathname.indexOf('/c/') !== -1) {
-    const pathname = location.pathname;
-    result = Object.values(Apps).find(value => value.path.endsWith(pathname));
-  } else {
-    // It's loaded from the npm start
-    const pageId = new URLSearchParams(location.search).get('app');
-    result = Object.values(Apps).find(value => value.id === pageId);
-  }
-  if (result === null) {
-    result = Apps.LOGIN;
-  }
-
-  console.log("router():" + result);
-  return result;
-}
-
 async function bootstrapApplication() {

  // Boostrap i18n ...
@ -51,24 +27,23 @@ async function bootstrapApplication() {
    || navigator.language
    || navigator.userLanguage
    || 'en-US';
+
  const language = locale.split('-')[0];
  const messages = (await loadLocaleData(language));

-  // Todo: This is a temporal hack to rudimentary dispatch application.
-  let rootPage;
-  switch (router()) {
-    case Apps.LOGIN:
-      rootPage = <LoginApp locale={locale} messages={messages} />;
-      break
-    case Apps.REGISTRATION:
-      rootPage = <RegistationApp locale={locale} messages={messages} />;
-      break
-    default:
-      rootPage = <LoginApp locale={locale} messages={messages} />;
-  }
-
  ReactDOM.render(
-    rootPage,
+    <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
+      <Router>
+        <Switch>
+          <Route exact path="/">
+            <Redirect to="/c/login" />
+          </Route>
+          <Route path="/c/login" render={() => <LoginPage />} />
+          <Route path="/c/user/registration" render={() => <RegistationFormPage />} />
+          <Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
+        </Switch>
+      </Router>
+    </IntlProvider>,
    document.getElementById('root')
  )
 }