From 7b4e1963e6d58234132b0bbe4525413538a60629 Mon Sep 17 00:00:00 2001
From: Emile Rolley <emile.rolley@tuta.io>
Date: Thu, 2 Nov 2023 11:53:41 +0100
Subject: [PATCH] refactor(groupe): use categories to filter group result value
 to show

---
 source/components/publicodesUtils.tsx         |  2 +-
 .../components/VotreEmpreinte.tsx             | 74 +++++++++++--------
 source/pages/groupe-dashboard/index.tsx       |  4 +
 3 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/source/components/publicodesUtils.tsx b/source/components/publicodesUtils.tsx
index 3ac14c590..490144310 100644
--- a/source/components/publicodesUtils.tsx
+++ b/source/components/publicodesUtils.tsx
@@ -303,7 +303,7 @@ const categoryColorOverride = {
 }
 
 export function extractCategories(
-	rules: any,
+	rules: NGCRules,
 	engine: Engine<DottedName>,
 	valuesFromURL?: any,
 	parentRule = MODEL_ROOT_RULE_NAME,
diff --git a/source/pages/groupe-dashboard/components/VotreEmpreinte.tsx b/source/pages/groupe-dashboard/components/VotreEmpreinte.tsx
index d65c91329..4fa423f78 100644
--- a/source/pages/groupe-dashboard/components/VotreEmpreinte.tsx
+++ b/source/pages/groupe-dashboard/components/VotreEmpreinte.tsx
@@ -1,3 +1,4 @@
+import { Category } from '@/components/publicodesUtils'
 import { formatValue } from 'publicodes'
 import { Trans } from 'react-i18next'
 import { ValueObject } from '../hooks/useGetGroupStats'
@@ -5,11 +6,15 @@ import PercentageDiff from './PercentageDiff'
 
 export default function VotreEmpreinte({
 	categoriesFootprints,
+	categories,
 	membersLength,
 }: {
-	categoriesFootprints?: Record<string, ValueObject> | undefined
+	categoriesFootprints: Record<string, ValueObject> | undefined
+	categories: Category[]
 	membersLength: number
 }) {
+	console.log('categories', categories)
+	console.log('categoriesFootprints', categoriesFootprints)
 	return (
 		<>
 			<h2 className="text-lg mb-1 mt-0" data-cypress-id="votre-empreinte-title">
@@ -24,38 +29,43 @@ export default function VotreEmpreinte({
 			<ul className="mt-6 pl-0 mb-16">
 				{Object.entries(categoriesFootprints ?? {}).reduce(
 					(acc, [key, { icon, title, variation, value }]) => {
-						if (!icon || !title) return acc
-						return [
-							...acc,
-							<li
-								key={`cat-${key}`}
-								className="flex items-center justify-between py-4 border-solid border-0 border-b-[1px] last:border-b-0 border-gray-200"
-							>
-								<div className="flex items-center">
-									<div className="flex-shrink-0 text-2xl">
-										<span>{icon}</span>
-									</div>
-									<div className="ml-4">
-										<div className="text-md font-bold text-gray-900">
-											{title}
+						return title !== undefined &&
+							icon !== undefined &&
+							categories.find(
+								({ dottedName }) => dottedName === title.toLowerCase()
+							)
+							? [
+									...acc,
+									<li
+										key={`cat-${key}`}
+										className="flex items-center justify-between py-4 border-solid border-0 border-b-[1px] last:border-b-0 border-gray-200"
+									>
+										<div className="flex items-center">
+											<div className="flex-shrink-0 text-2xl">
+												<span>{icon}</span>
+											</div>
+											<div className="ml-4">
+												<div className="text-md font-bold text-gray-900">
+													{title}
+												</div>
+											</div>
+											{membersLength > 1 && (
+												<PercentageDiff variation={variation ?? 0} />
+											)}
 										</div>
-									</div>
-									{membersLength > 1 && (
-										<PercentageDiff variation={variation ?? 0} />
-									)}
-								</div>
-								<div className="flex items-center gap-4">
-									<div className="text-sm text-primary bg-primaryLight border-solid border-[1px] border-primaryBorder rounded-[5px] p-1">
-										<strong>
-											{formatValue(value / 1000, {
-												precision: 1,
-											})}
-										</strong>{' '}
-										t
-									</div>
-								</div>
-							</li>,
-						]
+										<div className="flex items-center gap-4">
+											<div className="text-sm text-primary bg-primaryLight border-solid border-[1px] border-primaryBorder rounded-[5px] p-1">
+												<strong>
+													{formatValue(value / 1000, {
+														precision: 1,
+													})}
+												</strong>{' '}
+												t
+											</div>
+										</div>
+									</li>,
+							  ]
+							: acc
 					},
 					[] as JSX.Element[]
 				)}
diff --git a/source/pages/groupe-dashboard/index.tsx b/source/pages/groupe-dashboard/index.tsx
index 25751e299..781fd8780 100644
--- a/source/pages/groupe-dashboard/index.tsx
+++ b/source/pages/groupe-dashboard/index.tsx
@@ -26,6 +26,7 @@ import { matomoEventUpdateGroupName } from '@/analytics/matomo-events'
 import Button from '@/components/groupe/Button'
 import InlineTextInput from '@/components/groupe/InlineTextInput'
 import Separator from '@/components/groupe/Separator'
+import { extractCategories } from '@/components/publicodesUtils'
 import AutoCanonicalTag from '@/components/utils/AutoCanonicalTag'
 import { useGetCurrentSimulation } from '@/hooks/useGetCurrentSimulation'
 
@@ -54,6 +55,8 @@ export default function GroupeDashboard() {
 	})
 
 	const engine = useEngine()
+	const rules = useSelector((state: AppState) => state.rules)
+	const categories = extractCategories(rules, engine)
 
 	const currentSimulation = useGetCurrentSimulation()
 
@@ -224,6 +227,7 @@ export default function GroupeDashboard() {
 
 				<VotreEmpreinte
 					categoriesFootprints={results?.currentMemberAllFootprints}
+					categories={categories}
 					membersLength={group?.members?.length}
 				/>
 			</main>