forwards table in active session card

public/locales/ro/translations.json

@@ -44,6 +44,6 @@
   },
   "Server": {
     "ActiveSession": "Sesiune activă",
-    "ActiveSessionSubtitle": "Extindeţi pentru a vedea redirecţionările"
+    "ActiveSessionSubtitle": "Extindeţi pentru a vedea redirectările"
   }
 }

src/features/server/components/ActiveSessionComponent.js

@@ -9,23 +9,25 @@ import CardActions from "@material-ui/core/CardActions";
 import Collapse from "@material-ui/core/Collapse";
 import Avatar from "@material-ui/core/Avatar";
 import IconButton from "@material-ui/core/IconButton";
-import Typography from "@material-ui/core/Typography";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import SurroundSoundRoundedIcon from "@material-ui/icons/SurroundSoundRounded";
 import ActiveSessionSummary from "./ActiveSessionSummary";
 import styles from "../../../components/common/styles/expandableCardStyles";
 import { useTranslation } from "react-i18next";
+import SessionForwardsComponent from "../../session/components/SessionForwardsComponent";
+import Spinner from "../../../components/common/Spinner";
 
 const useStyles = makeStyles(styles);
 
-const ActiveSessionComponent = ({ session }) => {
+const ActiveSessionComponent = ({
+  session,
+  expanded,
+  handleExpandClick,
+  forwards,
+  openOptionsDialog
+}) => {
   const classes = useStyles();
   const { t } = useTranslation();
-  const [expanded, setExpanded] = React.useState(false);
-
-  const handleExpandClick = () => {
-    setExpanded(!expanded);
-  };
 
   return (
     <Card>
@@ -56,11 +58,18 @@ const ActiveSessionComponent = ({ session }) => {
       <CardActions disableSpacing></CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography paragraph>Method:</Typography>
+          {!forwards || forwards.loading ? (
-          <Typography paragraph>
+            <Spinner />
-            Tabel ca cel de pana acum cu redirectarile. From va fi link si la
+          ) : (
-            click va deschide in tab nou aplicatia
+            forwards.loaded && (
-          </Typography>
+              <SessionForwardsComponent
+                session={session}
+                forwards={forwards}
+                openOptionsDialog={openOptionsDialog}
+                showSessionInfo={false}
+              />
+            )
+          )}
         </CardContent>
       </Collapse>
     </Card>
@@ -68,7 +77,11 @@ const ActiveSessionComponent = ({ session }) => {
 };
 
 ActiveSessionComponent.propTypes = {
-  session: PropTypes.object.isRequired
+  session: PropTypes.object.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  handleExpandClick: PropTypes.func.isRequired,
+  forwards: PropTypes.array,
+  openOptionsDialog: PropTypes.func.isRequired
 };
 
 export default ActiveSessionComponent;

src/features/server/components/ActiveSessionContainer.js

@@ -1,32 +1,75 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import PropTypes from "prop-types";
 import { loadActiveSession } from "../actionCreators";
+import { loadSessionForwards } from "../../session/actionCreators";
+import { getActiveForwards } from "../selectors";
 import ActiveSessionComponent from "./ActiveSessionComponent";
+import ForwardOptionsDialog from "../../session/components/ForwardOptionsDialog";
+
+const ActiveSessionContainer = ({ actions, session, forwards }) => {
+  const [expanded, setExpanded] = useState(false);
+  const [optionsDialogOpen, setOptionsDialogOpen] = useState(false);
+  const [forwardOptions, setForwardOptions] = useState(null);
 
-const ActiveSessionContainer = ({ actions, session }) => {
   useEffect(() => {
     actions.loadActiveSession();
   }, []);
 
-  return <ActiveSessionComponent session={session} />;
+  const handleExpandClick = () => {
+    const expand = !expanded;
+    setExpanded(expand);
+    if (expand) actions.loadSessionForwards(session.sessionId);
+  };
+
+  const handleOptionsDialogOpen = (options) => () => {
+    setForwardOptions(options);
+    setOptionsDialogOpen(true);
+  };
+
+  const handleOptionsDialogClose = () => {
+    setOptionsDialogOpen(false);
+    setForwardOptions(null);
+  };
+
+  return (
+    <>
+      <ActiveSessionComponent
+        session={session}
+        expanded={expanded}
+        handleExpandClick={handleExpandClick}
+        forwards={forwards}
+        openOptionsDialog={handleOptionsDialogOpen}
+      />
+      <ForwardOptionsDialog
+        open={optionsDialogOpen}
+        handleClose={handleOptionsDialogClose}
+        options={forwardOptions}
+      />
+    </>
+  );
 };
 
 ActiveSessionContainer.propTypes = {
   actions: PropTypes.object.isRequired,
-  session: PropTypes.object.isRequired
+  session: PropTypes.object.isRequired,
+  forwards: PropTypes.array
 };
 
 function mapStateToProps(state) {
   return {
-    session: state.server.activeSession
+    session: state.server.activeSession,
+    forwards: getActiveForwards(state)
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators({ loadActiveSession }, dispatch)
+    actions: bindActionCreators(
+      { loadActiveSession, loadSessionForwards },
+      dispatch
+    )
   };
 }
 

src/features/server/selectors.js

@@ -0,0 +1,4 @@
+export const getActiveForwards = (state) => {
+  const { sessionId } = state.server.activeSession;
+  return state.forwards[sessionId];
+};

src/features/session/components/SessionForwardsComponent.js

@@ -23,7 +23,12 @@ import {
 
 const useStyles = makeStyles(styles);
 
-const SessionForwardsComponent = ({ session, forwards, openOptionsDialog }) => {
+const SessionForwardsComponent = ({
+  session,
+  forwards,
+  openOptionsDialog,
+  showSessionInfo
+}) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -91,12 +96,16 @@ const SessionForwardsComponent = ({ session, forwards, openOptionsDialog }) => {
           )
         )}
       </Grid>
-      <Grid item xs={12} sm={12} md={12}>
+      {showSessionInfo && (
-        <br />
+        <>
-      </Grid>
+          <Grid item xs={12} sm={12} md={12}>
-      <Grid item xs={12} sm={12} md={12}>
+            <br />
-        <SessionForwardsHeaderComponent session={session} />
+          </Grid>
-      </Grid>
+          <Grid item xs={12} sm={12} md={12}>
+            <SessionForwardsHeaderComponent session={session} />
+          </Grid>
+        </>
+      )}
     </Grid>
   );
 };
@@ -104,7 +113,8 @@ const SessionForwardsComponent = ({ session, forwards, openOptionsDialog }) => {
 SessionForwardsComponent.propTypes = {
   session: PropTypes.object.isRequired,
   forwards: PropTypes.array,
-  openOptionsDialog: PropTypes.func.isRequired
+  openOptionsDialog: PropTypes.func.isRequired,
+  showSessionInfo: PropTypes.bool.isRequired
 };
 
 export default SessionForwardsComponent;

src/features/session/components/SessionListComponent.js

@@ -47,6 +47,7 @@ const SessionListComponent = ({
                   session={session}
                   forwards={forwards[session.sessionId]}
                   openOptionsDialog={openOptionsDialog}
+                  showSessionInfo={true}
                 />
               </ExpansionPanelDetails>
             </ExpansionPanel>