From 6cd05cb6b375c01de704fbc40c40036dc31903bb Mon Sep 17 00:00:00 2001
From: Dylan Decrulle <81740200+ddecrulle@users.noreply.github.com>
Date: Mon, 4 Dec 2023 21:23:03 +0100
Subject: [PATCH] feat: :construction_worker: tools page scroll

---
 src/ui/components/pages/tools/tools.jsx |  7 +++++++
 src/ui/utils/scrollToElement.js         | 13 +++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 src/ui/utils/scrollToElement.js

diff --git a/src/ui/components/pages/tools/tools.jsx b/src/ui/components/pages/tools/tools.jsx
index c67475e..2abbebe 100644
--- a/src/ui/components/pages/tools/tools.jsx
+++ b/src/ui/components/pages/tools/tools.jsx
@@ -7,18 +7,24 @@ import Grid from '@mui/material/Grid';
 import Card from '@mui/material/Card';
 import { TreeFilter } from 'ui/components/shared/treeFilter/treeFilter';
 import { ProductContentBloc } from 'ui/components/pages/tools/productContentBloc/productContentBloc';
+import { scrollToElement } from 'ui/utils/scrollToElement';
 
 export const Tools = () => {
   const { classes, cx } = useStyles();
   const [searchParams, updateParams] = useTreeUrlParams();
+
+  // TODO -> Refactor using ref and no setTimeout
+
   const [products, setProducts] = useState([]);
 
   const { getProducts } = useContext(CoreApiContext);
 
   window.scrollTo();
+
   useEffect(() => {
     getProducts().then((r) => setProducts(r));
   }, [getProducts]);
+
   return (
     <div className={classes.wrapper}>
       <div className={classes.container}>
@@ -32,6 +38,7 @@ export const Tools = () => {
                     setTreeState={updateParams}
                     tree={products['children'] ?? []}
                     autoComplete={{ isEnabled: false }}
+                    onSelect={scrollToElement}
                   />
                 </Card>
               </Box>
diff --git a/src/ui/utils/scrollToElement.js b/src/ui/utils/scrollToElement.js
new file mode 100644
index 0000000..4446b69
--- /dev/null
+++ b/src/ui/utils/scrollToElement.js
@@ -0,0 +1,13 @@
+export const scrollToElement = (id) => {
+  const element = document.getElementById(id);
+
+  if (!element) return;
+
+  return setTimeout(
+    () =>
+      element.scrollIntoView({
+        behavior: 'smooth',
+      }),
+    100
+  );
+};