feat: adding deeplinks to logo dashboards (#803)

* feat: adding deeplinks to logo dashboards * Update src/App.jsx * add link to dashboard tab --------- Co-authored-by: alexandre <alex.fauquette@gmail.com>
openfoodfacts · Jan 6, 2024 · 12a3efa · 12a3efa
1 parent 310d800
commit 12a3efa
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 4 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,6 @@
 # Ignore artifacts:
 build
+dist
 node_modules
 public
 src/i18n
diff --git a/src/App.jsx b/src/App.jsx
@@ -309,7 +309,6 @@ export default function App() {
                 <Route path="/insights" element={<InsightsPage />} />
                 <Route path="*" element={<NotFoundPage />} />
                 <Route path="/logoQuestion/" elemnt={<DashBoard />} />
-                <Route path="/dashboard/" element={<DashBoard />} />
                 <Route
                   path="/logoQuestion/:valueTag"
                   element={
@@ -320,7 +319,14 @@ export default function App() {
                     )
                   }
                 />
-                {/*  To delete in 2024 */}
+
+                <Route path="/dashboard/" element={<DashBoard />} />
+                <Route path="/dashboard/:dasboardId" element={<DashBoard />} />
+                {/**
+                 * To delete in 2025 because nutriscore and inao are now availabel as
+                 * - dasboard/nutriscore
+                 * - dasboard/inao
+                 */}
                 <Route path="/nutriscore" element={<DashBoard />} />
                 <Route path="/inao" element={<DashBoard />} />
 

diff --git a/src/pages/logosValidator/DashBoard.tsx b/src/pages/logosValidator/DashBoard.tsx
@@ -8,6 +8,7 @@ import { useTheme } from "@mui/material/styles";
 
 import { LOGOS, DASHBOARD } from "./dashboardDefinition";
 import DashboardCard from "./DashboardCard";
+import { Link, useParams } from "react-router-dom";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -65,10 +66,14 @@ function a11yProps(index: number) {
 }
 
 export default function VerticalTabs() {
+  const { dasboardId } = useParams();
+
   const theme = useTheme();
   const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
 
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = React.useState(
+    DASHBOARD.findIndex(({ tag }) => tag === dasboardId) || 0
+  );
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -98,7 +103,13 @@ export default function VerticalTabs() {
           }}
         >
           {DASHBOARD.map(({ tag, title }, index) => (
-            <Tab label={title} key={index} {...a11yProps(index)} />
+            <Tab
+              label={title}
+              key={index}
+              {...a11yProps(index)}
+              component={Link}
+              to={`/dashboard/${tag}`}
+            />
           ))}
         </Tabs>
         {DASHBOARD.map(({ tag, title }, index) => (

diff --git a/src/pages/logosValidator/dashboardDefinition.ts b/src/pages/logosValidator/dashboardDefinition.ts
@@ -2542,6 +2542,32 @@ const UNTYPED_LOGOS = {
     logo: "https://robotoff.openfoodfacts.org/api/v1/images/crop?image_url=https://static.openfoodfacts.org/images/products/350/757/010/0132/1.jpg&y_min=0.635474681854248&x_min=0.3560321033000946&y_max=0.7346380352973938&x_max=0.4571381211280823",
     type: "label",
   },
+  "en:saveurs-en-or": {
+    tag: "en:saveurs-en-or",
+    label: "en:saveurs-en-or",
+    logo: "",
+
+    type: "label",
+  },
+  "en:gold-medal-of-the-german-agricultural-society": {
+    tag: "en:gold-medal-of-the-german-agricultural-society",
+    label: "en:gold-medal-of-the-german-agricultural-society",
+    logo: "https://static.openfoodfacts.org/images/lang/en/labels/2010-gold-medal-of-the-german-agricultural-society.90x90.png",
+    type: "label",
+  },
+  "en:silver-medal-of-the-german-agricultural-society": {
+    tag: "en:silver-medal-of-the-german-agricultural-society",
+    label: "en:silver-medal-of-the-german-agricultural-society",
+    logo: "https://static.openfoodfacts.org/images/lang/en/labels/2009-silver-medal-of-the-german-agricultural-society.90x90.png",
+    type: "label",
+  },
+  "en:bronze-medal-of-the-german-agricultural-society": {
+    tag: "en:bronze-medal-of-the-german-agricultural-society",
+    label: "en:bronze-medal-of-the-german-agricultural-society",
+    logo: "https://static.openfoodfacts.org/images/lang/en/labels/2016-bronze-medal-of-the-german-agricultural-society.90x90.png",
+
+    type: "label",
+  },
 };
 
 type LogoType = { [key in keyof typeof UNTYPED_LOGOS]: LogoDefinition };