Added app reducer, fixed package issues, begun camera screen updates

components/job-list/job-list.component.jsx

@@ -18,7 +18,7 @@ const mapStateToProps = createStructuredSelector({
 export function JobListComponent({ bodyshop }) {
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
-      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open", "Open*"],
+      statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
     },
     skip: !bodyshop,
   });

components/job-notes/job-notes.component.jsx

@@ -18,7 +18,7 @@ export default function JobNotes({ job, loading, refetch }) {
       <Text>Job is not defined.</Text>
     </Card>;
   }
-  console.log("job.notes :>> ", job.notes);
+
   const onRefresh = async () => {
     return refetch();
   };

components/screen-camera/screen-camera.component.jsx

@@ -7,16 +7,36 @@ import {
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
+import * as FileSystem from "expo-file-system";
+import * as Permissions from "expo-permissions";
+import * as MediaLibrary from "expo-media-library";
 
 export default function ScreenCamera() {
   const navigation = useNavigation();
   const [hasPermission, setHasPermission] = useState(null);
+  const [rollPermision, setRollPermission] = useState(null);
   const [type, setType] = useState(Camera.Constants.Type.back);
   const cameraRef = useRef(null);
+
   useEffect(() => {
     (async () => {
+      //Ensure local photo direcotry exists.
+      console.log(
+        "ScreenCamera -> FileSystem.documentDirectory ",
+        FileSystem.documentDirectory
+      );
+
+      await FileSystem.makeDirectoryAsync(
+        FileSystem.documentDirectory + "photos"
+      ).catch((e) => {
+        console.log(e, "Directoryc already exists");
+      });
+
       const { status } = await Camera.requestPermissionsAsync();
       setHasPermission(status === "granted");
+      // camera roll
+      const { cam_roll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+      setRollPermission(cam_roll === "granted");
     })();
   }, []);
 
@@ -31,8 +51,29 @@ export default function ScreenCamera() {
   const handleTakePicture = async () => {
     console.log("Taking the picture!");
     if (cameraRef.current) {
-      let photo = await cameraRef.current.takePictureAsync();
-      console.log("The Photo", photo);
+      const options = {
+        //quality: 0.5,
+        //base64: true,
+        //skipProcessing: true,
+      };
+
+      let photo = await cameraRef.current.takePictureAsync(options);
+      console.log("ScreenCamera -> photo", photo);
+      const filename = new Date().getTime() + ".jpg";
+
+      await FileSystem.copyAsync({
+        from: photo.uri,
+        to: FileSystem.documentDirectory + "photos/" + filename,
+      });
+
+      console.log(
+        "List of Files",
+        await FileSystem.readDirectoryAsync(FileSystem.documentDirectory),
+        await FileSystem.readDirectoryAsync(
+          FileSystem.documentDirectory + "photos"
+        )
+      );
+      //const asset = await MediaLibrary.createAssetAsync(photo.uri);
     }
   };
 

components/screen-main/screen-main.component.jsx

@@ -75,11 +75,25 @@ const JobStackNavigator = ({ navigation }) => (
           i18n.t("joblist.labels.detail"),
       })}
     />
-    <JobStack.Screen name="JobCamera" component={ScreenCamera} />
+    <JobStack.Screen
+      name="JobCamera"
+      options={{ headerShown: false }}
+      component={ScreenCamera}
+    />
     <JobStack.Screen name="MediaCache" component={ScreenMediaCache} />
   </JobStack.Navigator>
 );
 
+const CameraStackNavigator = ({ navigation }) => (
+  <JobStack.Navigator initialRouteName="TabCamera">
+    <JobStack.Screen
+      name="TabCamera"
+      options={{ headerShown: false }}
+      component={ScreenCamera}
+    />
+    <JobStack.Screen name="MediaCache" component={ScreenMediaCache} />
+  </JobStack.Navigator>
+);
 const MessagingStackNavigator = ({ navigation }) => (
   <MessagingStack.Navigator>
     <MessagingStack.Screen
@@ -102,6 +116,8 @@ const BottomTabsNavigator = () => (
           iconName = "ios-list";
         } else if (route.name === "MessagingTab") {
           iconName = "ios-chatboxes";
+        } else if (route.name === "CameraTab") {
+          iconName = "ios-camera";
         }
         return <Ionicons name={iconName} size={size} color={color} />;
       },
@@ -116,6 +132,11 @@ const BottomTabsNavigator = () => (
       options={{ title: i18n.t("joblist.titles.jobtab") }}
       component={JobStackNavigator}
     />
+    <BottomTabs.Screen
+      name="CameraTab"
+      options={{ title: i18n.t("camera.titles.cameratab") }}
+      component={CameraStackNavigator}
+    />
     <BottomTabs.Screen
       name="MessagingTab"
       options={{ title: i18n.t("messaging.titles.messagingtab") }}

components/screen-media-cache/screen-media-cache.component.jsx

@@ -1,16 +1,247 @@
-import React from "react";
-import { View, Text } from "react-native";
-import * as FileSystem from "expo-file-system";
+// import React, { useEffect } from "react";
+// import * as FileSystem from "expo-file-system";
+// import { Button, Image, View, Text } from "react-native";
+// import * as ImagePicker from "expo-image-picker";
+// import Constants from "expo-constants";
+// import * as Permissions from "expo-permissions";
 
-export default function ScreenMediaCache() {
-  console.log("DocDir", FileSystem.documentDirectory);
+// export default function ScreenMediaCache() {
+//   FileSystem.readDirectoryAsync(FileSystem.documentDirectory).then((p) => {
+//     console.log(p);
+//   });
 
-  FileSystem.readDirectoryAsync(FileSystem.documentDirectory).then((p) => {
-    console.log(p);
-  });
-  return (
-    <View>
-      <Text>This is the media cache screen.</Text>
-    </View>
-  );
+//   useEffect(() => {
+//     (async () => {
+//       if (Constants.platform.ios) {
+//         const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+//         if (status !== "granted") {
+//           alert("Sorry, we need camera roll permissions to make this work!");
+//         }
+//       }
+//     })();
+//   }, []);
+
+//   return (
+//     <View>
+//       <Text>This is the media cache screen.</Text>
+//       <Button title="Pick an Image from Album" />
+//       {image && (
+//         <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
+//       )}
+//     </View>
+//   );
+// }
+
+import React, { Component } from "react";
+import {
+  ActivityIndicator,
+  Button,
+  Clipboard,
+  Image,
+  Share,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Constants } from "expo";
+import * as Permissions from "expo-permissions";
+import * as ImagePicker from "expo-image-picker";
+export default class App extends Component {
+  state = {
+    image: null,
+    uploading: false,
+  };
+
+  render() {
+    let { image } = this.state;
+
+    return (
+      <View style={styles.container}>
+        <StatusBar barStyle="default" />
+
+        <Text style={styles.exampleText}>
+          Example: Upload ImagePicker result
+        </Text>
+
+        <Button
+          onPress={this._pickImage}
+          title="Pick an image from camera roll"
+        />
+
+        <Button onPress={this._takePhoto} title="Take a photo" />
+
+        {this._maybeRenderImage()}
+        {this._maybeRenderUploadingOverlay()}
+      </View>
+    );
+  }
+
+  _maybeRenderUploadingOverlay = () => {
+    if (this.state.uploading) {
+      return (
+        <View style={[StyleSheet.absoluteFill, styles.maybeRenderUploading]}>
+          <ActivityIndicator color="#fff" size="large" />
+        </View>
+      );
+    }
+  };
+
+  _maybeRenderImage = () => {
+    let { image } = this.state;
+
+    if (!image) {
+      return;
+    }
+
+    return (
+      <View style={styles.maybeRenderContainer}>
+        <View style={styles.maybeRenderImageContainer}>
+          <Image source={{ uri: image }} style={styles.maybeRenderImage} />
+        </View>
+
+        <Text
+          onPress={this._copyToClipboard}
+          onLongPress={this._share}
+          style={styles.maybeRenderImageText}
+        >
+          {image}
+        </Text>
+      </View>
+    );
+  };
+
+  _share = () => {
+    Share.share({
+      message: this.state.image,
+      title: "Check out this photo",
+      url: this.state.image,
+    });
+  };
+
+  _copyToClipboard = () => {
+    Clipboard.setString(this.state.image);
+    alert("Copied image URL to clipboard");
+  };
+
+  _takePhoto = async () => {
+    const { status: cameraPerm } = await Permissions.askAsync(
+      Permissions.CAMERA
+    );
+
+    const { status: cameraRollPerm } = await Permissions.askAsync(
+      Permissions.CAMERA_ROLL
+    );
+
+    // only if user allows permission to camera AND camera roll
+    if (cameraPerm === "granted" && cameraRollPerm === "granted") {
+      let pickerResult = await ImagePicker.launchCameraAsync({
+        allowsMultipleSelection: true,
+        quality: 0.8,
+        //allowsEditing: true,
+        aspect: [4, 3],
+      });
+
+      if (!pickerResult.cancelled) {
+        this.setState({ image: pickerResult.uri });
+      }
+
+      this.uploadImageAsync(pickerResult.uri);
+    }
+  };
+
+  _pickImage = async () => {
+    const { status: cameraRollPerm } = await Permissions.askAsync(
+      Permissions.CAMERA_ROLL
+    );
+
+    // only if user allows permission to camera roll
+    if (cameraRollPerm === "granted") {
+      let pickerResult = await ImagePicker.launchImageLibraryAsync({
+        allowsEditing: true,
+        base64: true,
+        aspect: [4, 3],
+      });
+
+      if (!pickerResult.cancelled) {
+        this.setState({ image: pickerResult.uri });
+      }
+
+      this.uploadImageAsync(pickerResult.uri);
+    }
+  };
+
+  uploadImageAsync(pictureuri) {
+    let apiUrl = "http://123.123.123.123/ABC";
+
+    var data = new FormData();
+    data.append("file", {
+      uri: pictureuri,
+      name: "file",
+      type: "image/jpg",
+    });
+
+    fetch(apiUrl, {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "multipart/form-data",
+      },
+      method: "POST",
+      body: data,
+    })
+      .then((response) => {
+        console.log("succ ");
+        console.log(response);
+      })
+      .catch((err) => {
+        console.log("err ");
+        console.log(err);
+      });
+  }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
+  exampleText: {
+    fontSize: 20,
+    marginBottom: 20,
+    marginHorizontal: 15,
+    textAlign: "center",
+  },
+  maybeRenderUploading: {
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.4)",
+    justifyContent: "center",
+  },
+  maybeRenderContainer: {
+    borderRadius: 3,
+    elevation: 2,
+    marginTop: 30,
+    shadowColor: "rgba(0,0,0,1)",
+    shadowOpacity: 0.2,
+    shadowOffset: {
+      height: 4,
+      width: 4,
+    },
+    shadowRadius: 5,
+    width: 250,
+  },
+  maybeRenderImageContainer: {
+    borderTopLeftRadius: 3,
+    borderTopRightRadius: 3,
+    overflow: "hidden",
+  },
+  maybeRenderImage: {
+    height: 250,
+    width: 250,
+  },
+  maybeRenderImageText: {
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+  },
+});