Members view

src/components/Router.jsx

@@ -1,65 +1,52 @@
 import React, { useState } from 'react'
 import { Router as ReactRouter, Route, Switch } from 'react-router-dom'
 import history from '../history.js'
-// import { createBrowserHistory as createHistory } from 'history'
-
-/* Site */
 import Home from '../views/Home'
 import Team from '../views/Team'
-// import Member from '../views/Member'
+import Member from '../views/Member'
 
-// const history = createHistory()
 history.listen(location => {
 	window.scrollTo(0,0)
 })
 
 export default function Router(props) {
-	let [team, setTeam] = useState('Rodrigo')
+	let [team, setTeam] = useState([])
+	let [allTeams, setAllTeams] = useState([])
+	let [users, setUsers] = useState([])
+	let [userId, setUserId] = useState([])
 	
 	let teamCallback = (el) => {
 		setTeam(el)
 	}
 
+	let usersCallback = (el) => {
+		setUsers(el)
+	}
+
+	let userIdCallback = (el) => {
+		setUserId(el)
+	}
+
+	let allTeamsCallback = (el) => {
+		setAllTeams(el)
+	}
+
 	return (
 		<ReactRouter history = { history }>
 			<Switch>
-				<Route exact path='/' render={(props) => <Home teamCallback={teamCallback} {...props} />} />
-				<Route exact path='/team' render={(props) => <Team teamId={team} {...props} />} />
+				<Route 
+					exact path='/' 
+					render={(props) => <Home teamCallback={teamCallback} usersCallback={usersCallback} allTeamsCallback={allTeamsCallback} {...props} />}
+				/>
+				<Route 
+					exact path='/team' 
+					render={(props) => <Team teamProps={team} usersProps={users} userIdCallback={userIdCallback} {...props} />}
+				/>
+				<Route
+					exact path='/member'
+					render={(props) => <Member userId={userId} teams={allTeams} {...props} />}
+				/>
 			</Switch>
 		</ReactRouter>
 	)
 }
-
-// <Route exact path='/member' render={(props) => <Member {...props} />} />
-
-// class Router extends React.Component {
-//   constructor(props) {
-//     super(props)
-//   }
-
-// 	componentDidMount() {
-// 		ReactGA.pageview(window.location.pathname)
-// 	}
-
-//   render() {
-// 		return (
-// 			<ReactRouter history = { history }>
-// 				<Switch>
-// 					<Route exact path='/' component={Home} />
-// 					<Route exact path='/featured' component={Featured} />
-// 					<Route
-// 						path="/blog"
-// 						render={({ match: { path } }) => (
-// 							<div>
-// 								<Route exact path={path} render={(props) => <Blog {...props} />} />
-// 								<Route path={`${path}/why-we-need-to-do-more-to-protect-our-children`} render={PostDoMore} />
-// 							</div>
-// 						)}
-// 					/>
-// 				</Switch>
-// 			</ReactRouter>
-// 		)
-// 	}
-// }
-
-// export default Router

