Feature loading images

android/app/build.gradle

@@ -127,6 +127,7 @@ android {
 
 dependencies {
     compile project(':react-native-maps')
+    compile project(':react-native-image-to-base64')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/java/com/potlucky/MainApplication.java

@@ -4,6 +4,7 @@
 
 import com.facebook.react.ReactApplication;
 import com.airbnb.android.react.maps.MapsPackage;
+import com.github.xfumihiro.react_native_image_to_base64.ImageToBase64Package;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -25,6 +26,7 @@ protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
             new MapsPackage()
+            new ImageToBase64Package()
       );
     }
   };

android/settings.gradle

@@ -1,5 +1,7 @@
 rootProject.name = 'potlucky'
 include ':react-native-maps'
 project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/android')
+include ':react-native-image-to-base64'
+project(':react-native-image-to-base64').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-to-base64/android')
 
 include ':app'

ios/potlucky/Info.plist

@@ -22,22 +22,6 @@
     <string>1</string>
     <key>LSRequiresIPhoneOS</key>
     <true/>
-    <key>UILaunchStoryboardName</key>
-    <string>LaunchScreen</string>
-    <key>UIRequiredDeviceCapabilities</key>
-    <array>
-      <string>armv7</string>
-    </array>
-    <key>UISupportedInterfaceOrientations</key>
-    <array>
-      <string>UIInterfaceOrientationPortrait</string>
-      <string>UIInterfaceOrientationLandscapeLeft</string>
-      <string>UIInterfaceOrientationLandscapeRight</string>
-    </array>
-    <key>UIViewControllerBasedStatusBarAppearance</key>
-    <false/>
-    <key>NSLocationWhenInUseUsageDescription</key>
-    <string/>
     <key>NSAppTransportSecurity</key>
     <dict>
       <key>NSExceptionDomains</key>
@@ -49,12 +33,30 @@
         </dict>
       </dict>
     </dict>
+    <key>NSLocationWhenInUseUsageDescription</key>
+    <string/>
+    <key>NSPhotoLibraryUsageDescription</key>
+    <string>We need access to photos as it's the core app experience.</string>
     <key>UIAppFonts</key>
     <array>
       <string>Ubuntu-B.ttf</string>
       <string>Ubuntu-L.ttf</string>
       <string>Ubuntu-M.ttf</string>
       <string>Ubuntu-R.ttf</string>
     </array>
+    <key>UILaunchStoryboardName</key>
+    <string>LaunchScreen</string>
+    <key>UIRequiredDeviceCapabilities</key>
+    <array>
+      <string>armv7</string>
+    </array>
+    <key>UISupportedInterfaceOrientations</key>
+    <array>
+      <string>UIInterfaceOrientationPortrait</string>
+      <string>UIInterfaceOrientationLandscapeLeft</string>
+      <string>UIInterfaceOrientationLandscapeRight</string>
+    </array>
+    <key>UIViewControllerBasedStatusBarAppearance</key>
+    <false/>
   </dict>
 </plist>

js/components/InfoForm/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Gandalf from 'gandalf-validator';
-import { View, ScrollView } from 'react-native';
+import { View, ScrollView, TouchableHighlight, Image } from 'react-native';
 import styles from './styles';
 import ValidatedText from './../ValidatedText';
 import DatePicker from './../../components/DatePicker';
@@ -10,6 +10,7 @@ import Map from './../../components/Map';
 import SingleFlatButton from './../../components/SingleFlatButton';
 import { addInfo } from '../../redux/modules/newPotluckActions';
 
