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 }),