Removing Virtuoso which gave more troubles than benefits and starting to use IonCards in the tracks browser (#16).

This commit is contained in:
Eric van der Vlist 2022-10-03 00:18:53 +02:00
parent cb1c38a9fb
commit 0a11ccbdb4
3 changed files with 29 additions and 87 deletions

58
package-lock.json generated
View File

@ -54,7 +54,6 @@
"react-router": "^6.3.0", "react-router": "^6.3.0",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
"react-scripts": "^5.0.0", "react-scripts": "^5.0.0",
"react-virtuoso": "^2.19.1",
"status": "^0.0.13", "status": "^0.0.13",
"stream-browserify": "^3.0.0", "stream-browserify": "^3.0.0",
"typescript": "^4.8.3", "typescript": "^4.8.3",
@ -4864,25 +4863,6 @@
"url": "https://opencollective.com/typescript-eslint" "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": { "node_modules/@webassemblyjs/ast": {
"version": "1.11.1", "version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@ -15925,22 +15905,6 @@
"node": ">=12" "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": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -23214,19 +23178,6 @@
"eslint-visitor-keys": "^3.3.0" "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": { "@webassemblyjs/ast": {
"version": "1.11.1", "version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@ -31246,15 +31197,6 @@
} }
} }
}, },
"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": { "read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

View File

@ -49,7 +49,6 @@
"react-router": "^6.3.0", "react-router": "^6.3.0",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
"react-scripts": "^5.0.0", "react-scripts": "^5.0.0",
"react-virtuoso": "^2.19.1",
"status": "^0.0.13", "status": "^0.0.13",
"stream-browserify": "^3.0.0", "stream-browserify": "^3.0.0",
"typescript": "^4.8.3", "typescript": "^4.8.3",

View File

@ -2,6 +2,7 @@ import {
IonButton, IonButton,
IonButtons, IonButtons,
IonCard, IonCard,
IonCardContent,
IonCardHeader, IonCardHeader,
IonCardTitle, IonCardTitle,
IonContent, IonContent,
@ -9,12 +10,12 @@ import {
IonItem, IonItem,
IonList, IonList,
IonModal, IonModal,
IonSpinner,
IonTitle, IonTitle,
IonToolbar, IonToolbar,
} from '@ionic/react'; } from '@ionic/react';
import { trash } from 'ionicons/icons'; import { trash } from 'ionicons/icons';
import React, { Fragment, useRef } from 'react'; import React, { Fragment, Suspense, useRef } from 'react';
import { Virtuoso } from 'react-virtuoso';
import { useFind, useDB } from 'react-pouchdb'; import { useFind, useDB } from 'react-pouchdb';
import { deleteGps } from '../../db/gpx'; import { deleteGps } from '../../db/gpx';
import { enterAnimation, leaveAnimation } from '../../lib/animation'; import { enterAnimation, leaveAnimation } from '../../lib/animation';
@ -57,15 +58,11 @@ const TrackBrowser: React.FC<{}> = () => {
</IonButtons> </IonButtons>
</IonToolbar> </IonToolbar>
<IonContent> <IonContent>
<Virtuoso {gpxes.map((gpx: any) => (
style={{ height: '100%' }} <IonCard key={gpx._id}>
data={gpxes}
itemContent={(_, gpx) => (
<IonCard>
<IonCardHeader> <IonCardHeader>
<IonCardTitle>
<IonItem> <IonItem>
<span>{gpx.gpx.metadata.time}</span> <IonCardTitle>{gpx.gpx.metadata.name}</IonCardTitle>
<IonButtons slot='end'> <IonButtons slot='end'>
<GpxExport gpx={gpx} /> <GpxExport gpx={gpx} />
<IonButton <IonButton
@ -78,11 +75,15 @@ const TrackBrowser: React.FC<{}> = () => {
</IonButton> </IonButton>
</IonButtons> </IonButtons>
</IonItem> </IonItem>
</IonCardTitle> <IonCardContent>
<IonList>
<IonItem>{gpx.gpx.metadata.time}</IonItem>
<IonItem>{gpx.gpx.metadata.desc}</IonItem>
</IonList>
</IonCardContent>
</IonCardHeader> </IonCardHeader>
</IonCard> </IonCard>
)} ))}
></Virtuoso>
</IonContent> </IonContent>
</IonModal> </IonModal>
</Fragment> </Fragment>