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 ( -
-
- -
-
- ) + return ( +
+
+ +
+
+ ) } 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) - } - // ( - - )} + render={props => } /> } /> 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 ( -
-
    - {teams.map(team => ( -
  • -
    - -
    -
  • - ))} -
-
- ) + return ( +
+
    + {teams.map(team => ( +
  • +
    + +
    +
  • + ))} +
+
+ ) } 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() - 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 ( -
-
-

Tempo teams

-
+ setFilteredTeams(filtered) + } - + // MARK: Return + return ( +
+
+

Tempo teams

+
- {loading || loadingUsers ? (
Loading...
) : ( - teams !== undefined && - - )} + -
- ) + {loading || loadingUsers ? ( +
Loading...
+ ) : ( + teams !== undefined && ( + + ) + )} +
+ ) } 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) { - {team.length == 0 ? ( -
Loading...
+ {team.length === 0 ? ( +
Loading...
) : ( team !== undefined && (

Team lead

- 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() const resolvedSpan = await waitForElement(() => getByTestId('resolved')) - expeted(resolvedSpan).toHaveContent('Team') + expected(resolvedSpan).toHaveContent('Team') }) })