Passing props via router

src/components/Router.jsx

@@ -1,28 +1,35 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Router as ReactRouter, Route, Switch } from 'react-router-dom'
-import { createBrowserHistory as createHistory } from 'history'
+import history from '../history.js'
+// import { createBrowserHistory as createHistory } from 'history'
 
 /* Site */
 import Home from '../views/Home'
-// import Team from '../views/Team'
+import Team from '../views/Team'
 // import Member from '../views/Member'
 
-const history = createHistory()
+// const history = createHistory()
 history.listen(location => {
 	window.scrollTo(0,0)
 })
 
 export default function Router(props) {
+	let [team, setTeam] = useState('Rodrigo')
+	
+	let teamCallback = (el) => {
+		setTeam(el)
+	}
+
 	return (
 		<ReactRouter history = { history }>
 			<Switch>
-				<Route exact path='/' component={Home} />
+				<Route exact path='/' render={(props) => <Home teamCallback={teamCallback} {...props} />} />
+				<Route exact path='/team' render={(props) => <Team teamId={team} {...props} />} />
 			</Switch>
 		</ReactRouter>
 	)
 }
 
-// <Route exact path='/team' render={(props) => <Team {...props} />} />
 // <Route exact path='/member' render={(props) => <Member {...props} />} />
 
 // class Router extends React.Component {

src/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history'
+
+export default createBrowserHistory()

src/views/Home.jsx

@@ -1,10 +1,12 @@
+// MARK: Definitions
 import React, { useState, useEffect } from 'react'
+import history from  '../history.js'
 import axios from 'axios'
 import config from '../config.json'
 import Team from '../components/Team.jsx'
 import FilterForm from '../components/FilterForm.jsx'
 
-export default function Home() {
+export default function Home(props) {
 	// MARK: State
 	let [loading, setLoading] = useState(true)
 	let [loadingDetails, setLoadingDetails] = useState(true)
@@ -93,6 +95,9 @@ export default function Home() {
 
 	let selectTeam = (selectedTeam) => {
 		console.log('Selected team ' + selectedTeam)
+
+		props.teamCallback('Pedroso')
+		history.push('/team')
 	}
 
 	let selectUser = (selectedUser) => {

src/views/Team.jsx

@@ -0,0 +1,58 @@
+// MARK: Definitions
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import config from '../config.json'
+import FilterForm from '../components/FilterForm.jsx'
+
+export default function User({ teamId }) {
+	// MARK: State
+	let [loading, setLoading] = useState(true)
+	let [team, setTeam] = useState([])
+	let [filteredTeams, setFilteredTeams] = useState([])
+
+	// MARK: Effect
+	// MARK: - Load user info from Tempo backend on initialization
+	useEffect(() => {
+		let fetchData = async() => {
+			setLoading(true)
+			try {
+				let result = await axios(config.api + '/team/2')
+				if (result.data) {
+					setTeam(result.data)
+				}
+				setLoading(false)
+			}
+			catch(err) {
+				setLoading(false)
+				console.log('Fetch data error: ' + err)
+			}
+		}
+
+		fetchData()
+	}, [teamId])
+
+	// MARK: Callbacks
+	// let filterCallback = (e) => {
+	// 	let filtered = teams.filter(team => {
+	// 		return team.name.toUpperCase().includes(e.target.value.toUpperCase())
+	// 	})
+
+	// 	setFilteredTeams(filtered)
+	// }
+
+	// MARK: Return
+	return (
+		<div className='user'>
+			<h1>Team</h1>
+
+			{teamId !== undefined &&
+				<p>{teamId}</p>
+			}
+
+			{loading ? (<div>Loading...</div>) : (
+				team !== undefined &&	
+				<h2>{team.name}</h2>
+			)}
+		</div>
+	)
+}