active session update

src/components/home/HomePage.js

@@ -1,10 +1,14 @@
 import React from "react";
 import ServerContainer from "../../features/server/components/ServerContainer";
+import ActiveSessionContainer from "../../features/server/components/ActiveSessionContainer";
 
 const HomePage = () => {
   return (
     <>
       <ServerContainer />
+      <br />
+      <br />
+      <ActiveSessionContainer />
     </>
   );
 };

src/features/server/components/ActiveSessionComponent.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";
@@ -13,6 +14,7 @@ import FavoriteIcon from "@material-ui/icons/Favorite";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import ShareRoundedIcon from "@material-ui/icons/ShareRounded";
+import ActiveSessionSummary from "./ActiveSessionSummary";
 
 const useStyles = makeStyles((theme) => ({
   expand: {
@@ -30,7 +32,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-const ActiveSessionComponent = () => {
+const ActiveSessionComponent = ({ session }) => {
   const classes = useStyles();
   const [expanded, setExpanded] = React.useState(false);
 
@@ -55,11 +57,7 @@ const ActiveSessionComponent = () => {
         subheader="Expand to see forwards"
       />
       <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>
+        <ActiveSessionSummary session={session} />
       </CardContent>
       <CardActions disableSpacing>
         <IconButton aria-label="add to favorites">
@@ -89,4 +87,8 @@ const ActiveSessionComponent = () => {
   );
 };
 
+ActiveSessionComponent.propTypes = {
+  session: PropTypes.object.isRequired
+};
+
 export default ActiveSessionComponent;

src/features/server/components/ActiveSessionContainer.js

@@ -0,0 +1,36 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import PropTypes from "prop-types";
+import { loadActiveSession } from "../actionCreators";
+import ActiveSessionComponent from "./ActiveSessionComponent";
+
+const ActiveSessionContainer = ({ actions, session }) => {
+  useEffect(() => {
+    actions.loadActiveSession();
+  }, []);
+
+  return <ActiveSessionComponent session={session} />;
+};
+
+ActiveSessionContainer.propTypes = {
+  actions: PropTypes.object.isRequired,
+  session: PropTypes.object.isRequired
+};
+
+function mapStateToProps(state) {
+  return {
+    session: state.server.activeSession
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ loadActiveSession }, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ActiveSessionContainer);

src/features/server/components/ActiveSessionSummary.js

@@ -0,0 +1,42 @@
+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 ActiveSessionSummary = ({ session }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container className={classes.miniContainer}>
+      <Grid item xs={12} sm={4} md={4}>
+        {`${t("Session.RunningTime")}: `}
+        <span className={classes.value}>{session.runningTime}</span>
+      </Grid>
+
+      <Grid item xs={12} sm={4} md={4}>
+        {`${t("Session.StartDate")}: `}
+        <span className={classes.value}>
+          {t("DATE_FORMAT", {
+            date: { value: session.startDate, format: "DD-MM-YYYY HH:mm:ss" }
+          })}
+        </span>
+      </Grid>
+
+      <Grid item xs={12} sm={4} md={4}>
+        {`${t("Session.Host")}: `}
+        <span className={classes.value}>{session.hostName}</span>
+      </Grid>
+    </Grid>
+  );
+};
+
+ActiveSessionSummary.propTypes = {
+  session: PropTypes.object.isRequired
+};
+
+export default ActiveSessionSummary;

src/features/server/components/ServerContainer.js

@@ -2,29 +2,16 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import PropTypes from "prop-types";
-import {
-  loadSystemDateTime,
-  loadSystemVersion,
-  loadActiveSession
-} from "../actionCreators";
+import { loadSystemDateTime, loadSystemVersion } from "../actionCreators";
 import ServerComponent from "./ServerComponent";
-import ActiveSessionComponent from "./ActiveSessionComponent";
 
 const ServerContainer = ({ actions }) => {
   useEffect(() => {
     actions.loadSystemDateTime();
     actions.loadSystemVersion();
-    actions.loadActiveSession();
   }, []);
 
-  return (
-    <>
-      <ServerComponent />
-      <br />
-      <br />
-      <ActiveSessionComponent />
-    </>
-  );
+  return <ServerComponent />;
 };
 
 ServerContainer.propTypes = {
@@ -41,7 +28,7 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(
-      { loadSystemDateTime, loadSystemVersion, loadActiveSession },
+      { loadSystemDateTime, loadSystemVersion },
       dispatch
     )
   };

src/features/server/reducer.js

@@ -18,7 +18,7 @@ export default function serverReducer(state = initialState.server, action) {
     case types.LOAD_ACTIVE_SESSION_SUCCESS:
       return {
         ...state,
-        activeSession: action.payload
+        activeSession: { ...action.payload, loading: false, loaded: true }
       };
 
     default:

src/redux/reducers/initialState.js

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