feat: functions grouped by gsbpm

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "knowledge",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"description": "The user interface that presents the service offer of the INSEE survey information system",
 	"author": "u/ddecrulle",
 	"license": "MIT",

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import groupBy from 'lodash.groupby';
-import { FunctionsGroupedByProducts } from './functions/functionsGroupedByProducts';
+import { FunctionsByProducts } from './functions/functionsByProducts';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from 'tss-react/mui';
 import Divider from '@mui/material/Divider';
@@ -24,16 +24,16 @@ const BlocFunction = ({ functions, products }) => {
 			const idProduct = groupedFunctions[0].idProduct;
 			const labelProduct = getLabelProduct(arrayProducts, idProduct);
 			return (
-				<React.Fragment key={idProduct}>
+				<div key={idProduct} className={classes.productFunctions}>
 					<Divider component='div' className={classes.titleDivider} />
 					<Typography className={classes.productTitle} variant='h4'>
 						{labelProduct}
 					</Typography>
-					<FunctionsGroupedByProducts
+					<FunctionsByProducts
 						productFunctions={groupedFunctions}
 						labelProduct={labelProduct}
 					/>
-				</React.Fragment>
+				</div>
 			);
 		}
 	);
@@ -55,4 +55,5 @@ const useStyles = makeStyles()((theme) => ({
 		marginLeft: theme.spacing(4),
 		display: 'table-caption',
 	},
+	productFunctions: { marginBottom: theme.spacing(6) },
 }));

src/ui/components/pages/service/section/functions/function.js

@@ -6,26 +6,18 @@ export const Function = ({ fct }) => {
 	const { classes } = useStyles();
 
 	return (
-		<div key={fct.id}>
-			<Typography variant='subtitle1' textTransform='uppercase' color='grey'>
-				{fct['gsbpm']['label']}
+		<li>
+			<Typography
+				variant='subtitle1'
+				textTransform='uppercase'
+				className={classes.fctLabel}
+			>
+				{fct['label']}
 			</Typography>
-
-			<ul>
-				<li>
-					<Typography
-						variant='subtitle1'
-						textTransform='uppercase'
-						className={classes.fctLabel}
-					>
-						{fct['label']}
-					</Typography>
-					<Typography variant='body1' color='GrayText'>
-						{fct['description']}
-					</Typography>
-				</li>
-			</ul>
-		</div>
+			<Typography variant='body1' color='GrayText'>
+				{fct['description']}
+			</Typography>
+		</li>
 	);
 };
 

src/ui/components/pages/service/section/functions/functionsGroupedByProducts.js → src/ui/components/pages/service/section/functions/functionsByGsbpm.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Function } from './function';
 //import { makeStyles } from 'tss-react/mui';
 
-export const FunctionsGroupedByProducts = ({ productFunctions }) => {
+export const FunctionsByGSBPM = ({ productFunctions }) => {
 	//const { classes } = useStyles();
 
 	return (

src/ui/components/pages/service/section/functions/functionsByProducts.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Function } from './function';
+import groupBy from 'lodash.groupby';
+import Typography from '@mui/material/Typography';
+
+//import { makeStyles } from 'tss-react/mui';
+
+export const FunctionsByProducts = ({ productFunctions }) => {
+	//const { classes } = useStyles();
+
+	//  Object.values(groupBy(productFunctions, (fct) => fct.gsbpm.id)).map(
+	return (
+		<>
+			{Object.values(groupBy(productFunctions, (fct) => fct.gsbpm.id)).map(
+				(gsbpmGroupedFct) => {
+					const gsbpmLabel = gsbpmGroupedFct[0]['gsbpm']['label'];
+					return (
+						<>
+							<Typography
+								variant='subtitle1'
+								textTransform='uppercase'
+								color='grey'
+							>
+								{gsbpmLabel}
+							</Typography>
+							<ul>
+								{gsbpmGroupedFct.map((fct) => (
+									<Function fct={fct} key={fct.id} />
+								))}
+							</ul>
+						</>
+					);
+				}
+			)}
+		</>
+	);
+};
+
+//const useStyles = makeStyles()((theme) => ({}));