handleForwardClick in ForwardSummary

src/features/forwards/core/components/ForwardComponent.js

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import ForwardIcon from "@material-ui/icons/Forward";
 import ForwardSummary from "./ForwardSummary";
 
-const ForwardComponent = ({ forward }) => {
+const ForwardComponent = ({ forward, handleForwardClick }) => {
   const { t } = useTranslation();
 
   return (
@@ -15,7 +15,12 @@ const ForwardComponent = ({ forward }) => {
         Icon={<ForwardIcon />}
         title={t("Forward.Label", forward)}
         subtitle={t("Forward.Subtitle", forward)}
-        Summary={<ForwardSummary forward={forward} />}
+        Summary={
+          <ForwardSummary
+            forward={forward}
+            handleForwardClick={handleForwardClick}
+          />
+        }
         Content={<div>...</div>}
       />
       <br />
@@ -25,7 +30,8 @@ const ForwardComponent = ({ forward }) => {
 };
 
 ForwardComponent.propTypes = {
-  forward: PropTypes.object.isRequired
+  forward: PropTypes.object.isRequired,
+  handleForwardClick: PropTypes.func.isRequired
 };
 
 export default ForwardComponent;

src/features/forwards/core/components/ForwardContainer.js

@@ -4,6 +4,7 @@ import ForwardComponent from "./ForwardComponent";
 import { useParams } from "react-router";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
+import { loadServerData } from "../../../server/actionCreators";
 import { loadSessionForwards } from "../../../session/actionCreators";
 import Spinner from "../../../../components/common/Spinner";
 import styles from "../../../../components/common/styles/divStyles";
@@ -12,29 +13,49 @@ import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles(styles);
 
-const ForwardContainer = ({ actions, forward }) => {
+const ForwardContainer = ({ actions, forward, domain }) => {
   const params = useParams();
   const classes = useStyles();
   const { t } = useTranslation();
 
   const { sessionId } = params;
 
+  if (!domain) {
+    actions.loadServerData();
+  }
+
   if (!forward) {
     actions.loadSessionForwards(sessionId);
+  }
+
+  const loading = !domain || !forward;
+  if (loading) {
     return <Spinner />;
   }
 
+  const handleForwardClick = forward => event => {
+    const url = `${domain.scheme}://${domain.name}${
+      forward.from
+    }${forward.suffix || ""}`;
+    window.open(url, "_blank");
+    event.preventDefault();
+  };
+
   return (
     <div className={classes.root}>
       <h3>{t("Forward.Title", forward)}</h3>
-      <ForwardComponent forward={forward} />
+      <ForwardComponent
+        forward={forward}
+        handleForwardClick={handleForwardClick}
+      />
     </div>
   );
 };
 
 ForwardContainer.propTypes = {
   actions: PropTypes.object.isRequired,
-  forward: PropTypes.object
+  forward: PropTypes.object,
+  domain: PropTypes.object
 };
 
 function mapStateToProps(state, props) {
@@ -43,13 +64,17 @@ function mapStateToProps(state, props) {
   const forward = session?.find(z => z.forwardId === forwardId);
 
   return {
-    forward
+    forward,
+    domain: state.server.data.domain
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators({ loadSessionForwards }, dispatch)
+    actions: bindActionCreators(
+      { loadServerData, loadSessionForwards },
+      dispatch
+    )
   };
 }
 

src/features/forwards/core/components/ForwardSummary.js

@@ -1,13 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Grid } from "@material-ui/core";
+import { Grid, Link } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
 import styles from "../../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
 
-const ForwardSummary = ({ forward }) => {
+const ForwardSummary = ({ forward, handleForwardClick }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -15,7 +15,11 @@ const ForwardSummary = ({ forward }) => {
     <Grid container>
       <Grid item xs={6} sm={4} md={4}>
         {`${t("Forward.From")}: `}
-        <span className={classes.value}>{forward.from}</span>
+        <span className={classes.value}>
+          <Link href="#" onClick={handleForwardClick(forward)}>
+            {forward.from}
+          </Link>
+        </span>
       </Grid>
 
       <Grid item xs={6}>
@@ -27,7 +31,8 @@ const ForwardSummary = ({ forward }) => {
 };
 
 ForwardSummary.propTypes = {
-  forward: PropTypes.object.isRequired
+  forward: PropTypes.object.isRequired,
+  handleForwardClick: PropTypes.func.isRequired
 };
 
 export default ForwardSummary;