Improved document uploads & remove console logs.

This commit is contained in:
Patrick Fic
2021-06-01 08:49:29 -07:00
parent fd52e72364
commit 659881e012
15 changed files with 350 additions and 190 deletions

View File

@@ -1,142 +1,31 @@
import { useApolloClient } from "@apollo/client";
import { Ionicons } from "@expo/vector-icons";
//const limit = plimit(2);
import * as FileSystem from "expo-file-system";
import { AssetsSelector } from "expo-images-picker";
import * as MediaLibrary from "expo-media-library";
import _ from "lodash";
import React, { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { Alert, StyleSheet, Text, View } from "react-native";
import { StyleSheet, Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
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 { handleUpload } from "../../util/document-upload.utility";
import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
import CameraSelectJob from "../camera-select-job/camera-select-job.component";
import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
import UploadProgress from "../upload-progress/upload-progress.component";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
bodyshop: selectBodyshop,
selectedCameraJobId: selectCurrentCameraJobId,
deleteAfterUpload: selectDeleteAfterUpload,
});
export function ImageBrowserScreen({
currentUser,
bodyshop,
selectedCameraJobId,
deleteAfterUpload,
}) {
export function ImageBrowserScreen({ selectedCameraJobId }) {
const { t } = useTranslation();
const [uploads, setUploads] = useState({});
function handleOnProgress(uri, percent) {
setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } }));
}
const [uploads, setUploads] = useState(null);
const [tick, setTick] = useState(0);
const forceRerender = useCallback(() => {
setTick((tick) => tick + 1);
}, []);
const client = useApolloClient();
async function handleOnSuccess(uri, id) {
logImEXEvent("imexmobile_successful_upload");
setUploads((prevUploads) => _.omit(prevUploads, uri));
}
const onDone = async (data) => {
const onDone = (data) => {
logImEXEvent("imexmobile_upload_documents", { count: data.length });
//Validate to make sure the totals for the file sizes do not exceed the total on the job.
if (selectedCameraJobId !== "temp") {
const queryData = await client.query({
query: GET_DOC_SIZE_TOTALS,
fetchPolicy: "network-only",
variables: {
jobId: selectedCameraJobId,
},
});
const totalOfUploads = await data.reduce(async (acc, val) => {
//Get the size of the file based on URI.
const info = await FileSystem.getInfoAsync(val.uri, { size: true });
return (await acc) + info.size;
}, 0);
// console.log(
// "Size of uploaded documents.",
// queryData.data.documents_aggregate.aggregate.sum.size,
// "Shop Limit",
// bodyshop.jobsizelimit,
// "Space remaining",
// bodyshop.jobsizelimit -
// queryData.data.documents_aggregate.aggregate.sum.size,
// "Total of uploaded files",
// totalOfUploads
// );
if (
bodyshop.jobsizelimit -
queryData.data.documents_aggregate.aggregate.sum.size <=
totalOfUploads
) {
//No more room... abandon ship.
Alert.alert(
t("mediabrowser.labels.storageexceeded_title"),
t("mediabrowser.labels.storageexceeded")
);
return;
}
}
const ret = await Promise.all(
data.map(async (p) => {
let filename;
//Appears to work for android.
//iOS provides the filename, android doe snot.
filename = p.filename || p.uri.split("/").pop();
const result = await handleUpload(
{
//iOS provides the file name. Android does not.
filename,
mediaId: p.id,
onError: handleOnError,
onProgress: ({ percent }) => handleOnProgress(filename, percent),
onSuccess: () => handleOnSuccess(filename, p.id),
},
{
bodyshop: bodyshop,
jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
uploaded_by: currentUser.email,
photo: p,
}
);
return result;
})
);
if (deleteAfterUpload) {
try {
await MediaLibrary.deleteAssetsAsync(ret.map((r) => r.mediaId));
} catch (error) {
console.log("Unable to delete picture.", error);
}
}
forceRerender();
setUploads(data);
};
return (
@@ -159,14 +48,7 @@ export function ImageBrowserScreen({
style={{ flex: 1 }}
key={tick}
options={{
// manipulate: {
// //width: 512,
// compress: 0.7,
// base64: false,
// saveTo: "jpeg",
// },
assetsType: ["photo", "video"],
//maxSelections: 5,
margin: 3,
portraitCols: 4,
landscapeCols: 6,
@@ -223,7 +105,7 @@ export function ImageBrowserScreen({
}}
/>
)}
<UploadProgress uploads={uploads} setUploads={setUploads} />
<UploadProgress uploads={uploads} forceRerender={forceRerender} />
</View>
);
}
@@ -245,9 +127,4 @@ const styles = StyleSheet.create({
},
});
function handleOnError(...props) {
console.log("HandleOnError", props);
logImEXEvent("imexmobile_upload_documents_error", { props });
}
export default connect(mapStateToProps, null)(ImageBrowserScreen);