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