diff --git a/package-lock.json b/package-lock.json index 7bd0dd9..76b3045 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,11 +12,13 @@ "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.4.2", "@mui/material": "^5.4.3", + "@reduxjs/toolkit": "^1.8.0", "@types/react-big-calendar": "^0.36.2", "moment": "^2.29.1", "react": "^17.0.2", "react-big-calendar": "^0.39.3", "react-dom": "^17.0.2", + "react-redux": "^7.2.6", "react-router-dom": "^6.2.1" }, "devDependencies": { @@ -2208,6 +2210,27 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@reduxjs/toolkit": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.0.tgz", + "integrity": "sha512-cdfHWfcvLyhBUDicoFwG1u32JqvwKDxLxDd7zSmSoFw/RhYLOygIRtmaMjPRUUHmVmmAGAvquLLsKKU/677kSQ==", + "dependencies": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || 18.0.0-beta", + "react-redux": "^7.2.1 || ^8.0.0-beta" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } "node_modules/@restart/hooks": { "version": "0.3.27", "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz", @@ -2574,6 +2597,15 @@ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", "dev": true }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -2677,6 +2709,17 @@ "@types/react": "*" } }, + "node_modules/@types/react-redux": { + "version": "7.1.23", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.23.tgz", + "integrity": "sha512-D02o3FPfqQlfu2WeEYwh3x2otYd2Dk1o8wAfsA0B1C2AJEFxE663Ozu7JzuWbznGgW248NaOF6wsqCGNq9d3qw==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "node_modules/@types/react-router": { "version": "5.1.18", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz", @@ -4580,6 +4623,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", @@ -7748,6 +7792,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" @@ -8204,6 +8254,15 @@ "node": ">=8" } }, + "node_modules/immer": { + "version": "9.0.12", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", + "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -10558,6 +10617,35 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-redux": { + "version": "7.2.6", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz", + "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==", + "dependencies": { + "@babel/runtime": "^7.15.4", + "@types/react-redux": "^7.1.20", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + }, + "peerDependencies": { + "react": "^16.8.3 || ^17" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/react-redux/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + }, "node_modules/react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -10660,6 +10748,22 @@ "node": ">= 0.10" } }, + "node_modules/redux": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz", + "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, + "node_modules/redux-thunk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", + "peerDependencies": { + "redux": "^4" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -10810,6 +10914,11 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "node_modules/reselect": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz", + "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==" + }, "node_modules/resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", @@ -14381,6 +14490,15 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==" }, + "@reduxjs/toolkit": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.0.tgz", + "integrity": "sha512-cdfHWfcvLyhBUDicoFwG1u32JqvwKDxLxDd7zSmSoFw/RhYLOygIRtmaMjPRUUHmVmmAGAvquLLsKKU/677kSQ==", + "requires": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" "@restart/hooks": { "version": "0.3.27", "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz", @@ -14640,6 +14758,15 @@ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", "dev": true }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -14743,6 +14870,17 @@ "@types/react": "*" } }, + "@types/react-redux": { + "version": "7.1.23", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.23.tgz", + "integrity": "sha512-D02o3FPfqQlfu2WeEYwh3x2otYd2Dk1o8wAfsA0B1C2AJEFxE663Ozu7JzuWbznGgW248NaOF6wsqCGNq9d3qw==", + "requires": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "@types/react-router": { "version": "5.1.18", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz", @@ -18993,6 +19131,11 @@ "is-cwebp-readable": "^3.0.0" } }, + "immer": { + "version": "9.0.12", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", + "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -20727,6 +20870,24 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-redux": { + "version": "7.2.6", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz", + "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==", + "requires": { + "@babel/runtime": "^7.15.4", + "@types/react-redux": "^7.1.20", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + }, + "dependencies": { + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + } "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -20808,6 +20969,20 @@ "resolve": "^1.9.0" } }, + "redux": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz", + "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "redux-thunk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", + "requires": {} + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -20927,6 +21102,11 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "reselect": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz", + "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==" + }, "resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", diff --git a/package.json b/package.json index 418f9c1..75a49c7 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,13 @@ "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.4.2", "@mui/material": "^5.4.3", + "@reduxjs/toolkit": "^1.8.0", "@types/react-big-calendar": "^0.36.2", "moment": "^2.29.1", "react": "^17.0.2", "react-big-calendar": "^0.39.3", "react-dom": "^17.0.2", + "react-redux": "^7.2.6", "react-router-dom": "^6.2.1" }, "scripts": { diff --git a/src/App.tsx b/src/App.tsx index 13e9900..c29dc31 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import "./styles.css"; @@ -15,8 +15,6 @@ import Theme from "./Theme"; import "./style/App.css"; const App: React.FC = () => { - const [meetingInfoOpen, setMeetingInfoOpen] = useState(false); - return ( @@ -24,15 +22,12 @@ const App: React.FC = () => { } /> }> } /> - } - /> - } /> + } /> + } /> - + ); }; diff --git a/src/ProtectedRoute.tsx b/src/ProtectedRoute.tsx index 6eabee3..72167dd 100644 --- a/src/ProtectedRoute.tsx +++ b/src/ProtectedRoute.tsx @@ -2,12 +2,12 @@ import {useLocation, Outlet, Navigate} from "react-router-dom"; import useAuth from "./hooks/useAuth"; import Navbar from "./components/navbar/Navbar"; import Sidebar from "./components/sidebar/Sidebar"; -import React, {useState} from "react"; +import React, { useState } from "react"; import { MeetingStatus, SidebarUserObj, } from "./components/sidebar/SidebarUser"; -import {Box} from "@mui/material"; +import { Box } from "@mui/material"; const ProtectedRoute = () => { const auth= useAuth(); @@ -37,22 +37,21 @@ const ProtectedRoute = () => { { id: 19, name: "Bob Q.", meetingStatus: MeetingStatus.ONLINE }, { id: 20, name: "Bob R.", meetingStatus: MeetingStatus.ONLINE }, ]); - return ( - auth?.isLoggedIn - ? - <> - - - - - - - - + return auth?.isLoggedIn ? ( + <> + + + + - - : + + + + + + ) : ( + ); }; -export default ProtectedRoute; \ No newline at end of file +export default ProtectedRoute; diff --git a/src/api-bodies/MockData.tsx b/src/api-bodies/MockData.tsx new file mode 100644 index 0000000..5b1ab73 --- /dev/null +++ b/src/api-bodies/MockData.tsx @@ -0,0 +1,86 @@ +const people = [ + { + uuid: "0", + emailAddress: "cth0604@gmail.com", + name: "Taehee Choi", + role: "Front-end Dev", + }, + { + uuid: "1", + emailAddress: "cth0604@gmail.com", + name: "Arthur Marques", + role: "Team Lead", + }, + { + uuid: "2", + emailAddress: "cth0604@gmail.com", + name: "Mathew Balsdon", + role: "Front-end Dev", + }, + { + uuid: "3", + emailAddress: "cth0604@gmail.com", + name: "Benson Lin", + role: "Back-end Dev", + }, + { + uuid: "4", + emailAddress: "cth0604@gmail.com", + name: "Jincheng Lu", + role: "Front-end Dev", + }, + { + uuid: "5", + emailAddress: "cth0604@gmail.com", + name: "Esteban Margaron", + role: "Back-end Dev", + }, + { + uuid: "6", + emailAddress: "cth0604@gmail.com", + name: "Leanna Resurreccion", + role: "Back-end Dev", + }, +]; + +const meetings = [ + { + meetingId: "0", + liveParticipantIds: [], + registrantIds: ["0", "1", "2", "3", "4", "5", "6"], + start: "2022-03-13T17:00:00", + duration: 15, + timezone: "", + joinUrl: "", + topic: "Daily Scrum Meeting", + }, + { + meetingId: "1", + liveParticipantIds: [], + registrantIds: ["0", "2", "4"], + start: "2022-03-13T17:30:00", + duration: 30, + timezone: "", + joinUrl: "", + topic: "Front-end Meeting", + }, + { + meetingId: "2", + liveParticipantIds: [], + registrantIds: ["3", "5", "6"], + start: "2022-03-13T17:30:00", + duration: 30, + timezone: "", + joinUrl: "", + topic: "Back-end Meeting", + }, +]; + +const team = { + user: "0", + manager: "1", + sameManager: ["2", "3", "4", "5", "6"], + directReports: [], +}; + +export { people, meetings, team }; diff --git a/src/components/contacts/ContactInfo.tsx b/src/components/contacts/ContactInfo.tsx deleted file mode 100644 index 27646b6..0000000 --- a/src/components/contacts/ContactInfo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import Status from "./Status"; - -interface ContactInfo { - name: string; - status: Status; -} - -export default ContactInfo; diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index c95afe8..e533db4 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -2,25 +2,19 @@ import { Box } from "@mui/material"; import React from "react"; import Body from "./contacts-components/Body"; -import ContactInfo from "./ContactInfo"; import Sidebar from "./contacts-components/Sidebar"; +import UserLite from "../../api-bodies/UserLite"; -interface Props { - setMeetingInfoOpen: (open: boolean) => void; -} - -const Contacts: React.FC = (props) => { - const [contactSelected, setContactSelected] = - React.useState(null); +const Contacts: React.FC = () => { + const [contactSelected, setContactSelected] = React.useState( + null + ); return ( {contactSelected !== null ? ( - + ) : null} ); diff --git a/src/components/contacts/Utils.tsx b/src/components/contacts/Utils.tsx index e5424d8..bedc302 100644 --- a/src/components/contacts/Utils.tsx +++ b/src/components/contacts/Utils.tsx @@ -1,3 +1,4 @@ +import DetailedMeeting from "../../api-bodies/DetailedMeeting"; import Status from "./Status"; const returnStatusColor = ( @@ -15,4 +16,10 @@ const returnStatusColor = ( } }; -export { returnStatusColor }; +const getMeetingDuration = (meeting: DetailedMeeting) => { + const startDate = new Date(meeting.start); + const endDate = new Date(startDate.getTime() + meeting.duration * 60000); + return `${startDate.toTimeString()} - ${endDate.toTimeString()}`; +}; + +export { returnStatusColor, getMeetingDuration }; diff --git a/src/components/contacts/contacts-components/Body.tsx b/src/components/contacts/contacts-components/Body.tsx index fd4de4a..bb9f5ce 100644 --- a/src/components/contacts/contacts-components/Body.tsx +++ b/src/components/contacts/contacts-components/Body.tsx @@ -2,11 +2,10 @@ import { Box, Toolbar } from "@mui/material"; import React from "react"; import UpperBody from "./body-components/UpperBody"; import LowerBody from "./body-components/LowerBody"; -import ContactInfo from "../ContactInfo"; +import UserLite from "../../../api-bodies/UserLite"; interface Props { - contactSelected: ContactInfo; - setMeetingInfoOpen: (open: boolean) => void; + contactSelected: UserLite; } const Body: React.FC = (props) => { @@ -21,10 +20,7 @@ const Body: React.FC = (props) => { > - + ); }; diff --git a/src/components/contacts/contacts-components/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx index f4007f4..eecf63c 100644 --- a/src/components/contacts/contacts-components/Sidebar.tsx +++ b/src/components/contacts/contacts-components/Sidebar.tsx @@ -9,19 +9,17 @@ import { } from "@mui/material"; import React from "react"; import { ExpandLess, ExpandMore } from "@mui/icons-material"; -import ContactInfo from "../ContactInfo"; -import Status from "../Status"; import ContactItem from "./sidebar-components/ContactItem"; - -const contacts: ContactInfo[] = [ - { name: "Taehee ...", status: Status.Online }, - { name: "Jincheng ...", status: Status.Offline }, - { name: "Mathew ...", status: Status.InMeeting }, - { name: "Esteban ...", status: Status.Away }, -]; +import { useAppSelector } from "../../../redux/hooks"; +import { + selectFavoritesJSON, + selectTeamJSON, +} from "../../../redux/slices/peopleSlice"; +import { selectFavorites } from "../../../redux/slices/favoritesSlice"; +import UserLite from "../../../api-bodies/UserLite"; interface Props { - setContactSelected: (contactInfo: ContactInfo) => void; + setContactSelected: (contactInfo: UserLite) => void; } const sidebarWidth = 240; @@ -30,6 +28,12 @@ const Sidebar: React.FC = (props) => { const [favoritesOpen, setFavoritesOpen] = React.useState(true); const [teamOpen, setTeamOpen] = React.useState(false); + const favorites = useAppSelector(selectFavorites); + const favoritesJSON = useAppSelector((state) => + selectFavoritesJSON(state, favorites) + ); + const teamJSON = useAppSelector(selectTeamJSON); + return ( = (props) => { setFavoritesOpen(!favoritesOpen)}> {favoritesOpen ? : } - + - {contacts.map((contact, i) => ( + {favoritesJSON.map((favorite, i) => ( @@ -65,13 +72,13 @@ const Sidebar: React.FC = (props) => { setTeamOpen(!teamOpen)}> {teamOpen ? : } - + - {contacts.map((contact, i) => ( + {teamJSON.map((member, i) => ( diff --git a/src/components/contacts/contacts-components/body-components/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx index a43d74f..824c7a6 100644 --- a/src/components/contacts/contacts-components/body-components/LowerBody.tsx +++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx @@ -1,21 +1,22 @@ import { Box, Button, List, Typography } from "@mui/material"; import React from "react"; -import ContactInfo from "../../ContactInfo"; - -const meetings: { name: string; duration: string }[] = [ - { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" }, - { name: "Design Meeting", duration: "10:45 am - 11:45 am" }, - { name: "Customer Meeting", duration: "10:45 am - 11:45 am" }, - { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" }, - { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" }, -]; +import UserLite from "../../../../api-bodies/UserLite"; +import { useAppSelector, useAppDispatch } from "../../../../redux/hooks"; +import { open } from "../../../../redux/slices/meetingDetailsOpenSlice"; +import { selectUserUpcomingMeetings } from "../../../../redux/slices/meetingsSlice"; +import { getMeetingDuration } from "../../Utils"; interface Props { - contactInfo: ContactInfo; - setMeetingInfoOpen: (open: boolean) => void; + contactInfo: UserLite; } const LowerBody: React.FC = (props) => { + const dispatch = useAppDispatch(); + + const meetings = useAppSelector((state) => + selectUserUpcomingMeetings(state, props.contactInfo.uuid) + ); + return ( = (props) => { - {meeting.duration} + + {getMeetingDuration(meeting)} + ))} diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx index 18ead7a..39ad22f 100644 --- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx +++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx @@ -3,11 +3,12 @@ import React from "react"; import PhoneIcon from "@mui/icons-material/Phone"; import VideocamIcon from "@mui/icons-material/Videocam"; import GroupsIcon from "@mui/icons-material/Groups"; -import ContactInfo from "../../ContactInfo"; import AddIcon from "@mui/icons-material/Add"; +import Status from "../../Status"; +import UserLite from "../../../../api-bodies/UserLite"; interface Props { - contactInfo: ContactInfo; + contactInfo: UserLite; } const UpperBody: React.FC = (props) => { @@ -63,9 +64,7 @@ const UpperBody: React.FC = (props) => { - - {props.contactInfo.status} - + {Status.Online} MeetingName-1372 diff --git a/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx index c8d9e48..2b78288 100644 --- a/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx +++ b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx @@ -2,12 +2,13 @@ import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import React from "react"; import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; import CircleIcon from "@mui/icons-material/Circle"; -import ContactInfo from "../../ContactInfo"; import { returnStatusColor } from "../../Utils"; +import UserLite from "../../../../api-bodies/UserLite"; +import Status from "../../Status"; interface Props { - contactInfo: ContactInfo; - setContactSelected: (contactInfo: ContactInfo) => void; + contactInfo: UserLite; + setContactSelected: (contactInfo: UserLite) => void; } const ContactItem: React.FC = (props) => { @@ -22,10 +23,10 @@ const ContactItem: React.FC = (props) => { - + ); }; diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx index 3dd9e2d..230e4bb 100644 --- a/src/components/login/Login.tsx +++ b/src/components/login/Login.tsx @@ -13,9 +13,6 @@ interface LocationState { from: { pathname: string }; } const Login: React.FC = () => { - - const setAuth = useAuth(); - const navigate = useNavigate(); const location = useLocation(); const state = location.state as LocationState; @@ -50,7 +47,7 @@ const Login: React.FC = () => { return ( - HSBC Logo + HSBC Logo {/*

{errMsg}

*/} {setUsername(event.target.value);}}/> {setPassword(event.target.value);}}/> @@ -58,17 +55,25 @@ const Login: React.FC = () => { Forgot your password? - + Login with - Zoom Logo + Zoom Logo ); }; - -export default Login; \ No newline at end of file + +export default Login; diff --git a/src/components/meeting-details/MeetingDetails.tsx b/src/components/meeting-details/MeetingDetails.tsx index dcca058..0703c24 100644 --- a/src/components/meeting-details/MeetingDetails.tsx +++ b/src/components/meeting-details/MeetingDetails.tsx @@ -2,17 +2,24 @@ import { Dialog } from "@mui/material"; import React from "react"; import Body from "./meeting-details-components/Body"; import Header from "./meeting-details-components/Header"; +import { useAppSelector, useAppDispatch } from "../../redux/hooks"; +import { + close, + selectMeetingDetailsOpen, +} from "../../redux/slices/meetingDetailsOpenSlice"; -interface Props { - open: boolean; - setOpen: (open: boolean) => void; -} +const MeetingDetails: React.FC = () => { + const meetingDetailsOpen = useAppSelector(selectMeetingDetailsOpen); + const dispatch = useAppDispatch(); -const MeetingDetails: React.FC = (props) => { return ( - props.setOpen(false)}> -
- + dispatch(close())} + > +
+
); }; diff --git a/src/components/meeting-details/meeting-details-components/Body.tsx b/src/components/meeting-details/meeting-details-components/Body.tsx index 632ac39..e253b82 100644 --- a/src/components/meeting-details/meeting-details-components/Body.tsx +++ b/src/components/meeting-details/meeting-details-components/Body.tsx @@ -8,8 +8,13 @@ import { } from "@mui/material"; import React from "react"; import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; +import DetailedMeeting from "../../../api-bodies/DetailedMeeting"; -const Body: React.FC = () => { +interface Props { + meeting: DetailedMeeting | null; +} + +const Body: React.FC = () => { return ( void; + meeting: DetailedMeeting | null; } const Header: React.FC = (props) => { + const dispatch = useAppDispatch(); + return ( - Kanban Meeting + {props.meeting !== null ? props.meeting.topic : null}