<Gpx> component

src/components/all-gpxes/AllGpxes.tsx

@@ -1,21 +1,16 @@
-import {
-  Component,
-  createEffect,
-  createResource,
-  createSignal,
-} from 'solid-js';
+import { Component, createEffect, createResource, For } from 'solid-js';
 
 import OlMap from 'ol/Map';
 
 import dispatch from '../../workers/dispatcher-main';
-// import Gpx from './Gpx';
+import Gpx from '../gpx';
 
 interface Props {
-  map: OlMap | null;
+  map: () => OlMap | null;
 }
 
 export const AllGpxes: Component<Props> = ({ map }) => {
-  const [allGpxes] = createResource(
+  const [allGpxIds] = createResource(
     async () =>
       await dispatch({
         action: 'getAllGpxes',
@@ -24,10 +19,17 @@ export const AllGpxes: Component<Props> = ({ map }) => {
   );
 
   createEffect(() => {
-    console.log({ caller: 'AllGpxes', allGpxes: allGpxes() });
+    console.log({ caller: 'AllGpxes', allGpxes: allGpxIds(), map: map() });
   });
 
-  return <></>;
+  return (
+    <For each={allGpxIds()}>
+      {(gpxId) => {
+        console.log({ caller: 'AllGpxes / loop', gpxId });
+        return <Gpx map={map} gpxId={gpxId} />;
+      }}
+    </For>
+  );
 };
 
 export default AllGpxes;

src/components/gpx/Gpx.tsx

@@ -0,0 +1,33 @@
+import { Component, createEffect, createResource } from 'solid-js';
+
+import OlMap from 'ol/Map';
+
+import dispatch from '../../workers/dispatcher-main';
+//import Trk from './Trk';
+import getUri from '../../lib/ids';
+
+interface Props {
+  gpxId: string;
+  map: () => OlMap | null;
+}
+
+export const Gpx: Component<Props> = ({ map, gpxId }) => {
+  const [gpx] = createResource(
+    gpxId,
+    async () =>
+      await dispatch({
+        action: 'getGpx',
+        params: {
+          id: gpxId,
+        },
+      })
+  );
+
+  createEffect(() => {
+    console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx() });
+  });
+
+  return <></>;
+};
+
+export default Gpx;

src/components/gpx/index.ts

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

src/components/map/Map.tsx

@@ -185,7 +185,7 @@ const Map: Component = () => {
       <Forward />
       <Back />
       <GpxImport />
-      <AllGpxes map={getMap()} />
+      <AllGpxes map={getMap} />
     </div>
   );
 };