src/components/TeamList.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-export default function Team({ teams, users, selectTeam, selectUser }) {
+export default function TeamList({ teams, users, selectTeam, selectUser }) {
 	return (
 		<div className='teams'>
 			<ul className='list'>
 				{teams.map(team => (
 					<li className = 'list-item' key={team.id}>
 						<div>
-							<button onClick={() => selectTeam(team.name)}>
+							<button onClick={() => selectTeam(team)}>
 								{ team.name }
 							</button>
 						</div>

src/views/Home.jsx

@@ -3,7 +3,7 @@ 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 TeamList from '../components/TeamList.jsx'
 import FilterForm from '../components/FilterForm.jsx'
 
 export default function Home(props) {
@@ -94,9 +94,9 @@ export default function Home(props) {
 	// MARK: Callbacks
 
 	let selectTeam = (selectedTeam) => {
-		console.log('Selected team ' + selectedTeam)
-
-		props.teamCallback('Pedroso')
+		props.teamCallback(selectedTeam)
+		props.usersCallback(users)
+		props.allTeamsCallback(teams)
 		history.push('/team')
 	}
 
@@ -121,7 +121,7 @@ export default function Home(props) {
 
 			{loading || loadingUsers ? (<div>Loading...</div>) : (
 				teams !== undefined &&
-				<Team
+				<TeamList
 					teams = { filteredTeams }
 					users = { users }
 					selectTeam = { selectTeam }

src/views/Member.jsx

@@ -0,0 +1,86 @@
+// MARK: Definitions
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import history from  '../history.js'
+import config from '../config.json'
+
+// teamProps, usersProps, userIdCallback
+export default function Member(props) {
+	// MARK: State
+	let [loading, setLoading] = useState(true)
+	let [user, setUser] = useState([])
+	let [teamNames, setTeamNames] = 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 + '/user/' + props.userId)
+				if (result.data) {
+					setUser(result.data)
+					result.data.member_teams.map(teamId => {
+						let arr = props.teams.filter(el => el.id === teamId)
+						setTeamNames(t => [...t, arr[0].name])
+					})
+				}
+				setLoading(false)
+			}
+			catch(err) {
+				setLoading(false)
+				console.log('Fetch data error: ' + err)
+			}
+		}
+
+		fetchData()
+	}, [props])
+
+	// useEffect(() => {
+	// 	user.member_teams.map(teamId => {
+	// 		let arr = props.teams.filter(el => el.id === teamId)
+	// 		setTeamNames(t => [...t, arr[0].name])
+
+	// 		return null
+	// 	})
+	// }, [props, user])
+
+	// MARK: Helpers
+	let teamData = (teamId) => {
+		let arr = props.teams.filter(el => el.id === teamId)
+		return arr[0].name
+	}
+
+	let navBack = () => {
+		history.push('/team')
+	}
+
+	// MARK: Return
+	return (
+		<div className='user'>
+			<button onClick={navBack}>Back</button>
+
+
+
+			{loading ? (<div>Loading...</div>) : (
+				user !== undefined &&
+				<div>
+					<h1>{user.name}</h1>
+
+					<h2>Username:</h2>
+					<p>{user.username}</p>
+
+					<h2>Member of:</h2>
+					<ul className='list'>
+						{teamNames.map((name, index) => (
+							<li className = 'list-item' key={index}>
+								{name}	
+							</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+		</div>
+	)
+}

src/views/Team.jsx

@@ -1,10 +1,12 @@
 // MARK: Definitions
 import React, { useState, useEffect } from 'react'
 import axios from 'axios'
+import history from  '../history.js'
 import config from '../config.json'
 import FilterForm from '../components/FilterForm.jsx'
 
-export default function User({ teamId }) {
+// teamProps, usersProps, userIdCallback
+export default function Team(props) {
 	// MARK: State
 	let [loading, setLoading] = useState(true)
 	let [team, setTeam] = useState([])
@@ -16,7 +18,7 @@ export default function User({ teamId }) {
 		let fetchData = async() => {
 			setLoading(true)
 			try {
-				let result = await axios(config.api + '/team/2')
+				let result = await axios(config.api + '/team/' + props.teamProps.id)
 				if (result.data) {
 					setTeam(result.data)
 				}
@@ -29,29 +31,51 @@ export default function User({ teamId }) {
 		}
 
 		fetchData()
-	}, [teamId])
+	}, [props])
 
-	// MARK: Callbacks
-	// let filterCallback = (e) => {
-	// 	let filtered = teams.filter(team => {
-	// 		return team.name.toUpperCase().includes(e.target.value.toUpperCase())
-	// 	})
+	// MARK: Helpers
+	let userData = (userId) => {
+		let arr = props.usersProps.filter(el => el.id === userId)
+		return arr[0].name
+	}
 
-	// 	setFilteredTeams(filtered)
-	// }
+	let selectUser = (id) => {
+		props.userIdCallback(id)
+		history.push('/member')
+	}
+
+	let navBack = () => {
+		history.push('/')
+	}
 
 	// MARK: Return
 	return (
 		<div className='user'>
-			<h1>Team</h1>
+			<button onClick={navBack}>Back</button>
 
-			{teamId !== undefined &&
-				<p>{teamId}</p>
+			{props.teamProps !== undefined &&
+				<h1>{props.teamProps.name}</h1>
 			}
 
 			{loading ? (<div>Loading...</div>) : (
 				team !== undefined &&	
-				<h2>{team.name}</h2>
+				<div>
+					<h2>Team lead</h2>
+
+					<p>{ userData(team.lead) }</p>
+
+					<h2>Team members</h2>
+					
+					<ul className='list'>
+						{team.members.map((member, index) => (
+							<li className = 'list-item' key={index}>
+								<button onClick={() => selectUser(member)}>
+									{ userData(member) }
+								</button>
+							</li>
+						))}
+					</ul>
+				</div>
 			)}
 		</div>
 	)