Server sessions page

package-lock.json

@@ -979,6 +979,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@jest/types": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
@@ -990,6 +995,126 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@material-ui/core": {
+      "version": "4.9.13",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.13.tgz",
+      "integrity": "sha512-GEXNwUr+laZ0N+F1efmHB64Fyg+uQIRXLqbSejg3ebSXgLYNpIjnMOPRfWdu4rICq0dAIgvvNXGkKDMcf3AMpA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/react-transition-group": "^4.3.0",
+        "@material-ui/styles": "^4.9.13",
+        "@material-ui/system": "^4.9.13",
+        "@material-ui/types": "^5.0.1",
+        "@material-ui/utils": "^4.9.12",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "^1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.1.4",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+          "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^2.6.7"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.4.1",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+          "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
+      "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-CwQ0aXrlUynUTY6sh3UvKuvye1o92en20VGAs6TORnSxUYeRmkX8YeTUN3lAkGiBX1z222FxLFO36WWh6q73rQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.1.4",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+          "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^2.6.7"
+          }
+        }
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.9.13",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.13.tgz",
+      "integrity": "sha512-lWlXJanBdHQ18jW/yphedRokHcvZD1GdGzUF/wQxKDsHwDDfO45ZkAxuSBI202dG+r1Ph483Z3pFykO2obeSRA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.0.1",
+        "@material-ui/utils": "^4.9.6",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.9.13",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.13.tgz",
+      "integrity": "sha512-6AlpvdW6KJJ5bF1Xo2OD13sCN8k+nlL36412/bWnWZOKIfIMo/Lb8c8d1DOIaT/RKWxTEUaWnKZjabVnA3eZjA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.1.tgz",
+      "integrity": "sha512-wURPSY7/3+MAtng3i26g+WKwwNE3HEeqa/trDBR5+zWKmcjO+u9t7Npu/J1r+3dmIa/OeziN9D/18IrBKvKffw=="
+    },
+    "@material-ui/utils": {
+      "version": "4.9.12",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.9.12.tgz",
+      "integrity": "sha512-/0rgZPEOcZq5CFA4+4n6Q6zk7fi8skHhH2Bcra8R3epoJEYy5PL55LuMazPtPH1oKeRausDV/Omz4BbgFsn1HQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
@@ -1021,12 +1146,34 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
       "dev": true
     },
