Add PriorityBoundsDataContext for shared state management across priority fields. Integrate context in EditChallenge, CustomPriorityBoundsField, and BoundsSelector components to enhance polygon handling and improve map interactions.

Author: CollinBeczak

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/EditChallenge.jsx

@@ -62,6 +62,7 @@ import {
 } from "./PriorityRuleGroup";
 import WorkflowSteps from "./WorkflowSteps";
 import "./EditChallenge.scss";
+import { PriorityBoundsDataProvider } from "../../../../Custom/RJSFFormFieldAdapter/context/PriorityBoundsDataContext";
 
 /**
  * EditChallenge manages a simple workflow for creating/editing a Challenge. We
@@ -904,72 +905,75 @@ export class EditChallenge extends Component {
                     isLongForm={this.isLongForm()}
                     setIsLongForm={this.setIsLongForm}
                   />
-                  <Form
-                    schema={activeStep.jsSchema(
-                      this.props.intl,
-                      this.props.user,
-                      challengeData,
-                      this.state.extraErrors,
-                      {
-                        longForm: this.isLongForm(),
-                      },
-                    )}
-                    uiSchema={activeStep.uiSchema(
-                      this.props.intl,
-                      this.props.user,
-                      challengeData,
-                      this.state.extraErrors,
-                      {
-                        longForm: this.isLongForm(),
-                        collapsedGroups: this.collapsedFormGroups(),
-                        toggleCollapsed: this.toggleCollapsedFormGroup,
-                        expandedFieldGroups: this.state.expandedFieldGroups,
-                        setFieldGroupExpanded: this.setFieldGroupExpanded,
-                      },
-                    )}
-                    className="form"
-                    validate={(formData, errors) => this.validate(formData, errors, activeStep)}
-                    transformErrors={this.transformErrors(this.props.intl)}
-                    widgets={{
-                      SelectWidget: CustomSelectWidget,
-                      TextWidget: CustomTextWidget,
-                      automatedEditsCheckbox: CustomCheckboxField,
-                    }}
-                    ArrayFieldTemplate={CustomArrayFieldTemplate}
-                    FieldTemplate={CustomFieldTemplate}
-                    fields={customFields}
-                    tagType={"challenges"}
-                    noHtml5Validate
-                    showErrorList={false}
-                    formData={challengeData}
-                    formContext={_merge(this.state.formContext, {
-                      bounding: challengeData?.bounding,
-                      buttonAction: BoundsSelectorModal,
-                    })}
-                    onChange={this.changeHandler}
-                    onSubmit={(formData) => this.handleSubmit(formData, nextStep)}
-                    onError={this.errorHandler}
-                    extraErrors={this.state.extraErrors}
-                  >
-                    {this.hasTaskStyleRuleErrors() && activeStep.id === "Properties" && (
-                      <div className="mr-text-red-light mr-mb-4">
-                        <FormattedMessage {...messages.customTaskStylesError} />
-                      </div>
-                    )}
-
-                    <StepNavigation
-                      activeStep={activeStep}
-                      prevStep={(stepName) => {
-                        this.isFinishing = false;
-                        prevStep(stepName);
+                  <PriorityBoundsDataProvider initialData={challengeData}>
+                    <Form
+                      schema={activeStep.jsSchema(
+                        this.props.intl,
+                        this.props.user,
+                        challengeData,
+                        this.state.extraErrors,
+                        {
+                          longForm: this.isLongForm(),
+                        },
+                      )}
+                      uiSchema={activeStep.uiSchema(
+                        this.props.intl,
+                        this.props.user,
+                        challengeData,
+                        this.state.extraErrors,
+                        {
+                          longForm: this.isLongForm(),
+                          collapsedGroups: this.collapsedFormGroups(),
+                          toggleCollapsed: this.toggleCollapsedFormGroup,
+                          expandedFieldGroups: this.state.expandedFieldGroups,
+                          setFieldGroupExpanded: this.setFieldGroupExpanded,
+                        },
+                      )}
+                      className="form"
+                      validate={(formData, errors) => this.validate(formData, errors, activeStep)}
+                      transformErrors={this.transformErrors(this.props.intl)}
+                      widgets={{
+                        SelectWidget: CustomSelectWidget,
+                        TextWidget: CustomTextWidget,
+                        automatedEditsCheckbox: CustomCheckboxField,
                       }}
-                      finish={() => {
-                        this.isFinishing = true;
-                        this.handleSubmit();
-                        return false;
-                      }}
-                    />
-                  </Form>
+                      ArrayFieldTemplate={CustomArrayFieldTemplate}
+                      FieldTemplate={CustomFieldTemplate}
+                      fields={customFields}
+                      tagType={"challenges"}
+                      noHtml5Validate
+                      showErrorList={false}
+                      formData={challengeData}
+                      formContext={_merge(this.state.formContext, {
+                        bounding: challengeData?.bounding,
+                        buttonAction: BoundsSelectorModal,
+                        formData: challengeData,
+                      })}
+                      onChange={this.changeHandler}
+                      onSubmit={(formData) => this.handleSubmit(formData, nextStep)}
+                      onError={this.errorHandler}
+                      extraErrors={this.state.extraErrors}
+                    >
+                      {this.hasTaskStyleRuleErrors() && activeStep.id === "Properties" && (
+                        <div className="mr-text-red-light mr-mb-4">
+                          <FormattedMessage {...messages.customTaskStylesError} />
+                        </div>
+                      )}
+
+                      <StepNavigation
+                        activeStep={activeStep}
+                        prevStep={(stepName) => {
+                          this.isFinishing = false;
+                          prevStep(stepName);
+                        }}
+                        finish={() => {
+                          this.isFinishing = true;
+                          this.handleSubmit();
+                          return false;
+                        }}
+                      />
+                    </Form>
+                  </PriorityBoundsDataProvider>
                 </div>
               </div>
             </BreadcrumbWrapper>

src/components/Custom/RJSFFormFieldAdapter/CustomPriorityBoundsField.jsx

@@ -6,6 +6,7 @@ import "leaflet-lasso";
 import BoundsSelector from "./components/BoundsSelector";
 import { FormattedMessage } from "react-intl";
 import messages from "./Messages";
+import { usePriorityBoundsData } from "./context/PriorityBoundsDataContext";
 
 const MapViewPreserver = ({ onViewChange }) => {
   const map = useMap();
@@ -47,6 +48,33 @@ const CustomPriorityBoundsField = (props) => {
     : "default";
 
   const formData = props.formData || [];
+  const { priorityBoundsData, updatePriorityBounds } = usePriorityBoundsData();
+
+  // Update context when this field's data changes
+  useEffect(() => {
+    updatePriorityBounds(priorityType, formData);
+  }, [formData, priorityType, updatePriorityBounds]);
+
+  // Also sync with form context if available
+  useEffect(() => {
+    const completeFormData = props.formContext?.formData || {};
+    if (
+      completeFormData.highPriorityBounds ||
+      completeFormData.mediumPriorityBounds ||
+      completeFormData.lowPriorityBounds
+    ) {
+      // Update all priority bounds in context
+      if (completeFormData.highPriorityBounds && priorityType !== "high") {
+        updatePriorityBounds("high", completeFormData.highPriorityBounds);
+      }
+      if (completeFormData.mediumPriorityBounds && priorityType !== "medium") {
+        updatePriorityBounds("medium", completeFormData.mediumPriorityBounds);
+      }
+      if (completeFormData.lowPriorityBounds && priorityType !== "low") {
+        updatePriorityBounds("low", completeFormData.lowPriorityBounds);
+      }
+    }
+  }, [props.formContext?.formData, priorityType, updatePriorityBounds]);
 
   // Show map if there are existing polygons
   useEffect(() => {
@@ -114,7 +142,12 @@ const CustomPriorityBoundsField = (props) => {
               attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
             />
 
-            <BoundsSelector value={formData} onChange={handleChange} priorityType={priorityType} />
+            <BoundsSelector
+              value={formData}
+              onChange={handleChange}
+              priorityType={priorityType}
+              allPriorityBounds={priorityBoundsData}
+            />
           </MapContainer>
         </div>
       )}

src/components/Custom/RJSFFormFieldAdapter/components/BoundsSelector.jsx

@@ -15,13 +15,14 @@ const getColor = (priorityType, state = "base") => {
   return PRIORITY_COLORS[priorityType]?.[state] || PRIORITY_COLORS.default[state];
 };
 
-const BoundsSelector = ({ value, onChange, priorityType }) => {
+const BoundsSelector = ({ value, onChange, priorityType, allPriorityBounds = {} }) => {
   const map = useMap();
   const [selecting, setSelecting] = useState(false);
   const [showRemoveModal, setShowRemoveModal] = useState(false);
   const [selectedPolygon, setSelectedPolygon] = useState(null);
 
   const featureGroupRef = useRef(null);
+  const otherPriorityGroupRef = useRef(null);
   const lassoRef = useRef(null);
   const controlRef = useRef(null);
 
@@ -30,14 +31,19 @@ const BoundsSelector = ({ value, onChange, priorityType }) => {
     if (!map) return;
 
     featureGroupRef.current = new L.FeatureGroup();
+    otherPriorityGroupRef.current = new L.FeatureGroup();
     map.addLayer(featureGroupRef.current);
+    map.addLayer(otherPriorityGroupRef.current);
 
     // Create custom control
     createMapControl();
 
     // Restore existing polygons
     restorePolygons();
 
+    // Display other priority polygons
+    displayOtherPriorityPolygons();
+
     return () => {
       cleanupLasso();
       if (controlRef.current && map) {
@@ -46,6 +52,9 @@ const BoundsSelector = ({ value, onChange, priorityType }) => {
       if (featureGroupRef.current && map) {
         map.removeLayer(featureGroupRef.current);
       }
+      if (otherPriorityGroupRef.current && map) {
+        map.removeLayer(otherPriorityGroupRef.current);
+      }
     };
   }, [map]);
 
@@ -57,6 +66,14 @@ const BoundsSelector = ({ value, onChange, priorityType }) => {
     }
   }, [value]);
 
+  // Update other priority polygons when allPriorityBounds changes
+  useEffect(() => {
+    if (otherPriorityGroupRef.current) {
+      otherPriorityGroupRef.current.clearLayers();
+      displayOtherPriorityPolygons();
+    }
+  }, [allPriorityBounds, priorityType]);
+
   const restorePolygons = () => {
     if (!featureGroupRef.current || !Array.isArray(value)) return;
 
@@ -101,6 +118,48 @@ const BoundsSelector = ({ value, onChange, priorityType }) => {
     return polygon;
   };
 
+  const displayOtherPriorityPolygons = () => {
+    if (!otherPriorityGroupRef.current || !allPriorityBounds) {
+      return;
+    }
+
+    // Display polygons from other priority types
+    Object.entries(allPriorityBounds).forEach(([type, bounds]) => {
+      // Skip the current priority type
+      const currentPriorityKey = `${priorityType}PriorityBounds`;
+      if (type === currentPriorityKey || !Array.isArray(bounds) || bounds.length === 0) {
+        return;
+      }
+
+      // Determine the priority type for coloring
+      let displayType = "default";
+      if (type.includes("high")) displayType = "high";
+      else if (type.includes("medium")) displayType = "medium";
+      else if (type.includes("low")) displayType = "low";
+
+      bounds.forEach((feature) => {
+        try {
+          if (feature?.geometry?.coordinates?.[0]) {
+            const coords = feature.geometry.coordinates[0].map((coord) => [coord[1], coord[0]]);
+
+            const polygon = L.polygon(coords, {
+              color: getColor(displayType, "base"),
+              weight: 2,
+              opacity: 0.6,
+              fillOpacity: 0.2,
+              dashArray: "8, 8", // Dashed line to distinguish from current priority
+              interactive: false, // Make them non-interactive
+            });
+
+            otherPriorityGroupRef.current.addLayer(polygon);
+          }
+        } catch (error) {
+          console.error("Error displaying other priority polygon:", error);
+        }
+      });
+    });
+  };
+
   const syncWithParent = () => {
     if (!featureGroupRef.current) return;
 

src/components/Custom/RJSFFormFieldAdapter/context/PriorityBoundsDataContext.jsx

@@ -0,0 +1,49 @@
+import { createContext, useContext, useState, useCallback } from "react";
+
+// Context for sharing priority bounds data across all priority fields
+const PriorityBoundsDataContext = createContext({
+  priorityBoundsData: {
+    highPriorityBounds: [],
+    mediumPriorityBounds: [],
+    lowPriorityBounds: [],
+  },
+  updatePriorityBounds: () => {},
+});
+
+// Provider component
+export const PriorityBoundsDataProvider = ({ children, initialData = {} }) => {
+  const [priorityBoundsData, setPriorityBoundsData] = useState({
+    highPriorityBounds: initialData.highPriorityBounds || [],
+    mediumPriorityBounds: initialData.mediumPriorityBounds || [],
+    lowPriorityBounds: initialData.lowPriorityBounds || [],
+  });
+
+  const updatePriorityBounds = useCallback((priorityType, bounds) => {
+    setPriorityBoundsData((prev) => ({
+      ...prev,
+      [`${priorityType}PriorityBounds`]: bounds,
+    }));
+  }, []);
+
+  const value = {
+    priorityBoundsData,
+    updatePriorityBounds,
+  };
+
+  return (
+    <PriorityBoundsDataContext.Provider value={value}>
+      {children}
+    </PriorityBoundsDataContext.Provider>
+  );
+};
+
+// Hook to use the context
+export const usePriorityBoundsData = () => {
+  const context = useContext(PriorityBoundsDataContext);
+  if (!context) {
+    throw new Error("usePriorityBoundsData must be used within a PriorityBoundsDataProvider");
+  }
+  return context;
+};
+
+export default PriorityBoundsDataContext;