Using pouchdb instead of redux to store tracks.

This commit is contained in:
Eric van der Vlist 2022-09-24 17:08:53 +02:00
parent d82d972ff2
commit eae6296c2a
10 changed files with 341 additions and 88 deletions

272
package-lock.json generated
View File

@ -40,9 +40,11 @@
"isomorphic-xml2js": "^0.1.3",
"lodash": "^4.17.21",
"pouchdb": "^7.3.0",
"pouchdb-find": "^7.3.0",
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dom": "^18.2.0",
"react-pouchdb": "^2.1.0",
"react-redux": "^8.0.2",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
@ -15032,6 +15034,115 @@
"vuvuzela": "1.0.3"
}
},
"node_modules/pouchdb-abstract-mapreduce": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-abstract-mapreduce/-/pouchdb-abstract-mapreduce-7.3.0.tgz",
"integrity": "sha512-+2fVt3SDh7D776lIGbYZOsKX5js1aUyUw7iJaTGitxSdQ2ObWSTrr3SUrj5Qo1CkgPXwRM3Tdoq/53JYAa2qCA==",
"dependencies": {
"pouchdb-binary-utils": "7.3.0",
"pouchdb-collate": "7.3.0",
"pouchdb-collections": "7.3.0",
"pouchdb-errors": "7.3.0",
"pouchdb-fetch": "7.3.0",
"pouchdb-mapreduce-utils": "7.3.0",
"pouchdb-md5": "7.3.0",
"pouchdb-utils": "7.3.0"
}
},
"node_modules/pouchdb-binary-utils": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-binary-utils/-/pouchdb-binary-utils-7.3.0.tgz",
"integrity": "sha512-xvBH/XGHGcou2vkEzszJxkCc7YElfRUrkLUg51Jbdmh1mogLDUO0bU3Tj6TOIIJfRkQrU/HV+dDkMAhsil0amQ==",
"dependencies": {
"buffer-from": "1.1.2"
}
},
"node_modules/pouchdb-collate": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-collate/-/pouchdb-collate-7.3.0.tgz",
"integrity": "sha512-ys7rXKtEr6cfghgUjknwFJiOkITebV6JmeTybJKCzMV0r2luXu0OoPQsKVpE/wbM/3F5LxfpbFKGFpPcfGMvTA=="
},
"node_modules/pouchdb-collections": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-7.3.0.tgz",
"integrity": "sha512-Xr54m2+fErShXn+qAT4xwqJ+8NwddNPeTMJT4z4k1sZsrwfHmZsWbsKAyGPMF04eQaaU+7DDRMciu2VzaBUXyg=="
},
"node_modules/pouchdb-errors": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-errors/-/pouchdb-errors-7.3.0.tgz",
"integrity": "sha512-dTBbIC1BbCy6J9W/Csg5xROgb3wJN3HpbgAJHHSEtAkb8oA45KZmU3ZwEpNhf0AfPuQm4XgW1936PvlDlGgJiw==",
"dependencies": {
"inherits": "2.0.4"
}
},
"node_modules/pouchdb-fetch": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-fetch/-/pouchdb-fetch-7.3.0.tgz",
"integrity": "sha512-8/lcg8iMDG+GVs1dHNXA4ktJSEpH71dHU3xesMJ25tNQOqfAaaWrkfz9j71ZYDDkveLYE6UjUzl/sDacu2hSjw==",
"dependencies": {
"abort-controller": "3.0.0",
"fetch-cookie": "0.11.0",
"node-fetch": "2.6.7"
}
},
"node_modules/pouchdb-find": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-find/-/pouchdb-find-7.3.0.tgz",
"integrity": "sha512-EwhnfyxCAkKf8PG4tfndTTygEmtuz+o1LiZkxfPrflfXA3m1jo1ithib0hwBYtEwEYWuZxH6B8pRZutbLoQCGA==",
"dependencies": {
"pouchdb-abstract-mapreduce": "7.3.0",
"pouchdb-collate": "7.3.0",
"pouchdb-errors": "7.3.0",
"pouchdb-fetch": "7.3.0",
"pouchdb-md5": "7.3.0",
"pouchdb-selector-core": "7.3.0",
"pouchdb-utils": "7.3.0"
}
},
"node_modules/pouchdb-mapreduce-utils": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-mapreduce-utils/-/pouchdb-mapreduce-utils-7.3.0.tgz",
"integrity": "sha512-KDVSd+H2r+XWTrQfKWV71SknDDYRjYXoeWs0ZQl3xITHCcTl+fIgqyagg/XN+Zy/U9LeLPGMe2JdgPx9H8lJgw==",
"dependencies": {
"argsarray": "0.0.1",
"inherits": "2.0.4",
"pouchdb-collections": "7.3.0",
"pouchdb-utils": "7.3.0"
}
},
"node_modules/pouchdb-md5": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-md5/-/pouchdb-md5-7.3.0.tgz",
"integrity": "sha512-wL04QgoKyd/L/TV5gxgcvlEyCJiZoXCOEFJklTzkdza/kBQNJGPH7i0ZhKa7Sb+AvZYoWZHddf1Zgv7rBScHkA==",
"dependencies": {
"pouchdb-binary-utils": "7.3.0",
"spark-md5": "3.0.2"
}
},
"node_modules/pouchdb-selector-core": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-selector-core/-/pouchdb-selector-core-7.3.0.tgz",
"integrity": "sha512-sK/cCrIGeL9ImcMhKGcwa54+bzX7Wv4hhVV+oUW3T1Nasaoxh+Muem1GuA+x1+SbTCE8y37rUg8i6DIOhX51ew==",
"dependencies": {
"pouchdb-collate": "7.3.0",
"pouchdb-utils": "7.3.0"
}
},
"node_modules/pouchdb-utils": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-utils/-/pouchdb-utils-7.3.0.tgz",
"integrity": "sha512-HH+5IXXWn/ZgVCSnrlydBMYn6MabT7RS7SNoo9w8qVH9efpZSp3eLchw6yMQNLw8LQefWmbbskiHV9VgJmSVWQ==",
"dependencies": {
"argsarray": "0.0.1",
"clone-buffer": "1.0.0",
"immediate": "3.3.0",
"inherits": "2.0.4",
"pouchdb-collections": "7.3.0",
"pouchdb-errors": "7.3.0",
"pouchdb-md5": "7.3.0",
"uuid": "8.3.2"
}
},
"node_modules/pouchdb/node_modules/isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
@ -15492,6 +15603,24 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-pouchdb": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-pouchdb/-/react-pouchdb-2.1.0.tgz",
"integrity": "sha512-6WxazCEEHpsxn1YKahTtp+gBTslKt7LiyQ87O7AR+SOG7A0sWGYNTELxBtWXfY/fTu3xXPOiR1HR2p/SpoiEPA==",
"dependencies": {
"@babel/runtime": "^7.6.3",
"fast-json-stable-stringify": "^2.0.0",
"hoist-non-react-statics": "^3.3.0",
"lodash": "^4.17.15",
"pouchdb-collate": "^7.1.1",
"pouchdb-find": "^7.1.1",
"pouchdb-selector-core": "^7.1.1",
"use-subscription": "^1.1.1"
},
"peerDependencies": {
"react": "^16.8 || 17"
}
},
"node_modules/react-redux": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
@ -18200,6 +18329,17 @@
"requires-port": "^1.0.0"
}
},
"node_modules/use-subscription": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.8.0.tgz",
"integrity": "sha512-LISuG0/TmmoDoCRmV5XAqYkd3UCBNM0ML3gGBndze65WITcsExCD3DTvXXTLyNcOC0heFQZzluW88bN/oC1DQQ==",
"dependencies": {
"use-sync-external-store": "^1.2.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@ -30265,6 +30405,115 @@
}
}
},
"pouchdb-abstract-mapreduce": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-abstract-mapreduce/-/pouchdb-abstract-mapreduce-7.3.0.tgz",
"integrity": "sha512-+2fVt3SDh7D776lIGbYZOsKX5js1aUyUw7iJaTGitxSdQ2ObWSTrr3SUrj5Qo1CkgPXwRM3Tdoq/53JYAa2qCA==",
"requires": {
"pouchdb-binary-utils": "7.3.0",
"pouchdb-collate": "7.3.0",
"pouchdb-collections": "7.3.0",
"pouchdb-errors": "7.3.0",
"pouchdb-fetch": "7.3.0",
"pouchdb-mapreduce-utils": "7.3.0",
"pouchdb-md5": "7.3.0",
"pouchdb-utils": "7.3.0"
}
},
"pouchdb-binary-utils": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-binary-utils/-/pouchdb-binary-utils-7.3.0.tgz",
"integrity": "sha512-xvBH/XGHGcou2vkEzszJxkCc7YElfRUrkLUg51Jbdmh1mogLDUO0bU3Tj6TOIIJfRkQrU/HV+dDkMAhsil0amQ==",
"requires": {
"buffer-from": "1.1.2"
}
},
"pouchdb-collate": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-collate/-/pouchdb-collate-7.3.0.tgz",
"integrity": "sha512-ys7rXKtEr6cfghgUjknwFJiOkITebV6JmeTybJKCzMV0r2luXu0OoPQsKVpE/wbM/3F5LxfpbFKGFpPcfGMvTA=="
},
"pouchdb-collections": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-7.3.0.tgz",
"integrity": "sha512-Xr54m2+fErShXn+qAT4xwqJ+8NwddNPeTMJT4z4k1sZsrwfHmZsWbsKAyGPMF04eQaaU+7DDRMciu2VzaBUXyg=="
},
"pouchdb-errors": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-errors/-/pouchdb-errors-7.3.0.tgz",
"integrity": "sha512-dTBbIC1BbCy6J9W/Csg5xROgb3wJN3HpbgAJHHSEtAkb8oA45KZmU3ZwEpNhf0AfPuQm4XgW1936PvlDlGgJiw==",
"requires": {
"inherits": "2.0.4"
}
},
"pouchdb-fetch": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-fetch/-/pouchdb-fetch-7.3.0.tgz",
"integrity": "sha512-8/lcg8iMDG+GVs1dHNXA4ktJSEpH71dHU3xesMJ25tNQOqfAaaWrkfz9j71ZYDDkveLYE6UjUzl/sDacu2hSjw==",
"requires": {
"abort-controller": "3.0.0",
"fetch-cookie": "0.11.0",
"node-fetch": "2.6.7"
}
},
"pouchdb-find": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-find/-/pouchdb-find-7.3.0.tgz",
"integrity": "sha512-EwhnfyxCAkKf8PG4tfndTTygEmtuz+o1LiZkxfPrflfXA3m1jo1ithib0hwBYtEwEYWuZxH6B8pRZutbLoQCGA==",
"requires": {
"pouchdb-abstract-mapreduce": "7.3.0",
"pouchdb-collate": "7.3.0",
"pouchdb-errors": "7.3.0",
"pouchdb-fetch": "7.3.0",
"pouchdb-md5": "7.3.0",
"pouchdb-selector-core": "7.3.0",
"pouchdb-utils": "7.3.0"
}
},
"pouchdb-mapreduce-utils": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-mapreduce-utils/-/pouchdb-mapreduce-utils-7.3.0.tgz",
"integrity": "sha512-KDVSd+H2r+XWTrQfKWV71SknDDYRjYXoeWs0ZQl3xITHCcTl+fIgqyagg/XN+Zy/U9LeLPGMe2JdgPx9H8lJgw==",
"requires": {
"argsarray": "0.0.1",
"inherits": "2.0.4",
"pouchdb-collections": "7.3.0",
"pouchdb-utils": "7.3.0"
}
},
"pouchdb-md5": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-md5/-/pouchdb-md5-7.3.0.tgz",
"integrity": "sha512-wL04QgoKyd/L/TV5gxgcvlEyCJiZoXCOEFJklTzkdza/kBQNJGPH7i0ZhKa7Sb+AvZYoWZHddf1Zgv7rBScHkA==",
"requires": {
"pouchdb-binary-utils": "7.3.0",
"spark-md5": "3.0.2"
}
},
"pouchdb-selector-core": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-selector-core/-/pouchdb-selector-core-7.3.0.tgz",
"integrity": "sha512-sK/cCrIGeL9ImcMhKGcwa54+bzX7Wv4hhVV+oUW3T1Nasaoxh+Muem1GuA+x1+SbTCE8y37rUg8i6DIOhX51ew==",
"requires": {
"pouchdb-collate": "7.3.0",
"pouchdb-utils": "7.3.0"
}
},
"pouchdb-utils": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/pouchdb-utils/-/pouchdb-utils-7.3.0.tgz",
"integrity": "sha512-HH+5IXXWn/ZgVCSnrlydBMYn6MabT7RS7SNoo9w8qVH9efpZSp3eLchw6yMQNLw8LQefWmbbskiHV9VgJmSVWQ==",
"requires": {
"argsarray": "0.0.1",
"clone-buffer": "1.0.0",
"immediate": "3.3.0",
"inherits": "2.0.4",
"pouchdb-collections": "7.3.0",
"pouchdb-errors": "7.3.0",
"pouchdb-md5": "7.3.0",
"uuid": "8.3.2"
}
},
"prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@ -30570,6 +30819,21 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-pouchdb": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-pouchdb/-/react-pouchdb-2.1.0.tgz",
"integrity": "sha512-6WxazCEEHpsxn1YKahTtp+gBTslKt7LiyQ87O7AR+SOG7A0sWGYNTELxBtWXfY/fTu3xXPOiR1HR2p/SpoiEPA==",
"requires": {
"@babel/runtime": "^7.6.3",
"fast-json-stable-stringify": "^2.0.0",
"hoist-non-react-statics": "^3.3.0",
"lodash": "^4.17.15",
"pouchdb-collate": "^7.1.1",
"pouchdb-find": "^7.1.1",
"pouchdb-selector-core": "^7.1.1",
"use-subscription": "^1.1.1"
}
},
"react-redux": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
@ -32582,6 +32846,14 @@
"requires-port": "^1.0.0"
}
},
"use-subscription": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.8.0.tgz",
"integrity": "sha512-LISuG0/TmmoDoCRmV5XAqYkd3UCBNM0ML3gGBndze65WITcsExCD3DTvXXTLyNcOC0heFQZzluW88bN/oC1DQQ==",
"requires": {
"use-sync-external-store": "^1.2.0"
}
},
"use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

