reverse-proxy-frontend/src/features/session/components/SessionListComponent.js

68 lines
2.1 KiB
JavaScript

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import PropTypes from "prop-types";
import SessionSummary from "./SessionSummary";
import SessionForwardsComponent from "./SessionForwardsComponent";
import Spinner from "../../../components/common/Spinner";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles((theme) => ({
root: {
width: "100%"
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
}
}));
const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
const classes = useStyles();
const { t } = useTranslation();
return (
<div className={classes.root}>
<h2>{t("Session.Title")}</h2>
{sessions.loading ? (
<Spinner />
) : (
sessions.loaded &&
sessions.map((session) => {
return (
<ExpansionPanel
key={session.sessionId}
onChange={handleToggle(session.sessionId)}
>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`panel-${session.sessionId}-content`}
id={`panel-${session.sessionId}-header`}
>
<SessionSummary session={session} />
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<SessionForwardsComponent
session={session}
forwards={forwards[session.sessionId]}
/>
</ExpansionPanelDetails>
</ExpansionPanel>
);
})
)}
</div>
);
};
SessionListComponent.propTypes = {
sessions: PropTypes.array.isRequired,
handleToggle: PropTypes.func.isRequired,
forwards: PropTypes.object.isRequired
};
export default SessionListComponent;