mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-12-31 07:23:48 +01:00
Add router to simplify navidation
This commit is contained in:
Paulo Gustavo Veiga
parent
0d3414dcb5
commit
08517ca3f2
@ -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"]
|
||||
72
src/App.js
Normal file
72
src/App.js
Normal file
@ -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;
|
||||
@ -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;
|
||||
|
||||
@ -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 (
|
||||
<IntlProvider locale={locale} defaultLocale='en' messages={messages}>
|
||||
<div>
|
||||
<Header type='only-signin' />
|
||||
<RegistrationForm />
|
||||
<Footer />
|
||||
</div>
|
||||
</IntlProvider>
|
||||
<div>
|
||||
<Header type='only-signin' />
|
||||
<RegistrationForm />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
71
src/index.js
71
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')
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user