Saving edited tags in GpxDialog

src/components/gpx-dialog/GpxDialog.tsx

@@ -19,7 +19,12 @@ import GpxChooser from '../gpx-chooser';
 import GpxIcon from '../gpx/GpxIcon';
 //import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg';
 import style from './GpxDialog.module.css';
-import { getTagValue, getTagsFromObj } from '../../lib/tags/tags';
+import {
+  getTagValue,
+  getTagsFromObj,
+  setTagValue,
+  setTagsIntoObj,
+} from '../../lib/tags/tags';
 
 export const [currentGpxId, setCurrentGpxId] = createSignal<string>('new');
 
@@ -136,6 +141,18 @@ const GpxDialog: Component<{}> = (props) => {
     });
   };
 
+  const getGpxTagValue = (tagName: string, defaultValue: string) => {
+    return getTagValue(getTagsFromObj(gpx()), tagName) || defaultValue;
+  };
+
+  const gpxLocomotionChangeHandler = (event: any) => {
+    const newGpx: Gpx = cloneDeep(gpx()) as Gpx;
+    const tags = getTagsFromObj(newGpx);
+    setTagValue(tags, 'locomotion', event.target.value);
+    setTagsIntoObj(newGpx, tags);
+    setGpx(newGpx);
+  };
+
   const saveHandler = async (event: any) => {
     const id = (await dispatch({
       action: 'putGpx',
@@ -201,9 +218,8 @@ const GpxDialog: Component<{}> = (props) => {
             />
             <div>Locomotion</div>
             <RadioGroup
-              value={
-                getTagValue(getTagsFromObj(gpx()), 'locomotion') || 'hiking'
-              }
+              value={getGpxTagValue('locomotion', 'hiking')}
+              onChange={gpxLocomotionChangeHandler}
             >
               <FormControlLabel
                 value='hiking'