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

IO-3092 Add imgproxy uploads and update expo version.

Browse Source
This commit is contained in:
Patrick Fic
2025-02-21 13:54:56 -08:00
parent 23fdb02375
commit dc6cd88e8c
12 changed files with 410 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app.json
View File

@@ -9,12 +9,10 @@
"projectId": "ffe01f3a-d507-4698-82cd-da1f1cad450b" "projectId": "ffe01f3a-d507-4698-82cd-da1f1cad450b"
} }
}, },
"runtimeVersion": "appVersion",
"orientation": "default", "orientation": "default",
"icon": "./assets/logo192noa.png", "icon": "./assets/logo192noa.png",
"platforms": [ "platforms": ["ios", "android"],
"ios",
"android"
],
"ios": { "ios": {
"supportsTablet": true, "supportsTablet": true,
"bundleIdentifier": "com.imex.imexmobile", "bundleIdentifier": "com.imex.imexmobile",
@@ -47,9 +45,7 @@
"fallbackToCacheTimeout": 0, "fallbackToCacheTimeout": 0,
"url": "https://u.expo.dev/ffe01f3a-d507-4698-82cd-da1f1cad450b" "url": "https://u.expo.dev/ffe01f3a-d507-4698-82cd-da1f1cad450b"
}, },
"assetBundlePatterns": [ "assetBundlePatterns": ["**/*"],
"**/*"
],
"web": { "web": {
"favicon": "./assets/logo192noa.png", "favicon": "./assets/logo192noa.png",
"config": { "config": {
@@ -85,9 +81,6 @@
], ],
"expo-localization", "expo-localization",
"expo-font" "expo-font"
], ]
"runtimeVersion": {
"policy": "appVersion"
}
} }
} }

2
components/data-label/data-label.component.jsx
View File

@@ -16,7 +16,7 @@ export default function DataLabelComponent({
); );
const { key, ...rest } = restProps; const { key, ...rest } = restProps;
return ( return (
<View {...rest} style={{ margin: 4, ...restProps.style }}> <View key={key} {...rest} style={{ margin: 4, ...restProps.style }}>
<Text style={{ color: "slategray" }}>{label}</Text> <Text style={{ color: "slategray" }}>{label}</Text>
<Text>{theContent}</Text> <Text>{theContent}</Text>
</View> </View>

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

@@ -10,38 +10,93 @@ import {
import env from "../../env"; import env from "../../env";
import { DetermineFileType } from "../../util/document-upload.utility"; import { DetermineFileType } from "../../util/document-upload.utility";
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component"; import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
export default function JobDocumentsComponent({ job, loading, refetch }) { import { useEffect } from "react";
const [previewVisible, setPreviewVisible] = useState(false); import axios from "axios";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(JobDocumentsComponent);
export function JobDocumentsComponent({ bodyshop, job, loading, refetch }) {
const [previewVisible, setPreviewVisible] = useState(false);
const [fullphotos, setFullPhotos] = useState([]);
const [imgIndex, setImgIndex] = useState(0); const [imgIndex, setImgIndex] = useState(0);
const onRefresh = async () => { const onRefresh = async () => {
return refetch(); return refetch();
}; };
const fullphotos = useMemo( useEffect(() => {
() => async function getPhotos() {
job.documents.map((doc, idx) => { if (bodyshop.localmediatoken === "imgproxy") {
return { const result = await axios.post(
id: idx, `${env.API_URL}/media/imgproxy/thumbnails`,
videoUrl: {
DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc), jobid: job.id,
source: }
DetermineFileType(doc.type) === "video" );
? { uri: GenerateThumbUrl(doc) }
: { uri: GenerateSrcUrl(doc) }, setFullPhotos(
url: result.data.map((doc, idx) => {
DetermineFileType(doc.type) === "video" return {
? GenerateThumbUrl(doc) id: idx,
: GenerateSrcUrl(doc), videoUrl:
uri: DetermineFileType(doc.type) === "video" &&
DetermineFileType(doc.type) === "video" doc.originalUrlViaProxyPath,
? GenerateThumbUrl(doc) source:
: GenerateSrcUrl(doc), DetermineFileType(doc.type) === "video"
thumbUrl: GenerateThumbUrl(doc), ? { uri: doc.thumbnailUrl }
}; : { uri: doc.originalUrl },
}), url:
[job.documents] DetermineFileType(doc.type) === "video"
); ? doc.thumbnailUrl
: doc.originalUrl,
uri:
DetermineFileType(doc.type) === "video"
? doc.originalUrlViaProxyPath
: doc.originalUrl,
thumbUrl: doc.thumbnailUrl,
};
})
);
} else {
setFullPhotos(
job.documents.map((doc, idx) => {
return {
id: idx,
videoUrl:
DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
source:
DetermineFileType(doc.type) === "video"
? { uri: GenerateThumbUrl(doc) }
: { uri: GenerateSrcUrl(doc) },
url:
DetermineFileType(doc.type) === "video"
? GenerateThumbUrl(doc)
: GenerateSrcUrl(doc),
uri:
DetermineFileType(doc.type) === "video"
? GenerateThumbUrl(doc)
: GenerateSrcUrl(doc),
thumbUrl: GenerateThumbUrl(doc),
};
})
);
}
}
getPhotos();
}, [job.documents]);
return ( return (
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
@@ -49,7 +104,7 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
refreshControl={ refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} /> <RefreshControl refreshing={loading} onRefresh={onRefresh} />
} }
data={job.documents} data={fullphotos}
numColumns={4} numColumns={4}
style={{ flex: 1 }} style={{ flex: 1 }}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
@@ -65,14 +120,15 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
style={{ flex: 1 }} style={{ flex: 1 }}
resizeMode="cover" resizeMode="cover"
source={{ source={{
uri: GenerateThumbUrl(object.item), uri: object.item.thumbUrl,
aspectRatio: 1, aspectRatio: 1,
}} }}
/> />
</TouchableOpacity> </TouchableOpacity>
)} )}
/> />
<Text>{job.documents.length}</Text>
<Text>{fullphotos.length}</Text>
<MediaCacheOverlay <MediaCacheOverlay
photos={fullphotos} photos={fullphotos}

