diff --git a/package-lock.json b/package-lock.json index df79fc0..9e49979 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", @@ -4634,6 +4653,7 @@ "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", + "fsevents": "~2.3.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -5897,6 +5917,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 +7497,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", @@ -7787,6 +7859,12 @@ "dev": true, "dependencies": { "imagemin": "^7.0.1", + "imagemin-gifsicle": "^7.0.0", + "imagemin-mozjpeg": "^9.0.0", + "imagemin-optipng": "^8.0.0", + "imagemin-pngquant": "^9.0.2", + "imagemin-svgo": "^9.0.0", + "imagemin-webp": "^7.0.0", "loader-utils": "^2.0.0", "object-assign": "^4.1.1", "schema-utils": "^2.7.1" @@ -10017,6 +10095,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 +11514,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 +13087,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 +13130,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 +14620,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 +15674,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 +17479,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 +18681,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 +20585,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 +21693,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 +22856,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 +22890,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/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/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/Home.tsx b/src/components/home/Home.tsx index 7fa09d6..879d2a4 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -25,9 +25,9 @@ const Home: React.FC = () => { return ( - + {/* - + */} diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx index 397c4a9..a61b4f8 100644 --- a/src/components/login/Login.tsx +++ b/src/components/login/Login.tsx @@ -12,7 +12,8 @@ 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"; +import { socketActions } from "../../redux/slices/meetingsAndUserStatusSlice"; interface LocationState { from: { pathname: string }; @@ -40,14 +41,14 @@ const Login: React.FC = () => { // setErrMsg(''); // }, [user, pwd]) - const handleLogin = async(e: React.SyntheticEvent) => { + const handleLogin = async (e: React.SyntheticEvent) => { e.preventDefault(); try { if (email === "" && password === "") { setAuth["email"] = email; setAuth["isLoggedIn"] = true; - + store.dispatch(fetchMeetings("")); store.dispatch(fetchUsers("")); store.dispatch(fetchFavorites("")); @@ -55,12 +56,12 @@ const Login: React.FC = () => { } 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); @@ -68,18 +69,16 @@ const Login: React.FC = () => { console.log(response?.data); if (logedInUserId != undefined) { - setAuth["email"] = email; - setAuth["isLoggedIn"] = true; - + setAuth.email = email; + setAuth.isLoggedIn = true; + + store.dispatch(socketActions.startConnecting()); store.dispatch(fetchMeetings(logedInUserId)); store.dispatch(fetchUsers(logedInUserId)); store.dispatch(fetchFavorites(logedInUserId)); navigate(from, { replace: true }); } - - } catch (error) { - - } + } catch (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/redux/middleware/socketMiddleware.tsx b/src/redux/middleware/socketMiddleware.tsx new file mode 100644 index 0000000..becdf30 --- /dev/null +++ b/src/redux/middleware/socketMiddleware.tsx @@ -0,0 +1,41 @@ +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)) { + 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..0fbbbe3 100644 --- a/src/redux/slices/favoritesSlice.tsx +++ b/src/redux/slices/favoritesSlice.tsx @@ -1,6 +1,6 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import { RootState } from "../store"; -import { favorites } from "../../api-bodies/MockData"; +import axios from "../../api/axios"; interface FavoritesState { favorites: string[]; @@ -32,24 +32,25 @@ 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; + const response = await axios.get(`/users/${uuid}/favourites`); + return response.data.userIds; } ); 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 }) => { + await axios.post( + `/users/${ids.userId}/favourites`, + JSON.stringify({ userId: ids.toBeAdded }) + ); + 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 }) => { + await axios.delete(`/users/${ids.userId}/favourites/${ids.toBeRemoved}`); + 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..b449d48 100644 --- a/src/redux/slices/meetingsAndUserStatusSlice.tsx +++ b/src/redux/slices/meetingsAndUserStatusSlice.tsx @@ -1,23 +1,41 @@ 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"; 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,16 +47,17 @@ 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 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] = { - uuid: uuid, + userId: uuid, inMeeting: true, - meetingID: meeting.meetingId, + meetingId: meeting.meetingId, }; }); }); @@ -51,8 +70,8 @@ export const selectMeetings = (state: RootState) => export const selectMeeting = (state: RootState, meetingID: string | null) => { return meetingID !== null ? state.meetingsAndUserStatuses.meetings.find( - (meeting) => meeting.meetingId === meetingID - ) + (meeting) => meeting.meetingId === meetingID + ) : null; }; export const selectUserUpcomingMeetings = (state: RootState, uuid: string) => { @@ -69,9 +88,9 @@ export const selectUserStatus = ( return userStatus; } else { return { - uuid: uuid, + userId: uuid, inMeeting: false, - meetingID: null, + meetingId: null, }; } }; @@ -86,12 +105,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..c082184 100644 --- a/src/redux/slices/usersSlice.tsx +++ b/src/redux/slices/usersSlice.tsx @@ -1,11 +1,12 @@ 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"; interface TeamState { - user: string | null; - manager: string | null; + user: string; + manager: string; sameManager: string[]; directReports: string[]; } @@ -17,7 +18,7 @@ interface UsersState { const initialState: UsersState = { users: {}, - team: { user: null, manager: null, sameManager: [], directReports: [] }, + team: { user: "", manager: "", sameManager: [], directReports: [] }, }; export const usersSlice = createSlice({ @@ -35,19 +36,37 @@ 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) => { + 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 }; } ); +export const selectMe = (state: RootState) => state.users.team.user; export const selectUser = ( state: RootState, uuid: string | undefined @@ -56,7 +75,9 @@ export const selectUser = ( }; 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) => { 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;