add method to remove features from the upload wizard

Author: k-yle

src/pages/upload/MapPreview.tsx

@@ -27,6 +27,7 @@ export const MapPreview: React.FC<{
   fetchCache: FetchCache | undefined;
   bboxFromOsmPatch: Bbox | undefined;
   setFocusedFeatureId(id: string | number): void;
+  removeFeatureFromPatch(id: string | number): Promise<void>;
   moveNode:
     | ((feature: OsmPatchFeature, lat: number, lng: number) => void)
     | false;
@@ -36,6 +37,7 @@ export const MapPreview: React.FC<{
   fetchCache,
   bboxFromOsmPatch,
   setFocusedFeatureId,
+  removeFeatureFromPatch,
   moveNode,
 }) => {
   const allowEdit = !!moveNode;
@@ -104,6 +106,15 @@ export const MapPreview: React.FC<{
                     click: () => setFocusedFeatureId(feature.id!),
                     dragstart: () => setFocusedFeatureId(feature.id!),
                     dragend: (event) => onDragEnd(event, feature),
+                    dblclick: async () => {
+                      if (
+                        // this is not for end users, so the UX can be a bit crude
+                        // eslint-disable-next-line no-restricted-globals, no-alert
+                        confirm('u want to remove this feature from the diff?')
+                      ) {
+                        await removeFeatureFromPatch(feature.id!);
+                      }
+                    },
                   }}
                   draggable={allowEdit && !feature.properties.__action}
                 />

src/pages/upload/Upload.tsx

@@ -89,6 +89,13 @@ const UploadInner: React.FC = () => {
     }
   }
 
+  async function removeFeatureFromPatch(id: string) {
+    await rebuildOsmChange({
+      ...osmPatch!,
+      features: osmPatch!.features.filter((feature) => feature.id !== id),
+    });
+  }
+
   async function onFileUpload(files: FileList | null) {
     if (!files?.length) {
       // the user unselected the current file, so reset
@@ -313,6 +320,7 @@ const UploadInner: React.FC = () => {
                 osmPatch={osmPatch}
                 bboxFromOsmPatch={bboxFromOsmPatch}
                 setFocusedFeatureId={setFocusedFeatureId}
+                removeFeatureFromPatch={removeFeatureFromPatch}
                 moveNode={allowEdit && moveNode}
               />
             </div>
@@ -321,6 +329,7 @@ const UploadInner: React.FC = () => {
                 <DiffForFeature
                   feature={focusedFeature}
                   original={fetchCache?.[`${focusedFeature.id}`]}
+                  removeFeatureFromPatch={removeFeatureFromPatch}
                 />
               ) : (
                 <em>Select a feature to view more details</em>

src/pages/upload/components/DiffForFeature.tsx

@@ -15,7 +15,8 @@ const EMPTY_CELL = <td>&nbsp;</td>;
 export const DiffForFeature: React.FC<{
   feature: OsmPatchFeature;
   original: OsmFeature | undefined;
-}> = ({ feature, original }) => {
+  removeFeatureFromPatch(id: string | number): Promise<void>;
+}> = ({ feature, original, removeFeatureFromPatch }) => {
   const tag2link = useTag2link();
   const { user: me } = useContext(AuthContext);
 
@@ -42,7 +43,14 @@ export const DiffForFeature: React.FC<{
       <header style={{ textTransform: 'capitalize' }}>
         {action ? (
           <>
-            {type} {id} – <OpenInLinks type={type} id={id} />
+            {type} {id} –{' '}
+            <button
+              type="button"
+              onClick={() => removeFeatureFromPatch(feature.id!)}
+            >
+              Remove
+            </button>{' '}
+            <OpenInLinks type={type} id={id} />
           </>
         ) : (
           <>🆕 {feature.id}</>