diff --git a/package-lock.json b/package-lock.json index 469b1c59..6239d0f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4081,6 +4081,43 @@ "redux": "^4.0.0" } }, + "@types/react-router": { + "version": "5.1.20", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", + "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==", + "dev": true, + "requires": { + "@types/history": "^4.7.11", + "@types/react": "*" + }, + "dependencies": { + "@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true + } + } + }, + "@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "dev": true, + "requires": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + }, + "dependencies": { + "@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true + } + } + }, "@types/redux-debounced": { "version": "0.2.19", "resolved": "https://registry.npmjs.org/@types/redux-debounced/-/redux-debounced-0.2.19.tgz", diff --git a/package.json b/package.json index 9b9e83f8..207f855c 100644 --- a/package.json +++ b/package.json @@ -132,6 +132,7 @@ "extends": "react-app" }, "devDependencies": { + "@types/react-router-dom": "5.3.3", "@types/sortablejs": "^1.10.6", "@typescript-eslint/eslint-plugin": "^4.28.1", "@typescript-eslint/parser": "^4.28.1", @@ -151,7 +152,7 @@ "react-app-rewired": "^2.1.6", "react-snap": "1.23.0", "sass-loader": "^8.0.2", - "typescript": "^4.3.5" + "typescript": "4.3.5" }, "browserslist": { "production": [ diff --git a/src/@core/layouts/components/layout-wrapper/index.js b/src/@core/layouts/components/layout-wrapper/index.js index 81ad7c77..43b46567 100644 --- a/src/@core/layouts/components/layout-wrapper/index.js +++ b/src/@core/layouts/components/layout-wrapper/index.js @@ -1,59 +1,64 @@ // ** React Imports -import { Fragment, useEffect } from 'react' +import { Fragment, useEffect } from 'react'; // ** Third Party Components -import classnames from 'classnames' +import classnames from 'classnames'; // ** Store & Actions -import { useSelector, useDispatch } from 'react-redux' -import { handleContentWidth, handleMenuCollapsed, handleMenuHidden } from '@store/actions/layout' +import { useSelector, useDispatch } from 'react-redux'; +import { + handleContentWidth, + handleMenuCollapsed, + handleMenuHidden +} from '@store/actions/layout'; // ** Styles -import 'animate.css/animate.css' +import 'animate.css/animate.css'; const LayoutWrapper = props => { // ** Props - const { layout, children, appLayout, wrapperClass, transition, routeMeta } = props + const { layout, children, appLayout, wrapperClass, transition, routeMeta } = + props; // ** Store Vars - const dispatch = useDispatch() - const store = useSelector(state => state) - const navbarStore = store.navbar - const contentWidth = store.layout.contentWidth + const dispatch = useDispatch(); + const store = useSelector(state => state); + const navbarStore = store.navbar; + const contentWidth = store.layout.contentWidth; //** Vars - const Tag = layout === 'HorizontalLayout' && !appLayout ? 'div' : Fragment + const Tag = layout === 'HorizontalLayout' && !appLayout ? 'div' : Fragment; // ** Clean Up Function const cleanUp = () => { if (routeMeta) { if (routeMeta.contentWidth) { - dispatch(handleContentWidth('full')) + dispatch(handleContentWidth('full')); } if (routeMeta.menuCollapsed) { - dispatch(handleMenuCollapsed(!routeMeta.menuCollapsed)) + dispatch(handleMenuCollapsed(!routeMeta.menuCollapsed)); } if (routeMeta.menuHidden) { - dispatch(handleMenuHidden(!routeMeta.menuHidden)) + dispatch(handleMenuHidden(!routeMeta.menuHidden)); } } - } + }; // ** ComponentDidMount useEffect(() => { if (routeMeta) { if (routeMeta.contentWidth) { - dispatch(handleContentWidth(routeMeta.contentWidth)) + dispatch(handleContentWidth(routeMeta.contentWidth)); } if (routeMeta.menuCollapsed) { - dispatch(handleMenuCollapsed(routeMeta.menuCollapsed)) + dispatch(handleMenuCollapsed(routeMeta.menuCollapsed)); } if (routeMeta.menuHidden) { - dispatch(handleMenuHidden(routeMeta.menuHidden)) + dispatch(handleMenuHidden(routeMeta.menuHidden)); } } - return () => cleanUp() - }, []) + return () => cleanUp(); + }, []); return (