server summary update

public/locales/en/translations.json

@@ -53,7 +53,7 @@
   },
   "Server": {
     "Title": "Server",
-    "Host": "Host",
+    "Subtitle": "Expand to see details",
     "ServerHostName": "Server host",
     "ApiHostName": "API host",
     "Domain": "Domain",

public/locales/ro/translations.json

@@ -44,7 +44,7 @@
   },
   "Server": {
     "Title": "Server",
-    "Host": "Gazdă",
+    "Subtitle": "Extindeţi pentru a vedea detalii",
     "ServerHostName": "Gazdă server",
     "ApiHostName": "Gazdă API",
     "Domain": "Domeniu",

src/features/server/components/ServerComponent.js

@@ -23,7 +23,7 @@ import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
 
-const ServerComponent = ({ data, openAbout }) => {
+const ServerComponent = ({ data, serverHost, openAbout }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -47,12 +47,16 @@ const ServerComponent = ({ data, openAbout }) => {
           </IconButton>
         }
         title={<strong>{t("Server.Title")}</strong>}
-        subheader={`${t("Server.Host")}: ${
-          data.hosts ? data.hosts.server : ""
-        }`}
+        subheader={t("Server.Subtitle")}
       />
       <CardContent>
-        {data.loaded && <ServerSummary data={data} openAbout={openAbout} />}
+        {data.loaded && (
+          <ServerSummary
+            data={data}
+            serverHost={serverHost}
+            openAbout={openAbout}
+          />
+        )}
       </CardContent>
       <CardActions disableSpacing>
         <IconButton aria-label="add to favorites">
@@ -109,6 +113,7 @@ const ServerComponent = ({ data, openAbout }) => {
 
 ServerComponent.propTypes = {
   data: PropTypes.object.isRequired,
+  serverHost: PropTypes.string,
   openAbout: PropTypes.func.isRequired
 };
 

src/features/server/components/ServerContainer.js

@@ -6,7 +6,7 @@ import { loadServerData, loadSystemVersion } from "../actionCreators";
 import ServerComponent from "./ServerComponent";
 import { withRouter } from "react-router-dom";
 
-const ServerContainer = ({ actions, data, history }) => {
+const ServerContainer = ({ actions, data, serverHost, history }) => {
   useEffect(() => {
     actions.loadServerData();
     actions.loadSystemVersion();
@@ -17,18 +17,26 @@ const ServerContainer = ({ actions, data, history }) => {
     event.preventDefault();
   };
 
-  return <ServerComponent data={data} openAbout={openAbout} />;
+  return (
+    <ServerComponent
+      data={data}
+      serverHost={serverHost}
+      openAbout={openAbout}
+    />
+  );
 };
 
 ServerContainer.propTypes = {
   actions: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
+  history: PropTypes.object.isRequired,
+  serverHost: PropTypes.string
 };
 
 function mapStateToProps(state) {
   return {
-    data: state.server.data
+    data: state.server.data,
+    serverHost: state.server.activeSession.hostName
   };
 }
 

src/features/server/components/ServerSummary.js

@@ -7,7 +7,7 @@ import styles from "../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
 
-const ServerSummary = ({ data, openAbout }) => {
+const ServerSummary = ({ data, serverHost, openAbout }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -20,7 +20,7 @@ const ServerSummary = ({ data, openAbout }) => {
 
       <Grid item xs={6} sm={4} md={4}>
         {`${t("Server.ServerHostName")}: `}
-        <span className={classes.value}>{data.hosts.server}</span>
+        <span className={classes.value}>{serverHost || ""}</span>
       </Grid>
 
       <Grid item xs={6} sm={4} md={4}>
@@ -46,6 +46,7 @@ const ServerSummary = ({ data, openAbout }) => {
 
 ServerSummary.propTypes = {
   data: PropTypes.object.isRequired,
+  serverHost: PropTypes.string,
   openAbout: PropTypes.func.isRequired
 };