feat: hook for functions filter 👷

src/ui/components/pages/service/section/blocFunction.js

@@ -1,11 +1,15 @@
 import { Box, Card } from '@mui/material';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 const BlocFunction = ({ functions }) => {
+	useEffect(() => {
+		console.log(functions);
+	}, [functions]);
+
 	const { classes, theme } = useStyles();
 
-	return <div> Function</div>;
+	return <div> {functions}</div>;
 };
 
 const useStyles = makeStyles()((theme) => ({

src/ui/components/pages/service/serviceOffer.js

@@ -8,6 +8,7 @@ import BlocFilter from './section/blocFilter';
 import BlocFunction from './section/blocFunction';
 import { useTreeUrlStatus } from 'ui/utils/hooks/searchParams';
 import { CoreApiContext } from 'ui/coreApi';
+import { useFiltredAndOrderedFunctions } from 'ui/utils/hooks/functions';
 
 const ServiceOffer = () => {
 	const { classes, theme } = useStyles();
@@ -24,11 +25,11 @@ const ServiceOffer = () => {
 		});
 	}, [getFunctions, getHierarchies]);
 
-	useEffect(() => {
-		//functions.filter()
-		//console.log(findId(functions[0], 'gsbpm'));
-		console.log(treeState);
-	}, [treeState]);
+	const filtredFunctions = useFiltredAndOrderedFunctions(
+		treeState.selected,
+		treeState.filtered,
+		functions
+	);
 
 	return (
 		<>
@@ -50,7 +51,7 @@ const ServiceOffer = () => {
 							<Grid item md={8} xs={12}>
 								<Box className={classes.box}>
 									<Card className={classes.card}>
-										<BlocFunction functions={functions} />
+										<BlocFunction functions={filtredFunctions} />
 									</Card>
 								</Box>
 							</Grid>

src/ui/utils/hooks/functions/index.js

@@ -0,0 +1 @@
+export { useFiltredAndOrderedFunctions } from './useFiltredAndOrderedFunctions';

src/ui/utils/hooks/functions/useFiltredAndOrderedFunctions.js

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+
+export const useFiltredAndOrderedFunctions = (
+	selected,
+	filtered,
+	functions
+) => {
+	//TODEBUG
+
+	const [arrayOfIdToFilter, setArrayOfIdToFilter] = useState([]);
+	const [objOfIdByHierarchy, setObjOfIdByHierarchy] = useState({});
+	const [filtrerFunctions, setFiltrerFunctions] = useState([]);
+
+	const concatArrayWithoutDuplicate = (a, b) => [...new Set(a.concat(b))];
+
+	useEffect(() => {
+		setArrayOfIdToFilter(concatArrayWithoutDuplicate(selected, filtered));
+	}, [selected, filtered]);
+
+	useEffect(() => {
+		setObjOfIdByHierarchy(
+			arrayOfIdToFilter.reduce((acc, curr) => {
+				const keyword = curr.split('-')[0];
+				return keyword in acc
+					? { ...acc, [keyword]: [...acc[keyword], curr] }
+					: { ...acc, [keyword]: [curr] };
+			}, {})
+		);
+	}, [arrayOfIdToFilter]);
+
+	useEffect(() => {
+		const searchArray = (fn) => (array, nodeKey) =>
+			Array.isArray(array)
+				? array.length === 0
+					? false
+					: searchArray(fn)(array[0], nodeKey) ||
+					  searchArray(fn)(array.slice(1), nodeKey)
+				: searchTree(fn)(array, nodeKey);
+
+		const searchTree = (fn) => (obj, nodeKey) =>
+			fn(obj, () =>
+				obj[nodeKey] == null ? false : searchArray(fn)(obj[nodeKey], nodeKey)
+			);
+
+		const findId = (arrayTarget, obj, nodeKey) =>
+			searchArray((node, next) =>
+				arrayTarget.includes(node.id) ? true : next()
+			)(obj, nodeKey);
+
+		setFiltrerFunctions(
+			Object.entries(objOfIdByHierarchy).forEach(([key, value]) =>
+				functions.filter((fct) => findId(value, fct, key))
+			)
+		);
+	}, [functions, objOfIdByHierarchy]);
+
+	return filtrerFunctions;
+};