server data

public/locales/en/translations.json

@@ -52,6 +52,8 @@
     "Version": "Version"
   },
   "Server": {
+    "ApiHostName": "API host",
+    "Domain": "Domain",
     "ActiveSession": "Active session",
     "ActiveSessionSubtitle": "Expand to see forwards"
   }

public/locales/ro/translations.json

@@ -43,6 +43,8 @@
     "Version": "Versiune"
   },
   "Server": {
+    "ApiHostName": "Gazdă API",
+    "Domain": "Domeniu",
     "ActiveSession": "Sesiune activă",
     "ActiveSessionSubtitle": "Extindeţi pentru a vedea redirectările"
   }

src/features/server/actionCreators.js

@@ -2,11 +2,11 @@ import * as types from "./actionTypes";
 import api from "./api";
 import { sendHttpRequest } from "../../redux/actions/httpActions";
 
-export function loadSystemDateTime() {
+export function loadServerData() {
   return async function (dispatch) {
     try {
-      const data = await dispatch(sendHttpRequest(api.getSystemDateTime()));
+      const data = await dispatch(sendHttpRequest(api.getServerData()));
-      dispatch({ type: types.LOAD_SYSTEM_DATETIME_SUCCESS, payload: data });
+      dispatch({ type: types.LOAD_SERVER_DATA_SUCCESS, payload: data });
     } catch (error) {
       throw error;
     }

src/features/server/actionTypes.js

@@ -1,3 +1,3 @@
-export const LOAD_SYSTEM_DATETIME_SUCCESS = "LOAD_SYSTEM_DATETIME_SUCCESS";
 export const LOAD_SYSTEM_VERSION_SUCCESS = "LOAD_SYSTEM_VERSION_SUCCESS";
 export const LOAD_ACTIVE_SESSION_SUCCESS = "LOAD_ACTIVE_SESSION_SUCCESS";
+export const LOAD_SERVER_DATA_SUCCESS = "LOAD_SERVER_DATA_SUCCESS";

src/features/server/api.js

@@ -1,12 +1,12 @@
 import { get } from "../../api/axiosApi";
 const baseUrl = process.env.REVERSE_PROXY_API_URL;
 
-const getSystemDateTime = () => get(`${baseUrl}/system/datetime`);
+const getServerData = () => get(`${baseUrl}/server/data`);
 const getSystemVersion = () => get(`${baseUrl}/system/version`);
 const getActiveSession = () => get(`${baseUrl}/server/active-session`);
 
 export default {
-  getSystemDateTime,
+  getServerData,
   getSystemVersion,
   getActiveSession
 };

src/features/server/components/ServerComponent.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
 import clsx from "clsx";
 import Card from "@material-ui/core/Card";
@@ -15,10 +16,11 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import DnsRoundedIcon from "@material-ui/icons/DnsRounded";
 import styles from "../../../components/common/styles/expandableCardStyles";
+import ServerSummary from "./ServerSummary";
 
 const useStyles = makeStyles(styles);
 
-const ServerComponent = () => {
+const ServerComponent = ({ data }) => {
   const classes = useStyles();
   const [expanded, setExpanded] = React.useState(false);
 
@@ -42,13 +44,7 @@ const ServerComponent = () => {
         title={<strong>Server</strong>}
         subheader="Host: StaWebSrv"
       />
-      <CardContent>
+      <CardContent>{data.loaded && <ServerSummary data={data} />}</CardContent>
-        <Typography variant="body2" color="textSecondary" component="p">
-          This impressive paella is a perfect party dish and a fun meal to cook
-          together with your guests. Add 1 cup of frozen peas along with the
-          mussels, if you like.
-        </Typography>
-      </CardContent>
       <CardActions disableSpacing>
         <IconButton aria-label="add to favorites">
           <FavoriteIcon />
@@ -102,4 +98,8 @@ const ServerComponent = () => {
   );
 };
 
+ServerComponent.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
 export default ServerComponent;

src/features/server/components/ServerContainer.js

@@ -2,35 +2,32 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import PropTypes from "prop-types";
-import { loadSystemDateTime, loadSystemVersion } from "../actionCreators";
+import { loadServerData, loadSystemVersion } from "../actionCreators";
 import ServerComponent from "./ServerComponent";
 
-const ServerContainer = ({ actions }) => {
+const ServerContainer = ({ actions, data }) => {
   useEffect(() => {
-    actions.loadSystemDateTime();
+    actions.loadServerData();
     actions.loadSystemVersion();
   }, []);
 
-  return <ServerComponent />;
+  return <ServerComponent data={data} />;
 };
 
 ServerContainer.propTypes = {
   actions: PropTypes.object.isRequired,
-  server: PropTypes.object.isRequired
+  data: PropTypes.object.isRequired
 };
 
 function mapStateToProps(state) {
   return {
-    server: state.server
+    data: state.server.data
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(
+    actions: bindActionCreators({ loadServerData, loadSystemVersion }, dispatch)
-      { loadSystemDateTime, loadSystemVersion },
-      dispatch
-    )
   };
 }
 

src/features/server/components/ServerSummary.js

@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid } 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 ServerSummary = ({ data }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item xs={12} sm={4} md={4}>
+        {`${t("Server.ApiHostName")}: `}
+        <span className={classes.value}>{data.hosts.api}</span>
+      </Grid>
+
+      <Grid item xs={12} sm={4} md={4}>
+        {`${t("Server.Domain")}: `}
+        <span className={classes.value}>{data.domain}</span>
+      </Grid>
+    </Grid>
+  );
+};
+
+ServerSummary.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default ServerSummary;

src/features/server/reducer.js

@@ -3,10 +3,10 @@ import initialState from "../../redux/reducers/initialState";
 
 export default function serverReducer(state = initialState.server, action) {
   switch (action.type) {
-    case types.LOAD_SYSTEM_DATETIME_SUCCESS:
+    case types.LOAD_SERVER_DATA_SUCCESS:
       return {
         ...state,
-        datetime: action.payload
+        data: { ...action.payload, loading: false, loaded: true }
       };
 
     case types.LOAD_SYSTEM_VERSION_SUCCESS:

src/redux/reducers/initialState.js

@@ -1,5 +1,6 @@
 export default {
   server: {
+    data: { loading: false, loaded: false },
     activeSession: { loading: false, loaded: false }
   },
   sessions: Object.assign([], { loading: false, loaded: false }),