Merge branch 'main' into redux-setup

package-lock.json

@@ -13,7 +13,10 @@
         "@mui/icons-material": "^5.4.2",
         "@mui/material": "^5.4.3",
         "@reduxjs/toolkit": "^1.8.0",
+        "@types/react-big-calendar": "^0.36.2",
+        "moment": "^2.29.1",
         "react": "^17.0.2",
+        "react-big-calendar": "^0.39.3",
         "react-dom": "^17.0.2",
         "react-redux": "^7.2.6",
         "react-router-dom": "^6.2.1"
@@ -2228,6 +2231,15 @@
         "react-redux": {
           "optional": true
         }
+    "node_modules/@restart/hooks": {
+      "version": "0.3.27",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
+      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
     "node_modules/@sindresorhus/is": {
@@ -2671,6 +2683,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-big-calendar": {
+      "version": "0.36.2",
+      "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-0.36.2.tgz",
+      "integrity": "sha512-grXQJgeHWXhgcipRB28NnUwIhD6aAKFs7IacGwy2+33hC8yAcR62nsW73aa25K3qxU8RxoLflKSCrsm4QCQpuQ==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "17.0.11",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
@@ -2767,6 +2788,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "node_modules/@types/webpack": {
       "version": "5.28.0",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-5.28.0.tgz",
@@ -5199,6 +5225,11 @@
         "url": "https://github.com/imagemin/cwebp-bin?sponsor=1"
       }
     },
+    "node_modules/date-arithmetic": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz",
+      "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
+    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -5544,6 +5575,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -8346,6 +8385,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -9023,8 +9070,12 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -9134,6 +9185,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/memory-fs": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
@@ -9277,6 +9333,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mozjpeg": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-7.1.1.tgz",
@@ -10513,6 +10577,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-big-calendar": {
+      "version": "0.39.3",
+      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-0.39.3.tgz",
+      "integrity": "sha512-RLymspfoBeYNBMvKnpMSpHtUAsJhv1Cbp1sE6aE7huQ92xT0mgnFDxUSoWc//C5J8WbYWLtlld521eisNJSjNw==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.5",
+        "clsx": "^1.0.4",
+        "date-arithmetic": "^4.1.0",
+        "dom-helpers": "^5.1.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.11",
+        "lodash-es": "^4.17.11",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-overlays": "^4.1.1",
+        "uncontrollable": "^7.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.1 || ^17",
+        "react-dom": "^16.6.1 || ^17"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -10560,6 +10646,30 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-overlays": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
+      "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@popperjs/core": "^2.5.3",
+        "@restart/hooks": "^0.3.25",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
@@ -12325,6 +12435,20 @@
         "through": "^2.3.8"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -12472,6 +12596,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -14367,6 +14499,12 @@
         "redux": "^4.1.2",
         "redux-thunk": "^2.4.1",
         "reselect": "^4.1.5"
+    "@restart/hooks": {
+      "version": "0.3.27",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
+      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
+      "requires": {
+        "dequal": "^2.0.2"
       }
     },
     "@sindresorhus/is": {
@@ -14706,6 +14844,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-big-calendar": {
+      "version": "0.36.2",
+      "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-0.36.2.tgz",
+      "integrity": "sha512-grXQJgeHWXhgcipRB28NnUwIhD6aAKFs7IacGwy2+33hC8yAcR62nsW73aa25K3qxU8RxoLflKSCrsm4QCQpuQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "17.0.11",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
@@ -14802,6 +14949,11 @@
         "@types/node": "*"
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/webpack": {
       "version": "5.28.0",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-5.28.0.tgz",
@@ -16671,6 +16823,11 @@
         "bin-wrapper": "^4.0.1"
       }
     },
+    "date-arithmetic": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz",
+      "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
+    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -16939,6 +17096,11 @@
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
       "dev": true
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -19063,6 +19225,14 @@
         "p-is-promise": "^1.1.0"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -19548,8 +19718,12 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -19638,6 +19812,11 @@
         "fs-monkey": "1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "memory-fs": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
