Improved document uploads & remove console logs.
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user