diff --git a/package-lock.json b/package-lock.json index c1f606e..2b535d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,10 @@ "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.4.2", "@mui/material": "^5.4.3", + "@reduxjs/toolkit": "^1.8.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-redux": "^7.2.6", "react-router-dom": "^6.2.1" }, "devDependencies": { @@ -2205,6 +2207,29 @@ "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/@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", @@ -2560,6 +2585,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", @@ -2654,6 +2688,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", @@ -4552,6 +4597,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", @@ -7707,6 +7753,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" @@ -8163,6 +8215,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", @@ -10470,6 +10531,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-router": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz", @@ -10548,6 +10638,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", @@ -10698,6 +10804,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", @@ -14247,6 +14358,17 @@ "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" + } + }, "@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", @@ -14498,6 +14620,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", @@ -14592,6 +14723,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", @@ -18827,6 +18969,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", @@ -20521,6 +20668,26 @@ "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-router": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz", @@ -20582,6 +20749,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", @@ -20701,6 +20882,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 2884ba1..21ebbf0 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.4.2", "@mui/material": "^5.4.3", + "@reduxjs/toolkit": "^1.8.0", "react": "^17.0.2", "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 8f8e4e6..51159e7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index c95afe8..72df34b 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -5,11 +5,7 @@ import Body from "./contacts-components/Body"; import ContactInfo from "./ContactInfo"; import Sidebar from "./contacts-components/Sidebar"; -interface Props { - setMeetingInfoOpen: (open: boolean) => void; -} - -const Contacts: React.FC = (props) => { +const Contacts: React.FC = () => { const [contactSelected, setContactSelected] = React.useState(null); @@ -17,10 +13,7 @@ const Contacts: React.FC = (props) => { {contactSelected !== null ? ( - + ) : null} ); diff --git a/src/components/contacts/contacts-components/Body.tsx b/src/components/contacts/contacts-components/Body.tsx index fd4de4a..a42fe35 100644 --- a/src/components/contacts/contacts-components/Body.tsx +++ b/src/components/contacts/contacts-components/Body.tsx @@ -6,7 +6,6 @@ import ContactInfo from "../ContactInfo"; interface Props { contactSelected: ContactInfo; - setMeetingInfoOpen: (open: boolean) => void; } const Body: React.FC = (props) => { @@ -21,10 +20,7 @@ const Body: React.FC = (props) => { > - + ); }; diff --git a/src/components/contacts/contacts-components/body-components/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx index a43d74f..ffeac31 100644 --- a/src/components/contacts/contacts-components/body-components/LowerBody.tsx +++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx @@ -1,6 +1,7 @@ import { Box, Button, List, Typography } from "@mui/material"; import React from "react"; -import ContactInfo from "../../ContactInfo"; +import { useDispatch } from "react-redux"; +import { open } from "../../../../redux/slices/meetingDetailsOpenSlice"; const meetings: { name: string; duration: string }[] = [ { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" }, @@ -10,12 +11,9 @@ const meetings: { name: string; duration: string }[] = [ { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" }, ]; -interface Props { - contactInfo: ContactInfo; - setMeetingInfoOpen: (open: boolean) => void; -} +const LowerBody: React.FC = () => { + const dispatch = useDispatch(); -const LowerBody: React.FC = (props) => { return ( = (props) => { diff --git a/src/components/meeting-details/MeetingDetails.tsx b/src/components/meeting-details/MeetingDetails.tsx index dcca058..44bb176 100644 --- a/src/components/meeting-details/MeetingDetails.tsx +++ b/src/components/meeting-details/MeetingDetails.tsx @@ -2,16 +2,19 @@ import { Dialog } from "@mui/material"; import React from "react"; import Body from "./meeting-details-components/Body"; import Header from "./meeting-details-components/Header"; +import { useSelector, useDispatch } from "react-redux"; +import { + close, + selectMeetingDetailsOpen, +} from "../../redux/slices/meetingDetailsOpenSlice"; -interface Props { - open: boolean; - setOpen: (open: boolean) => void; -} +const MeetingDetails: React.FC = () => { + const open = useSelector(selectMeetingDetailsOpen); + const dispatch = useDispatch(); -const MeetingDetails: React.FC = (props) => { return ( - props.setOpen(false)}> -
+ dispatch(close())}> +
); diff --git a/src/components/meeting-details/meeting-details-components/Header.tsx b/src/components/meeting-details/meeting-details-components/Header.tsx index 5f40cd8..5b4b2fb 100644 --- a/src/components/meeting-details/meeting-details-components/Header.tsx +++ b/src/components/meeting-details/meeting-details-components/Header.tsx @@ -1,12 +1,12 @@ import { AppBar, Button, IconButton, Toolbar, Typography } from "@mui/material"; import React from "react"; import CloseIcon from "@mui/icons-material/Close"; +import { useDispatch } from "react-redux"; +import { close } from "../../../redux/slices/meetingDetailsOpenSlice"; -interface Props { - setOpen: (open: boolean) => void; -} +const Header: React.FC = () => { + const dispatch = useDispatch(); -const Header: React.FC = (props) => { return ( @@ -23,7 +23,7 @@ const Header: React.FC = (props) => { edge="start" color="inherit" aria-label="close" - onClick={() => props.setOpen(false)} + onClick={() => dispatch(close())} sx={{ ml: 1 }} > diff --git a/src/index.tsx b/src/index.tsx index d8f9587..802c9d8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,16 @@ import ReactDOM from "react-dom"; import App from "./App"; import "./style/App.css"; -import { AuthProvider } from './context/AuthProvider'; +import { AuthProvider } from "./context/AuthProvider"; +import { Provider } from "react-redux"; +import { store } from "./redux/store"; -const Index:React.FC = () => { +const Index: React.FC = () => { return ( - + + + ); }; diff --git a/src/redux/slices/meetingDetailsOpenSlice.tsx b/src/redux/slices/meetingDetailsOpenSlice.tsx new file mode 100644 index 0000000..6594543 --- /dev/null +++ b/src/redux/slices/meetingDetailsOpenSlice.tsx @@ -0,0 +1,28 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { RootState } from "../store"; + +interface MeetingDetailsOpenState { + open: boolean; +} + +const initialState: MeetingDetailsOpenState = { + open: false, +}; + +export const meetingDetailsOpenSlice = createSlice({ + name: "meetingDetailsOpen", + initialState, + reducers: { + open: (state) => { + state.open = true; + }, + close: (state) => { + state.open = false; + }, + }, +}); + +export const { open, close } = meetingDetailsOpenSlice.actions; +export const selectMeetingDetailsOpen = (state: RootState) => + state.meetingDetailsOpen.open; +export default meetingDetailsOpenSlice.reducer; diff --git a/src/redux/store.tsx b/src/redux/store.tsx new file mode 100644 index 0000000..75cffc1 --- /dev/null +++ b/src/redux/store.tsx @@ -0,0 +1,11 @@ +import { configureStore } from "@reduxjs/toolkit"; +import meetingDetailsOpenReducer from "./slices/meetingDetailsOpenSlice"; + +export const store = configureStore({ + reducer: { + meetingDetailsOpen: meetingDetailsOpenReducer, + }, +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch;