Adjusting transfer of data on callbacks
This commit is contained in:
Rodrigo Pedroso
parent
97509a85d7
commit
31cf73a501
7 changed files with 108 additions and 194 deletions
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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} />} />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue