60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import AsyncStorage from '@react-native-community/async-storage';
|
|
import {parse} from 'date-fns';
|
|
import React, {ReactElement, useEffect, useState} from 'react';
|
|
import {View} from 'react-native';
|
|
import {Title} from 'react-native-paper';
|
|
import {dateFormat} from '../config/default';
|
|
import {SyncProps} from '../models/ElementProps';
|
|
import {LineCount} from '../models/LineCount';
|
|
import {Sample} from '../models/Sample';
|
|
import {CancelButton} from './Common';
|
|
import {styles} from './Styles';
|
|
// @ts-ignore
|
|
import * as firebase from 'firebase';
|
|
import 'firebase/firestore';
|
|
|
|
export const sendDataToFirebase = async (newData: Array<Sample | LineCount>, collection: firebase.firestore.CollectionReference) => {
|
|
const writes = newData.map((s: Sample | LineCount) => collection.doc(s.id).set(s));
|
|
await Promise.all(writes);
|
|
}
|
|
|
|
export const SyncMessage = (props: SyncProps): ReactElement => {
|
|
const [syncStatus, setSyncStatus] = useState<string>('Syncing data...');
|
|
|
|
useEffect(() => {
|
|
// TODO: Detect when user is online. If online, sync data with Firebase. If not online, just go home. Alternatively, set up a timer that periodically syncs data with the database.
|
|
|
|
// Upload any changes to Firebase
|
|
if (props.isConnected) {
|
|
AsyncStorage.getAllKeys().then(keys => {
|
|
const newSamples = keys
|
|
.filter(s => /^[\d]{9}-[\d]{12}-[\d]{4}$/.test(s))
|
|
.map(s => {
|
|
const propsArray = s.split('-');
|
|
return {
|
|
id: s,
|
|
barcodeId: propsArray[0],
|
|
createdAt: parse(propsArray[1], dateFormat, new Date()),
|
|
locationId: propsArray[2],
|
|
} as Sample;
|
|
});
|
|
|
|
sendDataToFirebase(newSamples, props.samplesCollection).then(() => {
|
|
setSyncStatus('Data synced.');
|
|
props.onSync();
|
|
});
|
|
});
|
|
} else {
|
|
setSyncStatus('Device is not online. Skipping sync...');
|
|
props.onCancel();
|
|
}
|
|
});
|
|
|
|
return <View style={styles.container}>
|
|
<View style={styles.centerMiddle}>
|
|
<Title style={styles.heading}>{syncStatus}</Title>
|
|
<CancelButton onClicked={props.onCancel} />
|
|
</View>
|
|
</View>;
|
|
}
|