From 08517ca3f2487579886954cd1c44ed00dd32bc29 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Fri, 4 Dec 2020 20:05:42 -0800 Subject: [PATCH] Add router to simplify navidation --- .eslintcache | 2 +- src/App.js | 72 +++++++++++++++++++ src/{LoginApp.js => LoginPage.js} | 10 +-- ...RegistrationApp.js => RegistrationPage.js} | 48 ++++++++----- src/index.js | 71 ++++++------------ 5 files changed, 128 insertions(+), 75 deletions(-) create mode 100644 src/App.js rename src/{LoginApp.js => LoginPage.js} (93%) rename src/{RegistrationApp.js => RegistrationPage.js} (76%) diff --git a/.eslintcache b/.eslintcache index f2fe2213..7cd03b32 100644 --- 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"] \ No newline at end of file +[{"/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"] \ No newline at end of file diff --git a/src/App.js b/src/App.js new file mode 100644 index 00000000..433b5390 --- /dev/null +++ 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 = ; + break + case Apps.REGISTRATION: + rootPage = ; + break + default: + rootPage = ; + } + + return rootPage; + + } + +} +export default App; \ No newline at end of file diff --git a/src/LoginApp.js b/src/LoginPage.js similarity index 93% rename from src/LoginApp.js rename to src/LoginPage.js index e38b5d21..bff7f417 100644 --- a/src/LoginApp.js +++ b/src/LoginPage.js @@ -47,7 +47,6 @@ const LoginError = (props) => { class LoginForm extends React.Component { render() { - const intl = this.props.intl; return (
@@ -74,23 +73,18 @@ class LoginForm extends React.Component { } } -const LoginApp = (props) => { - const messages = props.messages; - const locale = props.locale; - +const LoginPage = (props) => { return ( -
- ); } LoginForm = injectIntl(LoginForm) -export default LoginApp; +export default LoginPage; diff --git a/src/RegistrationApp.js b/src/RegistrationPage.js similarity index 76% rename from src/RegistrationApp.js rename to src/RegistrationPage.js index bb664244..1cc39c92 100644 --- a/src/RegistrationApp.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,15 +53,15 @@ 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}); + 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 ( - -
-
- -
-
- +
+
+ +
+
); } -RegistrationForm = injectIntl(RegistrationForm) +const RegistrationSuccessPage = (props) => { + return ( +
+
+
+
+

+

+
+
+
+
+ ); +} + +export { RegistationFormPage, RegistrationSuccessPage }; -export default RegistationApp; diff --git a/src/index.js b/src/index.js index d4b0cd02..976a4813 100644 --- 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 = ; - break - case Apps.REGISTRATION: - rootPage = ; - break - default: - rootPage = ; - } - ReactDOM.render( - rootPage, + + + + + + + } /> + } /> + + + + , document.getElementById('root') ) }