admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved document uploads & remove console logs.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
android-keystore.md Normal file
View File

@@ -0,0 +1,7 @@
Saving Keystore to /Users/pfic/Documents/Development/imexmobile/imexmobile.jks
Keystore credentials
Keystore password: a8350e9998e94a9e84e5dd8743deeb8a
Key alias: QHBmaWMvaW1leG1vYmlsZQ==
Key password: 2db55c4fb1964e2e996271a2082133ee
Path to Keystore: /Users/pfic/Documents/Development/imexmobile/imexmobile.jks

6
app.json
View File

@@ -2,18 +2,18 @@
"expo": {
"name": "ImEX Mobile",
"slug": "imexmobile",
"version": "1.1.2",
"version": "1.2.0",
"orientation": "default",
"icon": "./assets/logo192noa.png",
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.imex.imexmobile",
"buildNumber": "1.1.2",
"buildNumber": "1.2.0",
"googleServicesFile": "./GoogleService-Info.plist"
},
"android": {
"package": "com.imex.imexmobile",
"versionCode": 1010200,
"versionCode": 1020000,
"googleServicesFile": "./google-services.json"
},
"splash": {

44
babel-translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project version="1.2" be_version="2.7.1">
<babeledit_project be_version="2.7.1" version="1.2">
<!--
BabelEdit project file
@@ -1299,6 +1299,27 @@
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>converting</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>deleteafterupload</name>
<definition_loaded>false</definition_loaded>
@@ -1446,6 +1467,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>uploading</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>

2
components/job-documents/job-documents.component.jsx
View File

@@ -32,8 +32,6 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
[job.documents]
);
console.log(job.documents);
return (
<View style={{ flex: 1 }}>
<FlatList

137
components/screen-media-browser/screen-media-browser.component.jsx
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);

2
components/screen-settings/screen-settings.component.jsx
View File

