674: Implement edit form with resource info populated #678

icycoldveins · 2025-11-29T10:58:56Z

Change Summary

Implements the crowdsourcing edit form that pre-populates with existing resource information when users click "Suggest Edit" from the resource detail modal.

Change Reason

Issue #674 requires the edit button (from #648) to open a crowdsourcing form with the resource's existing data pre-filled, allowing users to suggest edits to resources.

Changes

src/actions/actions.js: Added setEditingResource action to track the resource being edited
src/reducers/filterMarkers.js: Added editingResource state property
src/components/SelectedTapDetails/SelectedTapDetails.jsx: Replaced placeholder with meatball menu containing "Suggest Edit" and "Report" options
src/components/AddResourceModal/AddResourceModalV2.jsx:
- Added mapResourceToFormState() to convert database resource format to form state
- Auto-selects correct resource type form based on editingResource
- Passes editMode prop to child forms
- Defers suggestion submission workflow (TODO for admin review system, not sure how we are going to implemenet just yet.)
src/components/AddResourceModal/Add*.jsx (Water, Food, Bathroom, Foraging):
- Added reset() from react-hook-form to populate fields when editing
- Dynamic title ("Edit X Resource" vs "Add X Resource")
- Accept editMode prop

Verification

The form correctly populates with resource data when clicking "Suggest Edit":

Common fields (name, address, website, description) are pre-filled
Resource-type-specific checkboxes reflect stored tags
Form title changes to indicate edit mode

Note: Actual edit submission is deferred pending implementation of the suggestion/approval workflow.

Related Issues: #674

RNR1

First pass

RNR1 · 2025-12-03T00:05:19Z

src/components/AddResourceModal/AddWaterTap/AddWaterTap.jsx

+  });
+
+  useEffect(() => {
+    reset({


This shouldn’t be necessary if you have already defined the defaultValues

RNR1 · 2025-12-03T00:06:01Z

src/components/AddResourceModal/AddResourceModalV2.jsx


      {resourceForm === FORAGE_RESOURCE_TYPE && (
        <AddForaging
+          key={editingResource?.id || 'new'}


What is the reason for adding the key here and in other components?

so basically my intention was to reset all of its internal state of the component by changing the key. so when I didnt have that and switched over between different resources. The old resource form data stayed. Kinda like using the bug we had a while ago with the search function but this time intentionally to to force a fresh remount

that was one of the workarounds I thought of to get around components mounting only once to show the correct data

We should prevent switching resources while editing. I'm unsure how this is possible, but it sounds undesireable

like if we are in edit mode and click on a different marker it wont fly to that pin?

src/components/AddResourceModal/AddResourceModalV2.jsx

RNR1 · 2025-12-03T01:18:34Z

src/db.js

+    // 1. Store suggestion in database
+    // 2. Create admin review/approval interface
+    // 3. Define how approved suggestions are applied to resources
+    throw new Error('Suggestion submission not yet implemented. Awaiting admin review workflow design.');


Can we remove this throw statement? We should only throw errors if we need to block a specific flow. In this case, It's ok if this function will have no operation, but we should have a TODO comment for backfilling the implmentation

RNR1 · 2025-12-03T01:31:09Z

src/components/AddResourceModal/AddResourceModalV2.jsx

    dispatch({ type: 'SET_TOOLBAR_MODAL', modal });
  };

+  useEffect(() => {


Can we only use the state initialization callback to define these instead of having a useEffect hook?
We can use the editingResource?.resource_type ?? null as the initial value for the resource form, and the existing initialization for the values.

I would have to add unmountonexit to the component. so the issue was that when the modal was closed the component stayed mounted. should I just add that to the collapse mui component? so that the component actually remounts and we can grab the correct values? not really sure what the best approach is 🤔. @RNR1

That might make sense. I think this is one of the approaches I took in my refactor PR

When I tried out unmountOnExit it only unmounted its children, and not the AddResourceModalV2 component itself. So I think the component only mounts when the app loads the first time, so im not sure how we can get around that

RNR1 · 2025-12-03T02:03:59Z

src/components/AddResourceModal/AddResourceModalV2.jsx

  hasFountain: false
 };

+const mapResourceToFormState = resource => {


Are we able to break this function down into multiple functions?

getStandardResourceValues that receives the resource and defaultValues (the initialState) and returns a new object that merges the defaultValues with the shared resource values (name, address, etc)

for each resource: get<ResourceType>ResourceValues for resource-specific values.

It receives the existing state and the resource and returns a new object merging the existing state with the specific values.

We should iterate through the resource lists (tags, dispenser_type, etc) and modify the object if it satisfies the condition instead of using includes anywhere we set a value

const result = resource.water.tags.reduce((prev, next) => { switch (tag) { case 'FILTERED': return { ...prev, filtration: true } ... default: return prev; } }, {})

RNR1 · 2025-12-14T19:27:57Z

src/db.js

-    // 3. Define how approved suggestions are applied to resources
-    throw new Error('Suggestion submission not yet implemented. Awaiting admin review workflow design.');
-}
+// eslint-disable-next-line no-unused-vars


nit: You can prefix with _ to ignore the unused variables

Add edit modal functionality with pre-populated resource data and disabled address field for crowdsourcing edits. - Add Redux action and state for tracking editing resource - Wire edit button to dispatch editing action and open form - Create function to map resource data to form state - Detect edit mode in AddResourceModalV2 and initialize form - Pass editMode prop through all form components - Disable address field in edit mode (greyed out, no changes allowed) - Hide "Use my location" button in edit mode

- Use reset() method to update form fields when props change - Add useEffect hooks to all resource form components to sync form state - Address field is disabled in edit mode to prevent location changes - Modal titles updated to show Edit vs Add based on mode - Tests created for edit functionality validation

…ggestion workflow - Enable address field editing across all resource types (water, food, bathroom, foraging) - Allow 'Use my location' button functionality during edit mode with full geocoding validation - Remove edit mode blocking logic from address fields and styling - Update ResourceEntry typedef to document id field for resource tracking - Defer submitSuggestion implementation pending admin review/approval workflow design - Add TODO comments for future suggestion submission feature planning

- remove console.warn from edit mode handler - replace throw with no-op return in submitSuggestion - add comment explaining key prop for form remount - remove redundant useEffect reset in AddWaterTap - refactor mapResourceToFormState into smaller functions with mapping constants

- block map pin clicks while in edit mode - remove key prop from form components - prefix unused variable with underscore

icycoldveins marked this pull request as ready for review November 29, 2025 11:04

RNR1 reviewed Dec 3, 2025

View reviewed changes

RNR1 reviewed Dec 14, 2025

View reviewed changes

icycoldveins added 5 commits December 16, 2025 14:15

674: fix: prevent switching resources while editing

f66762e

- block map pin clicks while in edit mode - remove key prop from form components - prefix unused variable with underscore

icycoldveins force-pushed the 674-edit-form-resource branch from 698c4a5 to f66762e Compare December 16, 2025 19:22

icycoldveins added this to Phlask Map Dec 17, 2025

Uh oh!

674: Implement edit form with resource info populated #678

Are you sure you want to change the base?

674: Implement edit form with resource info populated #678

Uh oh!

Conversation

icycoldveins commented Nov 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Change Summary

Change Reason

Changes

Verification

Uh oh!

RNR1 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

icycoldveins Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

icycoldveins commented Nov 29, 2025 •

edited

Loading

icycoldveins Dec 3, 2025 •

edited

Loading