From 31cf73a501906fc73e5fd87cf1478b08ac2164cf Mon Sep 17 00:00:00 2001
From: Rodrigo Pedroso <>
Date: Mon, 26 Aug 2019 13:34:20 -0400
Subject: [PATCH] Adjusting transfer of data on callbacks

---
 src/components/FilterForm.jsx |  14 ++--
 src/components/Router.jsx     |  25 ++----
 src/components/TeamList.jsx   |  30 +++----
 src/views/Attempt.js          |  69 ----------------
 src/views/Home.jsx            | 150 ++++++++++++++++------------------
 src/views/Team.jsx            |  12 +--
 src/views/Team.test.js        |   2 +-
 7 files changed, 108 insertions(+), 194 deletions(-)
 delete mode 100644 src/views/Attempt.js

diff --git a/src/components/FilterForm.jsx b/src/components/FilterForm.jsx
index bdd761c..13270eb 100644
--- a/src/components/FilterForm.jsx
+++ b/src/components/FilterForm.jsx
@@ -2,11 +2,11 @@ import React from 'react'
 import './FilterForm.scss'
 
 export default function FilterForm({ filterCallback }) {
-	return (
-		<form>
-			<div className='form-group'>
-				<input placeholder='Filter' onChange={filterCallback} />
-			</div>
-		</form>
-	)
+  return (
+    <form>
+      <div className="form-group">
+        <input placeholder="Filter" onChange={filterCallback} />
+      </div>
+    </form>
+  )
 }
