refactor: Update zone handling by integrating zoneStore in multiple components and removing unused zones state

2025-07-03 17:55:19 +05:30
parent 3f59f5d2dd
commit 46ff5c0208
10 changed files with 80 additions and 56 deletions
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -12,13 +12,17 @@ import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCam
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
 import { useVersionContext } from "../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../modules/scene/sceneContext";

 const ZoneProperties: React.FC = () => {
  const { Edit, setEdit } = useEditPosition();
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  const { zonePosition, setZonePosition } = usezonePosition();
  const { zoneTarget, setZoneTarget } = usezoneTarget();
-  const { zones, setZones } = useZones();
+  // const { zones, setZones } = useZones();
+  const { assetStore, zoneStore } = useSceneContext();
+  const { zones, setZoneName } = zoneStore()
+
  const { projectId } = useParams();
  const { userName, userId, organization, email } = getUserData();
  const { selectedVersionStore } = useVersionContext();
@@ -34,10 +38,11 @@ const ZoneProperties: React.FC = () => {

      let zonesdata = {
        zoneUuid: selectedZone.zoneUuid,
-        viewPortposition: zonePosition,
-        viewPortCenter: zoneTarget,
+        viewPortPosition: zonePosition,
+        viewPortTarget: zoneTarget,
      };

+
      let response = await zoneCameraUpdate(zonesdata, organization, projectId, selectedVersion?.versionId || "");
      // console.log('response: ', response);
      if (response.message === "zone updated") {
@@ -63,13 +68,14 @@ const ZoneProperties: React.FC = () => {
    let response = await zoneCameraUpdate(zonesdata, organization, projectId, selectedVersion?.versionId || "");
    if (response.message === "zone updated") {
      setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
-      setZones((prevZones: any[]) =>
-        prevZones.map((zone) =>
-          zone.zoneUuid === selectedZone.zoneUuid
-            ? { ...zone, zoneName: newName }
-            : zone
-        )
-      );
+      setZoneName(selectedZone.zoneUuid, newName)
+      // setZones((prevZones: any[]) =>
+      //   prevZones.map((zone) =>
+      //     zone.zoneUuid === selectedZone.zoneUuid
+      //       ? { ...zone, zoneName: newName }
+      //       : zone
+      //   )
+      // );
    } else {
      // console.log(response?.message);
    }
@@ -81,6 +87,7 @@ const ZoneProperties: React.FC = () => {
    setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
  }
  const checkZoneNameDuplicate = (name: string) => {
+    console.log('zones: ', zones);
    return zones.some(
      (zone: any) =>
        zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() &&
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -44,16 +44,19 @@ const DropDownList: React.FC<DropDownListProps> = ({
  remove,
 }) => {
  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
-  const { zones } = useZones();
+  // const { zones } = useZones();

  const handleToggle = () => {
    setIsOpen((prev) => !prev); // Toggle the state
  };

  const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
-  const { assetStore } = useSceneContext();
+  // const { assetStore } = useSceneContext();
+  const { assetStore, zoneStore } = useSceneContext();
  const { assets } = assetStore();
-  
+  const { zones } = zoneStore()
+
+
  const isPointInsidePolygon = (
    point: [number, number],
    polygon: [number, number][]
@@ -76,7 +79,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
  };

  useEffect(() => {
-    const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
+    const updatedZoneList: ZoneData[] = zones?.map((zone: any) => {
      const polygon2D = zone.points.map((p: [number, number, number]) => [
        p[0],
        p[2],
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -46,7 +46,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
  const { activeModule } = useModuleStore();
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
-  const { zones, setZones } = useZones();
+
  const { setSubModule } = useSubModuleStore();
  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
  const { projectId } = useParams();
@@ -55,6 +55,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
  const { organization } = getUserData();
  const { selectedVersionStore } = useVersionContext();
  const { selectedVersion } = selectedVersionStore();
+  const { zoneStore } = useSceneContext();
+  const { zones, setZoneName } = zoneStore()

  useEffect(() => {
    useSelectedZoneStore.getState().setSelectedZone({
@@ -92,8 +94,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
        lockedPanels: response?.lockedPanels ?? [],
        widgets: response?.widgets ?? [],
        zoneUuid: response?.zoneUuid,
-        zoneViewPortTarget: response?.viewPortCenter ?? [],
-        zoneViewPortPosition: response?.viewPortposition ?? [],
+        zoneViewPortTarget: response?.viewPortTarget ?? [],
+        zoneViewPortPosition: response?.viewPortPosition ?? [],
      });
    } catch (error) {
      echo.error("Failed to select zone");
@@ -123,13 +125,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
    const response = await zoneCameraUpdate(zonesdata, organization, projectId, selectedVersion?.versionId || "");
    if (response.message === "zone updated") {
      setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
-      setZones((prevZones: any[]) =>
-        prevZones.map((zone) =>
-          zone.zoneUuid === selectedZone.zoneUuid
-            ? { ...zone, zoneName: newName }
-            : zone
-        )
-      );
+      setZoneName(selectedZone.zoneUuid, newName)
+      // setZones((prevZones: any[]) =>
+      //   prevZones.map((zone) =>
+      //     zone.zoneUuid === selectedZone.zoneUuid
+      //       ? { ...zone, zoneName: newName }
+      //       : zone
+      //   )
+      // );
    }
  }

--- a/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx
+++ b/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx
@@ -20,7 +20,7 @@ function ZoneCreator() {
    const { activeLayer } = useActiveLayer();
    const { socket } = useSocketStore();
    const { zoneStore } = useSceneContext();
-    const { addZone, getZonePointById, getZoneByPoints } = zoneStore();
+    const { zones, addZone, getZonePointById, getZoneByPoints } = zoneStore();
    const drag = useRef(false);
    const isLeftMouseDown = useRef(false);
    const { selectedVersionStore } = useVersionContext();
@@ -32,6 +32,7 @@ function ZoneCreator() {
    const [isCreating, setIsCreating] = useState(false);
    const { zoneColor, zoneHeight, snappedPosition, snappedPoint, setSnappedPoint, setSnappedPosition } = useBuilderStore();

+
    useEffect(() => {
        const canvasElement = gl.domElement;

@@ -92,7 +93,7 @@ function ZoneCreator() {
            if (tempPoints.length > 2 && isCreating && snappedPoint && snappedPoint.pointUuid === tempPoints[0].pointUuid) {
                const zone: Zone = {
                    zoneUuid: THREE.MathUtils.generateUUID(),
-                    zoneName: "Zone",
+                    zoneName: `Zone `,
                    points: tempPoints,
                    zoneColor,
                    zoneHeight,
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -17,6 +17,7 @@ import { useWidgetStore } from "../../store/useWidgetStore";
 import { useNavigate, useParams } from "react-router-dom";
 import { getUserData } from "../../functions/getUserData";
 import { useVersionContext } from "../builder/version/versionContext";
+import { useSceneContext } from "../scene/sceneContext";

 type Side = "top" | "bottom" | "left" | "right";

@@ -28,6 +29,7 @@ type FormattedZoneData = Record<
    points: [];
    lockedPanels: Side[];
    zoneUuid: string;
+    zoneName: string;
    zoneViewPortTarget: number[];
    zoneViewPortPosition: number[];
    widgets: Widget[];
@@ -64,6 +66,9 @@ const RealTimeVisulization: React.FC = () => {
  const { selectedVersion } = selectedVersionStore();
  const { projectId } = useParams();
  const navigate = useNavigate();
+  const { zoneStore } = useSceneContext();
+  const { zones } = zoneStore();
+

  OuterClick({
    contextClassName: [
@@ -82,6 +87,7 @@ const RealTimeVisulization: React.FC = () => {
  useEffect(() => {
    if (!projectId || !selectedVersion) return;
    getZone2dData(organization, projectId, selectedVersion?.versionId || '').then((response) => {
+      // console.log('response: ', response);
      if (!response) return;
      // if (response.status === 401) {
      //   console.log("force logout");
@@ -94,19 +100,21 @@ const RealTimeVisulization: React.FC = () => {
      const formattedData = response.reduce<FormattedZoneData>(
        (acc, zone) => {

-          acc[zone.zoneName] = {
+          acc[zone.zoneUuid] = {
            activeSides: [],
            panelOrder: [],
            lockedPanels: [],
            points: zone.points,
            zoneUuid: zone.zoneUuid,
-            zoneViewPortTarget: zone.viewPortCenter,
-            zoneViewPortPosition: zone.viewPortposition,
+            zoneName: zone.zoneName,
+            zoneViewPortTarget: zone.viewPortTarget,
+            zoneViewPortPosition: zone.viewPortPosition,
            widgets: [],
          };
          return acc;
        }, {}
      );
+      // console.log('formattedData: ', formattedData);
      setZonesData(formattedData);
    })

@@ -119,13 +127,14 @@ const RealTimeVisulization: React.FC = () => {
      if (!selectedZone) return prev;
      return {
        ...prev,
-        [selectedZone.zoneName]: {
-          ...prev[selectedZone.zoneName], // Keep existing properties
+        [selectedZone.zoneUuid]: {
+          ...prev[selectedZone.zoneUuid], // Keep existing properties
          activeSides: selectedZone.activeSides || [],
          panelOrder: selectedZone.panelOrder || [],
          lockedPanels: selectedZone.lockedPanels || [],
          points: selectedZone.points || [],
          zoneUuid: selectedZone.zoneUuid || "",
+          zoneName: selectedZone.zoneName || "",
          zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
          zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
          widgets: selectedZone.widgets || [],
--- a/app/src/modules/visualization/zone/DisplayZone.tsx
+++ b/app/src/modules/visualization/zone/DisplayZone.tsx
@@ -34,6 +34,7 @@ interface DisplayZoneProps {
      points: [];
      widgets: Widget[];
      zoneUuid: string;
+      zoneName: string;
      zoneViewPortTarget: number[];
      zoneViewPortPosition: number[];
    };
@@ -111,8 +112,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      setShowLeftArrow(isOverflowing && canScrollLeft);
      setShowRightArrow(isOverflowing && canScrollRight);

-      // console.log('canScrollRight: ', canScrollRight);
-      // console.log('isOverflowing: ', isOverflowing);
+      // 
+      // 
    }
  }, []);

@@ -180,9 +181,10 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      // setSelectedChartId(null);

      let response = await getSelect2dZoneData(zoneUuid, organization, projectId, selectedVersion?.versionId || '');
-      // console.log('response2d: ', response);
+
+      // 
      let res = await getFloatingZoneData(zoneUuid, organization, projectId, selectedVersion?.versionId || '');
-      // console.log("resFloating: ", res);
+      // 

      setFloatingWidget(res);
      // Set the selected zone in the store
@@ -201,8 +203,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
        widgets: response.widgets || [],
        points: response.points || [],
        zoneUuid: zoneUuid,
-        zoneViewPortTarget: response.viewPortCenter || {},
-        zoneViewPortPosition: response.viewPortposition || {},
+        zoneViewPortTarget: response.viewPortTarget || [],
+        zoneViewPortPosition: response.viewPortPosition || [],
      });
    } catch (error) {
      echo.error("Failed to select zone");
@@ -238,20 +240,22 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      >
        {Object.keys(zonesData).length !== 0 ? (
          <>
-            {Object.keys(zonesData).map((zoneName, index) => (
-              <div
-                key={index}
-                className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
-                  }`}
-                onClick={() => {
+            {Object.values(zonesData).map((zone, index) => (
+              <>
+                { }
+                <div
+                  key={index}
+                  className={`zone ${selectedZone.zoneUuid === zone.zoneUuid ? "active" : ""
+                    }`}
+                  onClick={() => {

-                  console.log('zonesData: ', zonesData);
-                  handleSelect2dZoneData(zonesData[zoneName]?.zoneUuid, zoneName)
-                }
-                }
-              >
-                {zoneName}
-              </div>
+                    handleSelect2dZoneData(zonesData[zone.zoneUuid]?.zoneUuid, zone.zoneName)
+                  }
+                  }
+                >
+                  {zone.zoneName}
+                </div>
+              </>
            ))}
          </>
        ) : (
--- a/app/src/modules/visualization/zone/zoneCameraTarget.tsx
+++ b/app/src/modules/visualization/zone/zoneCameraTarget.tsx
@@ -10,6 +10,7 @@ import {

 export default function ZoneCentreTarget() {
  const { selectedZone } = useSelectedZoneStore();
+  // 
  const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(
    null
  );
--- a/app/src/pages/UserAuth.tsx
+++ b/app/src/pages/UserAuth.tsx
@@ -56,7 +56,6 @@ const UserAuth: React.FC = () => {

        try {
          const projects = await recentlyViewed(organization, res.message.userId);
-          console.log('projects: ', projects);
          if (res.message.isShare) {
            if (Object.values(projects.RecentlyViewed).length > 0) {
              const firstId = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
--- a/app/src/services/factoryBuilder/zone/getZonesApi.ts
+++ b/app/src/services/factoryBuilder/zone/getZonesApi.ts
@@ -1,9 +1,6 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;

-export const getZonesApi = async (
-    projectId: string,
-    versionId: string,
-) => {
+export const getZonesApi = async (projectId: string, versionId: string,) => {
    try {
        const response = await fetch(`${url_Backend_dwinzo}/api/V1/zones/${projectId}/${versionId}`, {
            method: "GET",
--- a/app/src/services/visulization/zone/zoneCameraUpdation.ts
+++ b/app/src/services/visulization/zone/zoneCameraUpdation.ts
@@ -3,7 +3,7 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR

 export const zoneCameraUpdate = async (zoneData: {}, organization: string, projectId?: string, versionId?: string) => {
  try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/V1/zones`, {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/upsertZone`, {
      method: "POST",
      headers: {
        Authorization: "Bearer <access_token>",  // Replace with actual token