fetch calls and websocket

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",

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",

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;

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;

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> = (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>

src/components/home/Home.tsx

@@ -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>

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 };
@@ -55,10 +56,10 @@ 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;
@@ -68,18 +69,16 @@ const Login: React.FC = () => {
       console.log(response?.data);
 
       if (logedInUserId != undefined) {
-        setAuth["email"] = email;
+        setAuth.email = email;
-        setAuth["isLoggedIn"] = true;
+        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("");
   };

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<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

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;

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);
+    const response = await axios.get(`/users/${uuid}/favourites`);
-    // !!!
+    return response.data.userIds;
-    console.log(uuid);
-    return favorites;
   }
 );
 export const addFavorite = createAsyncThunk(
   "favorites/addFavorite",
-  async (uuid: string) => {
+  async (ids: { userId: string; toBeAdded: string }) => {
-    // const response = await client.post("/fakeApi/posts", initialPost);
+    await axios.post(
-    return uuid;
+      `/users/${ids.userId}/favourites`,
+      JSON.stringify({ userId: ids.toBeAdded })
+    );
+    return ids.toBeAdded;
   }
 );
 export const removeFavorite = createAsyncThunk(
   "favorites/removeFavorite",
-  async (uuid: string) => {
+  async (ids: { userId: string; toBeRemoved: string }) => {
-    // const response = await client.post("/fakeApi/posts", initialPost);
+    await axios.delete(`/users/${ids.userId}/favourites/${ids.toBeRemoved}`);
-    return uuid;
+    return ids.toBeRemoved;
   }
 );
 export const selectFavorites = (state: RootState) => state.favorites.favorites;

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<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);
+    const response = await axios.get(
-    // !!!
+      `/users/${uuid}/meetings?start=1900-01-01&end=2100-01-01`
-    console.log(uuid);
+    );
+    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,
         };
       });
     });
@@ -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;

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;
+  user: string;
-  manager: string | null;
+  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) => {

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<typeof store.getState>;