Adjusting transfer of data on callbacks

src/components/FilterForm.jsx

@@ -4,8 +4,8 @@ import './FilterForm.scss'
 export default function FilterForm({ filterCallback }) {
   return (
     <form>
-			<div className='form-group'>
+      <div className="form-group">
-				<input placeholder='Filter' onChange={filterCallback} />
+        <input placeholder="Filter" onChange={filterCallback} />
       </div>
     </form>
   )

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 => (
+          render={props => <Home teamCallback={teamCallback} usersCallback={usersCallback} {...props} />}
-            <Home
-              teamCallback={teamCallback}
-              usersCallback={usersCallback}
-              allTeamsCallback={allTeamsCallback}
-              {...props}
-            />
-          )}
         />
 
         <Route exact path="/team" render={() => <Team props={teamProps} />} />

src/components/TeamList.jsx

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

src/views/Attempt.js

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

src/views/Home.jsx

@@ -28,8 +28,7 @@ export default function Home(props) {
           setFilteredTeams(result.data)
         }
         setLoading(false)
-			}
+      } catch (err) {
-			catch(err) {
         setLoading(false)
       }
     }
@@ -47,8 +46,7 @@ export default function Home(props) {
           setUsers(result.data)
         }
         setLoadingUsers(false)
-			}
+      } catch (err) {
-			catch(err) {
         setLoadingUsers(false)
       }
     }
@@ -58,18 +56,17 @@ export default function Home(props) {
 
   // MARK: Callbacks
 
-	let selectTeam = (selectedTeam) => {
+  let selectTeam = selectedTeam => {
-		props.teamCallback(selectedTeam)
+    props.teamCallback(selectedTeam, users, teams)
     props.usersCallback(users)
-		props.allTeamsCallback(teams)
     history.push('/team')
   }
 
-	let selectUser = (selectedUser) => {
+  let selectUser = selectedUser => {
     console.log('Selected user ' + selectedUser)
   }
 
-	let filterCallback = (e) => {
+  let filterCallback = e => {
     let filtered = teams.filter(team => {
       return team.name.toUpperCase().includes(e.target.value.toUpperCase())
     })
@@ -79,23 +76,20 @@ export default function Home(props) {
 
   // MARK: Return
   return (
-		<div className='home'>
+    <div className="home">
-			<div className='header'>
+      <div className="header">
         <h1>Tempo teams</h1>
       </div>
 
       <FilterForm filterCallback={filterCallback} />
 
-			{loading || loadingUsers ? (<div>Loading...</div>) : (
+      {loading || loadingUsers ? (
-				teams !== undefined &&
+        <div>Loading...</div>
-				<TeamList
+      ) : (
-					teams = { filteredTeams }
+        teams !== undefined && (
-					users = { users }
+          <TeamList teams={filteredTeams} users={users} selectTeam={selectTeam} selectUser={selectUser} />
-					selectTeam = { selectTeam }
+        )
-					selectUser = { selectUser }
-				/>
       )}
-
     </div>
   )
 }

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 ? (
+      {team.length === 0 ? (
-        <div data-testId="loading">Loading...</div>
+        <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>
 

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