Filter teams

src/components/FilterForm.jsx

@@ -0,0 +1,18 @@
+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">
+				<label htmlFor="title">Filter </label>
+				<input onChange={filterCallback} />
+			</div>
+		</form>
+	)
+}

src/components/Team.jsx

@@ -6,9 +6,11 @@ export default function Team({ teams, users, selectTeam, selectUser }) {
 			<ul className='list'>
 				{teams.map(team => (
 					<li className = 'list-item' key={team.id}>
+						<div>
 							<button onClick={() => selectTeam(team.name)}>
 								{ team.name }
 							</button>
+						</div>
 					</li>
 				))}
 			</ul>

src/views/Home.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 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() {
 	// MARK: State
@@ -11,18 +12,19 @@ export default function Home() {
 	let [teams, setTeams] = useState([])
 	let [users, setUsers] = useState([])
 	let [teamDetails, setTeamDetails] = useState([])
+	let [filteredTeams, setFilteredTeams] = useState([])
 
 	// MARK: Effects
 	
-	// MARK: - Load teams from Tempo backend on initialization
+	// MARK: - Load teams
 	useEffect(() => {
 		let fetchData = async() => {
 			setLoading(true)
 			try {
 				let result = await axios(config.api + '/team/')
 				if (result.data) {
-					console.log('teams fetched')
 					setTeams(result.data)
+					setFilteredTeams(result.data)
 				}
 				setLoading(false)
 			}
@@ -97,15 +99,25 @@ export default function Home() {
 		console.log('Selected user ' + selectedUser)
 	}
 
+	let filterCallback = (e) => {
+		let filtered = teams.filter(team => {
+			return team.name.toUpperCase().includes(e.target.value.toUpperCase())
+		})
+
+		setFilteredTeams(filtered)
+	}
+
 	// MARK: Return
 	return (
 		<div className='home'>
 			<h1>Tempo</h1>
 
+			<FilterForm filterCallback = { filterCallback } />
+
 			{loading || loadingUsers ? (<div>Loading...</div>) : (
 				teams !== undefined &&
 				<Team
-					teams = {teams} 
+					teams = { filteredTeams }
 					users = { users }
 					selectTeam = { selectTeam }
 					selectUser = { selectUser }