diff --git a/package-lock.json b/package-lock.json index 2b535d5..76b3045 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "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==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "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", diff --git a/package.json b/package.json index 21ebbf0..75a49c7 100644 --- a/package.json +++ b/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" diff --git a/src/App.tsx b/src/App.tsx index 1595743..c29dc31 100644 --- a/src/App.tsx +++ b/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"; diff --git a/src/ProtectedRoute.tsx b/src/ProtectedRoute.tsx index ad67baa..72167dd 100644 --- a/src/ProtectedRoute.tsx +++ b/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 */ diff --git a/src/components/calendar/Calendar.tsx b/src/components/calendar/Calendar.tsx deleted file mode 100644 index 300488f..0000000 --- a/src/components/calendar/Calendar.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const Calendar: React.FC = () => { - return Calendar; -}; - -export default Calendar; diff --git a/src/components/calendar/CalendarPage.tsx b/src/components/calendar/CalendarPage.tsx new file mode 100644 index 0000000..340e0fe --- /dev/null +++ b/src/components/calendar/CalendarPage.tsx @@ -0,0 +1,14 @@ +import { Toolbar } from "@mui/material"; +import UserCalendar from "./UserCalendar"; + +const CalendarPage: React.FC = () => { + + return ( + <> + + + + ); +}; + +export default CalendarPage; diff --git a/src/components/calendar/Events.tsx b/src/components/calendar/Events.tsx new file mode 100644 index 0000000..6b62d47 --- /dev/null +++ b/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), + }, +]; \ No newline at end of file diff --git a/src/components/calendar/UserCalendar.tsx b/src/components/calendar/UserCalendar.tsx new file mode 100644 index 0000000..d6a7797 --- /dev/null +++ b/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 ( + + ); +}; + +export default UserCalendar; \ No newline at end of file diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx new file mode 100644 index 0000000..61c97ee --- /dev/null +++ b/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 = ({ open, selectedValue, onClose, users }: Props) => { + const handleClose = () => { + onClose(selectedValue); + }; + + return ( + + Select who to call: + + } label="Select everyone" /> + + + + {users.map((user) => ( + } label={user.name} /> + ))} + + + + + + + + ); +}; + +export default CallFavouritesDialog; \ No newline at end of file diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index c50a231..43829b6 100644 --- a/src/components/home/Home.tsx +++ b/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([ + { 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 ( @@ -11,7 +25,7 @@ const Home: React.FC = () => { - + diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx index 61afba9..eae6245 100644 --- a/src/components/home/ShortCuts.tsx +++ b/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 = ({ 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 (
@@ -24,10 +43,16 @@ const ShortCuts: React.FC = () => { - + +