diff --git a/package-lock.json b/package-lock.json index 921a68f..f8815d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,7 @@ "react-router": "^6.3.0", "react-router-dom": "^6.3.0", "react-scripts": "^5.0.0", + "react-virtuoso": "^2.19.1", "status": "^0.0.13", "stream-browserify": "^3.0.0", "typescript": "^4.8.3", @@ -4863,6 +4864,25 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@virtuoso.dev/react-urx": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz", + "integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==", + "dependencies": { + "@virtuoso.dev/urx": "^0.2.13" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16" + } + }, + "node_modules/@virtuoso.dev/urx": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz", + "integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw==" + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -15905,6 +15925,22 @@ "node": ">=12" } }, + "node_modules/react-virtuoso": { + "version": "2.19.1", + "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.19.1.tgz", + "integrity": "sha512-zF6MAwujNGy2nJWCx/Df92ay/RnV2Kj4glUZfdyadI4suAn0kAZHB1BeI7yPFVp2iSccLzFlszhakWyr+fJ4Dw==", + "dependencies": { + "@virtuoso.dev/react-urx": "^0.2.12", + "@virtuoso.dev/urx": "^0.2.12" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16 || >=17 || >= 18", + "react-dom": ">=16 || >=17 || >= 18" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -23178,6 +23214,19 @@ "eslint-visitor-keys": "^3.3.0" } }, + "@virtuoso.dev/react-urx": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz", + "integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==", + "requires": { + "@virtuoso.dev/urx": "^0.2.13" + } + }, + "@virtuoso.dev/urx": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz", + "integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw==" + }, "@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -31197,6 +31246,15 @@ } } }, + "react-virtuoso": { + "version": "2.19.1", + "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.19.1.tgz", + "integrity": "sha512-zF6MAwujNGy2nJWCx/Df92ay/RnV2Kj4glUZfdyadI4suAn0kAZHB1BeI7yPFVp2iSccLzFlszhakWyr+fJ4Dw==", + "requires": { + "@virtuoso.dev/react-urx": "^0.2.12", + "@virtuoso.dev/urx": "^0.2.12" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 1490ada..d1d9dee 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "react-router": "^6.3.0", "react-router-dom": "^6.3.0", "react-scripts": "^5.0.0", + "react-virtuoso": "^2.19.1", "status": "^0.0.13", "stream-browserify": "^3.0.0", "typescript": "^4.8.3", diff --git a/src/components/map/TracksBrowser.tsx b/src/components/map/TracksBrowser.tsx index 062fb5e..5cddf2d 100644 --- a/src/components/map/TracksBrowser.tsx +++ b/src/components/map/TracksBrowser.tsx @@ -1,6 +1,9 @@ import { IonButton, IonButtons, + IonCard, + IonCardHeader, + IonCardTitle, IonContent, IonIcon, IonItem, @@ -11,6 +14,7 @@ import { } from '@ionic/react'; import { trash } from 'ionicons/icons'; import React, { Fragment, useRef } from 'react'; +import { Virtuoso } from 'react-virtuoso'; import { useFind, useDB } from 'react-pouchdb'; import { deleteGps } from '../../db/gpx'; import { enterAnimation, leaveAnimation } from '../../lib/animation'; @@ -53,26 +57,32 @@ const TrackBrowser: React.FC<{}> = () => { - - {gpxes.map((gpx: any) => { - return ( - - {gpx.gpx.metadata.time} - - - { - deleteGps(db, { _id: gpx._id, _rev: gpx._rev }); - }} - color='danger' - > - - - - - ); - })} - + ( + + + + + {gpx.gpx.metadata.time} + + + { + deleteGps(db, { _id: gpx._id, _rev: gpx._rev }); + }} + color='danger' + > + + + + + + + + )} + >