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

Improved uploads & handling for temp jobs. IO-399 IO-398 IO-69

Browse Source
This commit is contained in:
Patrick Fic
2021-02-11 15:38:59 -08:00
parent 519e7a347a
commit 3231097b29
13 changed files with 441 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
App.js
View File

@@ -1,10 +1,9 @@
import { ApolloProvider } from "@apollo/client"; import { ApolloProvider } from "@apollo/client";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import AppLoading from "expo-app-loading"; import AppLoading from "expo-app-loading";
import * as FileSystem from "expo-file-system"; //import * as FileSystem from "expo-file-system";
import * as Font from "expo-font"; import * as Font from "expo-font";
import React from "react"; import React from "react";
import { SafeAreaView } from "react-native";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react"; import { PersistGate } from "redux-persist/integration/react";
import * as Sentry from "sentry-expo"; import * as Sentry from "sentry-expo";
@@ -39,11 +38,11 @@ export default class App extends React.Component {
...Ionicons.font, ...Ionicons.font,
}); });
this.setState({ isReady: true }); this.setState({ isReady: true });
await FileSystem.makeDirectoryAsync( // await FileSystem.makeDirectoryAsync(
FileSystem.documentDirectory + "photos" // FileSystem.documentDirectory + "photos"
).catch((e) => { // ).catch((e) => {
console.log(e, "Directory already exists"); // console.log(e, "Directory already exists");
}); // });
} }
render() { render() {
@@ -55,9 +54,7 @@ export default class App extends React.Component {
<Provider store={store}> <Provider store={store}>
<PersistGate persistor={persistor}> <PersistGate persistor={persistor}>
<ApolloProvider client={client}> <ApolloProvider client={client}>
<SafeAreaView style={{ flex: 1 }}> <ScreenMainComponent />
<ScreenMainComponent />
</SafeAreaView>
</ApolloProvider> </ApolloProvider>
</PersistGate> </PersistGate>
</Provider> </Provider>

122
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 BabelEdit project file
@@ -1089,6 +1089,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>nomedia</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> <concept_node>
<name>selectjob</name> <name>selectjob</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -1110,6 +1131,74 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>selectjobassetselector</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>temporarystorage</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>
<name>titles</name>
<children>
<concept_node>
<name>mediabrowsertab</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> </children>
</folder_node> </folder_node>
</children> </children>
@@ -1223,6 +1312,37 @@
</folder_node> </folder_node>
</children> </children>
</folder_node> </folder_node>
<folder_node>
<name>more</name>
<children>
<folder_node>
<name>titles</name>
<children>
<concept_node>
<name>moretab</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>
</children>
</folder_node>
<folder_node> <folder_node>
<name>objects</name> <name>objects</name>
<children> <children>

18
components/camera-select-job/camera-select-job.component.jsx
View File

@@ -1,7 +1,8 @@
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import { Picker } from "native-base"; import { Picker } from "native-base";
import React from "react"; import React from "react";
import { Text, View } from "react-native"; import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries"; import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
@@ -10,7 +11,6 @@ import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import ErrorDisplay from "../error-display/error-display.component"; import ErrorDisplay from "../error-display/error-display.component";
import LoadingDisplay from "../loading-display/loading-display.component"; import LoadingDisplay from "../loading-display/loading-display.component";
import { useTranslation } from "react-i18next";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
@@ -42,11 +42,9 @@ export function CameraSelectJob({
return ( return (
<View <View
style={{ style={{
fontSize: 20, marginHorizontal: 10,
fontWeight: "bold",
}} }}
> >
{!cameraJobId && <Text>{t("mediabrowser.labels.selectjob")}</Text>}
<Picker <Picker
selectedValue={cameraJobId} selectedValue={cameraJobId}
onValueChange={(value, idx) => { onValueChange={(value, idx) => {
@@ -54,6 +52,16 @@ export function CameraSelectJob({
setCameraJob(data.jobs[idx]); setCameraJob(data.jobs[idx]);
}} }}
> >
<Picker.Item
label={t("mediabrowser.labels.selectjob")}
value={null}
key="null"
/>
<Picker.Item
label={t("mediabrowser.labels.temporarystorage")}
value="temp"
key="temp"
/>
{data.jobs.map((j) => { {data.jobs.map((j) => {
return ( return (
<Picker.Item <Picker.Item

62
components/job-list-item/job-list-item.component.jsx
View File

@@ -64,7 +64,7 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
onPress={() => { onPress={() => {
setCameraJobId(item.id); setCameraJobId(item.id);
setCameraJob(item); setCameraJob(item);
navigation.navigate("CameraTab"); navigation.navigate("MediaBrowserTab");
}} }}
> >
<Animated.View <Animated.View
@@ -80,36 +80,36 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
</TouchableOpacity> </TouchableOpacity>
); );
}; };
const RenderLeftAction = (progress, dragX) => { // const RenderLeftAction = (progress, dragX) => {
const scale = dragX.interpolate({ // const scale = dragX.interpolate({
inputRange: [0, 100], // inputRange: [0, 100],
outputRange: [0, 1], // outputRange: [0, 1],
extrapolate: "clamp", // extrapolate: "clamp",
}); // });
return ( // return (
<TouchableOpacity // <TouchableOpacity
style={[styles.swipe_view, styles.swipe_view_blue]} // style={[styles.swipe_view, styles.swipe_view_blue]}
onPress={() => { // onPress={() => {
setCameraJobId(item.id); // setCameraJobId(item.id);
setCameraJob(item); // setCameraJob(item);
navigation.push("MediaBrowser"); // navigation.push("MediaBrowser");
//pickImage(item.id); // //pickImage(item.id);
}} // }}
> // >
<Animated.Text // <Animated.Text
style={{ // style={{
// color: "white", // // color: "white",
// paddingHorizontal: 10, // // paddingHorizontal: 10,
// fontWeight: "600", // // fontWeight: "600",
transform: [{ scale }], // transform: [{ scale }],
}} // }}
> // >
Add // Add
</Animated.Text> // </Animated.Text>
</TouchableOpacity> // </TouchableOpacity>
); // );
}; // };
const onPress = () => { const onPress = () => {
navigation.push("JobDetail", { navigation.push("JobDetail", {
@@ -120,7 +120,7 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
return ( return (
<Swipeable <Swipeable
renderLeftActions={RenderLeftAction} // renderLeftActions={RenderLeftAction}
renderRightActions={RenderRightAction} renderRightActions={RenderRightAction}
> >
<TouchableOpacity onPress={onPress}> <TouchableOpacity onPress={onPress}>

114
components/screen-main/screen-main.component.jsx
View File

@@ -4,7 +4,6 @@ import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack"; import { createStackNavigator } from "@react-navigation/stack";
import i18n from "i18next"; import i18n from "i18next";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { import {
@@ -16,23 +15,24 @@ import {
selectBodyshop, selectBodyshop,
selectCurrentUser, selectCurrentUser,
} from "../../redux/user/user.selectors"; } from "../../redux/user/user.selectors";
import ScreenCamera from "../screen-camera/screen-camera"; //import ScreenCamera from "../screen-camera/screen-camera";
import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component"; import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
import ScreenJobList from "../screen-job-list/screen-job-list.component"; import ScreenJobList from "../screen-job-list/screen-job-list.component";
import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component"; import ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.component";
import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component"; //import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component"; //import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
//import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
import ScreenSettingsComponent from "../screen-settings/screen-settings.component"; import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
import ScreenSignIn from "../screen-sign-in/screen-sign-in.component"; import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
import ScreenSplash from "../screen-splash/screen-splash.component"; import ScreenSplash from "../screen-splash/screen-splash.component";
import ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.component";
const JobStack = createStackNavigator(); const JobStack = createStackNavigator();
const CameraStack = createStackNavigator(); //const CameraStack = createStackNavigator();
const MessagingStack = createStackNavigator(); //const MessagingStack = createStackNavigator();
const MediaCacheStack = createStackNavigator(); //const MediaCacheStack = createStackNavigator();
const MoreStack = createStackNavigator(); const MoreStack = createStackNavigator();
const BottomTabs = createBottomTabNavigator(); const BottomTabs = createBottomTabNavigator();
const MediaBrowserStack = createStackNavigator();
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
@@ -51,7 +51,7 @@ const JobStackNavigator = () => (
<JobStack.Screen <JobStack.Screen
name="JobList" name="JobList"
options={() => ({ options={() => ({
title: `${i18n.t("joblist.labels.activejobs")}`, title: i18n.t("joblist.labels.activejobs"),
})} })}
component={ScreenJobList} component={ScreenJobList}
/> />
@@ -64,7 +64,7 @@ const JobStackNavigator = () => (
i18n.t("joblist.labels.detail"), i18n.t("joblist.labels.detail"),
})} })}
/> />
<JobStack.Screen {/* <JobStack.Screen
name="MediaBrowser" name="MediaBrowser"
component={ScreenMediaBrowser} component={ScreenMediaBrowser}
// options={({ route }) => ({ // options={({ route }) => ({
@@ -72,42 +72,53 @@ const JobStackNavigator = () => (
// (route.params && route.params.title) || // (route.params && route.params.title) ||
// i18n.t("joblist.labels.detail"), // i18n.t("joblist.labels.detail"),
// })} // })}
/> /> */}
</JobStack.Navigator> </JobStack.Navigator>
); );
const CameraStackNavigator = () => ( // const CameraStackNavigator = () => (
<CameraStack.Navigator initialRouteName="TabCameraScreen"> // <CameraStack.Navigator initialRouteName="TabCameraScreen">
<CameraStack.Screen // <CameraStack.Screen
name="TabCameraScreen" // name="TabCameraScreen"
options={{ headerShown: false }} // options={{ headerShown: false }}
component={ScreenCamera} // component={ScreenCamera}
// />
// </CameraStack.Navigator>
// );
// const MediaCacheStackNavigator = () => (
// <MediaCacheStack.Navigator initialRouteName="TabMediaCache">
// <MediaCacheStack.Screen
// name="MediaCache"
// options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
// component={ScreenMediaCache}
// />
// </MediaCacheStack.Navigator>
// );
const MediaBrowserStackNavigator = () => (
<MediaBrowserStack.Navigator initialRouteName="MediaBrowser">
<MediaBrowserStack.Screen
name="MediaBrowser"
options={{ title: i18n.t("mediabrowser.titles.mediabrowsertab") }}
component={ScreenMediaBrowser}
/> />
</CameraStack.Navigator> </MediaBrowserStack.Navigator>
); );
const MediaCacheStackNavigator = () => ( // const MessagingStackNavigator = () => (
<MediaCacheStack.Navigator initialRouteName="TabMediaCache"> // <MessagingStack.Navigator>
<MediaCacheStack.Screen // <MessagingStack.Screen
name="MediaCache" // name="MessagingList"
options={{ title: i18n.t("mediacache.titles.mediacachetab") }} // component={ScreenMessagingList}
component={ScreenMediaCache} // />
/> // <MessagingStack.Screen
</MediaCacheStack.Navigator> // name="MessagingConversation"
); // component={ScreenMessagingConversation}
// />
// </MessagingStack.Navigator>
// );
const MessagingStackNavigator = () => (
<MessagingStack.Navigator>
<MessagingStack.Screen
name="MessagingList"
component={ScreenMessagingList}
/>
<MessagingStack.Screen
name="MessagingConversation"
component={ScreenMessagingConversation}
/>
</MessagingStack.Navigator>
);
const MoreStackNavigator = () => ( const MoreStackNavigator = () => (
<MoreStack.Navigator> <MoreStack.Navigator>
<MoreStack.Screen <MoreStack.Screen
@@ -132,7 +143,10 @@ const BottomTabsNavigator = () => (
iconName = "ios-chatboxes"; iconName = "ios-chatboxes";
} else if (route.name === "CameraTab") { } else if (route.name === "CameraTab") {
iconName = "ios-camera"; iconName = "ios-camera";
} else if (route.name === "MediaCacheTab") { } else if (
route.name === "MediaCacheTab" ||
route.name === "MediaBrowserTab"
) {
iconName = "ios-photos"; iconName = "ios-photos";
} else { } else {
//iconName = "customerservice"; //iconName = "customerservice";
@@ -152,20 +166,24 @@ const BottomTabsNavigator = () => (
component={JobStackNavigator} component={JobStackNavigator}
/> />
<BottomTabs.Screen <BottomTabs.Screen
name="CameraTab" name="MediaBrowserTab"
options={{ title: i18n.t("camera.titles.cameratab") }} options={{ title: i18n.t("mediabrowser.titles.mediabrowsertab") }}
component={CameraStackNavigator} component={MediaBrowserStackNavigator}
/> />
<BottomTabs.Screen {/* <BottomTabs.Screen
name="MediaCacheTab" name="MediaCacheTab"
options={{ title: i18n.t("mediacache.titles.mediacachetab") }} options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
component={MediaCacheStackNavigator} component={MediaCacheStackNavigator}
/> /> */}
<BottomTabs.Screen {/* <BottomTabs.Screen
name="CameraTab"
options={{ title: i18n.t("camera.titles.cameratab") }}
component={CameraStackNavigator}
/> <BottomTabs.Screen
name="MessagingTab" name="MessagingTab"
options={{ title: i18n.t("messaging.titles.messagingtab") }} options={{ title: i18n.t("messaging.titles.messagingtab") }}
component={MessagingStackNavigator} component={MessagingStackNavigator}
/> /> */}
<BottomTabs.Screen <BottomTabs.Screen
name="MoreTab" name="MoreTab"
options={{ title: i18n.t("more.titles.moretab") }} options={{ title: i18n.t("more.titles.moretab") }}

40
components/screen-media-browser/screen-media-browser-top.component.jsx Normal file
View File

@@ -0,0 +1,40 @@
import React from "react";
import { Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
cameraJobId: selectCurrentCameraJobId,
});
const mapDispatchToProps = (dispatch) => ({
setCameraJobId: (id) => dispatch(setCameraJobId(id)),
setCameraJob: (job) => dispatch(setCameraJob(job)),
});
export function ScreenMediaBrowserTop({
bodyshop,
cameraJobId,
onFinish,
...props
}) {
console.log("Props", props);
return (
<View
style={{
marginHorizontal: 10,
}}
>
<Text>Test</Text>
</View>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ScreenMediaBrowserTop);

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

@@ -1,11 +1,12 @@
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { AssetsSelector } from "expo-images-picker"; import { AssetsSelector } from "expo-images-picker";
import * as MediaLibrary from "expo-media-library"; import * as MediaLibrary from "expo-media-library";
import _ from "lodash"; import _ from "lodash";
import { H3 } from "native-base";
import React, { useCallback, useState } from "react"; import React, { useCallback, 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 { SafeAreaView } from "react-native-safe-area-context";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { import {
@@ -36,7 +37,6 @@ export function ImageBrowserScreen({
deleteAfterUpload, deleteAfterUpload,
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const navigation = useNavigation();
const [uploads, setUploads] = useState({}); const [uploads, setUploads] = useState({});
function handleOnProgress(uri, percent) { function handleOnProgress(uri, percent) {
setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } })); setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } }));
@@ -72,7 +72,7 @@ export function ImageBrowserScreen({
}, },
{ {
bodyshop: bodyshop, bodyshop: bodyshop,
jobId: selectedCameraJobId, jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
uploaded_by: currentUser.email, uploaded_by: currentUser.email,
photo: p, photo: p,
} }
@@ -85,63 +85,93 @@ export function ImageBrowserScreen({
}; };
return ( return (
<View style={[styles.flex, styles.container]}> <SafeAreaView style={[styles.flex, styles.container]}>
<CameraSelectJob /> <View style={[styles.flex, styles.container]}>
<UploadDeleteSwitch /> <CameraSelectJob />
{selectedCameraJobId && ( <UploadDeleteSwitch />
<AssetsSelector {!selectedCameraJobId && (
style={{ flex: 1 }} <View
key={tick} style={{
options={{ flex: 1,
// manipulate: { justifyContent: "center",
// //width: 512, alignItems: "center",
// compress: 0.7, }}
// base64: false, >
// saveTo: "jpeg", <H3>{t("mediabrowser.labels.selectjobassetselector")}</H3>
// }, </View>
assetsType: ["photo", "video"], )}
//maxSelections: 5, {selectedCameraJobId && (
margin: 3, <AssetsSelector
portraitCols: 4, style={{ flex: 1 }}
landscapeCols: 5, key={tick}
widgetWidth: 100, options={{
widgetBgColor: "white", // manipulate: {
selectedBgColor: "#adadad", // //width: 512,
spinnerColor: "#c8c8c8", // compress: 0.7,
videoIcon: { // base64: false,
Component: Ionicons, // saveTo: "jpeg",
iconName: "ios-videocam", // },
color: "white", assetsType: ["photo", "video"],
size: 20, //maxSelections: 5,
}, margin: 3,
selectedIcon: { portraitCols: 4,
Component: Ionicons, landscapeCols: 5,
iconName: "ios-checkmark-circle-outline", widgetWidth: 100,
color: "white", widgetBgColor: "white",
bg: "rgba(35,35,35, 0.75)", selectedBgColor: "#adadad",
size: 32, spinnerColor: "#c8c8c8",
}, videoIcon: {
defaultTopNavigator: { Component: Ionicons,
continueText: t("mediabrowser.actions.upload"), iconName: "ios-videocam",
goBackText: t("mediabrowser.actions.refresh"), color: "white",
buttonStyle: styles.buttonStyle, size: 20,
textStyle: styles.textStyle, },
selectedIcon: {
Component: Ionicons,
iconName: "ios-checkmark-circle-outline",
color: "white",
bg: "rgba(35,35,35, 0.75)",
size: 32,
},
defaultTopNavigator: {
continueText: t("mediabrowser.actions.upload"),
goBackText: t("mediabrowser.actions.refresh"),
buttonStyle: styles.buttonStyle,
textStyle: styles.textStyle,
backFunction: () => {
forceRerender();
},
doneFunction: onDone,
},
backFunction: () => { noAssets: {
forceRerender(); Component: function NoAsset() {
return (
<View
style={{
display: "flex",
flex: 1,
height: 200,
marginHorizontal: 20,
alignItems: "center",
justifyContent: "center",
}}
>
<Ionicons name="ios-photos" size={72} />
<Text style={{ textAlign: "center", marginTop: 10 }}>
{t("mediabrowser.labels.nomedia")}
</Text>
</View>
);
},
}, },
doneFunction: onDone, }}
}, />
noAssets: { )}
Component: function NoAsset() { <UploadProgress uploads={uploads} />
return <Text>{`Looks like there's nothing here...`}</Text>; </View>
}, </SafeAreaView>
},
}}
/>
)}
<UploadProgress uploads={uploads} />
</View>
); );
} }

3
components/upload-delete-switch/upload-delete-switch.component.jsx
View File

@@ -27,7 +27,7 @@ export function UploadDeleteSwitch({
</Text> </Text>
<Switch <Switch
trackColor={{ false: "#767577", true: "#81b0ff" }} trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={deleteAfterUpload ? "#f5dd4b" : "#f4f3f4"} thumbColor={deleteAfterUpload ? "tomato" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e" ios_backgroundColor="#3e3e3e"
onValueChange={() => toggleDeleteAfterUpload()} onValueChange={() => toggleDeleteAfterUpload()}
value={deleteAfterUpload} value={deleteAfterUpload}
@@ -40,6 +40,7 @@ const styles = StyleSheet.create({
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
margin: 10,
}, },
text: { text: {

24
env.js
View File

@@ -4,10 +4,10 @@ export const prodUrl = "https://someapp.herokuapp.com";
const ENV = { const ENV = {
dev: { dev: {
REACT_APP_CLOUDINARY_ENDPOINT: API_URL: "https://api.imex.online",
"https://api.cloudinary.com/v1_1/bodyshop/image", REACT_APP_CLOUDINARY_ENDPOINT_API:
REACT_APP_CLOUDINARY_IMAGE_ENDPOINT: "https://api.cloudinary.com/v1_1/bodyshop",
"https://res.cloudinary.com/bodyshop/image/upload", 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: "h_200,w_200,c_thumb", REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "h_200,w_200,c_thumb",
firebase: { firebase: {
@@ -22,10 +22,10 @@ const ENV = {
}, },
}, },
staging: { staging: {
REACT_APP_CLOUDINARY_ENDPOINT: API_URL: "https://api.imex.online",
"https://api.cloudinary.com/v1_1/bodyshop/image", REACT_APP_CLOUDINARY_ENDPOINT_API:
REACT_APP_CLOUDINARY_IMAGE_ENDPOINT: "https://api.cloudinary.com/v1_1/bodyshop",
"https://res.cloudinary.com/bodyshop/image/upload", 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: "h_200,w_200,c_thumb", REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "h_200,w_200,c_thumb",
firebase: { firebase: {
@@ -40,10 +40,10 @@ const ENV = {
}, },
}, },
prod: { prod: {
REACT_APP_CLOUDINARY_ENDPOINT: API_URL: "https://api.imex.online",
"https://api.cloudinary.com/v1_1/bodyshop/image", REACT_APP_CLOUDINARY_ENDPOINT_API:
REACT_APP_CLOUDINARY_IMAGE_ENDPOINT: "https://api.cloudinary.com/v1_1/bodyshop",
"https://res.cloudinary.com/bodyshop/image/upload", 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: "h_200,w_200,c_thumb", REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "h_200,w_200,c_thumb",
firebase: { firebase: {

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

@@ -79,7 +79,13 @@
}, },
"labels": { "labels": {
"deleteafterupload": "Delete After Upload", "deleteafterupload": "Delete After Upload",
"selectjob": "Please select a job." "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. ",
"temporarystorage": "* Temporary Storage *"
},
"titles": {
"mediabrowsertab": "Media Browser"
} }
}, },
"mediacache": { "mediacache": {
@@ -96,6 +102,11 @@
"messagingtab": "Messaging" "messagingtab": "Messaging"
} }
}, },
"more": {
"titles": {
"moretab": "More"
}
},
"objects": { "objects": {
"jobs": { "jobs": {
"fields": { "fields": {

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

@@ -79,7 +79,13 @@
}, },
"labels": { "labels": {
"deleteafterupload": "", "deleteafterupload": "",
"selectjob": "" "nomedia": "",
"selectjob": "",
"selectjobassetselector": "",
"temporarystorage": ""
},
"titles": {
"mediabrowsertab": ""
} }
}, },
"mediacache": { "mediacache": {
@@ -96,6 +102,11 @@
"messagingtab": "" "messagingtab": ""
} }
}, },
"more": {
"titles": {
"moretab": ""
}
},
"objects": { "objects": {
"jobs": { "jobs": {
"fields": { "fields": {

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

@@ -79,7 +79,13 @@
}, },
"labels": { "labels": {
"deleteafterupload": "", "deleteafterupload": "",
"selectjob": "" "nomedia": "",
"selectjob": "",
"selectjobassetselector": "",
"temporarystorage": ""
},
"titles": {
"mediabrowsertab": ""
} }
}, },
"mediacache": { "mediacache": {
@@ -96,6 +102,11 @@
"messagingtab": "" "messagingtab": ""
} }
}, },
"more": {
"titles": {
"moretab": ""
}
},
"objects": { "objects": {
"jobs": { "jobs": {
"fields": { "fields": {

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

@@ -14,6 +14,7 @@ export const handleUpload = async (ev, context) => {
const { bodyshop, jobId } = context; const { bodyshop, jobId } = context;
const newFile = await (await fetch(ev.uri)).blob(); const newFile = await (await fetch(ev.uri)).blob();
let extension = ev.uri.split(".").pop();
let key = `${bodyshop.id}/${jobId}/${newFile.data.name.replace( let key = `${bodyshop.id}/${jobId}/${newFile.data.name.replace(
/\.[^/.]+$/, /\.[^/.]+$/,
@@ -21,6 +22,7 @@ export const handleUpload = async (ev, context) => {
)}`; )}`;
return uploadToCloudinary( return uploadToCloudinary(
key, key,
extension,
newFile.type, newFile.type,
newFile, newFile,
onError, onError,
@@ -32,6 +34,7 @@ export const handleUpload = async (ev, context) => {
export const uploadToCloudinary = async ( export const uploadToCloudinary = async (
key, key,
extension,
fileType, fileType,
file, file,
onError, onError,
@@ -56,15 +59,19 @@ export const uploadToCloudinary = async (
tagsArray ? tagsArray.map((tag) => `${tag},`) : "" tagsArray ? tagsArray.map((tag) => `${tag},`) : ""
}`; }`;
// let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS; // let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;
console.log("fileType", fileType);
const upload_preset = fileType.startsWith("video")
? "incoming_upload_video"
: "incoming_upload";
//Get the signed url. //Get the signed url.
let signedURLResponse; let signedURLResponse;
try { try {
signedURLResponse = await axios.post("https://api.imex.online/media/sign", { signedURLResponse = await axios.post(`${env.API_URL}/media/sign`, {
public_id: public_id, public_id: public_id,
tags: tags, tags: tags,
timestamp: timestamp, timestamp: timestamp,
upload_preset: "incoming_upload", upload_preset: upload_preset,
}); });
} catch (error) { } catch (error) {
console.log("ERROR GETTING SIGNED URL", error); console.log("ERROR GETTING SIGNED URL", error);
@@ -94,7 +101,7 @@ export const uploadToCloudinary = async (
name: file.data.name, name: file.data.name,
}); });
formData.append("upload_preset", "incoming_upload"); formData.append("upload_preset", upload_preset);
formData.append("api_key", env.REACT_APP_CLOUDINARY_API_KEY); formData.append("api_key", env.REACT_APP_CLOUDINARY_API_KEY);
formData.append("public_id", public_id); formData.append("public_id", public_id);
@@ -106,7 +113,9 @@ export const uploadToCloudinary = async (
let cloudinaryUploadResponse; let cloudinaryUploadResponse;
try { try {
cloudinaryUploadResponse = await cleanAxios.post( cloudinaryUploadResponse = await cleanAxios.post(
`${env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`, `${env.REACT_APP_CLOUDINARY_ENDPOINT_API}/${DetermineFileType(
fileType
)}/upload`,
formData, formData,
{ {
...options, ...options,
@@ -139,6 +148,7 @@ export const uploadToCloudinary = async (
key: key, key: key,
billid: billId, billid: billId,
type: fileType, type: fileType,
extension: extension,
}, },
], ],
}, },
@@ -168,3 +178,14 @@ export const uploadToCloudinary = async (
} }
return { success: true }; return { success: true };
}; };
export function DetermineFileType(filetype) {
console.log("Checking Type", filetype, filetype.startsWith("video"));
if (!filetype) return "auto";
else if (filetype.startsWith("image")) return "image";
else if (filetype.startsWith("video")) return "video";
else if (filetype.startsWith("application/pdf")) return "image";
else if (filetype.startsWith("application")) return "raw";
return "auto";
}