+
 class Form extends Gandalf {
   constructor() {
     const fields = [
@@ -83,7 +84,7 @@ class Form extends Gandalf {
     });
     this.setState({
       longitude: location.geometry.location.lng
-    })
+    });
   };
 
   onEventDateChange = (eventDate) => {
@@ -120,7 +121,12 @@ class Form extends Gandalf {
 
   render() {
     const fields = this.state.fields;
-
+    const coordinates = {
+      latitude: this.state.latitude,
+      longitude: this.state.longitude
+    };
+    const imageSource = this.props.imageLink ? { uri: this.props.imageLink } : require('./../../../assets/images/camera-icon.png');
+    const imageStyle = this.props.imageLink ? styles.image : styles.cameraImage;
     return (
       <View style={styles.mainContainer}>
         {fields.title.element}
@@ -154,7 +160,17 @@ class Form extends Gandalf {
           timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
           onDateChange={this.onServeTimeChange}
           mode="time"
-        /> 
+        />
+        <TouchableHighlight
+          style={styles.noImage}
+          title={'pick a god damn image'}
+          onPress={() => this.props.goToImage()}
+        >
+          <Image
+            style={imageStyle}
+            source={imageSource}
+          />
+        </TouchableHighlight >
         <GooglePlaces onLocationChange={this.onLocationChange} />
         <Map lat={this.state.latitude} lng={this.state.longitude} />
         {fields.description.element}
@@ -163,5 +179,14 @@ class Form extends Gandalf {
     );
   }
 }
+const mapStateToProps = (state) => {
+  if (state.newPotluck.potluckInfo) {
+    return {
+      imageLink: state.newPotluck.potluckInfo.link
+    };
+  }
+  return { imageLink: false };
+};
+
 
-export default connect()(Form);
+export default connect(mapStateToProps)(Form);

js/components/InfoForm/styles.js

@@ -25,6 +25,26 @@ export default StyleSheet.create({
     fontSize: 16,
     color: colors.mainBrandColor,
   },
+  cameraImage: {
+    width: 40,
+    height: 40
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  noImage: {
+    height: 250,
+    width: '100%',
+    borderColor: colors.mainBrandColor,
+    fontSize: typography.baseFontSize,
+    borderRadius: 3,
+    borderWidth: 1,
+    flex: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   description: {
     height: 100,
     width: '100%',

js/helpers/index.js

@@ -19,3 +19,4 @@ export const decodeObjectKeys = (data) => {
 
   return decode;
 };
+

js/navigation/NavigationLayout.ios.js

@@ -21,6 +21,7 @@ import { hostTabScreens, hostTabStyles, guestTabScreens, guestTabStyles } from '
 import { bottomNavigatorScreens, bottomNavigatorStyles } from './BottomNavConfig';
 import { colors, windowWidth } from '../styles/baseStyles';
 import PotluckConfirmationScreen from '../scenes/PotluckConfirmationScreen';
+import CameraRoll from './../scenes/CameraRoll';
 
 const HostTabNavigator = TabNavigator(hostTabScreens, hostTabStyles);
 const GuestTabNavigator = TabNavigator(guestTabScreens, guestTabStyles);
@@ -54,6 +55,7 @@ export default StackNavigator(
     GuestTabNavigator: { screen: GuestTabNavigator },
     HostTabNavigator: { screen: HostTabNavigator },
     AppOnboardingScreen: { screen: AppOnboardingScreen },
+    CameraRollScreen: { screen: CameraRoll },
   },
   {
     initialRouteName: 'SignIn',

js/redux/modules/newPotluckActions.js

@@ -7,25 +7,39 @@ const ADD_POTLUCK_ITEM = 'ADD_POTLUCK_ITEM';
 const ADD_INFO = 'ADD_INFO';
 const ADD_INVITES = 'ADD_INVITES';
 const SET_CREATE_MESSAGE = 'SET_CREATE_MESSAGE';
+const ADD_IMAGE = 'ADD_IMAGE';
 
 // action creators
 export const setNewPotluckInitialState = () => ({ type: SET_INITIAL_STATE, payload: null });
 export const changeNumberofGuests = data => ({ type: CHANGE_NUMBER_OF_GUESTS, payload: data });
 export const addPotluckItem = data => ({ type: ADD_POTLUCK_ITEM, payload: data });
 export const addInfo = data => ({ type: ADD_INFO, payload: data });
+export const addImage = data => ({ type: ADD_IMAGE, payload: data });
 export const addInvites = data => ({ type: ADD_INVITES, payload: data });
 export const setCreateResult = data => ({ type: SET_CREATE_MESSAGE, payload: data });
 
 // thunks
-export const createNewPotluck = (newPotluck, userId) => {
-  return (dispatch) => {
-    potlucks.createPotluck(newPotluck, userId)
-      .then((result) => {
-        dispatch(setCreateResult(result));
-        dispatch(setNewPotluckInitialState());
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
+export const createNewPotluck = (newPotluck, userId) => (dispatch) => {
+  potlucks.createPotluck(newPotluck, userId)
+    .then((result) => {
+      dispatch(setCreateResult(result));
+      dispatch(setNewPotluckInitialState());
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
+export const imageUpload = (base64) => (dispatch) => {
+  const formdata = new FormData();
+  formdata.append('image', base64);
+  fetch('https://api.imgur.com/3/upload', {
+    method: 'POST',
+    headers: {
+      Authorization: 'Client-ID cdcdee2c87c642f',
+    },
+    body: formdata
+  }).then(response => JSON.parse(response._bodyText))
+    .then((json) => dispatch(addImage(json)))
+    .catch(error => console.warn('fetch error:', error));
 };

js/redux/modules/newPotluckReducer.js

@@ -13,11 +13,16 @@ const newPotluckReducer = (state = initialState, action) => {
     case 'ADD_POTLUCK_ITEM':
       return { ...state, potluckFood: action.payload };
     case 'ADD_INFO':
-      return { ...state, potluckInfo: action.payload };
+      return { ...state, potluckInfo: Object.assign(action.payload, state.potluckInfo) };
     case 'ADD_INVITES':
       return { ...state, potluckInvites: action.payload };
     case 'SET_CREATE_MESSAGE':
       return { ...state, message: action.payload };
+    case 'ADD_IMAGE':
+      const link = action.payload.data.link;
+      const pattern = /http/ig;
+      const httpsLink = link.replace(pattern, 'https');
+      return { ...state, potluckInfo: { ...state.potluckInfo, link: httpsLink } };
     case 'SET_INITIAL_STATE':
       return { ...state, guestCount: 0, potluckFood: {}, potluckInfo: {}, potluckInvites: {} };
     default:

js/scenes/CameraRoll/index.js

@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import {
+  CameraRoll,
+  Image,
+  ScrollView,
+  StyleSheet,
+  TouchableHighlight,
+  View,
+  NativeModules
+} from 'react-native';
+import { imageUpload } from './../../redux/modules/newPotluckActions';
+
+class CameraRollView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      images: [],
+      selected: '',
+      fetchParams: { first: 25 },
+      groupTypes: 'SavedPhotos',
+    };
+    this._selectImage = this._selectImage.bind(this);
+  }
+
+  componentDidMount() {
+    // get photos from camera roll
+    CameraRoll.getPhotos({ first: 100 }).done(
+      (data) => {
+        const images = data.edges.map(asset => asset.node.image);
+        this.setState({
+          images,
+        });
+      },
+      (error) => {
+        console.warn(error);
+      }
+    );
+  }
+
+  _selectImage(uri) {
+    // define whatever you want to happen when an image is selected here
+    this.setState({
+      selected: uri,
+    });
+    NativeModules.RNImageToBase64.getBase64String(uri, (err, base64) => {
+      this.props.dispatch(imageUpload(base64));
+    });
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1, backgroundColor: 'white' }}>
+        <ScrollView style={styles.container}>
+          <View style={styles.imageGrid}>
+            {this.state.images.map(image => (
+              <TouchableHighlight key={image.uri} onPress={() => this._selectImage(image.uri)}>
+                <Image style={styles.image} source={{ uri: image.uri }} />
+              </TouchableHighlight>
+            ))}
+          </View>
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+  },
+  imageGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center'
+  },
+  image: {
+    width: 100,
+    height: 100,
+    margin: 10,
+  },
+});
+
+export default connect()(CameraRollView);

js/scenes/PotLuckInfoScreen/PotluckInfoScreen.js

@@ -4,10 +4,10 @@ import InfoForm from './../../components/InfoForm';
 
 import styles from './styles'
 
-const InfoScreen = () => (
+const InfoScreen = ({ goToImage }) => (
   <View style={styles.container}>
     <ScrollView>
-      <InfoForm />
+      <InfoForm goToImage={goToImage} />
     </ScrollView>
   </View>
 );

js/scenes/PotLuckInfoScreen/PotluckInfoScreenContainer.js

@@ -35,9 +35,12 @@ class PotluckInfoScreenContainer extends Component {
       ),
     })
   }
+  goToImage = () => {
+    this.props.navigation.navigate('CameraRollScreen');
+  }
   render() {
     return (
-      <PotluckInfoScreen />
+      <PotluckInfoScreen goToImage={this.goToImage} />
     );
   }
 }