SessionForwards

master
Tudor Stanciu 2020-05-14 02:06:14 +03:00
parent 7a8cc1b36e
commit 6463b1acb3
10 changed files with 134 additions and 72 deletions

View File

@ -13,3 +13,21 @@ export function loadServerSessions() {
}
};
}
export function loadSessionForwards(sessionId) {
return async function (dispatch) {
try {
dispatch({ type: types.LOAD_SESSION_FORWARDS_STARTED, id: sessionId });
const data = await dispatch(
sendHttpRequest(api.getSessionForwards(sessionId))
);
dispatch({
type: types.LOAD_SESSION_FORWARDS_SUCCESS,
payload: data,
id: sessionId
});
} catch (error) {
throw error;
}
};
}

View File

@ -1,2 +1,5 @@
export const LOAD_SERVER_SESSIONS_STARTED = "LOAD_SERVER_SESSIONS_STARTED";
export const LOAD_SERVER_SESSIONS_SUCCESS = "LOAD_SERVER_SESSIONS_SUCCESS";
export const LOAD_SESSION_FORWARDS_STARTED = "LOAD_SESSION_FORWARDS_STARTED";
export const LOAD_SESSION_FORWARDS_SUCCESS = "LOAD_SESSION_FORWARDS_SUCCESS";

View File

@ -2,7 +2,10 @@ import { get } from "../../api/axiosApi";
const baseUrl = `${process.env.REVERSE_PROXY_API_URL}/server`;
const getServerSessions = () => get(`${baseUrl}/sessions`);
const getSessionForwards = (sessionId) =>
get(`${baseUrl}/session-forwards/${sessionId}`);
export default {
getServerSessions
getServerSessions,
getSessionForwards
};

View File

@ -3,30 +3,45 @@ import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import SessionListComponent from "./SessionListComponent";
import { loadServerSessions } from "../actionCreators";
import { loadServerSessions, loadSessionForwards } from "../actionCreators";
const SessionContainer = ({ actions, sessions }) => {
const SessionContainer = ({ actions, sessions, forwards }) => {
useEffect(() => {
actions.loadServerSessions();
}, []);
return <SessionListComponent sessions={sessions} />;
const handleToggle = (sessionId) => (_, expanded) => {
if (expanded) actions.loadSessionForwards(sessionId);
};
return (
<SessionListComponent
sessions={sessions}
handleToggle={handleToggle}
forwards={forwards}
/>
);
};
SessionContainer.propTypes = {
actions: PropTypes.object.isRequired,
sessions: PropTypes.array.isRequired
sessions: PropTypes.array.isRequired,
forwards: PropTypes.object.isRequired
};
function mapStateToProps(state) {
return {
sessions: state.sessions
sessions: state.sessions,
forwards: state.forwards
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ loadServerSessions }, dispatch)
actions: bindActionCreators(
{ loadServerSessions, loadSessionForwards },
dispatch
)
};
}

View File