+    "@types/react": {
+      "version": "16.9.35",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.35.tgz",
+      "integrity": "sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz",
+      "integrity": "sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/yargs": {
       "version": "13.0.8",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
@@ -2443,6 +2590,11 @@
         "wrap-ansi": "^2.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA=="
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -2978,6 +3130,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@@ -3100,6 +3261,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
+      "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -5421,6 +5587,11 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -5797,6 +5968,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-installed-globally": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@@ -6130,6 +6306,83 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.1.1.tgz",
+      "integrity": "sha512-Xz3qgRUFlxbWk1czCZibUJqhVPObrZHxY3FPsjCXhDld4NOj1BgM14Ir5hVm+Qr6OLqVljjGvoMcCdXNOAbdkQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.1.1.tgz",
+      "integrity": "sha512-MDIaw8FeD5uFz1seQBKz4pnvDLnj5vIKV5hXSVdMaAVq13xR6SVTVWkIV/keyTs5txxTvzGJ9hXoxgd1WTUlBw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.1.1.tgz",
+      "integrity": "sha512-UkeVCA/b3QEA4k0nIKS4uWXDCNmV73WLHdh2oDGZZc3GsQtlOCuiH3EkB/qI60v2MiCq356/SYWsDXt21yjwdg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.1.1.tgz",
+      "integrity": "sha512-VBG3wRyi3Z8S4kMhm8rZV6caYBegsk+QnQZSVmrWw6GVOT/Z4FA7eyMu5SdkorDlG/HVpHh91oFN56O4R9m2VA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.1.1.tgz",
+      "integrity": "sha512-ozEu7ZBSVrMYxSDplPX3H82XHNQk2DQEJ9TEyo7OVTPJ1hEieqjDFiOQOxXEj9z3PMqkylnUbvWIZRDKCFYw5Q==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.1.1.tgz",
+      "integrity": "sha512-g/joK3eTDZB4pkqpZB38257yD4LXB0X15jxtZAGbUzcKAVUHPl9Jb47Y7lYmiGsShiV4YmQRqG1p2DHMYoK91g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.1.1.tgz",
+      "integrity": "sha512-ClV1lvJ3laU9la1CUzaDugEcwnpjPTuJ0yGy2YtcU+gG/w9HMInD5vEv7xKAz53Bk4WiJm5uLOElSEshHyhKNw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.1.1.tgz",
+      "integrity": "sha512-09MZpQ6onQrhaVSF6GHC4iYifQ7+4YC/tAP6D4ZWeZotvCMq1mHLqNKRIaqQ2lkgANjlEot2JnVi1ktu4+L4pw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.7",
+        "jss": "10.1.1"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -7697,6 +7950,11 @@
       "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-0.4.0.tgz",

package.json

@@ -15,6 +15,8 @@
     "serve:build": "http-server ./build"
   },
   "dependencies": {
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/icons": "^4.9.1",
     "axios": "^0.19.2",
     "bootstrap": "4.3.1",
     "immer": "2.1.3",

src/components/App.js

@@ -8,6 +8,7 @@ import CoursesPage from "./courses/CoursesPage";
 import ManageCoursePage from "./courses/ManageCoursePage";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import SessionContainer from "../features/session/components/SessionContainer";
 
 function App() {
   return (
@@ -19,6 +20,7 @@ function App() {
         <Route path="/courses" component={CoursesPage} />
         <Route path="/course/:slug" component={ManageCoursePage} />
         <Route path="/course" component={ManageCoursePage} />
+        <Route path="/sessions" component={SessionContainer} />
         <Route component={PageNotFound} />
       </Switch>
       <ToastContainer autoClose={3000} />

src/components/common/Header.js

@@ -14,6 +14,10 @@ const Header = () => {
         Courses
       </NavLink>
       {" | "}
+      <NavLink to="/sessions" activeStyle={activeStyle}>
+        Sessions
+      </NavLink>
+      {" | "}
       <NavLink to="/about" activeStyle={activeStyle}>
         About
       </NavLink>

src/features/session/actionCreators.js

@@ -0,0 +1,15 @@
+import * as types from "./actionTypes";
+import api from "./api";
+import { sendHttpRequest } from "../../redux/actions/httpActions";
+
+export function loadServerSessions() {
+  return async function (dispatch) {
+    try {
+      dispatch({ type: types.LOAD_SERVER_SESSIONS_STARTED });
+      const data = await dispatch(sendHttpRequest(api.getServerSessions()));
+      dispatch({ type: types.LOAD_SERVER_SESSIONS_SUCCESS, payload: data });
+    } catch (error) {
+      throw error;
+    }
+  };
+}

src/features/session/actionTypes.js

@@ -0,0 +1,2 @@
+export const LOAD_SERVER_SESSIONS_STARTED = "LOAD_SERVER_SESSIONS_STARTED";
+export const LOAD_SERVER_SESSIONS_SUCCESS = "LOAD_SERVER_SESSIONS_SUCCESS";

src/features/session/api.js

@@ -0,0 +1,8 @@
+import { get } from "../../api/axiosApi";
+const baseUrl = process.env.REVERSE_PROXY_API_URL + "/server";
+
+const getServerSessions = () => get(`${baseUrl}/sessions`);
+
+export default {
+  getServerSessions
+};

src/features/session/components/SessionContainer.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import PropTypes from "prop-types";
+import SessionListComponent from "./SessionListComponent";
+import { loadServerSessions } from "../actionCreators";
+
+const SessionContainer = ({ actions, sessions }) => {
+  useEffect(() => {
+    actions.loadServerSessions();
+  }, []);
+
+  return <SessionListComponent sessions={sessions} />;
+};
+
+SessionContainer.propTypes = {
+  actions: PropTypes.object.isRequired,
+  sessions: PropTypes.array.isRequired
+};
+
+function mapStateToProps(state) {
+  return {
+    sessions: state.sessions
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ loadServerSessions }, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SessionContainer);

src/features/session/components/SessionListComponent.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import ExpansionPanel from "@material-ui/core/ExpansionPanel";
+import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Typography from "@material-ui/core/Typography";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import PropTypes from "prop-types";
+import SessionSummary from "./SessionSummary";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: "100%"
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular
+  }
+}));
+
+const SessionListComponent = ({ sessions }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <h2>Sessions</h2>
+      {sessions.loaded &&
+        sessions.map((session) => {
+          return (
+            <ExpansionPanel key={session.sessionId}>
+              <ExpansionPanelSummary
+                expandIcon={<ExpandMoreIcon />}
+                aria-controls="panel1a-content"
+                id="panel1a-header"
+              >
+                <SessionSummary session={session} />
+              </ExpansionPanelSummary>
+              <ExpansionPanelDetails>
+                <Typography>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
+                  eget.
+                </Typography>
+              </ExpansionPanelDetails>
+            </ExpansionPanel>
+          );
+        })}
+    </div>
+  );
+};
+
+SessionListComponent.propTypes = {
+  sessions: PropTypes.array.isRequired
+};
+
+export default SessionListComponent;

src/features/session/components/SessionSummary.js

@@ -0,0 +1,58 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid } from "@material-ui/core";
+import { makeStyles, withStyles } from "@material-ui/core/styles";
+import Checkbox from "@material-ui/core/Checkbox";
+import { blue } from "@material-ui/core/colors";
+
+const GreenCheckbox = withStyles({
+  root: {
+    color: blue[400],
+    "&$checked": {
+      color: blue[600]
+    }
+  },
+  checked: {}
+})((props) => <Checkbox color="default" {...props} />);
+
+const useStyles = makeStyles((theme) => ({
+  value: {
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  miniContainer: {
+    paddingTop: "10px"
+  }
+}));
+
+const SessionSummary = ({ session }) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <Grid container className={classes.miniContainer}>
+        <Grid item xs={12} sm={3} md={3}>
+          {"Session: "}
+          <span className={classes.value}>{session.sessionId}</span>
+        </Grid>
+        <Grid item xs={12} sm={3} md={3}>
+          {"Active: "}
+          {session.active ? (
+            <GreenCheckbox checked={true} disabled />
+          ) : (
+            <Checkbox indeterminate disabled />
+          )}
+        </Grid>
+        <Grid item xs={12} sm={3} md={3}>
+          {"Start date: "}
+          <span className={classes.value}>{session.startDate}</span>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+SessionSummary.propTypes = {
+  session: PropTypes.object.isRequired
+};
+
+export default SessionSummary;

src/features/session/reducer.js

@@ -0,0 +1,15 @@
+import * as types from "./actionTypes";
+import initialState from "../../redux/reducers/initialState";
+
+export default function sessionsReducer(state = initialState.sessions, action) {
+  switch (action.type) {
+    case types.LOAD_SERVER_SESSIONS_STARTED:
+      return Object.assign([], { loading: true, loaded: false });
+
+    case types.LOAD_SERVER_SESSIONS_SUCCESS:
+      return Object.assign(action.payload, { loading: false, loaded: true });
+
+    default:
+      return state;
+  }
+}

src/index.html

@@ -2,6 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="minimum-scale=1, initial-scale=1, width=device-width"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+
     <title>Reverse proxy</title>
   </head>
 

src/redux/reducers/index.js

@@ -3,9 +3,11 @@ import courseReducer from "./courseReducer";
 import authorReducer from "./authorReducer";
 import ajaxStatusReducer from "./ajaxStatusReducer";
 import systemReducer from "../../features/system/reducer";
+import sessionsReducer from "../../features/session/reducer";
 
 const rootReducer = combineReducers({
   system: systemReducer,
+  sessions: sessionsReducer,
   courses: courseReducer,
   authors: authorReducer,
   ajaxCallsInProgress: ajaxStatusReducer

src/redux/reducers/initialState.js

@@ -1,5 +1,6 @@
 export default {
   system: {},
+  sessions: Object.assign([], { loading: false, loaded: false }),
   courses: [],
   authors: [],
   ajaxCallsInProgress: 0