diff --git a/package-lock.json b/package-lock.json index c8e1dc8f..240d05da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "react-dom": "^17.0.2", "react-full-screen": "^1.1.1", "react-player": "^2.10.1", + "react-router-dom": "^6.4.3", "release-please": "^14.13.2", "shelljs": "^0.8.5", "ts-jest": "^29.0.3", @@ -5091,6 +5092,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", + "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.2.tgz", @@ -32667,7 +32676,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -32771,6 +32779,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz", + "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==", + "dependencies": { + "@remix-run/router": "1.0.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz", + "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==", + "dependencies": { + "@remix-run/router": "1.0.3", + "react-router": "6.4.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", @@ -36636,7 +36674,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -45260,6 +45297,11 @@ } } }, + "@remix-run/router": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", + "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==" + }, "@rollup/plugin-babel": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.2.tgz", @@ -66281,7 +66323,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -66362,6 +66403,23 @@ "dev": true, "peer": true }, + "react-router": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz", + "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==", + "requires": { + "@remix-run/router": "1.0.3" + } + }, + "react-router-dom": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz", + "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==", + "requires": { + "@remix-run/router": "1.0.3", + "react-router": "6.4.3" + } + }, "react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", @@ -68283,9 +68341,9 @@ "dev": true }, "release-please": { - "version": "14.13.2", - "resolved": "https://registry.npmjs.org/release-please/-/release-please-14.13.2.tgz", - "integrity": "sha512-Tj6wvT8N2MJD6OrUY90vALKGKCSs6z1jziC0KI4wT5a71aVvm9uLP1qYbPEECS37UM1atZxDYvDEmC8i8f0FRg==", + "version": "14.16.0", + "resolved": "https://registry.npmjs.org/release-please/-/release-please-14.16.0.tgz", + "integrity": "sha512-ONKOJN6m6reEDnes+2iHGczNZLGrboi6skSH4/gUZtkoVZx2fJ8qYiSGfXu+TThX69mNUY9W3hIZ0BztXuNB8A==", "requires": { "@conventional-commits/parser": "^0.4.1", "@google-automations/git-file-utils": "^1.2.0", @@ -69302,7 +69360,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/package.json b/package.json index e453a5dc..acde0cf5 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-dom": "^17.0.2", "react-full-screen": "^1.1.1", "react-player": "^2.10.1", + "react-router-dom": "^6.4.3", "release-please": "^14.13.2", "shelljs": "^0.8.5", "ts-jest": "^29.0.3", diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index 5f850762..b3b293ce 100644 --- a/src/components/Menu/Menu.js +++ b/src/components/Menu/Menu.js @@ -1,5 +1,6 @@ import React, { useRef, useEffect, useState } from "react"; import PropTypes from "prop-types"; +import { BrowserRouter, Link } from "react-router-dom"; import EN from "../../translations/en.json"; import FR from "../../translations/fr.json"; @@ -7,10 +8,17 @@ import FR from "../../translations/fr.json"; * Menu component */ export function Menu(props) { - const { isAuthenticated, menuList, lang } = props; + const { isAuthenticated, lang, dashboardPath, securityPath, profilePath } = + props; const [showDropdown, setShowDropdown] = useState(false); const dropdown = useRef(null); + Menu.defaultProps = { + dashboardPath: "/", + securityPath: "/", + profilePath: "/", + }; + useEffect(() => { // Hide dropdown when click outside if (!showDropdown) return; @@ -24,133 +32,141 @@ export function Menu(props) { }, [showDropdown]); return ( -
-
- ) : ( - "" - )} - - +
+ + {lang === "en" ? EN.myDashboard : FR.myDashboard} + +
+
+ + {lang === "en" ? EN.mySecurity : FR.mySecurity} + +
+
+ + {lang === "en" ? EN.myProfile : FR.myProfile} + +
+
+ + + + +
+ + )} + + ) : ( + "" + )} + + + ); } -Menu.defaultProps = { - lang: "en", - menuList: [ - { key: "dashKey", value: "My dashboard", path: "/" }, - { key: "securityKey", value: "Security Settings", path: "/" }, - { key: "profileKey", value: "Profile", path: "/" }, - { key: "outKey", value: "Sign out", path: "/" }, - ], -}; - Menu.propTypes = { /** * Language code. @@ -163,14 +179,23 @@ Menu.propTypes = { isAuthenticated: PropTypes.bool.isRequired, /** - * List of menu items to display in dropdown with links + * url path for My Dashboard page */ - menuList: PropTypes.arrayOf( - PropTypes.shape({ - key: PropTypes.string, - value: PropTypes.string, - path: PropTypes.string, - component: PropTypes.elementType, - }) - ), + dashboardPath: PropTypes.string, + + /** + * url path for Security Setting page + */ + securityPath: PropTypes.string, + + /** + * url path for Profile page + */ + profilePath: PropTypes.string, +}; + +Menu.defaultProps = { + dashboardPath: "", + securityPath: "", + profilePath: "", };