-
Notifications
You must be signed in to change notification settings - Fork 6
/
householdRoutingController.jsx
70 lines (62 loc) · 2.72 KB
/
householdRoutingController.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from "react";
import { useNavigate } from "react-router-dom";
import { Container } from "reactstrap";
import { GroupsApiFactory } from "../museClient/api";
import { useState, useEffect } from "react";
/**
* Returns a button that when clicked, routes user to the appropriate household's groups page
* @param props.household {JSON} Contains household information
* @param props.index {number} Used for naming the household, as most households do not have names
* @returns {JSX.Element} Household button
*/
export default function HouseholdRoutingController(props) {
// Used to change currently displayed path and send data to new path
let navigate = useNavigate();
//When set to false, list of players is rendered
const [fetchFlag, setFetchFlag] = useState(true);
// Stores list of players fetched from Sonos API
const [players, setPlayers] = useState([]);
useEffect(() => {
// Used to make groups Sonos API calls with currently stored access token and configuration
const groupsApi = new GroupsApiFactory(props.museClientConfig);
// Fetches current groups from Sonos API
groupsApi.groupsGetGroups(props.household.id)
.then((groupsApiResponse) => {
setPlayers(groupsApiResponse.players);
setFetchFlag(false);
})
.catch(function (error) {
// Error in fetching data from Sonos API.
console.error("Error", error);
});
}, []);
/**
* onClick listener of button that navigates to household's path and sends household ID information to new location
*/
const routeChange = () => {
let path = "households/" + props.household.id;
const data = { state: { householdId: props.household.id } };
navigate(path, data);
};
// Returns household button with routeChange as onClick listener
return (
<div className="household_det" onClick={routeChange}>
<Container>
<a>
<p className="household_ind">Household {props.index + 1}</p>
{/* Once players have been fetched, an array is created containing the players */}
{!fetchFlag && (players.map((player, index) => {
// If index of the player currently being processed is less than 4 or household has 5 players, display player
if(players.length <= 5 || index < 4) {
return (<p className="household_player_name" key={player.id}>{player.name}</p>);
} else if(index === 4) {
// For larger households, only the first four players are displayed and instead of displaying the 5th, the number of remaining players is displayed
return (<p className="household_player_name" key={index}> + {players.length - 4} more</p>);
}
})
)}
</a>
</Container>
</div>
);
}