Isolating a GpxChooser component

src/components/gpx-chooser/GpxChooser.tsx

@@ -0,0 +1,62 @@
+import { useI18n } from '@solid-primitives/i18n';
+import { FormControl, InputLabel, NativeSelect } from '@suid/material';
+import { Component, createSignal, For } from 'solid-js';
+import dispatch from '../../workers/dispatcher-main';
+
+interface Props {
+  gpxId: () => string;
+  setGpxId: (id: string) => void;
+}
+
+const GpxChooser: Component<Props> = (props: Props) => {
+  const { gpxId, setGpxId } = props;
+
+  const [t] = useI18n();
+
+  const [allGpxes, setAllGpxes] = createSignal<any[]>([
+    { id: 'new', name: t('newGpx'), creator: 'dyomedea' },
+  ]);
+
+  dispatch(
+    {
+      action: 'getAllGpxesWithSummary',
+    },
+    (error, result) => {
+      if (!error) {
+        setAllGpxes([
+          { id: 'new', name: t('newGpx'), creator: 'dyomedea' },
+          ...result,
+        ]);
+      }
+    }
+  );
+
+  const gpxChangeHandler = async (event: any) => {
+    setGpxId(event.target.value);
+  };
+
+  return (
+    <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 === gpxId()}>
+              {gpx.name || `${t('gpxNoName')} (${gpx.creator})`}
+            </option>
+          )}
+        </For>
+      </NativeSelect>
+    </FormControl>
+  );
+};
+
+export default GpxChooser;

src/components/gpx-chooser/index.ts

@@ -0,0 +1 @@
+export { default } from './GpxChooser';