diff --git a/src/components/Router.jsx b/src/components/Router.jsx
index 46130c8..67f9ce6 100644
--- a/src/components/Router.jsx
+++ b/src/components/Router.jsx
@@ -12,19 +12,19 @@ history.listen(() => {
 
 export default function Router() {
   // let [team, setTeam] = useState([])
-  let [allTeams, setAllTeams] = useState([])
-  // let [users, setUsers] = useState([])
+  let [users, setUsers] = useState([])
   let [memberProps, setMemberProps] = useState({})
   let [teamProps, setTeamProps] = useState({})
 
-  let teamCallback = (teamId, users) => {
+  let teamCallback = (teamId, users, teams) => {
     // Remove this:
     // setTeam(teamId)
 
     // Leave:
     setTeamProps({
-      url: config.api + '/team/' + teamId,
+      url: config.api + '/team/' + teamId.id,
       team: teamId,
+      teams: teams,
       users: users,
       cb: userIdCallback
     })
@@ -34,17 +34,13 @@ export default function Router() {
     setUsers(el)
   }
 
-  let userIdCallback = el => {
+  let userIdCallback = (el, teams) => {
     setMemberProps({
       url: config.api + '/user/' + el,
-      teams: allTeams
+      teams: teams
     })
   }
 
-  let allTeamsCallback = el => {
-    setAllTeams(el)
-  }
-
   // <Route
   //   exact
   //   path="/team"
@@ -57,14 +53,7 @@ export default function Router() {
         <Route
           exact
           path="/"
-          render={props => (
-            <Home
-              teamCallback={teamCallback}
-              usersCallback={usersCallback}
-              allTeamsCallback={allTeamsCallback}
-              {...props}
-            />
-          )}
+          render={props => <Home teamCallback={teamCallback} usersCallback={usersCallback} {...props} />}
         />
 
         <Route exact path="/team" render={() => <Team props={teamProps} />} />
diff --git a/src/components/TeamList.jsx b/src/components/TeamList.jsx
index b2073a7..342d807 100644
--- a/src/components/TeamList.jsx
+++ b/src/components/TeamList.jsx
@@ -1,19 +1,19 @@
 import React from 'react'
 
 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 className='selector-btn' onClick={() => selectTeam(team)}>
-								{ team.name }
-							</button>
-						</div>
-					</li>
-				))}
-			</ul>
-		</div>
-	)
+  return (
+    <div className="teams">
+      <ul className="list">
+        {teams.map(team => (
+          <li className="list-item" key={team.id}>
+            <div>
+              <button className="selector-btn" onClick={() => selectTeam(team)}>
+                {team.name}
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
 }
diff --git a/src/views/Attempt.js b/src/views/Attempt.js
deleted file mode 100644
index df8fc3b..0000000
--- a/src/views/Attempt.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react'
-import axios from 'axios'
-import { mount } from 'enzyme'
-import Member from './Member.jsx'
-
-jest.mock('axios')
-
-// test('should fetch users', () => {
-// 	const userMock = {
-// 		"username": "goodpanda", 
-// 		"member_teams": [
-// 			3
-// 		], 
-// 		"lead_teams": [], 
-// 		"id": 15, 
-// 		"name": "Charlotte Amsterdan"
-// 	}
-// 	const resp = {data: userMock}
-// 	axios.get.mockResolvedValue(resp)
-
-// 	// or you could use the following depending on your use case:
-// 	// axios.get.mockImplementation(() => Promise.resolve(resp))
-
-// 	return Users.then(data => expect(data).toEqual(userMock))
-// })
-
-jest.mock("services/dataService", () => ({
-  getData: jest.fn(),
-}))
-
-let getDataPromise
-
-getData.mockImplementation(() => {
-  getDataPromise = new MockPromise()
-
-  return getDataPromise
-})
-
-it('When fetching succeed', async () => {
-	const wrapper = mount(<Member />)
-	let loadingNode = wrapper.find('[data-test-id="loading"]')
-	let dataNoode = wrapper.find('[data-test-id="user"]')
-
-	const data = {
-		"username": "goodpanda", 
-		"member_teams": [
-			3
-		], 
-		"lead_teams": [], 
-		"id": 15, 
-		"name": "Charlotte Amsterdan"
-	}
-
-	expect(loadingNode).toHaveLength(1)
-	expect(loadingNode.text()).toBe("Loading...")
-	expect(dataNode).toHaveLength(0)
-
-	await getDataPromise.resolve(data)
-
-	wrapper.update()
-
-	loadingNode = wrapper.find('[data-test-id="loading"]')
-	dataNode = wrapper.find('[data-test-id="user"]')
-
-	expect(loadingNode).toHaveLength(0)
-
-	expect(dataNode).toHaveLength(1)
-	expect(dataNode.text()).toBe(data)
-})
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index dd44d96..1413f64 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,6 +1,6 @@
 // MARK: Definitions
 import React, { useState, useEffect } from 'react'
-import history from  '../history.js'
+import history from '../history.js'
 import axios from 'axios'
 import config from '../config.json'
 import TeamList from '../components/TeamList.jsx'
@@ -8,94 +8,88 @@ import FilterForm from '../components/FilterForm.jsx'
 import './Home.scss'
 
 export default function Home(props) {
-	// MARK: State
-	let [loading, setLoading] = useState(true)
-	let [loadingUsers, setLoadingUsers] = useState(true)
-	let [teams, setTeams] = useState([])
-	let [users, setUsers] = useState([])
-	let [filteredTeams, setFilteredTeams] = useState([])
+  // MARK: State
+  let [loading, setLoading] = useState(true)
+  let [loadingUsers, setLoadingUsers] = useState(true)
+  let [teams, setTeams] = useState([])
+  let [users, setUsers] = useState([])
+  let [filteredTeams, setFilteredTeams] = useState([])
 
-	// MARK: Effects
-	
-	// MARK: - Load teams
-	useEffect(() => {
-		let fetchData = async() => {
-			setLoading(true)
-			try {
-				let result = await axios(config.api + '/team/')
-				if (result.data) {
-					setTeams(result.data)
-					setFilteredTeams(result.data)
-				}
-				setLoading(false)
-			}
-			catch(err) {
-				setLoading(false)
-			}
-		}
+  // MARK: Effects
 
-		fetchData()
-	}, [])
+  // MARK: - Load teams
+  useEffect(() => {
+    let fetchData = async () => {
+      setLoading(true)
+      try {
+        let result = await axios(config.api + '/team/')
+        if (result.data) {
+          setTeams(result.data)
+          setFilteredTeams(result.data)
+        }
+        setLoading(false)
+      } catch (err) {
+        setLoading(false)
+      }
+    }
 
-	// MARK: - Load users
-	useEffect(() => {
-		let fetchData = async() => {
-			setLoadingUsers(true)
-			try {
-				let result = await axios(config.api + '/user/')
-				if (result.data) {
-					setUsers(result.data)
-				}
-				setLoadingUsers(false)
-			}
-			catch(err) {
-				setLoadingUsers(false)
-			}
-		}
+    fetchData()
+  }, [])
 
-		fetchData()
-	}, [])
+  // MARK: - Load users
+  useEffect(() => {
+    let fetchData = async () => {
+      setLoadingUsers(true)
+      try {
+        let result = await axios(config.api + '/user/')
+        if (result.data) {
+          setUsers(result.data)
+        }
+        setLoadingUsers(false)
+      } catch (err) {
+        setLoadingUsers(false)
+      }
+    }
 
-	// MARK: Callbacks
+    fetchData()
+  }, [])
 
-	let selectTeam = (selectedTeam) => {
-		props.teamCallback(selectedTeam)
-		props.usersCallback(users)
-		props.allTeamsCallback(teams)
-		history.push('/team')
-	}
+  // MARK: Callbacks
 
-	let selectUser = (selectedUser) => {
-		console.log('Selected user ' + selectedUser)
-	}
+  let selectTeam = selectedTeam => {
+    props.teamCallback(selectedTeam, users, teams)
+    props.usersCallback(users)
+    history.push('/team')
+  }
 
-	let filterCallback = (e) => {
-		let filtered = teams.filter(team => {
-			return team.name.toUpperCase().includes(e.target.value.toUpperCase())
-		})
+  let selectUser = selectedUser => {
+    console.log('Selected user ' + selectedUser)
+  }
 
-		setFilteredTeams(filtered)
-	}
+  let filterCallback = e => {
+    let filtered = teams.filter(team => {
+      return team.name.toUpperCase().includes(e.target.value.toUpperCase())
+    })
 
-	// MARK: Return
-	return (
-		<div className='home'>
-			<div className='header'>
-				<h1>Tempo teams</h1>
-			</div>
+    setFilteredTeams(filtered)
+  }
 
-			<FilterForm filterCallback = { filterCallback } />
+  // MARK: Return
+  return (
+    <div className="home">
+      <div className="header">
+        <h1>Tempo teams</h1>
+      </div>
 
-			{loading || loadingUsers ? (<div>Loading...</div>) : (
-				teams !== undefined &&
-				<TeamList
-					teams = { filteredTeams }
-					users = { users }
-					selectTeam = { selectTeam }
-					selectUser = { selectUser }
-				/>
-			)}
+      <FilterForm filterCallback={filterCallback} />
 
-		</div>
-	)
+      {loading || loadingUsers ? (
+        <div>Loading...</div>
+      ) : (
+        teams !== undefined && (
+          <TeamList teams={filteredTeams} users={users} selectTeam={selectTeam} selectUser={selectUser} />
+        )
+      )}
+    </div>
+  )
 }
diff --git a/src/views/Team.jsx b/src/views/Team.jsx
index 22237f0..84ce3a2 100644
--- a/src/views/Team.jsx
+++ b/src/views/Team.jsx
@@ -5,7 +5,7 @@ import history from '../history.js'
 import FilterForm from '../components/FilterForm.jsx'
 import './Team.scss'
 
-export default function Team(props) {
+export default function Team({ props }) {
   // MARK: State
   let [team, setTeam] = useState([])
   let [members, setMembers] = useState([])
@@ -39,7 +39,7 @@ export default function Team(props) {
           history.push('/')
         }
       } catch (err) {
-        console.log('Fetch data error: ' + err)
+        console.log('Fetch data error:', err, JSON.stringify(props))
       }
     }
 
@@ -62,7 +62,7 @@ export default function Team(props) {
   }
 
   let selectUser = id => {
-    props.cb(id)
+    props.cb(id, props.teams)
     history.push('/member')
   }
 
@@ -93,14 +93,14 @@ export default function Team(props) {
 
       <FilterForm filterCallback={filterCallback} />
 
-      {team.length == 0 ? (
-        <div data-testId="loading">Loading...</div>
+      {team.length === 0 ? (
+        <div data-testid="loading">Loading...</div>
       ) : (
         team !== undefined && (
           <div>
             <h2>Team lead</h2>
 
-            <button data-testId="resolved" className="selector-btn" onClick={() => selectUser(team.lead)}>
+            <button data-testid="resolved" className="selector-btn" onClick={() => selectUser(team.lead)}>
               {userData(team.lead)}
             </button>
 
diff --git a/src/views/Team.test.js b/src/views/Team.test.js
index 2b57f72..aa864dc 100644
--- a/src/views/Team.test.js
+++ b/src/views/Team.test.js
@@ -26,6 +26,6 @@ describe('A team page', () => {
     const { getByTestId } = render(<Team props={address} />)
     const resolvedSpan = await waitForElement(() => getByTestId('resolved'))
 
-    expeted(resolvedSpan).toHaveContent('Team')
+    expected(resolvedSpan).toHaveContent('Team')
   })
 })