diff --git a/package-lock.json b/package-lock.json index df79fc0..50b7abe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,8 @@ "react-big-calendar": "^0.39.3", "react-dom": "^17.0.2", "react-redux": "^7.2.6", - "react-router-dom": "^6.2.1" + "react-router-dom": "^6.2.1", + "socket.io-client": "^4.4.1" }, "devDependencies": { "@svgr/webpack": "^5.5.0", @@ -2255,6 +2256,19 @@ "node": ">=4" } }, + "node_modules/@socket.io/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==", + "engines": { + "node": ">= 0.6.0" + } + }, + "node_modules/@socket.io/component-emitter": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz", + "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q==" + }, "node_modules/@svgr/babel-plugin-add-jsx-attribute": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz", @@ -3604,6 +3618,11 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/backo2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -5897,6 +5916,53 @@ "once": "^1.4.0" } }, + "node_modules/engine.io-client": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz", + "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==", + "dependencies": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.0.0", + "has-cors": "1.1.0", + "parseqs": "0.0.6", + "parseuri": "0.0.6", + "ws": "~8.2.3", + "xmlhttprequest-ssl": "~2.0.0", + "yeast": "0.1.2" + } + }, + "node_modules/engine.io-client/node_modules/ws": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz", + "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==", + "dependencies": { + "@socket.io/base64-arraybuffer": "~1.0.2" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/enhanced-resolve": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz", @@ -7430,6 +7496,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-cors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" + }, "node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -10017,6 +10088,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parseqs": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz", + "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==" + }, + "node_modules/parseuri": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz", + "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==" + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -11426,6 +11507,34 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/socket.io-client": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz", + "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==", + "dependencies": { + "@socket.io/component-emitter": "~3.0.0", + "backo2": "~1.0.2", + "debug": "~4.3.2", + "engine.io-client": "~6.1.1", + "parseuri": "0.0.6", + "socket.io-parser": "~4.1.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz", + "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==", + "dependencies": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -12971,6 +13080,14 @@ } } }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -13006,6 +13123,11 @@ "fd-slicer": "~1.1.0" } }, + "node_modules/yeast": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" + }, "node_modules/yn": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", @@ -14491,6 +14613,16 @@ "dev": true, "optional": true }, + "@socket.io/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==" + }, + "@socket.io/component-emitter": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz", + "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q==" + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz", @@ -15535,6 +15667,11 @@ "@babel/helper-define-polyfill-provider": "^0.3.1" } }, + "backo2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -17335,6 +17472,38 @@ "once": "^1.4.0" } }, + "engine.io-client": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz", + "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==", + "requires": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.0.0", + "has-cors": "1.1.0", + "parseqs": "0.0.6", + "parseuri": "0.0.6", + "ws": "~8.2.3", + "xmlhttprequest-ssl": "~2.0.0", + "yeast": "0.1.2" + }, + "dependencies": { + "ws": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "requires": {} + } + } + }, + "engine.io-parser": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz", + "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==", + "requires": { + "@socket.io/base64-arraybuffer": "~1.0.2" + } + }, "enhanced-resolve": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz", @@ -18505,6 +18674,11 @@ "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==", "dev": true }, + "has-cors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" + }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -20404,6 +20578,16 @@ "lines-and-columns": "^1.1.6" } }, + "parseqs": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz", + "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==" + }, + "parseuri": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz", + "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==" + }, "parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -21502,6 +21686,28 @@ } } }, + "socket.io-client": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz", + "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==", + "requires": { + "@socket.io/component-emitter": "~3.0.0", + "backo2": "~1.0.2", + "debug": "~4.3.2", + "engine.io-client": "~6.1.1", + "parseuri": "0.0.6", + "socket.io-parser": "~4.1.1" + } + }, + "socket.io-parser": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz", + "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==", + "requires": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1" + } + }, "sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -22643,6 +22849,11 @@ "dev": true, "requires": {} }, + "xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==" + }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -22672,6 +22883,11 @@ "fd-slicer": "~1.1.0" } }, + "yeast": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" + }, "yn": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", diff --git a/package.json b/package.json index c1b049d..99ff8cc 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "react-big-calendar": "^0.39.3", "react-dom": "^17.0.2", "react-redux": "^7.2.6", - "react-router-dom": "^6.2.1" + "react-router-dom": "^6.2.1", + "socket.io-client": "^4.4.1" }, "scripts": { "start-local": "webpack serve --config webpack.config.ts", diff --git a/src/ProtectedRoute.tsx b/src/ProtectedRoute.tsx index 55e2d26..5d8d12f 100644 --- a/src/ProtectedRoute.tsx +++ b/src/ProtectedRoute.tsx @@ -3,12 +3,21 @@ import useAuth from "./hooks/useAuth"; import Navbar from "./components/navbar/Navbar"; import Sidebar from "./components/sidebar/Sidebar"; import { Box } from "@mui/material"; +import { store } from "./redux/store"; +import { fetchFavorites } from "./redux/slices/favoritesSlice"; +import { fetchMeetings } from "./redux/slices/meetingsAndUserStatusSlice"; +import { fetchUsers } from "./redux/slices/usersSlice"; const ProtectedRoute = () => { const auth = useAuth(); const location = useLocation(); /* Temporary data */ + if (auth?.isLoggedIn != undefined && auth?.isLoggedIn == true) { + store.dispatch(fetchMeetings(auth?.uuid)); + store.dispatch(fetchUsers(auth?.uuid)); + store.dispatch(fetchFavorites(auth?.uuid)); + } return auth?.isLoggedIn ? ( <> diff --git a/src/api-bodies/MockData.tsx b/src/api-bodies/MockData.tsx index e85a51e..6c114b3 100644 --- a/src/api-bodies/MockData.tsx +++ b/src/api-bodies/MockData.tsx @@ -1,6 +1,6 @@ const userLites = [ { - uuid: "0", + uuid: "", emailAddress: "cth0604@gmail.com", name: "Taehee Choi", role: "Front-end Dev", @@ -45,9 +45,9 @@ const userLites = [ const meetings = [ { - meetingId: "0", + meetingId: "", liveParticipantIds: [], - registrantIds: ["0", "1", "2", "3", "4", "5", "6"], + registrantIds: ["", "1", "2", "3", "4", "5", "6"], start: "2022-03-13T17:00:00", duration: 15, timezone: "", @@ -57,7 +57,7 @@ const meetings = [ { meetingId: "1", liveParticipantIds: [], - registrantIds: ["0", "2", "4"], + registrantIds: ["", "2", "4"], start: "2022-03-16T17:30:00", duration: 30, timezone: "", @@ -74,10 +74,90 @@ const meetings = [ joinUrl: "", topic: "Back-end Meeting", }, + { + meetingId: "3", + liveParticipantIds: [], + registrantIds: ["", "1"], + start: "2022-03-10T07:27:27", + duration: 727, + timezone: "", + joinUrl: "", + topic: "WHEN YOU", + }, + { + meetingId: "4", + liveParticipantIds: [], + registrantIds: ["", "2", "3"], + start: "2022-03-10T12:30:00", + duration: 120, + timezone: "", + joinUrl: "", + topic: "Bathroom Break", + }, + { + meetingId: "5", + liveParticipantIds: [""], + registrantIds: [""], + start: "2022-03-24T23:11:11", + duration: 11, + timezone: "", + joinUrl: "", + topic: "Drink Coffee", + }, + { + meetingId: "6", + liveParticipantIds: ["", "1"], + registrantIds: ["", "1", "2", "3", "4", "5"], + start: "2022-03-25T09:00:00", + duration: 360, + timezone: "", + joinUrl: "", + topic: "Get grilled by Jerry", + }, + { + meetingId: "7", + liveParticipantIds: [], + registrantIds: ["", "5"], + start: "2022-03-25T15:00:00", + duration: 150, + timezone: "", + joinUrl: "", + topic: "Get grilled by Arthur", + }, + { + meetingId: "8", + liveParticipantIds: ["2"], + registrantIds: ["", "5", "2", "3"], + start: "2022-03-25T17:45:00", + duration: 60, + timezone: "", + joinUrl: "", + topic: "Jerry comes back for round 2", + }, + { + meetingId: "9", + liveParticipantIds: ["2", "5"], + registrantIds: ["", "4"], + start: "2022-03-25T18:15:30", + duration: 75, + timezone: "", + joinUrl: "", + topic: "Tag team!", + }, + { + meetingId: "10", + liveParticipantIds: [], + registrantIds: ["", "1", "2", "3", "4", "5", "6"], + start: "2022-04-04T18:30:00", + duration: 90, + timezone: "", + joinUrl: "", + topic: "MVP Deadline", + }, ]; const team = { - user: "0", + user: "", manager: "1", sameManager: ["2", "3", "4", "5", "6"], directReports: [], diff --git a/src/api-bodies/UserFull.tsx b/src/api-bodies/UserFull.tsx index c67dbc7..edd0d7b 100644 --- a/src/api-bodies/UserFull.tsx +++ b/src/api-bodies/UserFull.tsx @@ -3,7 +3,8 @@ import UserLite from "./UserLite"; interface UserFull { userInfo: UserLite; manager: UserLite; - directReports: UserLite[]; + managerDirectReports: UserLite[]; + userDirectReports: UserLite[]; } export default UserFull; diff --git a/src/api-bodies/UserStatus.tsx b/src/api-bodies/UserStatus.tsx index ddb4d18..d385aa5 100644 --- a/src/api-bodies/UserStatus.tsx +++ b/src/api-bodies/UserStatus.tsx @@ -1,7 +1,7 @@ interface UserStatus { - uuid: string; + userId: string; inMeeting: boolean; - meetingID: string | null; + meetingId: string | null; } export default UserStatus; diff --git a/src/api/axios.tsx b/src/api/axios.tsx index 0c91aaf..eda4bef 100644 --- a/src/api/axios.tsx +++ b/src/api/axios.tsx @@ -1,5 +1,5 @@ import axios from "axios"; export default axios.create({ - baseURL: "https://g17vmhsvwi.execute-api.us-west-2.amazonaws.com/Prod" + baseURL: "https://g17vmhsvwi.execute-api.us-west-2.amazonaws.com/Prod" }); \ No newline at end of file diff --git a/src/components/calendar/CalendarPage.tsx b/src/components/calendar/CalendarPage.tsx index 340e0fe..4e78494 100644 --- a/src/components/calendar/CalendarPage.tsx +++ b/src/components/calendar/CalendarPage.tsx @@ -1,12 +1,154 @@ -import { Toolbar } from "@mui/material"; -import UserCalendar from "./UserCalendar"; +import { Calendar, momentLocalizer, Views } from "react-big-calendar"; +import moment from "moment"; + +import "react-big-calendar/lib/css/react-big-calendar.css"; +import { + Divider, + FormControl, + InputLabel, + MenuItem, + Select, + SelectChangeEvent, + Toolbar, + Typography, +} from "@mui/material"; +import { selectMeetings } from "../../redux/slices/meetingsAndUserStatusSlice"; +import { useAppDispatch, useAppSelector } from "../../redux/hooks"; +import { + selectMe, + selectTeam, + selectUser, + selectUsers, +} from "../../redux/slices/usersSlice"; +import { open } from "../../redux/slices/meetingDetailsOpenSlice"; +import DetailedMeeting from "../../api-bodies/DetailedMeeting"; +import { useState } from "react"; +import UserLite from "../../api-bodies/UserLite"; + +// TODO: match the styles and themes + +// A superset of DetailedMeeting; contains fields required for the calendar to work +interface CalendarEvent { + meetingId: string; + liveParticipantIds: string[]; + registrantIds: string[]; + startIso: string; // names overlap here; this is equivalent to "start" in DetailedMeeting + duration: number; + timezone: string; + joinUrl: string; + topic: string; + title: string; + start: Date; + end: Date; +} + +enum CalendarTaskView { + ViewAll = "VIEWALL", +} const CalendarPage: React.FC = () => { + const dispatch = useAppDispatch(); + + const currentUserUuid: string = useAppSelector(selectMe); + const currentUser: UserLite | undefined = useAppSelector((state) => + selectUser(state, currentUserUuid) + ); + const teamUuids: string[] = useAppSelector(selectTeam); + const team: UserLite[] = useAppSelector((state) => + selectUsers(state, teamUuids) + ); + const meetings: CalendarEvent[] = useAppSelector((state) => + selectMeetings(state) + ).map((m) => ({ + meetingId: m.meetingId, + liveParticipantIds: m.liveParticipantIds, + registrantIds: m.registrantIds, + startIso: m.start, + duration: m.duration, + timezone: m.timezone, + joinUrl: m.joinUrl, + topic: m.topic, + // fields needed by calendar + title: m.topic, + start: new Date(Date.parse(m.start)), // Turns the ISO String into a date object + end: new Date(Date.parse(m.start) + m.duration * 60000), // result of Date.parse() is milliseconds, and m.duration is given in minutes + })); + + const [selectedUserUuid, setSelectedUserUuid] = useState(currentUserUuid); + + // turns calendar event back into DetailedMeeting then opens meeting view + const handleSelectEvent = (event: CalendarEvent) => { + const meeting: DetailedMeeting = { + meetingId: event.meetingId, + liveParticipantIds: event.liveParticipantIds, + registrantIds: event.registrantIds, + start: event.startIso, + duration: event.duration, + timezone: event.timezone, + joinUrl: event.joinUrl, + topic: event.topic, + }; + dispatch(open(meeting)); + }; + + // dropdown selection event + const handleUserChange = (event: SelectChangeEvent) => { + setSelectedUserUuid(event.target.value); + }; + + // filter the meetings based on the uuid + const getUserMeetings = (uuid: string): CalendarEvent[] => { + if (uuid == CalendarTaskView.ViewAll) { + // "View all team member meetings" option + return meetings; + } else { + return meetings.filter((meeting) => meeting.registrantIds.includes(uuid)); + } + }; return ( <> - + + + + User + + + + + + + ); }; diff --git a/src/components/calendar/Events.tsx b/src/components/calendar/Events.tsx deleted file mode 100644 index 6b62d47..0000000 --- a/src/components/calendar/Events.tsx +++ /dev/null @@ -1,185 +0,0 @@ -/* -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 deleted file mode 100644 index d6a7797..0000000 --- a/src/components/calendar/UserCalendar.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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/contacts/contacts-components/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx index 47cf766..bf63195 100644 --- a/src/components/contacts/contacts-components/Sidebar.tsx +++ b/src/components/contacts/contacts-components/Sidebar.tsx @@ -27,13 +27,13 @@ const Sidebar: React.FC = () => { const favorites = useAppSelector((state) => selectUsers(state, favoritesUuids) ); - let filteredFavorites = favorites.filter((favorite) => + const filteredFavorites = favorites.filter((favorite) => favorite.name.toLowerCase().includes(inputText.toLowerCase()) ); const teamUuids = useAppSelector(selectTeam); const team = useAppSelector((state) => selectUsers(state, teamUuids)); - let filteredTeam = team.filter((member) => + const filteredTeam = team.filter((member) => member.name.toLowerCase().includes(inputText.toLowerCase()) ); diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx index 64121a5..10b4560 100644 --- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx +++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx @@ -18,6 +18,7 @@ import { } from "../../../../redux/slices/favoritesSlice"; import RemoveIcon from "@mui/icons-material/Remove"; import { MeetingStatus } from "../../../../utils"; +import { selectMe } from "../../../../redux/slices/usersSlice"; interface Props { contactInfo: UserLite; @@ -28,9 +29,10 @@ const UpperBody: React.FC = (props) => { const userStatus: UserStatus = useAppSelector((state) => selectUserStatus(state, props.contactInfo.uuid) ); + const me = useAppSelector(selectMe); const favoritesUuids = useAppSelector(selectFavorites); const detailedMeeting = useAppSelector((state) => - selectMeeting(state, userStatus.meetingID) + selectMeeting(state, userStatus.meetingId) ); const meetingStatus: MeetingStatus = userStatus && userStatus.inMeeting @@ -63,7 +65,11 @@ const UpperBody: React.FC = (props) => { variant="outlined" color="success" startIcon={} - onClick={() => dispatch(addFavorite(props.contactInfo.uuid))} + onClick={() => + dispatch( + addFavorite({ userId: me, toBeAdded: props.contactInfo.uuid }) + ) + } > favorites @@ -72,7 +78,14 @@ const UpperBody: React.FC = (props) => { variant="outlined" color="secondary" startIcon={} - onClick={() => dispatch(removeFavorite(props.contactInfo.uuid))} + onClick={() => + dispatch( + removeFavorite({ + userId: me, + toBeRemoved: props.contactInfo.uuid, + }) + ) + } > favorites diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx index 63ee88a..58d12c1 100644 --- a/src/components/home/CallFavouritesDialog.tsx +++ b/src/components/home/CallFavouritesDialog.tsx @@ -33,6 +33,7 @@ const CallFavouritesDialog: React.FC = ({ const handleClose = () => { onClose(selectedValue); }; + console.log(users); const [group, setGroup] = useState("Favorites"); const [inputText, setInputText] = useState(""); diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx index a6f8d45..c309745 100644 --- a/src/components/home/MeetingsPanel.tsx +++ b/src/components/home/MeetingsPanel.tsx @@ -9,7 +9,6 @@ import { formatTimeFromDate } from "../../utils"; import UserLite from "../../api-bodies/UserLite"; const MeetingsPanel: React.FC = () => { - const meetings = useAppSelector(selectMeetings); const uuids: string[] = []; meetings.forEach((meeting) => { @@ -23,11 +22,26 @@ const MeetingsPanel: React.FC = () => { const participants = useAppSelector((state) => selectUsers(state,uuids) ); + + // const participants: (UserLite | undefined)[] = []; + // uuids.forEach((uuid) => { + // const userLite = useAppSelector((state) => + // selectUser(state,uuid) + // ); + // participants.push(userLite); + // }); + const [currentDate, setCurrentDate] = useState(new Date()); + + useEffect(() => { + setInterval(() => setCurrentDate(new Date()), 1000); + }, []); return (
- Meetings in Progress + + Meetings in Progress +
@@ -42,10 +56,6 @@ const MeetingsPanel: React.FC = () => { const startDatemil = startDate.getTime(); const endDatemil = startDatemil + meeting.duration*60000; const endDate = new Date(endDatemil); - const [currentDate, setCurrentDate] = useState(new Date()); - useEffect(() => { - setInterval(() => setCurrentDate(new Date()), 1000); - }, []); const currentDatemil = currentDate.getTime(); @@ -63,5 +73,5 @@ const MeetingsPanel: React.FC = () => {
); }; - -export default MeetingsPanel; \ No newline at end of file + +export default MeetingsPanel; diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx index 493ab33..36bfd79 100644 --- a/src/components/login/Login.tsx +++ b/src/components/login/Login.tsx @@ -8,11 +8,7 @@ import hsbcLogo from "../../assets/logo-png.png"; import zoomLogo from "../../assets/zoom.png"; import LoginIcon from "@mui/icons-material/Login"; import useAuth from "../../hooks/useAuth"; -import { store } from "../../redux/store"; -import { fetchFavorites } from "../../redux/slices/favoritesSlice"; -import { fetchMeetings } from "../../redux/slices/meetingsAndUserStatusSlice"; -import { fetchUsers } from "../../redux/slices/usersSlice"; -import axios from "../../api/axios" +import axios from "../../api/axios"; interface LocationState { from: { pathname: string }; @@ -27,7 +23,6 @@ const Login: React.FC = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - const [logedInUser, setLogedInUser] = useState(""); // const [errMsg, setErrMsg] = useState(''); // const userRef = useRef(); @@ -41,28 +36,23 @@ const Login: React.FC = () => { // setErrMsg(''); // }, [user, pwd]) - store.dispatch(fetchMeetings(logedInUser)); - store.dispatch(fetchUsers(logedInUser)); - store.dispatch(fetchFavorites(logedInUser)); - const handleLogin = async(e: React.SyntheticEvent) => { e.preventDefault(); try { if (email === "" && password === "") { - setAuth["email"] = email; + setAuth["uuid"] = ""; setAuth["isLoggedIn"] = true; - navigate(from, { replace: true }); } const response = await axios.post( - '/login', + "/login", JSON.stringify({ email: email, password: password }) // { headers: { 'Content-Type': 'application/json' } } - ) + ); // const response = { data: { userid: "123456" }}; // delete later - + const logedInUserId = response?.data?.userId; console.log(email); @@ -70,15 +60,12 @@ const Login: React.FC = () => { console.log(response?.data); if (logedInUserId != undefined) { - setAuth["email"] = email; + setAuth["uuid"] = logedInUserId; setAuth["isLoggedIn"] = true; - - setLogedInUser(logedInUserId); navigate(from, { replace: true }); } - } catch (error) { - + console.log(error); } setEmail(email); setPassword(""); diff --git a/src/components/sidebar/SettingsButton.tsx b/src/components/sidebar/SettingsButton.tsx index 8d970ac..2621a30 100644 --- a/src/components/sidebar/SettingsButton.tsx +++ b/src/components/sidebar/SettingsButton.tsx @@ -12,6 +12,7 @@ import { import { open as openMeetingDetails } from "../../redux/slices/meetingDetailsOpenSlice"; import { selectMeeting } from "../../redux/slices/meetingsAndUserStatusSlice"; import { useNavigate } from "react-router-dom"; +import { selectMe } from "../../redux/slices/usersSlice"; interface Props { user: UserLite; @@ -21,9 +22,10 @@ interface Props { const SettingsButton: React.FC = ({ user, status }: Props) => { const navigate = useNavigate(); const [anchorEl, setAnchorEl] = useState(null); + const me = useAppSelector(selectMe); const favoritesUuids = useAppSelector(selectFavorites); const meeting = useAppSelector((state) => - selectMeeting(state, status.meetingID) + selectMeeting(state, status.meetingId) ); const dispatch = useAppDispatch(); const open = Boolean(anchorEl); @@ -56,7 +58,7 @@ const SettingsButton: React.FC = ({ user, status }: Props) => { { handleClose(); - dispatch(removeFavorite(user.uuid)); + dispatch(removeFavorite({ userId: me, toBeRemoved: user.uuid })); }} > Remove from Favorites @@ -65,7 +67,7 @@ const SettingsButton: React.FC = ({ user, status }: Props) => { { handleClose(); - dispatch(addFavorite(user.uuid)); + dispatch(addFavorite({ userId: me, toBeAdded: user.uuid })); }} > Add to Favorites diff --git a/src/context/AuthProvider.tsx b/src/context/AuthProvider.tsx index 6accd02..793946c 100644 --- a/src/context/AuthProvider.tsx +++ b/src/context/AuthProvider.tsx @@ -1,17 +1,17 @@ import { createContext, useState } from "react"; interface loginInfo { - email: string; + uuid: string; isLoggedIn: boolean; } const AuthContext = createContext({ - email: "", + uuid: "", isLoggedIn: false, }); export const AuthProvider = ({ children }: { children: React.ReactNode }) => { - const [auth] = useState({ email: "", isLoggedIn: false }); + const [auth] = useState({ uuid: "", isLoggedIn: false }); return {children}; }; diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx index af7ffe0..17bf4f8 100644 --- a/src/hooks/useAuth.tsx +++ b/src/hooks/useAuth.tsx @@ -2,7 +2,7 @@ import { useContext } from "react"; import AuthContext from "../context/AuthProvider"; interface loginInfo { - email: string; + uuid: string; isLoggedIn: boolean; } diff --git a/src/redux/middleware/socketMiddleware.tsx b/src/redux/middleware/socketMiddleware.tsx new file mode 100644 index 0000000..4f47d2f --- /dev/null +++ b/src/redux/middleware/socketMiddleware.tsx @@ -0,0 +1,44 @@ +import { Middleware } from "redux"; +import { io, Socket } from "socket.io-client"; +import DetailedMeeting from "../../api-bodies/DetailedMeeting"; +import { socketActions } from "../slices/meetingsAndUserStatusSlice"; + +const socketMiddleware: Middleware = (store) => { + let socket: Socket; + + return (next) => (action) => { + const isConnectionEstablished = + socket && store.getState().meetingsAndUserStatuses.isConnected; + + if ( + socketActions.startConnecting.match(action) && + !isConnectionEstablished + ) { + console.log("startConnecting called"); + socket = io("wss://uo5wdcbn6l.execute-api.us-west-2.amazonaws.com/Prod/"); + + socket.on("Connect", () => { + console.log("connected!!!"); + store.dispatch(socketActions.connectionEstablished()); + }); + + socket.on("MeetingCreated", (meeting: DetailedMeeting) => { + store.dispatch(socketActions.meetingCreated(meeting)); + }); + + socket.on( + "UserStatusChange", + (statusChange: { + userId: string; + inMeeting: boolean; + meetingId: string; + }) => { + store.dispatch(socketActions.userStatusChanged(statusChange)); + } + ); + } + next(action); + }; +}; + +export default socketMiddleware; diff --git a/src/redux/slices/favoritesSlice.tsx b/src/redux/slices/favoritesSlice.tsx index 9d16211..4f9d151 100644 --- a/src/redux/slices/favoritesSlice.tsx +++ b/src/redux/slices/favoritesSlice.tsx @@ -1,5 +1,6 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import { RootState } from "../store"; +import axios from "../../api/axios"; import { favorites } from "../../api-bodies/MockData"; interface FavoritesState { @@ -32,24 +33,37 @@ export const favoritesSlice = createSlice({ export const fetchFavorites = createAsyncThunk( "favorites/fetchFavorites", async (uuid: string) => { - // const response = await client.post("/fakeApi/posts", initialPost); - // !!! - console.log(uuid); - return favorites; + if (uuid) { + const response = await axios.get(`/users/${uuid}/favourites`); + return response.data.userIds; + } else { + return favorites; + } } ); export const addFavorite = createAsyncThunk( "favorites/addFavorite", - async (uuid: string) => { - // const response = await client.post("/fakeApi/posts", initialPost); - return uuid; + async (ids: { userId: string; toBeAdded: string }) => { + if (ids.userId) { + await axios.post( + `/users/${ids.userId}/favourites`, + JSON.stringify({ userId: ids.toBeAdded }) + ); + return ids.toBeAdded; + } else { + return ids.toBeAdded; + } } ); export const removeFavorite = createAsyncThunk( "favorites/removeFavorite", - async (uuid: string) => { - // const response = await client.post("/fakeApi/posts", initialPost); - return uuid; + async (ids: { userId: string; toBeRemoved: string }) => { + if (ids.userId) { + await axios.delete(`/users/${ids.userId}/favourites/${ids.toBeRemoved}`); + return ids.toBeRemoved; + } else { + return ids.toBeRemoved; + } } ); export const selectFavorites = (state: RootState) => state.favorites.favorites; diff --git a/src/redux/slices/meetingsAndUserStatusSlice.tsx b/src/redux/slices/meetingsAndUserStatusSlice.tsx index 1298b62..1b7a411 100644 --- a/src/redux/slices/meetingsAndUserStatusSlice.tsx +++ b/src/redux/slices/meetingsAndUserStatusSlice.tsx @@ -1,23 +1,42 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import DetailedMeeting from "../../api-bodies/DetailedMeeting"; import { RootState } from "../store"; -import { meetings } from "../../api-bodies/MockData"; import UserStatus from "../../api-bodies/UserStatus"; +import axios from "../../api/axios"; +import { meetings } from "../../api-bodies/MockData"; interface MeetingsAndUserStatusState { meetings: DetailedMeeting[]; userStatuses: Record; + isConnecting: boolean; + isConnected: boolean; } const initialState: MeetingsAndUserStatusState = { meetings: [], userStatuses: {}, + isConnecting: false, + isConnected: false, }; export const meetingsAndUserStatusSlice = createSlice({ name: "meetingsAndUserStatus", initialState, - reducers: {}, + reducers: { + startConnecting: (state) => { + state.isConnecting = true; + }, + connectionEstablished: (state) => { + state.isConnecting = true; + state.isConnected = true; + }, + meetingCreated: (state, action) => { + state.meetings.push(action.payload.meeting); + }, + userStatusChanged: (state, action) => { + state.userStatuses[action.payload.uuid] = action.payload; + }, + }, extraReducers(builder) { builder.addCase(fetchMeetings.fulfilled, (state, action) => { state.meetings = action.payload.meetings; @@ -29,20 +48,35 @@ export const meetingsAndUserStatusSlice = createSlice({ export const fetchMeetings = createAsyncThunk( "meetingsAndUserStatus/fetchMeetings", async (uuid: string) => { - // const response = await client.post("/fakeApi/posts", initialPost); - // !!! - console.log(uuid); - const userStatuses: Record = {}; - meetings.forEach((meeting) => { - meeting.liveParticipantIds.forEach((uuid) => { - userStatuses[uuid] = { - uuid: uuid, - inMeeting: true, - meetingID: meeting.meetingId, - }; + if (uuid) { + const response = await axios.get( + `/users/${uuid}/meetings?start=1900-01-01&end=2100-01-01` + ); + const meetings: DetailedMeeting[] = response.data.meetings; + const userStatuses: Record = {}; + meetings.forEach((meeting) => { + meeting.liveParticipantIds.forEach((uuid) => { + userStatuses[uuid] = { + userId: uuid, + inMeeting: true, + meetingId: meeting.meetingId, + }; + }); }); - }); - return { userStatuses: userStatuses, meetings: meetings }; + return { userStatuses: userStatuses, meetings: meetings }; + } else { + const userStatuses: Record = {}; + meetings.forEach((meeting) => { + meeting.liveParticipantIds.forEach((uuid) => { + userStatuses[uuid] = { + userId: uuid, + inMeeting: true, + meetingId: meeting.meetingId, + }; + }); + }); + return { userStatuses: userStatuses, meetings: meetings }; + } } ); @@ -69,9 +103,9 @@ export const selectUserStatus = ( return userStatus; } else { return { - uuid: uuid, + userId: uuid, inMeeting: false, - meetingID: null, + meetingId: null, }; } }; @@ -86,12 +120,13 @@ export const selectUserStatuses = ( userStatuses.push(userStatus); } else { userStatuses.push({ - uuid: uuid, + userId: uuid, inMeeting: false, - meetingID: null, + meetingId: null, }); } }); return userStatuses; }; export default meetingsAndUserStatusSlice.reducer; +export const socketActions = meetingsAndUserStatusSlice.actions; diff --git a/src/redux/slices/usersSlice.tsx b/src/redux/slices/usersSlice.tsx index a1b68ac..8539c5f 100644 --- a/src/redux/slices/usersSlice.tsx +++ b/src/redux/slices/usersSlice.tsx @@ -1,11 +1,13 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import { RootState } from "../store"; -import { userLites, team } from "../../api-bodies/MockData"; import UserLite from "../../api-bodies/UserLite"; +import axios from "../../api/axios"; +import UserFull from "../../api-bodies/UserFull"; +import { userLites, team } from "../../api-bodies/MockData"; interface TeamState { - user: string | null; - manager: string | null; + user: string; + manager: string; sameManager: string[]; directReports: string[]; } @@ -17,7 +19,7 @@ interface UsersState { const initialState: UsersState = { users: {}, - team: { user: null, manager: null, sameManager: [], directReports: [] }, + team: { user: "", manager: "", sameManager: [], directReports: [] }, }; export const usersSlice = createSlice({ @@ -35,35 +37,64 @@ export const usersSlice = createSlice({ export const fetchUsers = createAsyncThunk( "users/fetchUsers", async (uuid: string) => { - // fetch userfull - // fetch managerfull - // now you have yourself, co-workers, manager, and direct reports (your team basically!) - // call setTeam reducer in teamSlice - console.log(uuid); - const users: Record = {}; - userLites.forEach((userLite) => { - users[userLite.uuid] = userLite; - }); - return { users: users, team: team }; + if (uuid) { + const users: Record = {}; + const team: TeamState = { + user: "", + manager: "", + sameManager: [], + directReports: [], + }; + // fetch userfull + const userResp = await axios.get(`/users/${uuid}`); + const user: UserFull = userResp.data.user; + + users[user.userInfo.uuid] = user.userInfo; + users[user.manager.uuid] = user.manager; + + team.user = user.userInfo.uuid; + team.manager = user.manager.uuid; + + user.userDirectReports.forEach((userLite) => { + users[userLite.uuid] = userLite; + team.directReports.push(userLite.uuid); + }); + user.managerDirectReports.forEach((userLite) => { + users[userLite.uuid] = userLite; + team.sameManager.push(userLite.uuid); + }); + console.log(users); + return { users: users, team: team }; + } else { + const users: Record = {}; + userLites.forEach((userLite) => { + users[userLite.uuid] = userLite; + }); + return { users: users, team: team }; + } } ); +export const selectMe = (state: RootState) => state.users.team.user; export const selectUser = ( state: RootState, uuid: string | undefined ): UserLite | undefined => { - return uuid ? state.users.users[uuid] : undefined; + return uuid !== undefined ? state.users.users[uuid] : undefined; }; export const selectUsers = (state: RootState, uuids: string[]): UserLite[] => { const users: UserLite[] = []; - uuids.forEach((uuid) => users.push(state.users.users[uuid])); + uuids.forEach((uuid) => { + if (state.users.users[uuid]) users.push(state.users.users[uuid]); + }); return users; }; export const selectTeam = (state: RootState) => { const team: string[] = []; - if (state.users.team.manager !== null) team.push(state.users.team.manager); + if (state.users.team.manager) team.push(state.users.team.manager); state.users.team.sameManager.forEach((u) => team.push(u)); state.users.team.directReports.forEach((u) => team.push(u)); return team; }; + export default usersSlice.reducer; diff --git a/src/redux/store.tsx b/src/redux/store.tsx index 0d829d6..287a169 100644 --- a/src/redux/store.tsx +++ b/src/redux/store.tsx @@ -3,6 +3,7 @@ import meetingDetailsOpenReducer from "./slices/meetingDetailsOpenSlice"; import favoritesReducer from "./slices/favoritesSlice"; import meetingsAndUserStatusReducer from "./slices/meetingsAndUserStatusSlice"; import usersReducer from "./slices/usersSlice"; +import socketMiddleware from "./middleware/socketMiddleware"; export const store = configureStore({ reducer: { @@ -11,6 +12,9 @@ export const store = configureStore({ meetingsAndUserStatuses: meetingsAndUserStatusReducer, users: usersReducer, }, + middleware: (getDefaultMiddleware) => { + return getDefaultMiddleware().concat([socketMiddleware]); + }, }); export type RootState = ReturnType; diff --git a/src/utils.tsx b/src/utils.tsx index 6dbb3d5..3e2ad36 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -17,7 +17,8 @@ const getStatusColor = (ms: MeetingStatus): string => { const formatTimeFromDate = (date: Date): string => { let hour = date.getHours(); let ampm = ""; - let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : "" + date.getMinutes(); + const minutes = + date.getMinutes() < 10 ? "0" + date.getMinutes() : "" + date.getMinutes(); if (hour < 12) { ampm = "am"; } else {