View File

@ -35,9 +35,11 @@
"isomorphic-xml2js": "^0.1.3",
"lodash": "^4.17.21",
"pouchdb": "^7.3.0",
"pouchdb-find": "^7.3.0",
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dom": "^18.2.0",
"react-pouchdb": "^2.1.0",
"react-redux": "^8.0.2",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",

View File

@ -2,6 +2,8 @@ import { IonApp, setupIonicReact } from '@ionic/react';
import store from './store/index';
import { Provider } from 'react-redux';
import { Suspense } from 'react';
import { PouchDB, Find } from 'react-pouchdb';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
@ -26,12 +28,18 @@ import Map from './components/map/map';
setupIonicReact();
const App: React.FC = () => (
<IonApp>
<Provider store={store}>
<Map />
</Provider>
</IonApp>
);
const App: React.FC = () => {
return (
<IonApp>
<Provider store={store}>
<PouchDB name='dyomedea'>
<Suspense fallback='loading...'>
<Map />
</Suspense>
</PouchDB>
</Provider>
</IonApp>
);
};
export default App;

View File

@ -1,16 +1,16 @@
import React from 'react';
import { useDispatch } from 'react-redux';
import { useDB } from 'react-pouchdb';
import GPX from '../../lib/gpx-parser-builder';
import '../../theme/get-location.css';
import { IonIcon, IonItem } from '@ionic/react';
import { downloadSharp } from 'ionicons/icons';
import { tracksActions } from '../../store/tracks';
import { pushTrack } from '../../db/tracks';
const GpxImport: React.FC<{}> = () => {
const dispatch = useDispatch();
const db = useDB();
const onChangeHandler = (event: any) => {
console.log('On change handler');
@ -24,18 +24,16 @@ const GpxImport: React.FC<{}> = () => {
// this will then display a text file
console.log(fileReader.result);
const track = GPX.parse(fileReader.result);
dispatch(
tracksActions.push({
track: JSON.parse(JSON.stringify(track)),
metadata: {
lastModified: new Date(file.lastModified).toISOString(),
importDate: new Date().toISOString(),
name: file.name,
size: file.size,
type: file.type,
},
})
);
pushTrack(db, {
track: JSON.parse(JSON.stringify(track)),
metadata: {
lastModified: new Date(file.lastModified).toISOString(),
importDate: new Date().toISOString(),
name: file.name,
size: file.size,
type: file.type,
},
});
},
false
);

View File

@ -1,9 +1,10 @@
import React, { } from 'react';
import React from 'react';
import { lat2tile, lon2tile } from '../../lib/geo';
import { zoom0 } from '../../store/map';
const Track: React.FC<{ track: any; id: string }> = (props) => {
const Track: React.FC<{ track: any }> = (props) => {
console.log('track');
const trkseg = props.track.track.trk[0].trkseg[0];
const d = trkseg.trkpt.reduce(
(previous: string, current: any, index: number) => {

View File

@ -1,18 +1,20 @@
import React, { Fragment, useContext } from 'react';
import React from 'react';
import { useSelector } from 'react-redux';
import { useFind } from 'react-pouchdb';
import Track from './track';
const Tracks: React.FC<{}> = () => {
const tracks = useSelector((state: { tracks: any }) => state.tracks.tracks);
return (
<Fragment>
{Object.keys(tracks).map((key: any) => (
<Track key={key} id={key} track={tracks[key]} />
))}
</Fragment>
);
const tracks = useFind({
selector: {
type: 'Track',
},
});
return tracks.map((track: any) => {
console.log('doc');
return <Track key={track._id} track={track} />;
});
};
export default Tracks;

1
src/db/react.couchdb.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module 'react-pouchdb';

22
src/db/tracks.ts Normal file
View File

@ -0,0 +1,22 @@
import {
Sha256,
Sha512,
string_to_bytes,
bytes_to_base64,
} from '@openpgp/asmcrypto.js';
export const pushTrack = (db: any, payload: any) => {
const sha = new Sha256();
const result = sha
.process(string_to_bytes(JSON.stringify(payload.track)))
.finish().result;
var _id;
if (result === null) {
console.log(`Can't hash`);
_id = crypto.randomUUID();
} else {
_id = bytes_to_base64(result);
console.log(`Digest: ${_id}`);
}
db.put({ _id, type: 'Track', ...payload });
};

View File

@ -1,10 +1,9 @@
import { configureStore } from '@reduxjs/toolkit';
import mapReducer from './map';
import tracksReducer from './tracks';
const store = configureStore({
reducer: { map: mapReducer, tracks: tracksReducer },
reducer: { map: mapReducer },
});
export default store;

View File

@ -1,52 +0,0 @@
import { createSlice } from '@reduxjs/toolkit';
import {
Sha256,
Sha512,
string_to_bytes,
bytes_to_base64,
} from '@openpgp/asmcrypto.js';
interface TracksState {
tracks: { [index: string]: any };
}
const initialTracks: TracksState = {
tracks: {},
};
const tracksSlice = createSlice({
name: 'tracks',
initialState: initialTracks,
reducers: {
add: (state, action) => {
const { id, ...data } = action.payload;
state.tracks[action.payload.id] = data;
},
push: (state, action) => {
const sha = new Sha512();
const result = sha
.process(string_to_bytes(JSON.stringify(action.payload.track)))
.finish().result;
var id;
if (result === null) {
console.log(`Can't hash`);
id = crypto.randomUUID();
} else {
id = bytes_to_base64(result);
console.log(`Digest: ${id}`);
}
if (state.tracks.hasOwnProperty(id)) {
console.log('Track had already been imported');
} else {
state.tracks[id] = {
...action.payload,
};
}
},
},
});
export const tracksActions = tracksSlice.actions;
export default tracksSlice.reducer;