Filtering team members

src/components/FilterForm.jsx

@@ -1,12 +1,6 @@
 import React from 'react'
 
 export default function FilterForm({ filterCallback }) {
-	let updateInput = (e) => {
-		e.preventDefault()
-		console.log(JSON.stringify(e, 0, 2))
-		filterCallback(e)
-	}
-
 	return (
 		<form>
 			<div className="form-group">

src/views/Member.jsx

@@ -20,9 +20,12 @@ export default function Member(props) {
 				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])
+
+						return null
 					})
 				}
 				setLoading(false)
@@ -36,25 +39,13 @@ export default function Member(props) {
 		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'>

src/views/Team.jsx

@@ -10,7 +10,8 @@ export default function Team(props) {
 	// MARK: State
 	let [loading, setLoading] = useState(true)
 	let [team, setTeam] = useState([])
-	let [filteredTeams, setFilteredTeams] = useState([])
+	let [members, setMembers] = useState([])
+	let [filteredMembers, setFilteredMembers] = useState([])
 
 	// MARK: Effect
 	// MARK: - Load user info from Tempo backend on initialization
@@ -21,6 +22,18 @@ export default function Team(props) {
 				let result = await axios(config.api + '/team/' + props.teamProps.id)
 				if (result.data) {
 					setTeam(result.data)
+
+					result.data.members.map(memberId => {
+						let arr = props.usersProps.filter(el => el.id === memberId)
+						let tupple = {
+							name: arr[0].name,
+							id: memberId
+						}
+						setMembers(t => [...t, tupple])
+						setFilteredMembers(t => [...t, tupple])
+
+						return null
+					})
 				}
 				setLoading(false)
 			}
@@ -44,6 +57,14 @@ export default function Team(props) {
 		history.push('/member')
 	}
 
+	let filterCallback = (e) => {
+		let filtered = members.filter(member => {
+			return member.name.toUpperCase().includes(e.target.value.toUpperCase())
+		})
+
+		setFilteredMembers(filtered)
+	}
+
 	let navBack = () => {
 		history.push('/')
 	}
@@ -51,12 +72,15 @@ export default function Team(props) {
 	// MARK: Return
 	return (
 		<div className='user'>
+
 			<button onClick={navBack}>Back</button>
 
 			{props.teamProps !== undefined &&
-				<h1>{props.teamProps.name}</h1>
+			<h1>{props.teamProps.name}</h1>
 			}
 
+			<FilterForm filterCallback = { filterCallback } />
+
 			{loading ? (<div>Loading...</div>) : (
 				team !== undefined &&	
 				<div>
@@ -65,18 +89,19 @@ export default function Team(props) {
 					<p>{ userData(team.lead) }</p>
 
 					<h2>Team members</h2>
-					
+
 					<ul className='list'>
-						{team.members.map((member, index) => (
+						{filteredMembers.map((member, index) => (
 							<li className = 'list-item' key={index}>
-								<button onClick={() => selectUser(member)}>
-									{ userData(member) }
+								<button onClick={() => selectUser(member.id)}>
+									{member.name}
 								</button>
 							</li>
 						))}
 					</ul>
 				</div>
 			)}
+
 		</div>
 	)
 }