From e6ba1a41bb737686ebc0cb25955028feea0d5d87 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sat, 14 May 2022 19:36:41 +0300
Subject: [PATCH] ForwardProtocols component

---
 src/components/common/styles/elementStyles.js |  8 +++++
 src/components/common/styles/tableStyles.js   |  3 --
 .../core/components/ForwardProtocols.js       | 30 +++++++++++++++++++
 .../core/components/ForwardSummary.js         | 11 +++++--
 .../components/SessionForwardsComponent.js    | 17 ++---------
 5 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 src/components/common/styles/elementStyles.js
 create mode 100644 src/features/forwards/core/components/ForwardProtocols.js

diff --git a/src/components/common/styles/elementStyles.js b/src/components/common/styles/elementStyles.js
new file mode 100644
index 0000000..8b3ba91
--- /dev/null
+++ b/src/components/common/styles/elementStyles.js
@@ -0,0 +1,8 @@
+const styles = () => ({
+  smallChip: {
+    maxHeight: 20,
+    marginRight: 4
+  }
+});
+
+export default styles;
diff --git a/src/components/common/styles/tableStyles.js b/src/components/common/styles/tableStyles.js
index 246c02b..b551f2d 100644
--- a/src/components/common/styles/tableStyles.js
+++ b/src/components/common/styles/tableStyles.js
@@ -9,9 +9,6 @@ const styles = () => ({
     width: 20,
     height: 20,
     padding: 10
-  },
-  rowChip: {
-    maxHeight: 20
   }
 });
 
diff --git a/src/features/forwards/core/components/ForwardProtocols.js b/src/features/forwards/core/components/ForwardProtocols.js
new file mode 100644
index 0000000..ed577eb
--- /dev/null
+++ b/src/features/forwards/core/components/ForwardProtocols.js
@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Chip } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import styles from "../../../../components/common/styles/elementStyles";
+
+const useStyles = makeStyles(styles);
+
+const ForwardProtocols = ({ protocols }) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      {protocols.map(protocol => (
+        <Chip
+          key={protocols.indexOf(protocol)}
+          size="small"
+          label={protocol}
+          className={classes.smallChip}
+        />
+      ))}
+    </>
+  );
+};
+
+ForwardProtocols.propTypes = {
+  protocols: PropTypes.array.isRequired
+};
+
+export default ForwardProtocols;
diff --git a/src/features/forwards/core/components/ForwardSummary.js b/src/features/forwards/core/components/ForwardSummary.js
index 40ae43f..e9d50aa 100644
--- a/src/features/forwards/core/components/ForwardSummary.js
+++ b/src/features/forwards/core/components/ForwardSummary.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { Grid, Link } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
+import ForwardProtocols from "./ForwardProtocols";
 import styles from "../../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
@@ -13,7 +14,7 @@ const ForwardSummary = ({ forward, handleForwardClick }) => {
 
   return (
     <Grid container>
-      <Grid item xs={6} sm={3}>
+      <Grid item xs={4} sm={3}>
         {`${t("Forward.From")}: `}
         <span className={classes.value}>
           <Link href="#" onClick={handleForwardClick(forward)}>
@@ -22,10 +23,16 @@ const ForwardSummary = ({ forward, handleForwardClick }) => {
         </span>
       </Grid>
 
-      <Grid item xs={6}>
+      <Grid item xs={4}>
         {`${t("Forward.To")}: `}
         <span className={classes.value}>{forward.to}</span>
       </Grid>
+      {forward.protocols && (
+        <Grid item xs={4}>
+          {`${t("Forward.Protocols")}: `}
+          <ForwardProtocols protocols={forward.protocols} />
+        </Grid>
+      )}
     </Grid>
   );
 };
diff --git a/src/features/session/components/SessionForwardsComponent.js b/src/features/session/components/SessionForwardsComponent.js
index cbd8b68..6205af8 100644
--- a/src/features/session/components/SessionForwardsComponent.js
+++ b/src/features/session/components/SessionForwardsComponent.js
@@ -12,12 +12,12 @@ import {
   Grid,
   Paper,
   IconButton,
-  Typography,
-  Chip
+  Typography
 } from "@material-ui/core";
 import Spinner from "../../../components/common/Spinner";
 import DonutLargeRoundedIcon from "@material-ui/icons/DonutLargeRounded";
 import SessionForwardsHeaderComponent from "./SessionForwardsHeaderComponent";
+import ForwardProtocols from "../../forwards/core/components/ForwardProtocols";
 import { useTranslation } from "react-i18next";
 import styles from "../../../components/common/styles/tableStyles";
 import {
@@ -82,18 +82,7 @@ const SessionForwardsComponent = ({
                       <StyledTableCell>{row.to}</StyledTableCell>
                       <StyledTableCell>
                         {row.protocols ? (
-                          <>
-                            {row.protocols.map(protocol => (
-                              <React.Fragment key={protocol}>
-                                <Chip
-                                  key={row.protocols.indexOf(protocol)}
-                                  size="small"
-                                  label={protocol}
-                                  className={classes.rowChip}
-                                />{" "}
-                              </React.Fragment>
-                            ))}
-                          </>
+                          <ForwardProtocols protocols={row.protocols} />
                         ) : (
                           ""
                         )}