diff --git a/src/components/recommandations/Recommandation.tsx b/src/components/recommandations/Recommandation.tsx
index 64c5f89..6414bde 100644
--- a/src/components/recommandations/Recommandation.tsx
+++ b/src/components/recommandations/Recommandation.tsx
@@ -1,10 +1,6 @@
import {
- AccordionButton,
- AccordionItem,
- AccordionPanel,
Box,
Flex,
- Heading,
Radio,
RadioGroup,
Stack,
@@ -13,22 +9,12 @@ 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({
@@ -36,7 +22,6 @@ export default function RecommandationDisplay({
}: 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 ? (
-
- {({ isExpanded }) => (
- <>
-
-
-
- {recommandation.zoneName}
-
-
-
- {recommandation.parameter}
-
- ⓘ
-
-
-
-
-
-
-
-
-
- Current: {recommandation.currentValue}
-
-
- More sober: {recommandation.betterValue}
-
- {recommandation.bestValue && (
-
- Most sober: {recommandation.bestValue}
-
- )}
-
-
-
-
- )}
-
- ) : null;
+
+ return (
+
+
+
+ {recommandation.parameter}
+
+ ⓘ
+
+
+
+
+
+
+ Current: {recommandation.currentValue}
+
+
+ More sober: {recommandation.betterValue}
+
+ {recommandation.bestValue && (
+
+ Most sober: {recommandation.bestValue}
+
+ )}
+
+
+
+ );
}
diff --git a/src/components/recommandations/RecommandationsByZone.tsx b/src/components/recommandations/RecommandationsByZone.tsx
new file mode 100644
index 0000000..781a319
--- /dev/null
+++ b/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 ? (
+
+ {({ isExpanded }) => (
+ <>
+
+
+
+ {zoneRecommandations[0].zoneName}
+
+
+
+
+
+
+ {zoneRecommandations?.map((reco) => (
+
+ ))}
+
+
+ )}
+
+ ) : null;
+}
diff --git a/src/components/recommandations/RecommandationsList.tsx b/src/components/recommandations/RecommandationsList.tsx
index 4bdee6b..ca662db 100644
--- a/src/components/recommandations/RecommandationsList.tsx
+++ b/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[];
+ 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 (
- {recommandations.map((reco) => (
-
- ))}
+ {Object.entries(recoGroupedByZone(recommandations))?.map(
+ ([key, value]) => (
+
+ )
+ )}
);
}
diff --git a/src/components/zones/ZoneScreenshot.tsx b/src/components/zones/ZoneScreenshot.tsx
new file mode 100644
index 0000000..c01d38c
--- /dev/null
+++ b/src/components/zones/ZoneScreenshot.tsx
@@ -0,0 +1,73 @@
+import { useAppSelector } from "../../app/hooks";
+import { Image as ChakraImage, Box } from "@chakra-ui/react";
+import { useEffect, 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 [zoneDim, setZoneDim] = useState({
+ x: zone?.x || 0,
+ y: zone?.y || 0,
+ width: zone?.width || 0,
+ height: zone?.height || 0,
+ });
+ const imageUrl = getSvgUrlFromCurrentUrl();
+
+ useEffect(() => {
+ if (!zone) return;
+
+ const img = new Image();
+ img.width = ZONES_CONTAINER_WIDTH;
+ img.src = imageUrl;
+
+ img.onload = () => {
+ // 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({
+ x: zone.x - paddingWidthToAdd,
+ y: zone.y - paddingHeightToAdd,
+ width: zone.width + paddingWidthToAdd * 2,
+ height: zone.height + paddingHeightToAdd * 2,
+ });
+ };
+ }, [zone]);
+ if (!zone) return ;
+
+ console.log("zoneDim", zoneDim);
+ return (
+
+
+
+ );
+};
+
+// return { ZoneScreenshot };
+// };
+export default ZoneScreenshot;
diff --git a/src/components/zones/ZonesView.tsx b/src/components/zones/ZonesView.tsx
index d64d4e4..ad97411 100644
--- a/src/components/zones/ZonesView.tsx
+++ b/src/components/zones/ZonesView.tsx
@@ -18,8 +18,9 @@ import { Route, Routes } from "react-router-dom";
import FetchedSVG from "../../features/figma/components/FetchedSVG";
import { colorTheme } from "../../theme";
-import { ZONES_MAX_WIDTH } from "../../services/const";
+import { ZONES_CONTAINER_WIDTH } from "../../services/const";
import { ZONES_CONTAINER_PADDING } from "../../features/figma/utils";
+import { useEffect } from "react";
const brandColor = colorTheme[400];
const resizeHandleSVG = (
@@ -75,11 +76,8 @@ export default function ZonesView({
zoom: number;
}) {
const dispatch = useDispatch();
- //const zones = useAppSelector((state) => state.zones);
- //Waiting for blob to be in S3 database
- /* const projectScreenshot = useAppSelector(
- (state) => state.project.screenshotBlob
- ); */
+ const containerDim = `${ZONES_CONTAINER_WIDTH * zoom}px`;
+
const selectedZone = useSelectedZone();
const { isOpen, onOpen, onClose } = useDisclosure();
const handleDelete = (e: KeyboardEvent) => {
@@ -87,7 +85,7 @@ export default function ZonesView({
onOpen();
}
};
- React.useEffect(() => {
+ useEffect(() => {
document.addEventListener("keydown", handleDelete);
return () => {
document.removeEventListener("keydown", handleDelete);
@@ -117,12 +115,14 @@ export default function ZonesView({
/>
-
-
+
@@ -143,97 +143,41 @@ export default function ZonesView({
element={
-
-
- ) : (
-
- )} */}
- {/*
-
-
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
- 
-
- }
- />
-
- 
-
- }
- />
-
-
-
- }
- />
- */}
-
- {zones.map((z) => {
- return (
-
- );
- })}
);
}
diff --git a/src/features/figma/components/FetchedSVG.tsx b/src/features/figma/components/FetchedSVG.tsx
index a5296e7..2ff95db 100644
--- a/src/features/figma/components/FetchedSVG.tsx
+++ b/src/features/figma/components/FetchedSVG.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React from "react";
import SVG from "react-inlinesvg";
import { useDispatch } from "react-redux";
@@ -6,7 +6,6 @@ import {
getRelativePosition,
getTreeHierarchyFromDOM,
hashCode,
- registerHoverEventsOnFigmaEls,
REMOTE_PARENT_SVG_ID,
} from "../utils";
import { colorTheme } from "../../../theme";
@@ -64,13 +63,14 @@ const FetchedSVG = ({
return (