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';

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')}

src/components/gpx-import/GpxImport.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, Show } from 'solid-js';
+import { Component, createSignal, For, Show } from 'solid-js';
 
 import CloudUploadIcon from '@suid/icons-material/CloudUpload';
 
@@ -107,7 +107,9 @@ const GpxImport: Component = () => {
             width: '100%',
           }}
         >
-          <GpxImportSingleFile gpxFile={filesToImport()[0]} />
+          <For each={filesToImport()}>
+            {(gpxFile) => <GpxImportSingleFile gpxFile={gpxFile} />}
+          </For>
         </Box>
       </Dialog>
     </>

src/components/gpx-import/GpxImportSingleFile.tsx

@@ -10,6 +10,11 @@ import {
   Divider,
   FormControl,
   FormLabel,
+  Card,
+  CardContent,
+  CardActions,
+  CardHeader,
+  Button,
 } from '@suid/material';
 import { Component, createEffect, createSignal, Show } from 'solid-js';
 import { findStartTime } from '../../lib/gpx';
@@ -48,6 +53,7 @@ const analyzeGpx = (gpx: Gpx | undefined) => {
 const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
   const [t] = useI18n();
   const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
+  const [state, setState] = createSignal('init');
 
   const gpxReader = new FileReader();
   gpxReader.readAsText(gpxFile);
@@ -71,6 +77,10 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
     false
   );
 
+  const doImport = () => {
+    setState('imported');
+  };
+
   const [selectedTrkTransform, setSelectedTrkTransform] = createSignal(
     'importNonTimedTrksAsRtes'
   );
@@ -89,30 +99,26 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
   });
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12}>
-        <Typography variant='subtitle1'>
+    <Card raised>
+      <CardContent>
+        <Typography variant='h6'>
           {t('file')}
           {gpxFile.name}
         </Typography>
-      </Grid>
+      </CardContent>
+      <CardContent>
         <Show when={statsAndGpx() !== undefined}>
-        <Grid item xs={12}>
           <Typography variant='body1'>
             {t('gpxStats', statsAndGpx().stats)}{' '}
             {statsAndGpx()?.stats.startTime
               ? t('gpxStartTime', statsAndGpx().stats)
               : t('gpxNoStartTime')}
           </Typography>
-        </Grid>
           <Show when={statsAndGpx().stats.trkMaybeRte}>
-          <Grid item xs={12}>
             <Typography variant='body1'>{t('trkMaybeRte')}</Typography>
-          </Grid>
           </Show>
-        <Show when={statsAndGpx().stats.nbTrks > 0}>
-          <Grid item xs={12}>
-            <FormControl>
+          {/* <Show when={statsAndGpx().stats.nbTrks > 0}>
+            <FormControl fullWidth>
               <FormLabel>{t('importTrk')}</FormLabel>
               <RadioGroup>
                 <FormControlLabel
@@ -129,10 +135,19 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
                 />
               </RadioGroup>
             </FormControl>
-          </Grid>
+          </Show> */}
         </Show>
-      </Show>
-    </Grid>
+        <CardActions>
+          <Button
+            variant='contained'
+            disabled={state() != 'init'}
+            onClick={doImport}
+          >
+            {t('import')}
+          </Button>
+        </CardActions>
+      </CardContent>
+    </Card>
   );
 };
 

src/i18n/fr.ts

@@ -24,6 +24,8 @@ const dict = {
   cancel: 'ANNULER',
 
   gpxImport: 'Import de fichier(s) GPX ',
+  import: 'Importer',
+
   file: 'Fichier\u00a0: ',
   gpxStats:
     'Ce fichier a été créé avec "{{creator}}" et contient {{nbWpts}} lieu(x), {{nbRtes}} itineraire(s) et {{nbTrks}} trace(s).',