Merge pull request #22 from mapcomponents/feature/add-highlight-compo…

…nents-apps Feature/add highlight components apps
mapcomponents · Mar 13, 2024 · 4224c9f · 4224c9f
2 parents 67268b6 + 45cdba1
commit 4224c9f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.1.1",
-    "react-router-dom": "^6.6.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.1.0"
   },

diff --git a/src/components/CatalogueHeader.js b/src/components/CatalogueHeader.js
@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useEffect, useState, useContext, useMemo } from "react";
 import makeStyles from "@mui/styles/makeStyles";
-import { Link } from "react-router-dom";
+import { Link, useLocation, useMatch } from "react-router-dom";
 import { Grid, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import DemoContext from "./DemoContext";
 
 const useStyles = makeStyles((theme) => ({
   menuButton: {
@@ -27,6 +28,26 @@ const useStyles = makeStyles((theme) => ({
 export default function CatalogueHeader() {
   const classes = useStyles();
   const { t, i18n } = useTranslation();
+  const location = useLocation();
+  const [type, setType] = useState();
+  const { componentData } = useContext(DemoContext);
+  let match = useMatch("/:locale/component-detail/:component_id");
+
+  const selectedType = useMemo(() => {
+    if (location.pathname === "/" + i18n.language + "/") return "component";
+    if (location.pathname === "/" + i18n.language + "/list-apps")
+      return "application";
+    return type;
+  }, [location.pathname, i18n.language, type]);
+
+  useEffect(() => {
+    if (!componentData || !match?.params?.component_id) {
+      setType(undefined);
+      return;
+    }
+    const entry = componentData[match.params.component_id];
+    setType(entry?.type);
+  }, [match?.params?.component_id, componentData]);
 
   return (
     <Grid
@@ -38,29 +59,32 @@ export default function CatalogueHeader() {
         alignItems: "center",
       }}
     >
-        <ToggleButtonGroup
-          variant="contained"
-          color="primary"
-          aria-label="contained primary button group"
-          value={window.location.pathname}
+      <ToggleButtonGroup
+        variant="contained"
+        color="primary"
+        aria-label="contained primary button group"
+        value={location.pathname}
+        exclusive
+      >
+        <ToggleButton
+          to={i18n.language + "/"}
+          className={classes.menuButton}
+          component={Link}
+          value={i18n.language + "/"}
+          selected={selectedType === "component"}
+        >
+          Components
+        </ToggleButton>
+        <ToggleButton
+          to={i18n.language + "/list-apps"}
+          className={classes.menuButton}
+          component={Link}
+          value={i18n.language + "/list-apps"}
+          selected={selectedType === "application"}
         >
-          <ToggleButton
-            to={i18n.language + "/"}
-            className={classes.menuButton}
-            component={Link}
-            value={i18n.language + "/"}
-          >
-            Components
-          </ToggleButton>
-          <ToggleButton
-            to={i18n.language + "/list-apps"}
-            className={classes.menuButton}
-            component={Link}
-            value={i18n.language + "/list-apps"}
-          >
-            {t("sampleApplications")}
-          </ToggleButton>
-        </ToggleButtonGroup>
+          {t("sampleApplications")}
+        </ToggleButton>
+      </ToggleButtonGroup>
     </Grid>
   );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2418,10 +2418,10 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
-"@remix-run/router@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.0.tgz#54eff8306938b64c521f4a9ed313d33a91ef019a"
-  integrity sha512-GO82KYYTWPRCgdNtnheaZG3LcViUlxRFlHM7ykh7N+ufoXi6PVIHoP+9RUG/vuzl2hr9i/h6EA1Eq+2HpqJ0gQ==
+"@remix-run/router@1.15.3":
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.3.tgz#d2509048d69dbb72d5389a14945339f1430b2d3c"
+  integrity sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==
 
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.0"
@@ -8343,20 +8343,20 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^6.6.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.6.0.tgz#ad20b37b69e9fe7c6389663a0767ba40a19f71fe"
-  integrity sha512-qC4jnvpfCPKVle1mKLD75IvZLcbVJyFMlSn16WY9ZiOed3dgSmqhslCf/u3tmSccWOujkdsT/OwGq12bELmvjg==
+react-router-dom@^6.22.3:
+  version "6.22.3"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.3.tgz#9781415667fd1361a475146c5826d9f16752a691"
+  integrity sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==
   dependencies:
-    "@remix-run/router" "1.2.0"
-    react-router "6.6.0"
+    "@remix-run/router" "1.15.3"
+    react-router "6.22.3"
 
-react-router@6.6.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.6.0.tgz#9ae27cfc6bf7f2b28e1f028fe01fdbec96a3a41d"
-  integrity sha512-+VPfCIaFbkW7BAiB/2oeprxKAt1KLbl+zXZ10CXOYezKWgBmTKyh8XjI53eLqY5kd7uY+V4rh3UW44FclwUU+Q==
+react-router@6.22.3:
+  version "6.22.3"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.22.3.tgz#9d9142f35e08be08c736a2082db5f0c9540a885e"
+  integrity sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==
   dependencies:
-    "@remix-run/router" "1.2.0"
+    "@remix-run/router" "1.15.3"
 
 [email protected]:
   version "5.0.1"