SessionForwards

src/features/session/actionCreators.js

@@ -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;
+    }
+  };
+}

src/features/session/actionTypes.js

@@ -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";

src/features/session/api.js

@@ -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
 };

src/features/session/components/SessionContainer.js

@@ -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
+    )
   };
 }
 

src/features/session/components/SessionDetailsComponent.js

@@ -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,61 +28,49 @@ 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 (
-    <TableContainer component={Paper}>
-      <Table
-        className={classes.table}
-        size="small"
-        aria-label="customized table"
-      >
-        <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>
-          </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>
-            </StyledTableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+  return !forwards || forwards.loading ? (
+    <Spinner />
+  ) : (
+    forwards.loaded && (
+      <TableContainer component={Paper}>
+        <Table
+          className={classes.table}
+          size="small"
+          aria-label="customized table"
+        >
+          <TableHead>
+            <TableRow>
+              <StyledTableCell />
+              <StyledTableCell>From</StyledTableCell>
+              <StyledTableCell>To</StyledTableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {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;

src/features/session/components/SessionListComponent.js

@@ -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;

src/features/session/reducer.js

@@ -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;
-  }
-}

src/features/session/reducers.js

@@ -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;
+  }
+}

src/redux/reducers/index.js

@@ -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
 });
 

src/redux/reducers/initialState.js

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