78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
// MARK: Definitions
|
|
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 }) {
|
|
// MARK: State
|
|
let [user, setUser] = useState(null)
|
|
let [teamNames, setTeamNames] = useState([])
|
|
|
|
// MARK: Effects
|
|
// MARK: - Load user info from Tempo backend on initialization
|
|
useEffect(() => {
|
|
let fetchData = async () => {
|
|
try {
|
|
let result = await axios.get(props.url)
|
|
if (result.data) {
|
|
setUser(result.data)
|
|
|
|
result.data.member_teams.map(teamId => {
|
|
let arr = props.teams.filter(el => el.id === teamId)
|
|
setTeamNames(t => [...t, arr[0].name])
|
|
|
|
return null
|
|
})
|
|
}
|
|
} catch (err) {
|
|
history.push('/')
|
|
}
|
|
}
|
|
|
|
fetchData()
|
|
}, [props])
|
|
|
|
// MARK: Helpers
|
|
let navBack = () => {
|
|
history.push('/team')
|
|
}
|
|
|
|
// MARK: Return
|
|
return (
|
|
<div className="member">
|
|
{user === null ? (
|
|
<div data-testid="loading">Loading...</div>
|
|
) : (
|
|
user !== undefined && (
|
|
<div>
|
|
<div className="header">
|
|
<span data-testid="resolved">
|
|
<h1>Member {user.name}</h1>
|
|
</span>
|
|
</div>
|
|
|
|
<div className="back">
|
|
<button className="back-btn" onClick={navBack}>{`< Back to team`}</button>
|
|
</div>
|
|
|
|
<h2>Username:</h2>
|
|
<div className="username">
|
|
<p>{user.username}</p>
|
|
</div>
|
|
|
|
<h2>Member of:</h2>
|
|
<ul className="list">
|
|
{teamNames.map((name, index) => (
|
|
<li className="list-item" key={index}>
|
|
<div className="username">{name}</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
)
|
|
}
|