diff --git a/src/components/home/HomePage.js b/src/components/home/HomePage.js
index 204c0dc..9c8c7db 100644
--- a/src/components/home/HomePage.js
+++ b/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 (
<>
+
+
+
>
);
};
diff --git a/src/features/server/components/ActiveSessionComponent.js b/src/features/server/components/ActiveSessionComponent.js
index 4deaa52..bbad030 100644
--- a/src/features/server/components/ActiveSessionComponent.js
+++ b/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"
/>
-
- 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.
-
+
@@ -89,4 +87,8 @@ const ActiveSessionComponent = () => {
);
};
+ActiveSessionComponent.propTypes = {
+ session: PropTypes.object.isRequired
+};
+
export default ActiveSessionComponent;
diff --git a/src/features/server/components/ActiveSessionContainer.js b/src/features/server/components/ActiveSessionContainer.js
new file mode 100644
index 0000000..2e4794e
--- /dev/null
+++ b/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 ;
+};
+
+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);
diff --git a/src/features/server/components/ActiveSessionSummary.js b/src/features/server/components/ActiveSessionSummary.js
new file mode 100644
index 0000000..1007429
--- /dev/null
+++ b/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 (
+
+
+ {`${t("Session.RunningTime")}: `}
+ {session.runningTime}
+
+
+
+ {`${t("Session.StartDate")}: `}
+
+ {t("DATE_FORMAT", {
+ date: { value: session.startDate, format: "DD-MM-YYYY HH:mm:ss" }
+ })}
+
+
+
+
+ {`${t("Session.Host")}: `}
+ {session.hostName}
+
+
+ );
+};
+
+ActiveSessionSummary.propTypes = {
+ session: PropTypes.object.isRequired
+};
+
+export default ActiveSessionSummary;
diff --git a/src/features/server/components/ServerContainer.js b/src/features/server/components/ServerContainer.js
index 7051525..756a9ce 100644
--- a/src/features/server/components/ServerContainer.js
+++ b/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 (
- <>
-
-
-
-
- >
- );
+ return ;
};
ServerContainer.propTypes = {
@@ -41,7 +28,7 @@ function mapStateToProps(state) {
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(
- { loadSystemDateTime, loadSystemVersion, loadActiveSession },
+ { loadSystemDateTime, loadSystemVersion },
dispatch
)
};
diff --git a/src/features/server/reducer.js b/src/features/server/reducer.js
index 90d14d5..89538ce 100644
--- a/src/features/server/reducer.js
+++ b/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:
diff --git a/src/redux/reducers/initialState.js b/src/redux/reducers/initialState.js
index 331243f..8430c70 100644
--- a/src/redux/reducers/initialState.js
+++ b/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 }),