Isolating a GpxChooser component

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>
-      <Show when={statsAndGpx() !== undefined}>
-        <Grid item xs={12}>
+      </CardContent>
+      <CardContent>
+        <Show when={statsAndGpx() !== undefined}>
           <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}>
+          <Show when={statsAndGpx().stats.trkMaybeRte}>
             <Typography variant='body1'>{t('trkMaybeRte')}</Typography>
-          </Grid>
-        </Show>
-        <Show when={statsAndGpx().stats.nbTrks > 0}>
-          <Grid item xs={12}>
-            <FormControl>
+          </Show>
+          {/* <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>
   );
 };