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 ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+
); } - -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} +
  • + ))} +
+
+ )} + +
+ ) +}