diff --git a/src/App.scss b/src/App.scss index b917b51..e64a6c6 100644 --- a/src/App.scss +++ b/src/App.scss @@ -15,6 +15,15 @@ vertical-align: middle; display: table-cell; } + + span { + vertical-align: middle; + display: table-cell; + + h1 { + display: block; + } + } } .back { diff --git a/src/components/Router.jsx b/src/components/Router.jsx index 67f9ce6..a33eb84 100644 --- a/src/components/Router.jsx +++ b/src/components/Router.jsx @@ -12,7 +12,7 @@ history.listen(() => { export default function Router() { // let [team, setTeam] = useState([]) - let [users, setUsers] = useState([]) + // let [users, setUsers] = useState([]) let [memberProps, setMemberProps] = useState({}) let [teamProps, setTeamProps] = useState({}) @@ -30,10 +30,6 @@ export default function Router() { }) } - let usersCallback = el => { - setUsers(el) - } - let userIdCallback = (el, teams) => { setMemberProps({ url: config.api + '/user/' + el, @@ -50,11 +46,7 @@ export default function Router() { return ( - } - /> + } /> } /> diff --git a/src/components/TeamList.jsx b/src/components/TeamList.jsx index 342d807..ee4f561 100644 --- a/src/components/TeamList.jsx +++ b/src/components/TeamList.jsx @@ -1,6 +1,6 @@ import React from 'react' -export default function TeamList({ teams, users, selectTeam, selectUser }) { +export default function TeamList({ teams, selectTeam }) { return (
    diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 1413f64..d396bfc 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -58,7 +58,6 @@ export default function Home(props) { let selectTeam = selectedTeam => { props.teamCallback(selectedTeam, users, teams) - props.usersCallback(users) history.push('/team') } diff --git a/src/views/Member.jsx b/src/views/Member.jsx index 5b7548b..e5e4eb9 100644 --- a/src/views/Member.jsx +++ b/src/views/Member.jsx @@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react' import axios from 'axios' import history from '../history.js' -// import config from '../config.json' import './Member.scss' export default function Member({ props }) { @@ -48,7 +47,7 @@ export default function Member({ props }) { user !== undefined && (
    - +

    Member {user.name}
    @@ -59,7 +58,9 @@ export default function Member({ props }) {

    Username:

    -

    {user.username}

    + +

    {user.username}

    +

    Member of:

    diff --git a/src/views/Member.test.js b/src/views/Member.test.js index 4db771a..42d87d5 100644 --- a/src/views/Member.test.js +++ b/src/views/Member.test.js @@ -14,9 +14,6 @@ describe('A members page', () => { it('should fetch and display data', async () => { const callData = { username: 'goodpanda', - member_teams: [3], - lead_teams: [], - id: 15, name: 'Charlotte Amsterdan' } @@ -24,9 +21,11 @@ describe('A members page', () => { const address = { url: '/user15' } const { getByTestId } = render() - const resolvedSpan = await waitForElement(() => getByTestId('resolved')) + const resolvedName = await waitForElement(() => getByTestId('resolved-name')) + const resolvedUsername = await waitForElement(() => getByTestId('resolved-username')) - expect(resolvedSpan).toHaveTextContent('Member ' + callData.name) + expect(resolvedName).toHaveTextContent('Member ' + callData.name) + expect(resolvedUsername).toHaveTextContent(callData.username) expect(axiosMock.get).toHaveBeenCalledTimes(1) expect(axiosMock.get).toHaveBeenCalledWith(address.url) }) diff --git a/src/views/Team.jsx b/src/views/Team.jsx index 84ce3a2..6422c45 100644 --- a/src/views/Team.jsx +++ b/src/views/Team.jsx @@ -7,7 +7,7 @@ import './Team.scss' export default function Team({ props }) { // MARK: State - let [team, setTeam] = useState([]) + let [team, setTeam] = useState(null) let [members, setMembers] = useState([]) let [filteredMembers, setFilteredMembers] = useState([]) @@ -16,7 +16,7 @@ export default function Team({ props }) { useEffect(() => { let fetchData = async () => { try { - let result = await axios(props.url) + let result = await axios.get(props.url) if (result.data) { setTeam(result.data) @@ -81,22 +81,22 @@ export default function Team({ props }) { // MARK: Return return (
    - {props.team !== undefined && ( -
    -

    Team {props.team.name}

    -
    - )} - -
    - -
    - - - - {team.length === 0 ? ( + {team === null ? (
    Loading...
    ) : ( - team !== undefined && ( +
    + {props.team !== undefined && ( +
    +

    Team {props.team.name}

    +
    + )} + +
    + +
    + + +

    Team lead

    @@ -116,7 +116,7 @@ export default function Team({ props }) { ))}
- ) + )} ) diff --git a/src/views/Team.test.js b/src/views/Team.test.js index aa864dc..4c7ec2a 100644 --- a/src/views/Team.test.js +++ b/src/views/Team.test.js @@ -13,19 +13,22 @@ describe('A team page', () => { }) it('should fetch and display data', async () => { - const callData = { - teamProps: { - id: 3 - }, - usersProps: [{ name: 'UserName' }] - } + const callData = { lead: 1, id: 2, name: 'Awesome Tricksters', members: [2, 3, 4] } axiosMock.get.mockResolvedValueOnce({ data: callData }) - const address = { url: '/team3' } - const { getByTestId } = render() + const mockProps = { + users: [ + { id: 1, name: 'Leader', username: 'team leader' }, + { id: 2, name: 'First Member', username: 'first member' }, + { id: 3, name: 'Second Member', username: 'second member' }, + { id: 4, name: 'Third Member', username: 'third member' } + ] + } + + const { getByTestId } = render() const resolvedSpan = await waitForElement(() => getByTestId('resolved')) - expected(resolvedSpan).toHaveContent('Team') + expect(resolvedSpan).toHaveTextContent(mockProps.users[0].name) }) })