@@ -19745,6 +19924,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "mozjpeg": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-7.1.1.tgz",
@@ -20653,6 +20837,24 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-big-calendar": {
+      "version": "0.39.3",
+      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-0.39.3.tgz",
+      "integrity": "sha512-RLymspfoBeYNBMvKnpMSpHtUAsJhv1Cbp1sE6aE7huQ92xT0mgnFDxUSoWc//C5J8WbYWLtlld521eisNJSjNw==",
+      "requires": {
+        "@babel/runtime": "^7.1.5",
+        "clsx": "^1.0.4",
+        "date-arithmetic": "^4.1.0",
+        "dom-helpers": "^5.1.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.11",
+        "lodash-es": "^4.17.11",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-overlays": "^4.1.1",
+        "uncontrollable": "^7.0.0"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -20686,6 +20888,24 @@
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
           "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
         }
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
+      "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@popperjs/core": "^2.5.3",
+        "@restart/hooks": "^0.3.25",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
       }
     },
     "react-router": {
@@ -22058,6 +22278,17 @@
         "through": "^2.3.8"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -22172,6 +22403,14 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",

package.json

@@ -13,7 +13,10 @@
     "@mui/icons-material": "^5.4.2",
     "@mui/material": "^5.4.3",
     "@reduxjs/toolkit": "^1.8.0",
+    "@types/react-big-calendar": "^0.36.2",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
+    "react-big-calendar": "^0.39.3",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1"

src/App.tsx

@@ -5,7 +5,7 @@ import "./styles.css";
 import Login from "./components/login/Login";
 import Home from "./components/home/Home";
 import Contacts from "./components/contacts/Contacts";
-import Calendar from "./components/calendar/Calendar";
+import CalendarPage from "./components/calendar/CalendarPage";
 import { ThemeProvider } from "@emotion/react";
 import ProtectedRoute from "./ProtectedRoute";
 import MeetingDetails from "./components/meeting-details/MeetingDetails";

src/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { useLocation, Outlet, Navigate } from "react-router-dom";
+import {useLocation, Outlet, Navigate} from "react-router-dom";
 import useAuth from "./hooks/useAuth";
 import Navbar from "./components/navbar/Navbar";
 import Sidebar from "./components/sidebar/Sidebar";
@@ -10,7 +10,7 @@ import {
 import { Box } from "@mui/material";
 
 const ProtectedRoute = () => {
-  const { auth }: any = useAuth();
+  const auth= useAuth();
   const location = useLocation();
 
   /* Temporary data */

src/components/calendar/Calendar.tsx

@@ -1,5 +0,0 @@
-const Calendar: React.FC = () => {
-  return <span>Calendar</span>;
-};
-
-export default Calendar;

src/components/calendar/CalendarPage.tsx

@@ -0,0 +1,14 @@
+import { Toolbar } from "@mui/material";
+import UserCalendar from "./UserCalendar";
+
+const CalendarPage: React.FC = () => {
+
+  return (
+    <>
+      <Toolbar />
+      <UserCalendar />
+    </>
+  );
+};
+
+export default CalendarPage;

src/components/calendar/Events.tsx

@@ -0,0 +1,185 @@
+/*
+Test data from
+https://github.com/jquense/react-big-calendar/blob/master/examples/events.js 
+*/
+
+const now = new Date();
+
+export default [
+  {
+    id: 0,
+    title: "All Day Event very long title",
+    allDay: true,
+    start: new Date(2022, 2, 0),
+    end: new Date(2022, 2, 1),
+  },
+  {
+    id: 1,
+    title: "Long Event",
+    start: new Date(2022, 2, 7),
+    end: new Date(2022, 2, 10),
+  },
+
+  {
+    id: 2,
+    title: "DTS STARTS",
+    start: new Date(2022, 1, 13, 0, 0, 0),
+    end: new Date(2022, 1, 20, 0, 0, 0),
+  },
+
+  {
+    id: 3,
+    title: "DTS ENDS",
+    start: new Date(2022, 9, 6, 0, 0, 0),
+    end: new Date(2022, 9, 13, 0, 0, 0),
+  },
+
+  {
+    id: 4,
+    title: "Some Event",
+    start: new Date(2022, 2, 9, 0, 0, 0),
+    end: new Date(2022, 2, 10, 0, 0, 0),
+  },
+  {
+    id: 5,
+    title: "Conference",
+    start: new Date(2022, 2, 11),
+    end: new Date(2022, 2, 13),
+    desc: "Big conference for important people",
+  },
+  {
+    id: 6,
+    title: "Meeting",
+    start: new Date(2022, 2, 12, 10, 30, 0, 0),
+    end: new Date(2022, 2, 12, 12, 30, 0, 0),
+    desc: "Pre-meeting meeting, to prepare for the meeting",
+  },
+  {
+    id: 7,
+    title: "Lunch",
+    start: new Date(2022, 2, 12, 12, 0, 0, 0),
+    end: new Date(2022, 2, 12, 13, 0, 0, 0),
+    desc: "Power lunch",
+  },
+  {
+    id: 8,
+    title: "Meeting",
+    start: new Date(2022, 2, 12, 14, 0, 0, 0),
+    end: new Date(2022, 2, 12, 15, 0, 0, 0),
+  },
+  {
+    id: 9,
+    title: "Happy Hour",
+    start: new Date(2022, 2, 12, 17, 0, 0, 0),
+    end: new Date(2022, 2, 12, 17, 30, 0, 0),
+    desc: "Most important meal of the day",
+  },
+  {
+    id: 10,
+    title: "Dinner",
+    start: new Date(2022, 2, 12, 20, 0, 0, 0),
+    end: new Date(2022, 2, 12, 21, 0, 0, 0),
+  },
+  {
+    id: 11,
+    title: "Planning Meeting with Paige",
+    start: new Date(2022, 2, 13, 8, 0, 0),
+    end: new Date(2022, 2, 13, 10, 30, 0),
+  },
+  {
+    id: 11.1,
+    title: "Inconvenient multi-day Conference Call",
+    start: new Date(2022, 2, 13, 9, 30, 0),
+    end: new Date(2022, 2, 14, 1, 0, 0),
+  },
+  {
+    id: 11.2,
+    title: "Project Kickoff - Lou's Shoes",
+    start: new Date(2022, 2, 13, 11, 30, 0),
+    end: new Date(2022, 2, 13, 14, 0, 0),
+  },
+  {
+    id: 11.3,
+    title: "Quote Follow-up - Tea by Tina",
+    start: new Date(2022, 2, 13, 15, 30, 0),
+    end: new Date(2022, 2, 13, 16, 0, 0),
+  },
+  {
+    id: 12,
+    title: "Late Night Event",
+    start: new Date(2022, 2, 17, 19, 30, 0),
+    end: new Date(2022, 2, 18, 2, 0, 0),
+  },
+  {
+    id: 12.5,
+    title: "Late Same Night Event",
+    start: new Date(2022, 2, 17, 19, 30, 0),
+    end: new Date(2022, 2, 17, 23, 30, 0),
+  },
+  {
+    id: 13,
+    title: "Multi-day Event",
+    start: new Date(2022, 2, 20, 19, 30, 0),
+    end: new Date(2022, 2, 22, 2, 0, 0),
+  },
+  {
+    id: 14,
+    title: "Today",
+    start: new Date(new Date().setHours(new Date().getHours() - 3)),
+    end: new Date(new Date().setHours(new Date().getHours() + 3)),
+  },
+  {
+    id: 15,
+    title: "Point in Time Event",
+    start: now,
+    end: now,
+  },
+  {
+    id: 16,
+    title: "Video Record",
+    start: new Date(2022, 2, 14, 15, 30, 0),
+    end: new Date(2022, 2, 14, 19, 0, 0),
+  },
+  {
+    id: 17,
+    title: "Dutch Song Producing",
+    start: new Date(2022, 2, 14, 16, 30, 0),
+    end: new Date(2022, 2, 14, 20, 0, 0),
+  },
+  {
+    id: 18,
+    title: "Itaewon Halloween Meeting",
+    start: new Date(2022, 2, 14, 16, 30, 0),
+    end: new Date(2022, 2, 14, 17, 30, 0),
+  },
+  {
+    id: 19,
+    title: "Online Coding Test",
+    start: new Date(2022, 2, 14, 17, 30, 0),
+    end: new Date(2022, 2, 14, 20, 30, 0),
+  },
+  {
+    id: 20,
+    title: "An overlapped Event",
+    start: new Date(2022, 2, 14, 17, 0, 0),
+    end: new Date(2022, 2, 14, 18, 30, 0),
+  },
+  {
+    id: 21,
+    title: "Phone Interview",
+    start: new Date(2022, 2, 14, 17, 0, 0),
+    end: new Date(2022, 2, 14, 18, 30, 0),
+  },
+  {
+    id: 22,
+    title: "Cooking Class",
+    start: new Date(2022, 2, 14, 17, 30, 0),
+    end: new Date(2022, 2, 14, 19, 0, 0),
+  },
+  {
+    id: 23,
+    title: "Go to the gym",
+    start: new Date(2022, 2, 14, 18, 30, 0),
+    end: new Date(2022, 2, 14, 20, 0, 0),
+  },
+];

src/components/calendar/UserCalendar.tsx

@@ -0,0 +1,23 @@
+import { Calendar,  momentLocalizer } from "react-big-calendar";
+import moment from "moment";
+import testEvents from "./Events";
+
+import "react-big-calendar/lib/css/react-big-calendar.css";
+
+const localizer = momentLocalizer(moment);
+
+const UserCalendar: React.FC = () => {
+
+  return (
+    <Calendar
+      events={testEvents}
+      views={["month", "week", "day"]}
+      step={60}
+      showMultiDayTimes
+      localizer={localizer}
+      style={{ height: "80%" }}
+    />
+  );
+};
+
+export default UserCalendar;

src/components/home/CallFavouritesDialog.tsx

@@ -0,0 +1,44 @@
+import { Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, FormGroup, Typography } from "@mui/material";
+import { SidebarUserObj } from "../sidebar/SidebarUser";
+
+interface Props {
+    open: boolean;
+    selectedValue: SidebarUserObj;
+    onClose: (value: SidebarUserObj) => void;
+    users: SidebarUserObj[];
+}
+
+const CallFavouritesDialog: React.FC<Props> = ({ open, selectedValue, onClose, users }: Props) => {
+  const handleClose = () => {
+    onClose(selectedValue);
+  };
+  
+  return (
+    <Dialog 
+      onClose={handleClose} 
+      open={open}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle>Select who to call:</DialogTitle>
+      <DialogContent>
+        <FormControlLabel control={<Checkbox color="success" />} label="Select everyone" />
+      </DialogContent>
+      <DialogContent sx={{ height: "40vh" }} dividers>
+        <FormGroup>
+          {users.map((user) => (
+            <FormControlLabel key={user.id} control={<Checkbox color="success" />} label={user.name} />
+          ))}
+        </FormGroup>
+      </DialogContent>
+      
+      <DialogActions>
+        <Button color="success" onClick={handleClose}>
+          <Typography variant="button" color="black">Call</Typography>
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CallFavouritesDialog;

src/components/home/Home.tsx

@@ -2,8 +2,22 @@ import MeetingsPanel from "./MeetingsPanel";
 import ShortCuts from "./ShortCuts";
 import Container from "@mui/material/Container";
 import Grid from "@mui/material/Grid";
+import { MeetingStatus, SidebarUserObj } from "../sidebar/SidebarUser";
+import { useState } from "react";
 
 const Home: React.FC = () => {
+
+  /* Temporary data - this is the same as what's in ProtectedRoute.tsx so it should not
+  be duplicated like this in the future (Route components were being weird when I tried
+  to pass it down from App.tsx) */
+  const [mockUsers] = useState<SidebarUserObj[]>([
+    { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY }
+  ]);
+
+
   return (
     <Container className="main-home">
       <Grid container>
@@ -11,7 +25,7 @@ const Home: React.FC = () => {
           <MeetingsPanel />
         </Grid>
         <Grid item sm={4}>
-          <ShortCuts />
+          <ShortCuts users={mockUsers}/>
         </Grid>
       </Grid>
     </Container>

src/components/home/ShortCuts.tsx

@@ -4,8 +4,27 @@ import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
 import CircleIcon from "@mui/icons-material/Circle";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
+import { SidebarUserObj } from "../sidebar/SidebarUser";
+import CallFavouritesDialog from "./CallFavouritesDialog";
+import { useState } from "react";
+
+interface Props {
+  users: SidebarUserObj[];
+}
+
+const ShortCuts: React.FC<Props> = ({ users }: Props) => {
+  const [open, setOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState(users[0]);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (value: SidebarUserObj) => {
+    setOpen(false);
+    setSelectedValue(value);
+  };
 
-const ShortCuts: React.FC = () => {
   return (
     <div className="short-cuts" >
       <Grid className="row-1" container spacing={1}>
@@ -24,10 +43,16 @@ const ShortCuts: React.FC = () => {
       </Grid>
       <Grid className="row-2" container spacing={1}>
         <Grid item sm={6}>
-          <Button className="tile">
+          <Button className="tile" onClick={handleClickOpen}>
             <PhoneEnabledIcon className="icon" />
           </Button>
+          <CallFavouritesDialog 
+            selectedValue={selectedValue}
+            open={open}
+            onClose={handleClose}
+            users={users}/>
           <label>Call Favourites</label>
+          <label>test: {selectedValue.name}</label>
         </Grid>
         <Grid item sm={6}>
           <Button className="tile">

src/components/login/Login.tsx

@@ -9,12 +9,14 @@ import zoomLogo from "../../assets/zoom.png";
 import LoginIcon from "@mui/icons-material/Login";
 import useAuth from "../../hooks/useAuth";
 
+interface LocationState {
+  from: { pathname: string };
+}
 const Login: React.FC = () => {
-  const { setAuth }: any = useAuth();
-
   const navigate = useNavigate();
-  const location: any = useLocation();
+  const location = useLocation();
-  const from = location.state?.from?.pathname || "/";
+  const state = location.state as LocationState;
+  const from = state?.from?.pathname || "/";
 
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -33,8 +35,10 @@ const Login: React.FC = () => {
 
   const handleLogin = () => {
     if (username === "" && password === "") {
-      setAuth({ username: username, isLoggedIn: true });
+      // setAuth({username: username, isLoggedIn: true});
-      navigate(from, { replace: true });
+      setAuth["username"] = username;
+      setAuth["isLoggedIn"] = true;
+      navigate(from, {replace: true});
     }
     setUsername("");
     setPassword("");
@@ -45,27 +49,8 @@ const Login: React.FC = () => {
       <Stack className="grid-container" spacing={2}>
         <img className="login-logo" src={hsbcLogo} alt="HSBC Logo" />
         {/* <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p> */}
-        <TextField
+        <TextField className="username-input" id="outlined-basic" label="Username" variant="outlined" placeholder="Username" onChange={(event) => {setUsername(event.target.value);}}/>
-          className="username-input"
+        <TextField className="password-input" id="outlined-basic" label="Password" variant="outlined" placeholder="Password" type="password" onChange={(event) => {setPassword(event.target.value);}}/>
-          id="outlined-basic"
-          label="Username"
-          variant="outlined"
-          placeholder="Username"
-          onChange={(event) => {
-            setUsername(event.target.value);
-          }}
-        />
-        <TextField
-          className="password-input"
-          id="outlined-basic"
-          label="Password"
-          variant="outlined"
-          placeholder="Password"
-          type="password"
-          onChange={(event) => {
-            setPassword(event.target.value);
-          }}
-        />
         <Stack direction="row" justifyContent="space-between" spacing={2}>
           <a className="register-btn" href="#">
             <Typography sx={{ ml: 1, mb: 1 }}>Forgot your password?</Typography>

src/context/AuthProvider.tsx

@@ -1,12 +1,17 @@
 import { createContext, useState } from "react";
 
-const AuthContext = createContext({});
+interface loginInfo {
+  username: string;
+  isLoggedIn: boolean;
+}
 
-export const AuthProvider = ({ children }: {children: any}) => {
+const AuthContext = createContext<loginInfo>({username: "", isLoggedIn: false});
-  const [auth, setAuth] = useState({});
+
+export const AuthProvider = ({ children }: {children: React.ReactNode}) => {
+  const [auth] = useState<loginInfo>({username: "", isLoggedIn: false});
 
   return (
-    <AuthContext.Provider value={{ auth, setAuth }}>
+    <AuthContext.Provider value={auth}>
       {children}
     </AuthContext.Provider>
   );

src/hooks/useAuth.tsx

@@ -1,8 +1,13 @@
 import { useContext } from "react";
 import AuthContext from "../context/AuthProvider";
 
+interface loginInfo {
+  username: string;
+  isLoggedIn: boolean;
+}
+
 const useAuth = () => {
-  return useContext(AuthContext);
+  return useContext<loginInfo>(AuthContext);
 };
 
 export default useAuth;