@@ -9,8 +9,6 @@ import * as Updates from "expo-updates";
export default function ScreenSettingsComponent() {
const { t } = useTranslation();
console.log(Constants.manifest);
return (
<View
style={{

274
components/upload-progress/upload-progress.component.jsx
View File

@@ -1,51 +1,271 @@
import { Ionicons } from "@expo/vector-icons";
import { useApolloClient } from "@apollo/client";
import * as FileSystem from "expo-file-system";
import * as MediaLibrary from "expo-media-library";
import _ from "lodash";
import React, { useMemo } from "react";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
ActivityIndicator,
Alert,
Modal,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import * as Progress from "react-native-progress";
export default function UploadProgress({ uploads, setUploads }) {
const uploadKeys = useMemo(() => {
if (uploads) return Object.keys(uploads);
return [];
import { ProgressBar } from "react-native-paper";
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 { 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,
forceRerender,
}) {
const [progress, setProgress] = useState({
loading: false,
uploadInProgress: false,
speed: 0,
files: {}, //uri is the key, value is progress
});
const client = useApolloClient();
const { t } = useTranslation();
useEffect(() => {
//Set the state of uploads to do.
if (uploads) onDone(uploads);
}, [uploads]);
//if (!uploads) return null;
function handleOnSuccess(id) {
logImEXEvent("imexmobile_successful_upload");
setProgress((progress) => ({
...progress,
action: t("mediabrowser.labels.converting"),
files: {
...progress.files,
[id]: {
...progress.files[id],
action: t("mediabrowser.labels.converting"),
},
},
// });
}));
}
function handleOnProgress(uri, percent, loaded) {
setProgress((progress) => ({
...progress,
speed: loaded - progress.files[uri].loaded,
action:
percent === 1
? t("mediabrowser.labels.converting")
: t("mediabrowser.labels.uploading"),
files: {
...progress.files,
[uri]: {
...progress.files[uri],
percent,
action:
percent === 1
? t("mediabrowser.labels.converting")
: t("mediabrowser.labels.uploading"),
loaded: loaded,
},
},
}));
}
function handleOnError(...props) {
logImEXEvent("imexmobile_upload_documents_error", { props });
}
const onDone = async (data) => {
//Validate to make sure the totals for the file sizes do not exceed the total on the job.
setProgress({
files: _.keyBy(data, "id"),
loading: true,
uploadInProgress: true,
});
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);
if (
bodyshop.jobsizelimit -
queryData.data.documents_aggregate.aggregate.sum.size <=
totalOfUploads
) {
//No more room... abandon ship.
setProgress((progress) => ({
...progress,
speed: 0,
action: null,
loading: false,
uploadInProgress: false,
}));
Alert.alert(
t("mediabrowser.labels.storageexceeded_title"),
t("mediabrowser.labels.storageexceeded")
);
return;
}
}
//Sequentially await the proms.
for (const p of data) {
let filename;
filename = p.filename || p.uri.split("/").pop();
await handleUpload(
{
filename,
mediaId: p.id,
onError: handleOnError,
onProgress: ({ percent, loaded }) =>
handleOnProgress(p.id, percent, loaded),
onSuccess: () => handleOnSuccess(p.id),
},
{
bodyshop: bodyshop,
jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
uploaded_by: currentUser.email,
photo: p,
}
);
//Set the state to mark that it's done.
setProgress((progress) => ({
...progress,
action: null,
speed: 0,
files: {
...progress.files,
[p.id]: {
...progress.files[p.id],
action: null,
},
},
}));
}
if (deleteAfterUpload) {
try {
await MediaLibrary.deleteAssetsAsync(Object.keys(progress.files));
} catch (error) {
console.log("Unable to delete picture.", error);
}
}
setProgress({
loading: false,
speed: 0,
action: null,
uploadInProgress: false,
files: {}, //uri is the key, value is progress
});
forceRerender();
};
console.log("speed", progress.speed, progress.speed !== 0);
return (
<View style={styles.container}>
<ScrollView>
{uploadKeys.map((key) => (
<View key={key} style={styles.progressItem}>
<Text style={styles.progressText}>{key}</Text>
<Modal
visible={progress.uploadInProgress}
animationType="slide"
transparent={true}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.modal}>
{progress.loading && <ActivityIndicator />}
{progress.action && (
<Text>{`${progress.action} ${
(progress.speed !== 0 || !progress.speed) &&
`- ${formatBytes(progress.speed)}/sec`
}`}</Text>
)}
<ScrollView contentContainerStyle={styles.centeredView}>
{Object.keys(progress.files).map((key) => (
<View key={progress.files[key].id} style={styles.progressItem}>
<Text style={styles.progressText}>
{progress.files[key].filename}
</Text>
<View style={styles.progressBarContainer}>
<Progress.Bar
<ProgressBar
progress={progress.files[key].percent}
style={styles.progress}
height={10}
width={null}
progress={uploads[key].percent}
color={uploads[key].percent === 1 ? "green" : "blue"}
color={progress.files[key].percent === 1 ? "green" : "blue"}
/>
</View>
<TouchableOpacity
onPress={() =>
setUploads((prevUploads) => _.omit(prevUploads, key))
}
>
<Ionicons name="ios-close" size={32} />
</TouchableOpacity>
</View>
))}
</ScrollView>
</View>
</Modal>
);
}
const styles = StyleSheet.create({
container: {
display: "flex",
modal: {
flex: 1,
marginTop: 50,
marginBottom: 60,
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: {
flex: 1,
// justifyContent: "center",
// alignItems: "center",
marginTop: 22,
},
progressItem: {
display: "flex",

6
firebase/firebase.analytics.js
View File

@@ -12,12 +12,6 @@ export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
// null,
...additionalParams,
};
console.log(
"%c[Analytics]",
"background-color: green ;font-weight:bold;",
eventName,
eventParams
);
Analytics.logEvent(eventName, eventParams);
};

2
firebase/firebase.utils.js
View File

@@ -2,8 +2,6 @@ import firebase from "firebase/app";
import "firebase/auth";
import env from "../env";
console.log(env.firebase);
if (!firebase.apps.length) {
firebase.initializeApp(env.firebase);
}

1
package.json
View File

@@ -11,6 +11,7 @@
"@apollo/client": "^3.3.19",
"@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "^1.13.0",
"@react-native-community/art": "^1.2.0",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.11.11",
"@react-navigation/drawer": "^5.12.5",

4
translations/en-US/common.json
View File

@@ -89,13 +89,15 @@
"upload": "Upload"
},
"labels": {
"converting": "Converting",
"deleteafterupload": "Delete After Upload",
"nomedia": "Look's like there's no media on your device. Take some photos or videos and they will appear here.",
"selectjob": "--- Select a job ---",
"selectjobassetselector": "Please select a job to upload media. ",
"storageexceeded": "Unable to uploaded selected files because there is not sufficient space available on this job.",
"storageexceeded_title": "Unable to upload file(s)",
"temporarystorage": "* Temporary Storage *"
"temporarystorage": "* Temporary Storage *",
"uploading": "Uploading"
},
"titles": {
"mediabrowsertab": "Media Browser"

4
translations/es-MX/common.json
View File

@@ -89,13 +89,15 @@
"upload": ""
},
"labels": {
"converting": "",
"deleteafterupload": "",
"nomedia": "",
"selectjob": "",
"selectjobassetselector": "",
"storageexceeded": "",
"storageexceeded_title": "",
"temporarystorage": ""
"temporarystorage": "",
"uploading": ""
},
"titles": {
"mediabrowsertab": ""

4
translations/fr-CA/common.json
View File

@@ -89,13 +89,15 @@
"upload": ""
},
"labels": {
"converting": "",
"deleteafterupload": "",
"nomedia": "",
"selectjob": "",
"selectjobassetselector": "",
"storageexceeded": "",
"storageexceeded_title": "",
"temporarystorage": ""
"temporarystorage": "",
"uploading": ""
},
"titles": {
"mediabrowsertab": ""

24
util/document-upload.utility.js
View File

@@ -16,11 +16,8 @@ export const handleUpload = async (ev, context) => {
const { bodyshop, jobId } = context;
const imageData = await MediaLibrary.getAssetInfoAsync(mediaId);
const newFile = await (await fetch(imageData.localUri)).blob();
let extension = imageData.localUri.split(".").pop();
let key = `${bodyshop.id}/${jobId}/${(filename || newFile.data.name).replace(
/\.[^/.]+$/,
""
@@ -69,12 +66,14 @@ export const uploadToCloudinary = async (
: "incoming_upload";
//Get the signed url.
let signedURLResponse;
try {
signedURLResponse = await axios.post(`${env.API_URL}/media/sign`, {
public_id: public_id,
tags: tags,
timestamp: timestamp,
upload_preset: upload_preset,
});
} catch (error) {
@@ -90,24 +89,23 @@ export const uploadToCloudinary = async (
}
//Build request to end to cloudinary.
var signature = signedURLResponse.data;
var options = {
headers: { "X-Requested-With": "XMLHttpRequest" },
onUploadProgress: (e) => {
if (onProgress) onProgress({ percent: e.loaded / e.total });
if (onProgress)
onProgress({ percent: e.loaded / e.total, loaded: e.loaded });
},
};
const formData = new FormData();
formData.append("file", {
uri: imageData.localUri,
type: fileType,
name: file.data.name,
});
formData.append("upload_preset", upload_preset);
formData.append("api_key", env.REACT_APP_CLOUDINARY_API_KEY);
formData.append("public_id", public_id);
formData.append("tags", tags);
@@ -190,6 +188,7 @@ export const uploadToCloudinary = async (
mediaId,
};
}
return { success: true, mediaId };
};
@@ -202,3 +201,14 @@ export function DetermineFileType(filetype) {
return "auto";
}
export function formatBytes(a, b = 2) {
if (0 === a || !a) return "0 Bytes";
const c = 0 > b ? 0 : b,
d = Math.floor(Math.log(a) / Math.log(1024));
return (
parseFloat((a / Math.pow(1024, d)).toFixed(c)) +
" " +
["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d]
);
}

9
yarn.lock
View File

@@ -2280,6 +2280,15 @@
invariant "^2.2.4"
prop-types "^15.7.2"
"@react-native-community/art@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@react-native-community/art/-/art-1.2.0.tgz#386d95393f6042d9006f9d4bc6063fb898794460"
integrity sha512-a+ZcRGl/BzLa89yi33Mbn5SHavsEXqKUMdbfLf3U8MDLElndPqUetoJyGkv63+BcPO49UMWiQRP1YUz6/zfJ+A==
dependencies:
art "^0.10.3"
invariant "^2.2.4"
prop-types "^15.7.2"
"@react-native-community/cli-debugger-ui@^4.13.1":
version "4.13.1"
resolved "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.13.1.tgz"