Add post figma-link code

src/components/recommandations/Recommandation.tsx

@@ -1,10 +1,6 @@
 import {
-  AccordionButton,
-  AccordionItem,
-  AccordionPanel,
   Box,
   Flex,
-  Heading,
   Radio,
   RadioGroup,
   Stack,
@@ -13,30 +9,19 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 import { useDispatch } from "react-redux";
-import { GenericParameters } from "../../app/types/generalFormTypes";
-import {
-  RecommandationOption,
-  RecommandationWithZone,
-} from "../../app/types/recommandations";
-import { VideoParameters } from "../../app/types/videoTypes";
+import { RecommandationOption } from "../../app/types/recommandations";
 import { recommandationUpdated } from "../../features/recommandations/recommandationsSlice";
-import useZoneScreenshot from "../../hooks/useZoneScreenshot";
-import AccordionChevron from "../layout/AccordionChevron";
-//import { ReportCTX } from "./RecoReport";
+import { RecommandationType } from "./RecommandationsList";
 
 interface RecommandationDisplayProps {
-  recommandation: RecommandationWithZone<
-    | VideoParameters[keyof VideoParameters]
-    | GenericParameters[keyof GenericParameters]
-  >;
+  recommandation: RecommandationType;
 }
 
 export default function RecommandationDisplay({
   recommandation,
 }: RecommandationDisplayProps) {
   //const { totalBenefits, setTotalBenefits } = React.useContext(ReportCTX);
   const dispatch = useDispatch();
-  const { ZoneScreenshot } = useZoneScreenshot();
 
   const onChangeParams = React.useCallback(
     (v: RecommandationOption) => {
@@ -46,47 +31,35 @@ export default function RecommandationDisplay({
     },
     [recommandation]
   );
-  return recommandation.betterValue ? (
-    <AccordionItem>
-      {({ isExpanded }) => (
-        <>
-          <AccordionButton _hover={{ backgroundColor: "brand.100" }} pl={2}>
-            <Box flex="1" textAlign="left">
-              <Heading mr={1} size="sm">
-                {recommandation.zoneName}
-              </Heading>
-              <ZoneScreenshot zoneId={recommandation.zoneId} />
-              <Flex>
-                <Text>{recommandation.parameter}</Text>
-                <Tooltip label="Biblio de reco + best practices" hasArrow>
-                  ⓘ
-                </Tooltip>
-              </Flex>
-            </Box>
-            <AccordionChevron isExpanded={isExpanded} />
-          </AccordionButton>
-          <AccordionPanel>
-            <RadioGroup
-              value={recommandation.selectedValue || "current"}
-              onChange={onChangeParams}
-            >
-              <Stack>
-                <Radio colorScheme={"brand"} value={"current"} size="sm">
-                  Current:&nbsp;{recommandation.currentValue}
-                </Radio>
-                <Radio colorScheme={"brand"} value={"better"} size="sm">
-                  More sober:&nbsp;{recommandation.betterValue}
-                </Radio>
-                {recommandation.bestValue && (
-                  <Radio colorScheme={"brand"} value={"optimal"} size="sm">
-                    Most sober:&nbsp;{recommandation.bestValue}
-                  </Radio>
-                )}
-              </Stack>
-            </RadioGroup>
-          </AccordionPanel>
-        </>
-      )}
-    </AccordionItem>
-  ) : null;
+
+  return (
+    <Box mb={2}>
+      <Box flex="1" textAlign="left">
+        <Flex>
+          <Text>{recommandation.parameter}</Text>
+          <Tooltip label="Biblio de reco + best practices" hasArrow>
+            ⓘ
+          </Tooltip>
+        </Flex>
+      </Box>
+      <RadioGroup
+        value={recommandation.selectedValue || "current"}
+        onChange={onChangeParams}
+      >
+        <Stack>
+          <Radio colorScheme={"brand"} value={"current"} size="sm">
+            Current:&nbsp;{recommandation.currentValue}
+          </Radio>
+          <Radio colorScheme={"brand"} value={"better"} size="sm">
+            More sober:&nbsp;{recommandation.betterValue}
+          </Radio>
+          {recommandation.bestValue && (
+            <Radio colorScheme={"brand"} value={"optimal"} size="sm">
+              Most sober:&nbsp;{recommandation.bestValue}
+            </Radio>
+          )}
+        </Stack>
+      </RadioGroup>
+    </Box>
+  );
 }

src/components/recommandations/RecommandationsByZone.tsx

@@ -0,0 +1,48 @@
+import {
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Heading,
+} from "@chakra-ui/react";
+import AccordionChevron from "../layout/AccordionChevron";
+import Recommandation from "./Recommandation";
+import { RecommandationType } from "./RecommandationsList";
+import ZoneScreenshot from "../zones/ZoneScreenshot";
+
+interface RecommandationDisplayProps {
+  zoneRecommandations: RecommandationType[];
+  zoneId: string;
+}
+
+export default function RecommandationsByZone({
+  zoneRecommandations,
+  zoneId,
+}: RecommandationDisplayProps) {
+  //const { totalBenefits, setTotalBenefits } = React.useContext(ReportCTX);
+
+  const showZone = zoneRecommandations.find((reco) => reco.betterValue);
+
+  return showZone ? (
+    <AccordionItem>
+      {({ isExpanded }) => (
+        <>
+          <AccordionButton _hover={{ backgroundColor: "brand.100" }} pl={2}>
+            <Box flex="1" textAlign="left">
+              <Heading mr={1} size="sm">
+                {zoneRecommandations[0].zoneName}
+              </Heading>
+              <ZoneScreenshot zoneId={zoneId} />
+            </Box>
+            <AccordionChevron isExpanded={isExpanded} />
+          </AccordionButton>
+          <AccordionPanel>
+            {zoneRecommandations?.map((reco) => (
+              <Recommandation recommandation={reco} key={reco.id} />
+            ))}
+          </AccordionPanel>
+        </>
+      )}
+    </AccordionItem>
+  ) : null;
+}

src/components/recommandations/RecommandationsList.tsx

@@ -3,21 +3,47 @@ import { GenericParameters } from "../../app/types/generalFormTypes";
 import { RecommandationWithZone } from "../../app/types/recommandations";
 import { VideoParameters } from "../../app/types/videoTypes";
 import RecommandationDisplay from "./Recommandation";
+import RecommandationsByZone from "./RecommandationsByZone";
+
+export type RecommandationType = RecommandationWithZone<
+  | VideoParameters[keyof VideoParameters]
+  | GenericParameters[keyof GenericParameters]
+>;
 
 interface RecommandationsListProps {
-  recommandations: RecommandationWithZone<VideoParameters[keyof VideoParameters] | GenericParameters[keyof GenericParameters]>[];
+  recommandations: RecommandationType[];
   allOpen: boolean;
 }
 export default function RecommandationsList({
   recommandations,
-  allOpen
+  allOpen,
 }: RecommandationsListProps) {
   const indexes = Array.from(recommandations.keys());
+
+  const groupBy = (array: any[], property: any) =>
+    array.reduce(
+      (grouped, element) => ({
+        ...grouped,
+        [element[property]]: [...(grouped[element[property]] || []), element],
+      }),
+      {}
+    );
+
+  const recoGroupedByZone = (recommandations: RecommandationType[]) => {
+    return groupBy(recommandations, "zoneId");
+  };
+
   return (
     <Accordion allowToggle index={allOpen ? indexes : undefined}>
-      {recommandations.map((reco) => (
-        <RecommandationDisplay key={reco.id} recommandation={reco} />
-      ))}
+      {Object.entries(recoGroupedByZone(recommandations))?.map(
+        ([key, value]) => (
+          <RecommandationsByZone
+            key={key}
+            zoneRecommandations={value as RecommandationType[]}
+            zoneId={key}
+          />
+        )
+      )}
     </Accordion>
   );
 }

src/components/zones/ZoneScreenshot.tsx

@@ -0,0 +1,72 @@
+import { useAppSelector } from "../../app/hooks";
+import { Image as ChakraImage, Box } from "@chakra-ui/react";
+import { useRef, useState } from "react";
+import { getSvgUrlFromCurrentUrl } from "../../features/figma/components/FetchedSVG";
+import { RootState } from "../../app/store";
+import { ZONES_CONTAINER_WIDTH } from "../../services/const";
+
+//GET image loaded into project
+//Link project to S3 url -> one img/ project
+type ZoneScreenshotProps = {
+  zoneId: string;
+};
+
+const screenshotPadding = 10;
+
+const ZoneScreenshot = ({ zoneId }: ZoneScreenshotProps) => {
+  const zone = useAppSelector((state: RootState) =>
+    state.zonesSlice.zones?.find((z) => z.id === zoneId)
+  );
+  const loaded = useRef<boolean>(false);
+
+  const [zoneDim, setZoneDim] = useState({
+    x: zone?.x || 0,
+    y: zone?.y || 0,
+    width: zone?.width || 0,
+    height: zone?.height || 0,
+  });
+  if (!zone) return <div />;
+
+  const imageUrl = getSvgUrlFromCurrentUrl();
+
+  const img = new Image();
+  img.width = ZONES_CONTAINER_WIDTH;
+  img.src = imageUrl;
+
+  img.onload = () => {
+    if (loaded.current) return;
+    loaded.current = true;
+    // add extra padding  if value are valid (not smaller than 0 and bigger than image height
+
+    const paddingWidthToAdd = Math.max(
+      0,
+      Math.min(screenshotPadding, (img.width - zoneDim.width) / 2)
+    );
+    const paddingHeightToAdd = Math.max(
+      0,
+      Math.min(screenshotPadding, (img.height - zoneDim.height) / 2)
+    );
+
+    setZoneDim((prevZoneDim) => ({
+      x: prevZoneDim.x - paddingWidthToAdd,
+      y: prevZoneDim.y - paddingHeightToAdd,
+      width: prevZoneDim.width + paddingWidthToAdd * 2,
+      height: prevZoneDim.height + paddingHeightToAdd * 2,
+    }));
+  };
+
+  console.log("zoneDim", zoneDim);
+  return (
+    <Box py={2}>
+      <ChakraImage
+        objectFit="contain"
+        src={`//images.weserv.nl/?url=${imageUrl}&w=${ZONES_CONTAINER_WIDTH}&cx=${zoneDim.x}&cy=${zoneDim.y}&cw=${zoneDim.width}&ch=${zoneDim.height}`}
+        height="80px" /* fallbackSrc="/assets/placeholder.gif" */
+      />
+    </Box>
+  );
+};
+
+//   return { ZoneScreenshot };
+// };
+export default ZoneScreenshot;