1
components/loading-display/loading-display.component.jsx
View File

@@ -3,6 +3,7 @@ import { View } from "react-native";
import { BarIndicator } from "react-native-indicators"; import { BarIndicator } from "react-native-indicators";
export default function LoadingDisplay({ count = 5 }) { export default function LoadingDisplay({ count = 5 }) {
//TODO: This is throwing an error per expo, but it appears to be happening inside the component itself.
return ( return (
<View style={{ flex: 1, alignContent: "center", justifyContent: "center" }}> <View style={{ flex: 1, alignContent: "center", justifyContent: "center" }}>
<BarIndicator count={count} color="dodgerblue" /> <BarIndicator count={count} color="dodgerblue" />

88
components/screen-media-browser/screen-media-browser.component.jsx
View File

@@ -1,23 +1,23 @@
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from "@expo/vector-icons";
import { AssetsSelector } from 'expo-images-picker'; import { AssetsSelector } from "expo-images-picker";
import { MediaType } from 'expo-media-library'; import { MediaType } from "expo-media-library";
import React, { useCallback, useMemo, useState } from 'react'; import React, { useCallback, useMemo, useState } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View } from "react-native";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { createStructuredSelector } from 'reselect'; import { createStructuredSelector } from "reselect";
import { logImEXEvent } from '../../firebase/firebase.analytics'; import { logImEXEvent } from "../../firebase/firebase.analytics";
import { toggleDeleteAfterUpload } from '../../redux/app/app.actions'; import { toggleDeleteAfterUpload } from "../../redux/app/app.actions";
import { import {
selectCurrentCameraJobId, selectCurrentCameraJobId,
selectDeleteAfterUpload, selectDeleteAfterUpload,
} from '../../redux/app/app.selectors'; } from "../../redux/app/app.selectors";
import { selectBodyshop } from '../../redux/user/user.selectors'; import { selectBodyshop } from "../../redux/user/user.selectors";
import CameraSelectJob from '../camera-select-job/camera-select-job.component'; import CameraSelectJob from "../camera-select-job/camera-select-job.component";
import JobSpaceAvailable from '../job-space-available/job-space-available.component'; import JobSpaceAvailable from "../job-space-available/job-space-available.component";
import LocalUploadProgress from '../local-upload-progress/local-upload-progress.component'; import UploadProgressLocal from "../upload-progress-local/upload-progress-local.component";
import UploadDeleteSwitch from '../upload-delete-switch/upload-delete-switch.component'; import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
import UploadProgress from '../upload-progress/upload-progress.component'; import UploadProgress from "../upload-progress/upload-progress.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
selectedCameraJobId: selectCurrentCameraJobId, selectedCameraJobId: selectCurrentCameraJobId,
@@ -43,18 +43,18 @@ export function ImageBrowserScreen({
}, []); }, []);
const onDone = (data) => { const onDone = (data) => {
logImEXEvent('imexmobile_upload_documents', { count: data.length }); logImEXEvent("imexmobile_upload_documents", { count: data.length });
if (data.length !== 0) setUploads(data); if (data.length !== 0) setUploads(data);
}; };
const widgetErrors = useMemo( const widgetErrors = useMemo(
() => ({ () => ({
errorTextColor: 'black', errorTextColor: "black",
errorMessages: { errorMessages: {
hasErrorWithPermissions: 'Please Allow media gallery permissions.', hasErrorWithPermissions: "Please Allow media gallery permissions.",
hasErrorWithLoading: 'There was an error while loading images.', hasErrorWithLoading: "There was an error while loading images.",
hasErrorWithResizing: 'There was an error while loading images.', hasErrorWithResizing: "There was an error while loading images.",
hasNoAssets: 'No images found.', hasNoAssets: "No images found.",
}, },
}), }),
[] []
@@ -78,28 +78,28 @@ export function ImageBrowserScreen({
width: 50, width: 50,
compress: 0.7, compress: 0.7,
base64: false, base64: false,
saveTo: 'jpeg', saveTo: "jpeg",
}), }),
[] []
); );
const _textStyle = { const _textStyle = {
color: 'white', color: "white",
}; };
const _buttonStyle = { const _buttonStyle = {
backgroundColor: 'orange', backgroundColor: "orange",
borderRadius: 5, borderRadius: 5,
}; };
const widgetNavigator = useMemo( const widgetNavigator = useMemo(
() => ({ () => ({
Texts: { Texts: {
finish: t('mediabrowser.actions.upload'), finish: t("mediabrowser.actions.upload"),
back: t('mediabrowser.actions.refresh'), back: t("mediabrowser.actions.refresh"),
selected: 'selected', selected: "selected",
}, },
midTextColor: 'black', midTextColor: "black",
minSelection: 1, minSelection: 1,
buttonTextStyle: styles.textStyle, buttonTextStyle: styles.textStyle,
buttonStyle: styles.buttonStyle, buttonStyle: styles.buttonStyle,
@@ -114,20 +114,20 @@ export function ImageBrowserScreen({
const widgetStyles = useMemo( const widgetStyles = useMemo(
() => ({ () => ({
margin: 2, margin: 2,
bgColor: 'white', bgColor: "white",
spinnerColor: 'blue', spinnerColor: "blue",
widgetWidth: 99, widgetWidth: 99,
videoIcon: { videoIcon: {
Component: Ionicons, Component: Ionicons,
iconName: 'videocam', iconName: "videocam",
color: 'white', color: "white",
size: 20, size: 20,
}, },
selectedIcon: { selectedIcon: {
Component: Ionicons, Component: Ionicons,
iconName: 'checkmark-circle-outline', iconName: "checkmark-circle-outline",
color: 'white', color: "white",
bg: 'rgba(35,35,35, 0.75)', bg: "rgba(35,35,35, 0.75)",
size: 32, size: 32,
}, },
}), }),
@@ -139,7 +139,7 @@ export function ImageBrowserScreen({
<CameraSelectJob /> <CameraSelectJob />
{bodyshop.uselocalmediaserver ? ( {bodyshop.uselocalmediaserver ? (
<Text style={{ margin: 10 }}> <Text style={{ margin: 10 }}>
{t('mediabrowser.labels.localserver', { {t("mediabrowser.labels.localserver", {
url: bodyshop.localmediaserverhttp, url: bodyshop.localmediaserverhttp,
})} })}
</Text> </Text>
@@ -161,11 +161,11 @@ export function ImageBrowserScreen({
<View <View
style={{ style={{
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
}} }}
> >
<Text>{t('mediabrowser.labels.selectjobassetselector')}</Text> <Text>{t("mediabrowser.labels.selectjobassetselector")}</Text>
</View> </View>
)} )}
{selectedCameraJobId && ( {selectedCameraJobId && (
@@ -179,7 +179,7 @@ export function ImageBrowserScreen({
/> />
)} )}
{bodyshop.uselocalmediaserver ? ( {bodyshop.uselocalmediaserver ? (
<LocalUploadProgress <UploadProgressLocal
uploads={uploads} uploads={uploads}
setUploads={setUploads} setUploads={setUploads}
forceRerender={forceRerender} forceRerender={forceRerender}
@@ -200,7 +200,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
}, },
container: { container: {
display: 'flex', display: "flex",
// position: "relative", // position: "relative",
}, },
buttonStyle: { buttonStyle: {
@@ -208,7 +208,7 @@ const styles = StyleSheet.create({
}, },
// eslint-disable-next-line react-native/no-color-literals // eslint-disable-next-line react-native/no-color-literals
textStyle: { textStyle: {
color: 'dodgerblue', color: "dodgerblue",
}, },
}); });

0
components/local-upload-progress/local-upload-progress.component.jsx → components/upload-progress-local/upload-progress-local.component.jsx
View File

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

@@ -1,8 +1,8 @@
import { useApolloClient } from '@apollo/client'; import { useApolloClient } from "@apollo/client";
import * as FileSystem from 'expo-file-system'; import * as FileSystem from "expo-file-system";
import * as MediaLibrary from 'expo-media-library'; import * as MediaLibrary from "expo-media-library";
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { import {
ActivityIndicator, ActivityIndicator,
Alert, Alert,
@@ -11,23 +11,23 @@ import {
StyleSheet, StyleSheet,
Text, Text,
View, View,
} from 'react-native'; } from "react-native";
import { Divider, ProgressBar } from 'react-native-paper'; import { Divider, ProgressBar } from "react-native-paper";
import Toast from 'react-native-toast-message'; import Toast from "react-native-toast-message";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { createStructuredSelector } from 'reselect'; import { createStructuredSelector } from "reselect";
import * as Sentry from '@sentry/react-native'; import * as Sentry from "@sentry/react-native";
import { logImEXEvent } from '../../firebase/firebase.analytics'; import { logImEXEvent } from "../../firebase/firebase.analytics";
import { GET_DOC_SIZE_TOTALS } from '../../graphql/documents.queries'; import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
import { import {
selectCurrentCameraJobId, selectCurrentCameraJobId,
selectDeleteAfterUpload, selectDeleteAfterUpload,
} from '../../redux/app/app.selectors'; } from "../../redux/app/app.selectors";
import { import {
selectBodyshop, selectBodyshop,
selectCurrentUser, selectCurrentUser,
} from '../../redux/user/user.selectors'; } from "../../redux/user/user.selectors";
import { formatBytes, handleUpload } from '../../util/document-upload.utility'; import { formatBytes, handleUpload } from "../../util/document-upload.utility";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser, currentUser: selectCurrentUser,
@@ -110,10 +110,10 @@ export function UploadProgress({
}); });
} }
function handleOnError(error) { function handleOnError(error) {
logImEXEvent('imexmobile_upload_documents_error', { error }); logImEXEvent("imexmobile_upload_documents_error", { error });
Toast.show({ Toast.show({
type: 'error', type: "error",
text1: 'Unable to upload document.', text1: "Unable to upload document.",
text2: error, text2: error,
autoHide: false, autoHide: false,
}); });
@@ -124,7 +124,7 @@ export function UploadProgress({
return { return {
...progress, ...progress,
uploadInProgress: true, uploadInProgress: true,
statusText: 'Preparing upload...', statusText: "Preparing upload...",
}; };
}); });
@@ -138,10 +138,10 @@ export function UploadProgress({
return (await acc) + info.size; return (await acc) + info.size;
}, 0); }, 0);
if (selectedCameraJobId !== 'temp') { if (selectedCameraJobId !== "temp") {
const queryData = await client.query({ const queryData = await client.query({
query: GET_DOC_SIZE_TOTALS, query: GET_DOC_SIZE_TOTALS,
fetchPolicy: 'network-only', fetchPolicy: "network-only",
variables: { variables: {
jobId: selectedCameraJobId, jobId: selectedCameraJobId,
}, },
@@ -161,8 +161,8 @@ export function UploadProgress({
uploadInProgress: false, uploadInProgress: false,
})); }));
Alert.alert( Alert.alert(
t('mediabrowser.labels.storageexceeded_title'), t("mediabrowser.labels.storageexceeded_title"),
t('mediabrowser.labels.storageexceeded') t("mediabrowser.labels.storageexceeded")
); );
return; return;
} }
@@ -203,14 +203,13 @@ export function UploadProgress({
//Everything is uploaded, delete the succesful ones. //Everything is uploaded, delete the succesful ones.
if (deleteAfterUpload) { if (deleteAfterUpload) {
try { try {
console.log('Trying to Delete', filesToDelete); if (Platform.OS === "android") {
if (Platform.OS === 'android') {
//Create a new asset with the first file to delete. //Create a new asset with the first file to delete.
// console.log('Trying new delete.'); // console.log('Trying new delete.');
await MediaLibrary.getPermissionsAsync(false); await MediaLibrary.getPermissionsAsync(false);
const album = await MediaLibrary.createAlbumAsync( const album = await MediaLibrary.createAlbumAsync(
'ImEX Mobile Deleted', "ImEX Mobile Deleted",
filesToDelete.pop(), filesToDelete.pop(),
false false
); );
@@ -231,13 +230,13 @@ export function UploadProgress({
await MediaLibrary.deleteAssetsAsync(filesToDelete.map((f) => f.id)); await MediaLibrary.deleteAssetsAsync(filesToDelete.map((f) => f.id));
} }
} catch (error) { } catch (error) {
console.log('Unable to delete picture.', error); console.log("Unable to delete picture.", error);
Sentry.Native.captureException(error); Sentry.Native.captureException(error);
} }
} }
filesToDelete = []; filesToDelete = [];
Toast.show({ Toast.show({
type: 'success', type: "success",
text1: ` Upload completed.`, text1: ` Upload completed.`,
// //
// text2: duration, // text2: duration,
@@ -269,22 +268,23 @@ export function UploadProgress({
}, },
{ {
bodyshop: bodyshop, bodyshop: bodyshop,
jobId: selectedCameraJobId !== 'temp' ? selectedCameraJobId : null, jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
uploaded_by: currentUser.email, uploaded_by: currentUser.email,
photo: p, photo: p,
} },
bodyshop.localmediatoken === "imgproxy" ? "imgproxy" : "" //Choose which destination to use.
); );
}; };
return ( return (
<Modal <Modal
visible={progress.uploadInProgress} visible={progress.uploadInProgress}
animationType='slide' animationType="slide"
transparent={true} transparent={true}
onRequestClose={() => { onRequestClose={() => {
Alert.alert('Cancel?', 'Do you want to abort the upload?', [ Alert.alert("Cancel?", "Do you want to abort the upload?", [
{ {
text: 'Yes', text: "Yes",
onPress: () => { onPress: () => {
setUploads(null); setUploads(null);
setProgress({ setProgress({
@@ -299,7 +299,7 @@ export function UploadProgress({
}); });
}, },
}, },
{ text: 'No' }, { text: "No" },
]); ]);
}} }}
> >
@@ -314,13 +314,13 @@ export function UploadProgress({
<ProgressBar <ProgressBar
progress={progress.files[key].percent} progress={progress.files[key].percent}
style={styles.progress} style={styles.progress}
color={progress.files[key].percent === 1 ? 'green' : 'blue'} color={progress.files[key].percent === 1 ? "green" : "blue"}
/> />
<View <View
style={{ style={{
display: 'flex', display: "flex",
flexDirection: 'row', flexDirection: "row",
alignItems: 'center', alignItems: "center",
}} }}
> >
<Text>{`${formatBytes( <Text>{`${formatBytes(
@@ -362,19 +362,19 @@ export function UploadProgress({
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
modalContainer: { modalContainer: {
display: 'flex', display: "flex",
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: "center",
}, },
modal: { modal: {
//flex: 1, //flex: 1,
display: 'flex', display: "flex",
marginLeft: 20, marginLeft: 20,
marginRight: 20, marginRight: 20,
backgroundColor: 'white', backgroundColor: "white",
borderRadius: 20, borderRadius: 20,
padding: 18, padding: 18,
shadowColor: '#000', shadowColor: "#000",
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 2, height: 2,
@@ -384,14 +384,14 @@ const styles = StyleSheet.create({
elevation: 5, elevation: 5,
}, },
centeredView: { centeredView: {
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
marginTop: 22, marginTop: 22,
}, },
progressItem: { progressItem: {
display: 'flex', display: "flex",
flexDirection: 'row', flexDirection: "row",
alignItems: 'center', alignItems: "center",
marginBottom: 12, marginBottom: 12,
marginLeft: 12, marginLeft: 12,
marginRight: 12, marginRight: 12,

3
eas.json
View File

@@ -7,7 +7,8 @@
"developmentClient": true, "developmentClient": true,
"channel": "test", "channel": "test",
"distribution": "internal", "distribution": "internal",
"ios": { "simulator": true } "ios": { //"simulator": true
}
}, },
"test": { "test": {
"channel": "test" "channel": "test"

62
env.js
View File

@@ -1,50 +1,50 @@
import * as Updates from 'expo-updates'; import * as Updates from "expo-updates";
const ENV = { const ENV = {
test: { test: {
API_URL: 'https://api.test.imex.online', API_URL: "https://api.test.imex.online",
uri: 'https://db.test.bodyshop.app/v1/graphql', uri: "https://db.test.bodyshop.app/v1/graphql",
wsuri: 'wss://db.test.bodyshop.app/v1/graphql', wsuri: "wss://db.test.bodyshop.app/v1/graphql",
REACT_APP_CLOUDINARY_ENDPOINT_API: REACT_APP_CLOUDINARY_ENDPOINT_API:
'https://api.cloudinary.com/v1_1/bodyshop', "https://api.cloudinary.com/v1_1/bodyshop",
REACT_APP_CLOUDINARY_ENDPOINT: 'https://res.cloudinary.com/bodyshop', REACT_APP_CLOUDINARY_ENDPOINT: "https://res.cloudinary.com/bodyshop",
REACT_APP_CLOUDINARY_API_KEY: '473322739956866', REACT_APP_CLOUDINARY_API_KEY: "473322739956866",
REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: 'c_fill,h_250,w_250', REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "c_fill,h_250,w_250",
firebase: { firebase: {
apiKey: 'AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c', apiKey: "AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",
authDomain: 'imex-test.firebaseapp.com', authDomain: "imex-test.firebaseapp.com",
projectId: 'imex-test', projectId: "imex-test",
storageBucket: 'imex-test.appspot.com', storageBucket: "imex-test.appspot.com",
messagingSenderId: '991923618608', messagingSenderId: "991923618608",
appId: '1:991923618608:web:633437569cdad78299bef5', appId: "1:991923618608:web:633437569cdad78299bef5",
measurementId: 'G-TW0XLZEH18', measurementId: "G-TW0XLZEH18",
}, },
}, },
prod: { prod: {
API_URL: 'https://api.imex.online', API_URL: "https://api.imex.online",
uri: 'https://db.imex.online/v1/graphql', uri: "https://db.imex.online/v1/graphql",
wsuri: 'wss://db.imex.online/v1/graphql', wsuri: "wss://db.imex.online/v1/graphql",
REACT_APP_CLOUDINARY_ENDPOINT_API: REACT_APP_CLOUDINARY_ENDPOINT_API:
'https://api.cloudinary.com/v1_1/bodyshop', "https://api.cloudinary.com/v1_1/bodyshop",
REACT_APP_CLOUDINARY_ENDPOINT: 'https://res.cloudinary.com/bodyshop', REACT_APP_CLOUDINARY_ENDPOINT: "https://res.cloudinary.com/bodyshop",
REACT_APP_CLOUDINARY_API_KEY: '473322739956866', REACT_APP_CLOUDINARY_API_KEY: "473322739956866",
REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: 'c_fill,h_250,w_250', REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "c_fill,h_250,w_250",
firebase: { firebase: {
apiKey: 'AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU', apiKey: "AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU",
authDomain: 'imex-prod.firebaseapp.com', authDomain: "imex-prod.firebaseapp.com",
databaseURL: 'https://imex-prod.firebaseio.com', databaseURL: "https://imex-prod.firebaseio.com",
projectId: 'imex-prod', projectId: "imex-prod",
storageBucket: 'imex-prod.appspot.com', storageBucket: "imex-prod.appspot.com",
messagingSenderId: '253497221485', messagingSenderId: "253497221485",
appId: '1:253497221485:web:3c81c483b94db84b227a64', appId: "1:253497221485:web:3c81c483b94db84b227a64",
measurementId: 'G-NTWBKG2L0M', measurementId: "G-NTWBKG2L0M",
}, },
}, },
}; };
function getEnvVars() { function getEnvVars() {
if (Updates.channel !== 'production') return ENV.test; if (Updates.channel !== "production") return ENV.test;
else return ENV.prod; else return ENV.prod;
} }

8
package.json
View File

@@ -2,8 +2,8 @@
"main": "node_modules/expo/AppEntry.js", "main": "node_modules/expo/AppEntry.js",
"scripts": { "scripts": {
"start": "expo start", "start": "expo start",
"android": "expo start --android", "android": "expo run:android",
"ios": "expo start --ios", "ios": "expo run:ios",
"web": "expo start --web", "web": "expo start --web",
"eject": "expo eject", "eject": "expo eject",
"release:test": "expo publish --release-channel test", "release:test": "expo publish --release-channel test",
@@ -95,5 +95,7 @@
"eslint-plugin-react": "^7.37.4", "eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-native": "^5.0.0" "eslint-plugin-react-native": "^5.0.0"
}, },
"private": true "private": true,
"name": "imexmobile",
"version": "1.0.0"
} }

3
upgrades.md Normal file
View File

@@ -0,0 +1,3 @@
upgrade to expo router
investigate image pickers
change splash to explo-splash-screen

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

@@ -1,11 +1,10 @@
import * as Sentry from "@sentry/react-native";
import axios from "axios"; import axios from "axios";
import * as MediaLibrary from "expo-media-library";
import env from "../env"; import env from "../env";
import { client } from "../graphql/client"; import { client } from "../graphql/client";
import { INSERT_NEW_DOCUMENT } from "../graphql/documents.queries"; import { INSERT_NEW_DOCUMENT } from "../graphql/documents.queries";
import { axiosAuthInterceptorId } from "./CleanAxios"; import { axiosAuthInterceptorId } from "./CleanAxios";
import * as MediaLibrary from "expo-media-library";
import { gql } from "@apollo/client";
import * as Sentry from '@sentry/react-native';
//Context: currentUserEmail, bodyshop, jobid, invoiceid //Context: currentUserEmail, bodyshop, jobid, invoiceid
@@ -13,7 +12,55 @@ import * as Sentry from '@sentry/react-native';
var cleanAxios = axios.create(); var cleanAxios = axios.create();
cleanAxios.interceptors.request.eject(axiosAuthInterceptorId); cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
export const handleUpload = async (ev, context) => { export const handleUpload = async (ev, context, destination) => {
const { mediaId, onError, onSuccess, onProgress } = ev;
const { bodyshop, jobId } = context;
const imageData = await MediaLibrary.getAssetInfoAsync(mediaId);
const newFile = await (
await fetch(imageData.localUri || imageData.uri)
).blob();
let extension = imageData.localUri.split(".").pop();
let key =
destination === "imgproxy"
? `${bodyshop.id}/${jobId}/${replaceAccents(
imageData.filename || imageData.uri.split("/").pop()
).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}.${extension}`
: `${bodyshop.id}/${jobId}/${(
imageData.filename || imageData.uri.split("/").pop()
).replace(/\.[^/.]+$/, "")}-${new Date().getTime()}`;
const res =
destination === "imgproxy"
? await uploadToImgproxy(
key,
mediaId,
imageData,
extension,
newFile.type, //Filetype
newFile, //File
onError,
onSuccess,
onProgress,
context
)
: await uploadToCloudinary(
key,
mediaId,
imageData,
extension,
newFile.type, //Filetype
newFile, //File
onError,
onSuccess,
onProgress,
context
);
return res;
};
export const handleUploadImgproxy = async (ev, context) => {
const { mediaId, onError, onSuccess, onProgress } = ev; const { mediaId, onError, onSuccess, onProgress } = ev;
const { bodyshop, jobId } = context; const { bodyshop, jobId } = context;
@@ -26,7 +73,7 @@ export const handleUpload = async (ev, context) => {
imageData.filename || imageData.uri.split("/").pop() imageData.filename || imageData.uri.split("/").pop()
).replace(/\.[^/.]+$/, "")}-${new Date().getTime()}`; ).replace(/\.[^/.]+$/, "")}-${new Date().getTime()}`;
const res = await uploadToCloudinary( const res = await uploadToImgproxy(
key, key,
mediaId, mediaId,
imageData, imageData,
@@ -41,6 +88,110 @@ export const handleUpload = async (ev, context) => {
return res; return res;
}; };
export const uploadToImgproxy = async (
key,
mediaId,
imageData,
extension,
fileType,
file,
onError,
onSuccess,
onProgress,
context
) => {
const { bodyshop, jobId, uploaded_by } = context;
//Get the signed url allowing us to PUT to S3.
const signedURLResponse = await axios.post(
`${env.API_URL}/media/imgproxy/sign`,
{
filenames: [key],
bodyshopid: bodyshop.id,
jobid: jobId,
}
);
if (signedURLResponse.status !== 200) {
console.log("Error Getting Signed URL", signedURLResponse.statusText);
if (onError) onError(signedURLResponse.statusText);
return { success: false, error: signedURLResponse.statusText };
}
const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } =
signedURLResponse.data.signedUrls[0];
var options = {
headers: {
"Content-Type": fileType,
"Content-Length": file.size,
},
transformRequest: [(data) => data], //Dave had this magical solution because Axios makes no sense.
onUploadProgress: (e) => {
if (onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
},
};
console.log("Uploading to S3", key, preSignedUploadUrlToS3, file, options);
const formData = new FormData();
formData.append("file", {
uri: imageData.localUri,
type: fileType,
name: file.data.name,
});
try {
const s3UploadResponse = await cleanAxios.put(
preSignedUploadUrlToS3,
file,
options
);
debugger;
console.log(s3UploadResponse);
} catch (error) {
console.log("Error uploading to S3", error.message, error.stack);
Sentry.Native.captureException(error);
}
const documentInsert = await client.mutate({
mutation: INSERT_NEW_DOCUMENT,
variables: {
docInput: [
{
...(jobId ? { jobid: jobId } : {}),
uploaded_by: uploaded_by,
key: s3Key,
type: fileType,
extension: extension,
bodyshopid: bodyshop.id,
size: file.size,
...(imageData.creationTime
? { takenat: new Date(imageData.creationTime) }
: {}),
},
],
},
});
if (!documentInsert.errors) {
if (onSuccess)
onSuccess({
uid: documentInsert.data.insert_documents.returning[0].id,
name: documentInsert.data.insert_documents.returning[0].name,
status: "done",
key: documentInsert.data.insert_documents.returning[0].key,
});
} else {
if (onError) onError(JSON.stringify(documentInsert.errors));
return {
success: false,
error: JSON.stringify(documentInsert.errors),
mediaId,
};
}
return { success: true, mediaId };
};
export const uploadToCloudinary = async ( export const uploadToCloudinary = async (
key, key,
mediaId, mediaId,
@@ -198,3 +349,32 @@ export function formatBytes(a, b = 2) {
["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d] ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d]
); );
} }
function replaceAccents(str) {
// Verifies if the String has accents and replace them
if (str.search(/[\xC0-\xFF]/g) > -1) {
str = str
.replace(/[\xC0-\xC5]/g, "A")
.replace(/[\xC6]/g, "AE")
.replace(/[\xC7]/g, "C")
.replace(/[\xC8-\xCB]/g, "E")
.replace(/[\xCC-\xCF]/g, "I")
.replace(/[\xD0]/g, "D")
.replace(/[\xD1]/g, "N")
.replace(/[\xD2-\xD6\xD8]/g, "O")
.replace(/[\xD9-\xDC]/g, "U")
.replace(/[\xDD]/g, "Y")
.replace(/[\xDE]/g, "P")
.replace(/[\xE0-\xE5]/g, "a")
.replace(/[\xE6]/g, "ae")
.replace(/[\xE7]/g, "c")
.replace(/[\xE8-\xEB]/g, "e")
.replace(/[\xEC-\xEF]/g, "i")
.replace(/[\xF1]/g, "n")
.replace(/[\xF2-\xF6\xF8]/g, "o")
.replace(/[\xF9-\xFC]/g, "u")
.replace(/[\xFE]/g, "p")
.replace(/[\xFD\xFF]/g, "y");
}
return str;
}