Members view

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>
 	)