@ -8,6 +8,7 @@ import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Spinner from "../../../components/common/Spinner";
const StyledTableCell = withStyles((theme) => ({
head: {
@ -27,28 +28,19 @@ const StyledTableRow = withStyles((theme) => ({
}
}))(TableRow);
function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Gingerbread", 356, 16.0, 49, 3.9)
];
const useStyles = makeStyles({
table: {
minWidth: 700
}
});
const SessionDetailsComponent = () => {
const SessionDetailsComponent = ({ forwards }) => {
const classes = useStyles();
return (
return !forwards || forwards.loading ? (
<Spinner />
) : (
forwards.loaded && (
<TableContainer component={Paper}>
<Table
className={classes.table}
@ -57,31 +49,28 @@ const SessionDetailsComponent = () => {
>
<TableHead>
<TableRow>
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
<StyledTableCell align="right">Calories</StyledTableCell>
<StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
<StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
<StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
<StyledTableCell />
<StyledTableCell>From</StyledTableCell>
<StyledTableCell>To</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<StyledTableRow key={row.name}>
<StyledTableCell component="th" scope="row">
{row.name}
</StyledTableCell>
<StyledTableCell align="right">{row.calories}</StyledTableCell>
<StyledTableCell align="right">{row.fat}</StyledTableCell>
<StyledTableCell align="right">{row.carbs}</StyledTableCell>
<StyledTableCell align="right">{row.protein}</StyledTableCell>
{forwards.map((row) => (
<StyledTableRow key={row.forwardId}>
<StyledTableCell>{forwards.indexOf(row) + 1}</StyledTableCell>
<StyledTableCell>{row.from}</StyledTableCell>
<StyledTableCell>{row.to}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
);
};
SessionDetailsComponent.propTypes = {};
SessionDetailsComponent.propTypes = {
forwards: PropTypes.array
};
export default SessionDetailsComponent;

View File

@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) => ({
}
}));
const SessionListComponent = ({ sessions }) => {
const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
const classes = useStyles();
const { t } = useTranslation();
@ -33,7 +33,10 @@ const SessionListComponent = ({ sessions }) => {
sessions.loaded &&
sessions.map((session) => {
return (
<ExpansionPanel key={session.sessionId}>
<ExpansionPanel
key={session.sessionId}
onChange={handleToggle(session.sessionId)}
>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`panel-${session.sessionId}-content`}
@ -42,7 +45,9 @@ const SessionListComponent = ({ sessions }) => {
<SessionSummary session={session} />
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<SessionDetailsComponent />
<SessionDetailsComponent
forwards={forwards[session.sessionId]}
/>
</ExpansionPanelDetails>
</ExpansionPanel>
);
@ -53,7 +58,9 @@ const SessionListComponent = ({ sessions }) => {
};
SessionListComponent.propTypes = {
sessions: PropTypes.array.isRequired
sessions: PropTypes.array.isRequired,
handleToggle: PropTypes.func.isRequired,
forwards: PropTypes.object.isRequired
};
export default SessionListComponent;

View File

@ -1,15 +0,0 @@
import * as types from "./actionTypes";
import initialState from "../../redux/reducers/initialState";
export default function sessionsReducer(state = initialState.sessions, action) {
switch (action.type) {
case types.LOAD_SERVER_SESSIONS_STARTED:
return Object.assign([], { loading: true, loaded: false });
case types.LOAD_SERVER_SESSIONS_SUCCESS:
return Object.assign(action.payload, { loading: false, loaded: true });
default:
return state;
}
}

View File

@ -0,0 +1,37 @@
import * as types from "./actionTypes";
import initialState from "../../redux/reducers/initialState";
export function sessionsReducer(state = initialState.sessions, action) {
switch (action.type) {
case types.LOAD_SERVER_SESSIONS_STARTED:
return Object.assign([], { loading: true, loaded: false });
case types.LOAD_SERVER_SESSIONS_SUCCESS:
return Object.assign(action.payload, { loading: false, loaded: true });
default:
return state;
}
}
export function forwardsReducer(state = initialState.forwards, action) {
switch (action.type) {
case types.LOAD_SESSION_FORWARDS_STARTED:
return {
...state,
[action.id]: Object.assign([], { loading: true, loaded: false })
};
case types.LOAD_SESSION_FORWARDS_SUCCESS:
return {
...state,
[action.id]: Object.assign(action.payload, {
loading: false,
loaded: true
})
};
default:
return state;
}
}

View File

@ -1,11 +1,15 @@
import { combineReducers } from "redux";
import ajaxStatusReducer from "./ajaxStatusReducer";
import systemReducer from "../../features/system/reducer";
import sessionsReducer from "../../features/session/reducer";
import {
sessionsReducer,
forwardsReducer
} from "../../features/session/reducers";
const rootReducer = combineReducers({
system: systemReducer,
sessions: sessionsReducer,
forwards: forwardsReducer,
ajaxCallsInProgress: ajaxStatusReducer
});

View File

@ -1,5 +1,6 @@
export default {
system: {},
sessions: Object.assign([], { loading: false, loaded: false }),
forwards: {},
ajaxCallsInProgress: 0
};