feat: switched RouterBroser for Fare-Zones component

login-auth/package.json

@@ -13,9 +13,9 @@
   "author": "Stefan Begerad",
   "license": "GPL-3.0-or-later",
   "dependencies": {
+    "axios": "^0.21.4",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",

login-auth/src/components/app/app.js

@@ -1,10 +1,7 @@
 import React, { useState } from 'react';
-import { Route, Link, Switch, Redirect } from 'react-router-dom';
 
-import Dashboard from '../dashboard/dashboard';
-import Home from '../home/home';
 import Login from '../login/login';
-import Preferences from '../preferences/preferences';
+import FareZones from '../fare-zones/fare-zones';
 
 function App () {
     const [token, setToken] = useState();
@@ -14,37 +11,7 @@ function App () {
         return <Login setToken={setToken} />;
     } else {
         console.log('from App() token available');
-        return (
-            <div className="App">
-                <header className="App-header">
-                    <h1 className="App-title">App Title</h1>
-                </header>
-                <div className="menu">
-                    <ul>
-                        <li>
-                            {' '}
-                            <Link to="/">Home</Link>{' '}
-                        </li>
-                        <li>
-                            {' '}
-                            <Link to="/dashboard">Dashboard</Link>{' '}
-                        </li>
-                        <li>
-                            {' '}
-                            <Link to="/preferences">Preferences</Link>{' '}
-                        </li>
-                    </ul>
-                </div>
-                <div className="App-intro">
-                    <Switch>
-                        <Route exact path="/" component={Home} />
-                        <Route path="/dashboard" component={Dashboard} />
-                        <Route path="/preferences" component={Preferences} />
-                        <Redirect to="/" />
-                    </Switch>
-                </div>
-            </div>
-        );
+        return <FareZones />;
     }
 }
 

login-auth/src/components/fare-zones/fare-zones-table.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class FareZonesTable extends Component {
+    render () {
+        return (
+            <tr>
+                <td>{this.props.obj.id}</td>
+                <td>{this.props.obj.extern}</td>
+                <td>{this.props.obj.type}</td>
+                <td>{this.props.obj.intern}</td>
+                <td>{this.props.obj.name}</td>
+                <td>{this.props.obj.shortName}</td>
+                <td>{this.props.obj.validFrom}</td>
+                <td>{this.props.obj.validUnit}</td>
+            </tr>
+        );
+    }
+}
+
+FareZonesTable.propTypes = {
+    obj: PropTypes.object
+};
+
+export default FareZonesTable;

login-auth/src/components/fare-zones/fare-zones.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import FareZonesTable from './fare-zones-table';
+
+export default class FareZones extends Component {
+    constructor (props) {
+        super(props);
+        this.state = { usersCollection: [] };
+    }
+
+    componentDidMount () {
+        axios.defaults.baseURL = 'https://tarifmatrix.vbn.de:4445';
+        axios.defaults.headers.get['Content-Type'] =
+      'application/json;charset=utf-8';
+        axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';
+
+        axios
+            .get('fares/areas/info', {
+                // Axios looks for the `auth` option, and, if it is set, formats a
+                // basic auth header for you automatically.
+                auth: {
+                    username: 'admin',
+                    password: '34106144-c645-4724-95d4-8512df16ae7e'
+                }
+            })
+            .then((res) => {
+                this.setState({ usersCollection: res.data });
+            })
+            .catch(function (error) {
+                console.log(error);
+            });
+    }
+
+    dataTable () {
+        return this.state.usersCollection.map((data, i) => {
+            return <FareZonesTable obj={data} key={i} />;
+        });
+    }
+
+    render () {
+        return (
+            <div className="wrapper-users">
+                <div className="container">
+                    <table className="table table-striped table-dark">
+                        <thead className="thead-dark">
+                            <tr>
+                                <td>ID</td>
+                                <td>Extern</td>
+                                <td>Type</td>
+                                <td>Intern</td>
+                                <td>Name</td>
+                                <td>Short Name</td>
+                                <td>Valid From</td>
+                                <td>Valid To</td>
+                            </tr>
+                        </thead>
+                        <tbody>{this.dataTable()}</tbody>
+                    </table>
+                </div>
+            </div>
+        );
+    }
+}

login-auth/src/index.js

@@ -1,13 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
 import './style/main.less';
 import App from './components/app/app';
 
 //NOTE: a router component like BrowserRouter can only habe one child element
-ReactDOM.render(
-    <BrowserRouter>
-        <App />
-    </BrowserRouter>,
-    document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));