diff --git a/src/App.js b/src/App.js
index ce9cbd2..2a50ae0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,26 +1,10 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+import Router from './components/Router'
-function App() {
+export default function App() {
return (
-
-
+
+
);
}
-
-export default App;
diff --git a/src/components/Router.jsx b/src/components/Router.jsx
index 31fc1bd..37aae61 100644
--- a/src/components/Router.jsx
+++ b/src/components/Router.jsx
@@ -3,27 +3,28 @@ import { Router as ReactRouter, Route, Switch } from 'react-router-dom'
import { createBrowserHistory as createHistory } from 'history'
/* Site */
-import Home from 'views/Home'
-import Team from 'views/Team'
-import Member from 'views/Member'
+import Home from '../views/Home'
+// import Team from '../views/Team'
+// import Member from '../views/Member'
const history = createHistory()
history.listen(location => {
window.scrollTo(0,0)
})
-export function Router(props) {
+export default function Router(props) {
return (
- } />
- } />
)
}
+//
} />
+// } />
+
// class Router extends React.Component {
// constructor(props) {
// super(props)
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
new file mode 100644
index 0000000..73b9054
--- /dev/null
+++ b/src/components/Team.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default function Team({ teams }) {
+ return (
+
+
+ {teams.map(team => (
+ -
+ { team.name }
+
+ ))}
+
+
+ )
+}
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 6b60c10..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 8b892c4..7213bc6 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,16 +1,19 @@
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import config from '../config.json'
+import Team from '../components/Team.jsx'
export default function Home() {
// MARK: State
let [loading, setLoading] = useState(true)
+ let [loadingDetails, setLoadingDetails] = useState(true)
let [teams, setTeams] = useState([])
let [members, setMembers] = useState([])
let [teamDetails, setTeamDetails] = useState([])
// MARK: Effects
- // MAKR: - Load data from Tempo backend on initialization
+
+ // MAKR: - Load teams from Tempo backend on initialization
useEffect(() => {
let fetchData = async() => {
setLoading(true)
@@ -18,7 +21,6 @@ export default function Home() {
let result = await axios(config.api + '/team/')
if (result.data) {
setTeams(result.data)
- console.log('Backend ok')
}
setLoading(false)
}
@@ -30,5 +32,53 @@ export default function Home() {
fetchData()
}, [])
-}
+ // MARK: - Load teams' details
+ useEffect(() => {
+ teams.map(team => {
+ let fetchData = async() => {
+ try {
+ setLoadingDetails(true)
+ let result = await axios(config.api + '/team/' + team.id)
+ if (result.data) {
+ console.log(JSON.stringify(result.data))
+ setTeamDetails(t => [...t, result.data])
+ }
+ setLoadingDetails(false)
+ }
+ catch(err) {
+ setLoadingDetails(false)
+ console.log('Fetch data error: ' + err)
+ }
+ }
+
+ fetchData()
+ })
+ }, [teams])
+
+ // MARK: Return
+ return (
+
+
Tempo
+
+ {loading ? (
Loading...
) : (
+ teams !== undefined &&
+
+ )}
+
+ {loadingDetails ? (
Loading...
) : (
+ teamDetails !== undefined &&
+
+
+ {teamDetails.map(team => (
+ -
+ { team.members.length}
+
+ ))}
+
+
+ )}
+
+
+ )
+}