Isolating a GpxChooser component

src/components/gpx-dialog/GpxDialog.tsx

@@ -14,6 +14,7 @@ import { cloneDeep } from 'lodash';
 import { Component, createSignal, For, Show } from 'solid-js';
 import dispatch from '../../workers/dispatcher-main';
 import Dialog from '../dialog';
+import GpxChooser from '../gpx-chooser';
 //import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg';
 import style from './GpxDialog.module.css';
 
@@ -22,7 +23,7 @@ export const [currentGpxId, setCurrentGpxId] = createSignal<string>('new');
 const GpxDialog: Component<{}> = (props) => {
   const [t] = useI18n();
   const [open, setOpen] = createSignal(false);
-  const [allGpxes, setAllGpxes] = createSignal<any[]>([]);
+
   const [selectedGpxId, setSelectedGpxId] = createSignal<string>('');
   const [gpx, setGpx] = createSignal<Gpx>();
 
@@ -30,13 +31,6 @@ const GpxDialog: Component<{}> = (props) => {
 
   const handleClickOpen = async () => {
     setOpen(true);
-    const newAllGpxes = (await dispatch({
-      action: 'getAllGpxesWithSummary',
-    })) as any[];
-    setAllGpxes([
-      { id: 'new', name: t('newGpx'), creator: 'dyomedea' },
-      ...newAllGpxes,
-    ]);
     setSelectedGpxId(currentGpxId());
     if (currentGpxId() !== '') {
       const newGpx = await dispatch({
@@ -63,18 +57,17 @@ const GpxDialog: Component<{}> = (props) => {
       setOpen(false);
     }
   };
-  const gpxChangeHandler = async (event: any) => {
-    setSelectedGpxId(event.target.value);
+  const gpxChangeHandler = async (gpxId: string) => {
+    setSelectedGpxId(gpxId);
     const newGpx = await dispatch({
       action: 'getGpx',
       params: {
-        id: event.target.value,
+        id: gpxId,
       },
     });
     setGpx(newGpx as Gpx);
     console.log({
       caller: 'GpxDialog / gpxChangeHandler',
-      value: event.target.value,
       gpx: gpx(),
     });
   };
@@ -172,26 +165,8 @@ const GpxDialog: Component<{}> = (props) => {
           noValidate
           autoComplete='off'
         >
-          <FormControl>
-            <InputLabel variant='normal' htmlFor='gpx-chooser'>
-              {t('gpxChooser')}
-            </InputLabel>
-            <NativeSelect
-              inputProps={{
-                name: 'gpx-chooser',
-                id: 'gpx-chooser',
-              }}
-              onChange={gpxChangeHandler}
-            >
-              <For each={allGpxes()}>
-                {(gpx) => (
-                  <option value={gpx.id} selected={gpx.id === selectedGpxId()}>
-                    {gpx.name || `${t('gpxNoName')} (${gpx.creator})`}
-                  </option>
-                )}
-              </For>
-            </NativeSelect>
-          </FormControl>
+          <GpxChooser gpxId={selectedGpxId} setGpxId={gpxChangeHandler} />
+
           <Show when={gpx() != undefined}>
             <TextField
               label={t('gpxName')}