fetch calls and websocket
This commit is contained in:
Taehee Choi
parent
6260910d47
commit
8dc4fef0c4
225
package-lock.json
generated
225
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -3,7 +3,8 @@ import UserLite from "./UserLite";
|
||||
interface UserFull {
|
||||
userInfo: UserLite;
|
||||
manager: UserLite;
|
||||
directReports: UserLite[];
|
||||
managerDirectReports: UserLite[];
|
||||
userDirectReports: UserLite[];
|
||||
}
|
||||
|
||||
export default UserFull;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
interface UserStatus {
|
||||
uuid: string;
|
||||
userId: string;
|
||||
inMeeting: boolean;
|
||||
meetingID: string | null;
|
||||
meetingId: string | null;
|
||||
}
|
||||
|
||||
export default UserStatus;
|
||||
|
||||
@ -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> = (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> = (props) => {
|
||||
variant="outlined"
|
||||
color="success"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={() => dispatch(addFavorite(props.contactInfo.uuid))}
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
addFavorite({ userId: me, toBeAdded: props.contactInfo.uuid })
|
||||
)
|
||||
}
|
||||
>
|
||||
favorites
|
||||
</Button>
|
||||
@ -72,7 +78,14 @@ const UpperBody: React.FC<Props> = (props) => {
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
startIcon={<RemoveIcon />}
|
||||
onClick={() => dispatch(removeFavorite(props.contactInfo.uuid))}
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
removeFavorite({
|
||||
userId: me,
|
||||
toBeRemoved: props.contactInfo.uuid,
|
||||
})
|
||||
)
|
||||
}
|
||||
>
|
||||
favorites
|
||||
</Button>
|
||||
|
||||
@ -25,9 +25,9 @@ const Home: React.FC = () => {
|
||||
return (
|
||||
<Container className="main-home">
|
||||
<Grid container>
|
||||
<Grid item sm={8}>
|
||||
{/* <Grid item sm={8}>
|
||||
<MeetingsPanel />
|
||||
</Grid>
|
||||
</Grid> */}
|
||||
<Grid item sm={4}>
|
||||
<ShortCuts users={mockUsers} />
|
||||
</Grid>
|
||||
|
||||
@ -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("");
|
||||
};
|
||||
|
||||
@ -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<Props> = ({ user, status }: Props) => {
|
||||
const navigate = useNavigate();
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(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<Props> = ({ user, status }: Props) => {
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleClose();
|
||||
dispatch(removeFavorite(user.uuid));
|
||||
dispatch(removeFavorite({ userId: me, toBeRemoved: user.uuid }));
|
||||
}}
|
||||
>
|
||||
Remove from Favorites
|
||||
@ -65,7 +67,7 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleClose();
|
||||
dispatch(addFavorite(user.uuid));
|
||||
dispatch(addFavorite({ userId: me, toBeAdded: user.uuid }));
|
||||
}}
|
||||
>
|
||||
Add to Favorites
|
||||
|
||||
41
src/redux/middleware/socketMiddleware.tsx
Normal file
41
src/redux/middleware/socketMiddleware.tsx
Normal file
@ -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;
|
||||
@ -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;
|
||||
|
||||
@ -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<string, UserStatus>;
|
||||
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<string, UserStatus> = {};
|
||||
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;
|
||||
|
||||
@ -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<string, UserLite> = {};
|
||||
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) => {
|
||||
|
||||
@ -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<typeof store.getState>;
|
||||
|
||||
Reference in New Issue
Block a user