427 lines
12 KiB
JavaScript
427 lines
12 KiB
JavaScript
import { useApolloClient } from "@apollo/client";
|
|
import { File } from "expo-file-system";
|
|
import * as MediaLibrary from "expo-media-library";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Modal,
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} from "react-native";
|
|
import { Divider, ProgressBar } from "react-native-paper";
|
|
import Toast from "react-native-toast-message";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import * as Sentry from "@sentry/react-native";
|
|
import { logImEXEvent } from "../../firebase/firebase.analytics";
|
|
import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
|
|
import {
|
|
selectCurrentCameraJobId,
|
|
selectDeleteAfterUpload,
|
|
} from "../../redux/app/app.selectors";
|
|
import {
|
|
selectBodyshop,
|
|
selectCurrentUser,
|
|
} from "../../redux/user/user.selectors";
|
|
import { formatBytes, handleUpload } from "../../util/document-upload.utility";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser,
|
|
bodyshop: selectBodyshop,
|
|
selectedCameraJobId: selectCurrentCameraJobId,
|
|
deleteAfterUpload: selectDeleteAfterUpload,
|
|
});
|
|
|
|
export default connect(mapStateToProps, null)(UploadProgress);
|
|
|
|
export function UploadProgress({
|
|
currentUser,
|
|
bodyshop,
|
|
selectedCameraJobId,
|
|
deleteAfterUpload,
|
|
uploads,
|
|
setUploads,
|
|
forceRerender,
|
|
}) {
|
|
const [progress, setProgress] = useState({
|
|
uploadInProgress: false,
|
|
totalToUpload: 0,
|
|
totalUploaded: 0,
|
|
startTime: null,
|
|
totalFiles: 0,
|
|
totalFilesCompleted: 0,
|
|
currentFile: null,
|
|
files: {}, //uri is the key, value is progress
|
|
});
|
|
|
|
let filesToDelete = [];
|
|
const client = useApolloClient();
|
|
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => {
|
|
if (uploads) {
|
|
onDone(uploads);
|
|
setUploads(null);
|
|
}
|
|
}, [uploads]);
|
|
|
|
function handleOnSuccess(asset) {
|
|
//NEEDS REDO.
|
|
filesToDelete.push(asset);
|
|
setProgress((progress) => ({
|
|
...progress,
|
|
// totalUploaded: progress.totalToUpload + asset.size,
|
|
totalFilesCompleted: progress.totalFilesCompleted + 1,
|
|
files: {
|
|
...progress.files,
|
|
[asset.uri]: {
|
|
...progress.files[asset.uri],
|
|
uploadEnd: new Date(),
|
|
},
|
|
},
|
|
}));
|
|
}
|
|
|
|
function handleOnProgress({ uri, filename }, percent, loaded) {
|
|
//NEED REDO
|
|
setProgress((progress) => {
|
|
return {
|
|
...progress,
|
|
totalUploaded:
|
|
progress.totalUploaded +
|
|
(loaded - (progress.files[uri]?.loaded || 0)),
|
|
files: {
|
|
...progress.files,
|
|
[uri]: {
|
|
...progress.files[uri],
|
|
percent,
|
|
filename,
|
|
speed: loaded - (progress.files[uri]?.loaded || 0),
|
|
loaded: loaded,
|
|
uploadStart: progress.files[uri]?.uploadStart || new Date(),
|
|
},
|
|
},
|
|
};
|
|
});
|
|
}
|
|
function handleOnError(error) {
|
|
logImEXEvent("imexmobile_upload_documents_error", { error });
|
|
Toast.show({
|
|
type: "error",
|
|
text1: "Unable to upload document.",
|
|
text2: error,
|
|
autoHide: false,
|
|
});
|
|
}
|
|
|
|
const onDone = async (selectedFiles) => {
|
|
setProgress((progress) => {
|
|
return {
|
|
...progress,
|
|
uploadInProgress: true,
|
|
statusText: "Preparing upload...",
|
|
};
|
|
});
|
|
try {
|
|
//Validate to make sure the totals for the file sizes do not exceed the total on the job.
|
|
const data = [];
|
|
const totalOfUploads = await selectedFiles.reduce(async (acc, val) => {
|
|
//Get the size of the file based on URI.
|
|
if (acc.fileSize) {
|
|
return acc + acc.fileSize;
|
|
} else {
|
|
const info = new File(val.uri).size;
|
|
data.push({ ...info, ...val }); //Add in the size.
|
|
val.albumId && MediaLibrary.migrateAlbumIfNeededAsync(val.albumId);
|
|
return (await acc) + info.size;
|
|
}
|
|
}, 0);
|
|
|
|
if (selectedCameraJobId !== "temp") {
|
|
const queryData = await client.query({
|
|
query: GET_DOC_SIZE_TOTALS,
|
|
fetchPolicy: "network-only",
|
|
variables: {
|
|
jobId: selectedCameraJobId,
|
|
},
|
|
});
|
|
|
|
if (
|
|
bodyshop.jobsizelimit -
|
|
queryData.data.documents_aggregate.aggregate.sum.size <=
|
|
totalOfUploads
|
|
) {
|
|
//No more room... abandon ship.
|
|
setProgress((progress) => ({
|
|
...progress,
|
|
speed: 0,
|
|
action: null,
|
|
statusText: null,
|
|
uploadInProgress: false,
|
|
}));
|
|
Alert.alert(
|
|
t("mediabrowser.labels.storageexceeded_title"),
|
|
t("mediabrowser.labels.storageexceeded")
|
|
);
|
|
return;
|
|
}
|
|
//We made it this far. We have enough space, so let's start uploading.
|
|
setProgress((progress) => ({
|
|
...progress,
|
|
totalToUpload: totalOfUploads,
|
|
totalUploaded: 0,
|
|
totalFilesCompleted: 0,
|
|
startTime: new Date(),
|
|
totalFiles: data.length,
|
|
currentFile: null,
|
|
statusText: null,
|
|
files: {}, //uri is the key, value is progress
|
|
}));
|
|
}
|
|
|
|
for (var i = 0; i < data.length + 4; i = i + 4) {
|
|
//Reset the files.
|
|
setProgress((progress) => ({ ...progress, files: {} }));
|
|
let proms = [];
|
|
if (data[i]) {
|
|
proms.push(CreateUploadProm(data[i]));
|
|
}
|
|
if (data[i + 1]) {
|
|
proms.push(CreateUploadProm(data[i + 1]));
|
|
}
|
|
if (data[i + 2]) {
|
|
proms.push(CreateUploadProm(data[i + 2]));
|
|
}
|
|
if (data[i + 3]) {
|
|
proms.push(CreateUploadProm(data[i + 3]));
|
|
}
|
|
|
|
await Promise.all(proms);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error during upload.", error, error.stack);
|
|
Sentry.captureException(error);
|
|
setProgress((progress) => ({
|
|
...progress,
|
|
speed: 0,
|
|
action: null,
|
|
statusText: null,
|
|
uploadInProgress: false,
|
|
}));
|
|
Alert.alert(
|
|
t("mediabrowser.labels.uploaderror_title"),
|
|
t("mediabrowser.labels.uploaderror")
|
|
);
|
|
return;
|
|
}
|
|
|
|
//Everything is uploaded, delete the succesful ones.
|
|
if (deleteAfterUpload) {
|
|
try {
|
|
if (Platform.OS === "android") {
|
|
//Create a new asset with the first file to delete.
|
|
// console.log('Trying new delete.');
|
|
await MediaLibrary.getPermissionsAsync(false);
|
|
|
|
const album = await MediaLibrary.createAlbumAsync(
|
|
"ImEX Mobile Deleted",
|
|
filesToDelete.pop(),
|
|
false
|
|
);
|
|
//Move the rest.
|
|
if (filesToDelete.length > 0) {
|
|
const moveResult = await MediaLibrary.addAssetsToAlbumAsync(
|
|
filesToDelete,
|
|
album,
|
|
false
|
|
);
|
|
}
|
|
const deleteResult = await MediaLibrary.deleteAlbumsAsync(album);
|
|
|
|
//Delete the album.
|
|
|
|
//This defaults to delete all assets in the album.
|
|
} else {
|
|
await MediaLibrary.deleteAssetsAsync(filesToDelete.map((f) => f.id));
|
|
}
|
|
} catch (error) {
|
|
console.log("Unable to delete picture.", error);
|
|
Sentry.captureException(error);
|
|
}
|
|
}
|
|
filesToDelete = [];
|
|
Toast.show({
|
|
type: "success",
|
|
text1: ` Upload completed.`,
|
|
//
|
|
// text2: duration,
|
|
});
|
|
//Reset state.
|
|
|
|
setProgress({
|
|
uploadInProgress: false,
|
|
totalToUpload: 0,
|
|
totalUploaded: 0,
|
|
totalFilesCompleted: 0,
|
|
startTime: null,
|
|
totalFiles: 0,
|
|
currentFile: null,
|
|
files: {},
|
|
});
|
|
|
|
forceRerender();
|
|
};
|
|
|
|
const CreateUploadProm = async (p) => {
|
|
return handleUpload(
|
|
{
|
|
mediaId: p.id,
|
|
onError: handleOnError,
|
|
onProgress: ({ percent, loaded }) =>
|
|
handleOnProgress(p, percent, loaded),
|
|
onSuccess: () => handleOnSuccess(p),
|
|
},
|
|
{
|
|
bodyshop: bodyshop,
|
|
jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
|
|
uploaded_by: currentUser.email,
|
|
photo: p,
|
|
}
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
visible={progress.uploadInProgress}
|
|
animationType="slide"
|
|
transparent={true}
|
|
onRequestClose={() => {
|
|
Alert.alert("Cancel?", "Do you want to abort the upload?", [
|
|
{
|
|
text: "Yes",
|
|
onPress: () => {
|
|
setUploads(null);
|
|
setProgress({
|
|
uploadInProgress: false,
|
|
totalToUpload: 0,
|
|
totalUploaded: 0,
|
|
totalFilesCompleted: 0,
|
|
startTime: null,
|
|
totalFiles: 0,
|
|
currentFile: null,
|
|
files: {},
|
|
});
|
|
},
|
|
},
|
|
{ text: "No" },
|
|
]);
|
|
}}
|
|
>
|
|
<View style={styles.modalContainer}>
|
|
<View style={styles.modal}>
|
|
{Object.keys(progress.files).map((key) => (
|
|
<View key={key} style={styles.progressItem}>
|
|
<Text style={styles.progressText}>
|
|
{progress.files[key].filename}
|
|
</Text>
|
|
<View style={styles.progressBarContainer}>
|
|
<ProgressBar
|
|
progress={progress.files[key].percent}
|
|
style={styles.progress}
|
|
color={progress.files[key].percent === 1 ? "green" : "blue"}
|
|
/>
|
|
<View
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text>{`${formatBytes(
|
|
progress.files[key].loaded /
|
|
(((progress.files[key].uploadEnd || new Date()) -
|
|
progress.files[key].uploadStart) /
|
|
1000)
|
|
)}/sec`}</Text>
|
|
{progress.files[key].percent === 1 && (
|
|
<>
|
|
<ActivityIndicator style={{ marginLeft: 12 }} />
|
|
<Text style={{ marginLeft: 4 }}>Processing...</Text>
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))}
|
|
<View style={styles.centeredView}>
|
|
{progress.statusText ? (
|
|
<>
|
|
<ActivityIndicator style={{ marginLeft: 12 }} />
|
|
<Text style={{ marginLeft: 4 }}>{progress.statusText}</Text>
|
|
<Divider />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Text>{`${progress.totalFilesCompleted} of ${progress.totalFiles} uploaded.`}</Text>
|
|
<Text>{`${formatBytes(progress.totalUploaded)} of ${formatBytes(
|
|
progress.totalToUpload
|
|
)} uploaded.`}</Text>
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|
|
const styles = StyleSheet.create({
|
|
modalContainer: {
|
|
display: "flex",
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
},
|
|
modal: {
|
|
//flex: 1,
|
|
display: "flex",
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
backgroundColor: "white",
|
|
borderRadius: 20,
|
|
padding: 18,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5,
|
|
},
|
|
centeredView: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginTop: 22,
|
|
},
|
|
progressItem: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
progressText: {
|
|
flex: 1,
|
|
},
|
|
progressBarContainer: {
|
|
flex: 3,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
});
|