Set up of the user gallery

App.js

@@ -7,6 +7,7 @@ import { Provider } from 'react-redux';
 import { ReduxRouter } from './src/routes/Navigator';
 import store, { ReduxNavigator } from './src/store';
 import { Colors } from './src/common';
+import { GalleryScreen } from './src/screens';
 
 export default class App extends Component {
   state = {
@@ -56,7 +57,8 @@ export default class App extends Component {
     return (
       <Provider store={store}>
         <View style={{ flex: 1 }}>
-          <ReduxRouter navigator={ReduxNavigator} />
+          <GalleryScreen />
+          {/* <ReduxRouter navigator={ReduxNavigator} /> */}
         </View>
       </Provider>
     );

helpers/validations.js

@@ -67,11 +67,21 @@ const validateCreationForm = fields => {
   }
   return false;
 };
+const validateCommentReply = comment => {
+  if (!comment || comment.length < 1) {
+    return "Comments can't be empty 🤨";
+  }
+  if (comment.length < 3) {
+    return 'Comments need to be at least 3 characters long 😁';
+  }
+  return false;
+};
 
 export {
   validateInput,
   validateEmail,
   validateFullName,
   isButtonDisabled,
-  validateCreationForm
+  validateCreationForm,
+  validateCommentReply
 };

package.json

@@ -23,6 +23,7 @@
     "react-addons-update": "^15.6.2",
     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
     "react-native-action-button": "^2.8.5",
+    "react-native-animatable": "^1.3.1",
     "react-native-button": "^2.3.0",
     "react-native-elements": "^0.19.1",
     "react-native-google-places": "^2.5.2",

src/screens/details/CommentsScreen.js

@@ -31,7 +31,7 @@ import { bindActionCreators } from 'redux';
 import * as actions from '../../actions';
 
 import { Colors, CustomNavBar, Spinner } from '../../common';
-import { renderImage } from '../../../helpers';
+import { renderImage, validateCommentReply } from '../../../helpers';
 
 class CommentsScreen extends React.Component {
   constructor(props) {
@@ -131,16 +131,26 @@ class CommentsScreen extends React.Component {
   };
 
   addNewComment = async () => {
-    const comment = {
-      text: this.state.newComment,
-      user: {
-        id: '5c54b0e1231ce64440d8292b', //hardcode them for now
-        username: 'Pot'
-      }
-    };
-    const hotspotId = this.hotspot._id;
-    //destructure userId from props later
-    await this.props.addComment(comment, hotspotId);
+    const error = validateCommentReply(this.state.newComment);
+    if (error) {
+      Alert.alert(
+        'Sorry, but...',
+        `${error}`,
+        [{ text: 'Cancel', style: 'cancel' }],
+        { cancellable: true }
+      );
+    } else {
+      const comment = {
+        text: this.state.newComment,
+        user: {
+          id: '5c54b0e1231ce64440d8292b', //hardcode them for now
+          username: 'Pot'
+        }
+      };
+      const hotspotId = this.hotspot._id;
+      //destructure userId from props later
+      await this.props.addComment(comment, hotspotId);
+    }
     //clear the comment input
     this.setState({ ...this.state, newComment: '' });
     //then reload comments

src/screens/details/PrivateMessageScreen.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { CustomNavBar, Colors } from '../../common';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { Actions } from 'react-native-router-flux';
 
 class PrivateMessageScreen extends Component {
   render() {

src/screens/gallery/GalleryScreen.js

@@ -0,0 +1,131 @@
+import React, { Component } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ListView,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Dimensions,
+  ScrollView,
+  Modal
+} from 'react-native';
+import { List, ListItem } from 'native-base';
+import { getImageList } from './components/dummy';
+import { Spinner, Colors } from '../../common';
+import GalleryImage from './components/GalleryImage';
+
+import { images } from './components/dummy';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import AntDesign from '@expo/vector-icons/AntDesign';
+
+class GalleryScreen extends Component {
+  state = {
+    gallery: null,
+    modalImage: null,
+    isLoading: true,
+    isModalVisible: false
+  };
+  ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+
+  async componentDidMount() {
+    const gallery = images;
+    // let imageArray = [];
+    // gallery.forEach((el, i) => {
+    //   let image = {
+    //     id: i,
+    //     uri: el
+    //   };
+    //   imageArray.push(image);
+    // });
+    this.setState({ gallery, isLoading: false });
+  }
+
+  toggleModal = (isVisible, index) => {
+    if (index) {
+      this.setState({ modalImage: this.state.gallery[index] });
+    }
+    this.setState({ isModalVisible: isVisible });
+  };
+
+  getImage = () => {
+    return this.state.modalImage;
+  };
+
+  render() {
+    if (this.state.isLoading) {
+      return (
+        <View style={{ flex: 1, alignItems: 'center' }}>
+          <Spinner size="large" />
+        </View>
+      );
+    }
+    console.log('===============');
+    console.log('this.state.gallery:', this.state.gallery);
+    console.log('===============');
+    return (
+      <View style={styles.container}>
+        <Modal
+          animationType="fade"
+          transparent
+          visible={this.state.isModalVisible}
+          style={styles.modal}
+        >
+          <View style={styles.modal}>
+            <TouchableOpacity
+              onPress={() => this.toggleModal(false)}
+              style={styles.closeButton}
+            >
+              <AntDesign name="close" size={24} color="white" />
+            </TouchableOpacity>
+            <GalleryImage source={this.state.modalImage} />
+          </View>
+        </Modal>
+
+        {this.state.gallery.map((image, i) => {
+          return (
+            <TouchableWithoutFeedback
+              key={i}
+              onPress={() => this.toggleModal(true, i)}
+            >
+              <View style={styles.imageWrapper}>
+                <GalleryImage source={image} />
+              </View>
+            </TouchableWithoutFeedback>
+          );
+        })}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 20,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    backgroundColor: '#eee'
+  },
+  imageWrapper: {
+    width: Dimensions.get('window').width / 3 - 4,
+    height: Dimensions.get('window').height / 3 - 4,
+    padding: 5,
+    backgroundColor: '#fff'
+  },
+  modal: {
+    flex: 1,
+    padding: 40,
+    backgroundColor: 'rgba(0,0,0,0.9)'
+  },
+  closeButton: {
+    alignSelf: 'center',
+    height: 26,
+    width: 26,
+    marginBottom: 20
+  }
+});
+
+export default GalleryScreen;

src/screens/gallery/components/GalleryImage.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { Image, StyleSheet, Dimensions } from 'react-native';
+
+const WIDTH = Dimensions.get('window').width;
+
+export default class GalleryImage extends Component {
+  render() {
+    return <Image source={this.props.source} style={styles.image} />;
+  }
+}
+
+const styles = StyleSheet.create({
+  image: {
+    flex: 1,
+    width: null,
+    alignSelf: 'stretch'
+  }
+});

src/screens/gallery/components/dummy.js

@@ -0,0 +1,10 @@
+export const images = [
+  require('../assets/image1.jpg'),
+  require('../assets/image2.jpg'),
+  require('../assets/image3.jpg'),
+  require('../assets/image4.jpg'),
+  require('../assets/image5.jpg'),
+  require('../assets/image6.jpg'),
+  require('../assets/image7.jpg'),
+  require('../assets/image8.jpg')
+];

src/screens/gallery/index.js

@@ -0,0 +1,3 @@
+import GalleryScreen from './GalleryScreen';
+
+export { GalleryScreen };

src/screens/home/components/FloatingActionButton.js

@@ -60,7 +60,7 @@ class FloatingActionButton extends Component {
 
           <ActionButton.Item
             buttonColor={Colors.hotspotColor}
-            onPress={() => Actions.pm()}
+            onPress={() => Actions.messages()}
             size={58}
           >
             <AntDesign name="message1" size={32} color="white" />

src/screens/index.js

@@ -8,3 +8,4 @@ export * from './message';
 export * from './profile';
 export * from './settings';
 export * from './details';
+export * from './gallery';

yarn.lock

@@ -4870,7 +4870,7 @@ react-native-action-button@^2.8.5:
   dependencies:
     prop-types "^15.5.10"
 
-react-native-animatable@^1.2.4:
+react-native-animatable@^1.2.4, react-native-animatable@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.1.tgz#f004a7e9de6838d0fbf210d642593cff7affd9ef"
   integrity sha512-NoE6OAgCrhggWBRV6rBJup5vLAGoTjx168Tku1RZmjUGIdYRAyGesP/MoqvxiNJjhTAgwYx2LT63VTT1xO8g4Q==