feat(client): added calendar component

client/package.json

@@ -1,14 +1,16 @@
 {
   "name": "client",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.9.1",
     "@material-ui/icons": "^3.0.2",
     "axios": "^0.18.0",
+    "moment": "^2.24.0",
     "notistack": "^0.4.1",
-    "prop-types": "latest",
+    "prop-types": "^15.7.2",
     "react": "^16.8.4",
+    "react-big-calendar": "^0.20.3",
     "react-dom": "^16.8.0-alpha.1",
     "react-redux": "^6.0.1",
     "react-router-dom": "^4.3.1",

client/src/App.js

@@ -7,7 +7,7 @@ import Hidden from '@material-ui/core/Hidden';
 import Navigator from './components/Navigator/Navigator';
 import Content from './components/Content/Content';
 import Header from './components/Header/Header';
-import LoginDialog from './components/LoginDialog/LoginDialog';
+import LoginDialog from './components/application/LoginDialog/LoginDialog';
 import {SnackbarProvider, withSnackbar} from 'notistack';
 import {BrowserRouter} from 'react-router-dom';
 import {connect} from 'react-redux';
@@ -20,7 +20,6 @@ function App({classes, loggedIn, mobileOpen}) {
     this.props.loginUser(userData);
   };
 
-  console.log(loggedIn);
   if (!loggedIn) {
     /*show login screen when the user is not logged in*/
     return <LoginDialog callback={updateUserData} />;
@@ -66,22 +65,17 @@ App.propTypes = {
   enqueueSnackbar: PropTypes.func.isRequired
 };
 
-const mapStateToProps = (state /*, ownProps*/) => {
-  console.log(state);
+const mapStateToProps = state => {
   return {
-    user: state.user,
-    loggedIn: state.loggedIn,
-    mobileOpen: state.mobileOpen
+    user: state.login.user,
+    loggedIn: state.login.loggedIn,
+    mobileOpen: state.login.mobileOpen
   };
 };
 
 const mapDispatchToProps = {toggleSidebar, loginUser};
 
-export default withStyles(appStyles)(
-  withSnackbar(
-    connect(
-      mapStateToProps,
-      mapDispatchToProps
-    )(App)
-  )
-);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(appStyles)(App));

client/src/components/Content/Content.js

@@ -3,16 +3,18 @@ import PropTypes from 'prop-types';
 import Paper from '@material-ui/core/Paper';
 import {withStyles} from '@material-ui/core/styles';
 import {contentStyles} from '../../helpers/styles/styles';
-import Users from '../Users/Users';
+import Users from '../application/Users/Users';
 import {Switch, Route} from 'react-router-dom';
+import Holidays from '../application/Holidays/Holidays';
 
 const Content = props => {
-  const {classes} = props;
+  // const {classes} = props;
 
   return (
-    <Paper className={classes.paper}>
+    <Paper>
       <Switch>
         <Route exact path={'/'} component={Users} />
+        <Route exact path={'/holidays'} component={Holidays} />
         <Route path={'/users'} component={Users} />
       </Switch>
     </Paper>
@@ -23,4 +25,4 @@ Content.propTypes = {
   classes: PropTypes.object.isRequired
 };
 
-export default withStyles(contentStyles)(Content);
+export default Content;

client/src/components/Header/Header.js

@@ -1,18 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
-import Avatar from '@material-ui/core/Avatar';
-import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
-import HelpIcon from '@material-ui/icons/Help';
 import Hidden from '@material-ui/core/Hidden';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
-import NotificationsIcon from '@material-ui/icons/Notifications';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
 import Toolbar from '@material-ui/core/Toolbar';
-import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import {withStyles} from '@material-ui/core/styles';
 import {headerStyles} from '../../helpers/styles/styles';

client/src/components/Navigator/Navigator.js

@@ -27,11 +27,23 @@ const categories = [
     children: [
       {id: 'Profile', link: '/profile', icon: <PeopleIcon />},
       {id: 'Users', link: '/users', icon: <PeopleIcon />},
-      {id: 'Logout', link: '/', icon: <PeopleIcon />}
+      {id: 'Logout', link: '/logout', icon: <PeopleIcon />}
     ]
   }
 ];
 
+/**
+ *
+ * @param url : String - url of the window
+ * @param link : String - the link of the item to be checked
+ * @returns {boolean} - true/false if the link is active or not
+ */
+const isLinkActive = (url, link) => {
+  const splitUrl = url.split('/');
+  link = link.substring(0, 1) === '/' ? link.substring(1, link.length) : link;
+  return splitUrl[splitUrl.length - 1] === link;
+};
+
 const Navigator = props => {
   const {classes, ...other} = props;
 
@@ -51,7 +63,11 @@ const Navigator = props => {
             </ListItem>
             {children.map(({id: childId, link, icon, active}) => (
               <Link to={link} className={''}>
-                <ListItem button dense key={childId} className={classNames(classes.item, classes.itemActionable, active && classes.itemActiveItem)}>
+                <ListItem
+                  button
+                  dense
+                  key={childId}
+                  className={classNames(classes.item, classes.itemActionable, isLinkActive(window.location.href, link) && classes.itemActiveItem)}>
                   <ListItemIcon>{icon}</ListItemIcon>
                   <ListItemText
                     classes={{

client/src/components/application/Holidays/Holidays.js

@@ -0,0 +1,18 @@
+import BigCalendar from 'react-big-calendar';
+import moment from 'moment';
+import React from 'react';
+import {connect} from 'react-redux';
+import '../../../helpers/styles/react-big-calendar.css';
+
+const localize = BigCalendar.momentLocalizer(moment);
+const Holidays = props => {
+  return <BigCalendar localizer={localize} events={props.holidays} startAccessor="start" endAccessor="end" defaultView={'month'} />;
+};
+
+const mapStateToProps = state => {
+  return {
+    holidays: state.holidays.holidays
+  };
+};
+
+export default connect(mapStateToProps)(Holidays);

client/src/components/LoginDialog/LoginDialog.js → client/src/components/application/LoginDialog/LoginDialog.js

@@ -3,15 +3,15 @@ import React, {useState} from 'react';
 import AppBar from '@material-ui/core/AppBar/AppBar';
 import Toolbar from '@material-ui/core/Toolbar/Toolbar';
 import Typography from '@material-ui/core/Typography/Typography';
-import {loginDialogStyles} from '../../helpers/styles/styles';
+import {loginDialogStyles} from '../../../helpers/styles/styles';
 import withStyles from '@material-ui/core/styles/withStyles';
 import Paper from '@material-ui/core/Paper/Paper';
 import TextField from '@material-ui/core/TextField/TextField';
 import Grid from '@material-ui/core/Grid/Grid';
 import Fab from '@material-ui/core/Fab/Fab';
 import NavigationIcon from '@material-ui/icons/Navigation';
 import axios from 'axios';
-import {apiUrls} from '../../helpers/Constants/Constants';
+import {apiUrls} from '../../../helpers/Constants/Constants';
 import {withSnackbar} from 'notistack';
 import Slide from '@material-ui/core/Slide/Slide';
 

client/src/components/Users/Users.js → client/src/components/application/Users/Users.js

@@ -7,7 +7,7 @@ import TablePagination from '@material-ui/core/TablePagination';
 import TableBody from '@material-ui/core/TableBody';
 import TablePaginationActions from '@material-ui/core/TablePagination/TablePaginationActions';
 import {withStyles} from '@material-ui/core';
-import {userTableStyles} from '../../helpers/styles/styles';
+import {userTableStyles} from '../../../helpers/styles/styles';
 import * as PropTypes from 'prop-types';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import Tooltip from '@material-ui/core/Tooltip';