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

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,
+  },
+});