Winter 2020 Release

components/ChannelList/ChannelList.jsx

@@ -38,6 +38,10 @@ export default class ChannelList extends React.Component {
     if (this.props.onPressChannel) this.props.onPressChannel(id, name);
   }
 
+  onLongPressChannel = (id, name) => {
+    if (this.props.onLongPressChannel) this.props.onLongPressChannel(id, name);
+  }
+
   updateSubscription = (id, index) => {
     if (['all', 'subs', 'myPosts'].includes(id)) return;
 
@@ -105,7 +109,9 @@ export default class ChannelList extends React.Component {
             <TouchableOpacity onPress={this.updateSubscription(channel.id, subIndex)} activeOpacity={0.5}>
               <Image opacity={opacity} source={icon} style={styles.notificationBell} />
             </TouchableOpacity>
-            <TouchableOpacity style={styles.channelListButton} onPress={() => this.onPressChannel(channel.id, channel.name)}>
+            <TouchableOpacity style={styles.channelListButton} 
+              onPress={() => this.onPressChannel(channel.id, channel.name)} 
+              onLongPress={() => this.onLongPressChannel(channel.id, channel.name)}>
               <Text style={styles.channelText}>{channel.name}</Text>
               <Image source={require('../../assets/arrowright.png')} style={styles.rightArrow} />
             </TouchableOpacity>
@@ -147,5 +153,6 @@ export default class ChannelList extends React.Component {
 
 ChannelList.propTypes = {
   onPressChannel: PropTypes.func,
+  onLongPressChannel: PropTypes.func,
   channels: PropTypes.array,
 }

components/ChannelProfile/ChannelProfile.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Modal, View, TouchableOpacity } from 'react-native';
+import { Text, Icon } from 'native-base';
+
+import styles from '../../components/ChannelProfile/ChannelProfileStyle';
+
+export default class ChannelProfile extends React.Component {
+
+  onClose = () => {
+    const { onClose } = this.props;
+    onClose();
+  }
+
+  render() {
+    const {
+      channel: channelData,
+      isModalOpen,
+    } = this.props;
+
+    if (!channelData) return null;
+    if (!channelData.description) return null;
+
+    return (
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isModalOpen}
+        onRequestClose={this.onClose}
+      >
+        <TouchableOpacity
+          activeOpacity={1}
+          style={styles.modal}
+        >
+          <View style={[styles.card, styles.cardChannelDescription]}>
+
+            <View style={styles.cancelRow}>
+              <TouchableOpacity onPress={this.onClose}>
+                <Icon
+                  type="EvilIcons"
+                  name='close'
+                  style={styles.cancelIcon}
+                />
+              </TouchableOpacity>
+            </View>
+
+            <Text style={styles.name}>
+              {`${channelData.name}`}
+            </Text>
+
+            <View style={styles.infoBlock}>
+              {channelData.description && <Text style={styles.channelInfoText}>{`${channelData.description}`}</Text>}
+            </View>
+
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    )
+  }
+}

components/ChannelProfile/ChannelProfileStyle.js

@@ -0,0 +1,30 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+import userProfileStyles from '../../components/UserProfile/UserProfileStyle'
+
+export default (styles = StyleSheet.create({
+    modal: {
+        ...userProfileStyles.modal
+    },
+    card: {
+        ...userProfileStyles.card
+    },
+    cancelRow: {
+        ...userProfileStyles.cancelRow
+    },
+    cancelIcon: {
+        ...userProfileStyles.cancelIcon
+    },
+    name: {
+        ...userProfileStyles.name
+    },
+    infoBlock: {
+        ...userProfileStyles.infoBlock,
+    },
+    cardChannelDescription: {
+        height: 200
+    },
+    channelInfoText: {
+        textAlign: 'center'
+    }
+}));

components/Comment/Comment.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Autolink from 'react-native-autolink';
-import { Dimensions, TouchableOpacity, View, Modal } from 'react-native';
+import { ScrollView, TouchableOpacity, View, Modal } from 'react-native';
 import {
   Text, Thumbnail, ListItem, Card, CardItem,
   Container, Content, Left, Icon, Button
@@ -10,6 +10,7 @@ import _ from 'lodash';
 import { AppLoading } from "expo";
 import * as Font from 'expo-font';
 import date from 'date-fns';
+import Popover from 'react-native-popover-view';
 
 import styles from "./CommentStyle";
 import {getProfilePicture} from "../../helpers/imageCache"
@@ -25,6 +26,7 @@ export default class Comment extends React.Component {
       profilePicture: null,
       showEditButtons: false,
       editing: false,
+      showLikedList: false
     }
   }
 
@@ -85,10 +87,58 @@ export default class Comment extends React.Component {
     updateComment && updateComment(commentId, {}, "deleteComment");
   }
 
+  toggleLike = () => {
+    const {
+      data,
+      loggedInUser,
+      updateComment
+    } = this.props;
+
+    if (data.usersLiked.find((user) => user._id === loggedInUser._id)) {
+      data.usersLiked = data.usersLiked.filter(user => user._id !== loggedInUser._id);
+    } else {
+      console.log("pushing")
+      data.usersLiked.push({
+        _id: loggedInUser._id,
+        firstname: loggedInUser.firstName,
+        lastName: loggedInUser.lastName
+      });
+    }
+
+    if (data.likes < 0) data.likes = 0; // (Grebel's a positive community, come on!)
+    console.log("Updating resource")
+    updateComment && updateComment(data._id, data, 'toggleCommentLike');
+    console.log("Updating resource")
+  }
+
+  generateLikesList = () => {
+    let {
+      usersLiked
+    } = this.props.data;
+
+    if (usersLiked.filter(e => e._id == this.props.loggedInUser._id).length) {
+      usersLiked = usersLiked.filter(user => user._id !== this.props.loggedInUser._id);
+      usersLiked.unshift({ firstName: 'You' }); // a wee hack
+    }
+
+    return (
+      <ScrollView contentContainerStyle={styles.likedList}>
+        <Thumbnail small square source={require('../../assets/liked-cookie.png')} style={styles.likedListIcon} />
+        <View style={styles.line} />
+          {usersLiked.map((user, i) => {
+            return (
+              <Text key={i} style={styles.likedListItem}>{user.firstName} {user.lastName || ''}</Text>
+            )
+          })}
+      </ScrollView>
+    )
+  }
+
   render() {
     const {
       showEditButtons,
-      editing
+      editing,
+      showLikedList
     } = this.state;
 
     const {
@@ -101,6 +151,7 @@ export default class Comment extends React.Component {
       author,
       content,
       createdAt,
+      usersLiked,
     } = data;
 
     var authorName;
@@ -125,6 +176,11 @@ export default class Comment extends React.Component {
       )
     }
 
+    const isLiked = usersLiked.filter(e => e._id == this.props.loggedInUser._id).length > 0;
+
+    var likeIcon = isLiked ? require('../../assets/liked-cookie.png') : require('../../assets/cookie-icon.png');
+    var likesDialog = usersLiked.length > 0 ? usersLiked.length : '';
+
     return (
       <View>
         <Card style={styles.card}>
@@ -146,10 +202,31 @@ export default class Comment extends React.Component {
                     {`${createdAt} `}
                   </Text>
                 </View>
-                <Autolink text={content} style={styles.textContent}/>
+                <View style={{flexDirection: 'row'}}>
+                  <Autolink text={content} style={styles.textContent}/>
+                  <View style={styles.iconContainer}>
+                    <TouchableOpacity
+                      onPress={() => this.setState({ showLikedList: true })}
+                      ref={ref => this.dialogRef = ref}
+                      hitSlop={{ top: 40, bottom: 10, left: 30, right: 40 }}
+                    >
+                      <Text style={styles.likesDialog}>{`${likesDialog}`}</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={this.toggleLike}>
+                      <Thumbnail small square source={likeIcon} style={styles.icon} />
+                    </TouchableOpacity>
+                  </View>
+                </View>
               </TouchableOpacity>
             </View>
           </CardItem>
+        <Popover
+            fromView={this.dialogRef}
+            isVisible={showLikedList}
+            onClose={() => this.setState({ showLikedList: false })}
+          >
+            {this.generateLikesList()}
+          </Popover>
         </Card>
 
         <View>

components/Comment/CommentStyle.js

@@ -27,18 +27,21 @@ export default (styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-start'
   },
+
   textAuthor: {
     paddingLeft: 5,
     fontWeight: 'bold'
   },
   textContent: {
-    paddingLeft: 5
+    paddingLeft: 5,
+    fontSize: 16,
+    flex: 1
   },
   editButtonsContainer: {
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'flex-end',
-    alignItems: 'center',
+    alignItems: 'bottom',
     backgroundColor: '#00000050'
   },
   view: {
@@ -66,5 +69,47 @@ export default (styles = StyleSheet.create({
     flexDirection: 'row',
   	justifyContent: 'space-between',
   	paddingBottom: 5
-  }
+  },
+  icon: {
+		width: 25,
+		height: 25,
+		marginRight: 0,
+		paddingRight: 0
+  },
+  iconContainer: {
+		flexDirection: 'column',
+    padding: 5,
+    flex: 0
+  },
+  likesDialog: {
+		fontSize: 12,
+		paddingBottom: 3,
+		flex: 1,
+    textAlignVertical: 'bottom',
+    alignSelf: 'center'
+  },
+
+  likedList: {
+		padding: 20,
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'flex-start',
+		alignItems: 'flex-start',
+	},
+	likedListIcon: {
+		width: 25,
+		height: 25,
+		marginBottom: 10,
+		alignSelf: 'center'
+	},
+	line: {
+		width: '100%',
+		borderBottomWidth: 1,
+		borderBottomColor: '#C0C0C0',
+		paddingLeft: 20,
+		paddingRight: 20
+	},
+	likedListItem: {
+		padding: 5
+	}
 }));

components/CommentEditor/CommentEditor.jsx

@@ -52,10 +52,6 @@ export default class CommentEditor extends React.Component {
   }
 
   render() {
-    const {
-      showEditButtons,
-      editing
-    } = this.state;
 
     const {
       author
@@ -90,6 +86,7 @@ export default class CommentEditor extends React.Component {
                     onChangeText={this.textUpdate}
                     value={this.state.commentText}
                     multiline = {true}
+                    scrollEnabled  = {false}
                   />
                   {this.state.commentText ? 
                     <TouchableOpacity style={styles.commentButton} onPress={this.addComment}>

components/CommentEditor/CommentEditorStyle.js

@@ -34,9 +34,10 @@ export default (styles = StyleSheet.create({
   },
   textContent: {
     paddingLeft: 5,
-    height: 38,
     flexGrow: 1,
-    flexShrink: 1
+    flexShrink: 1,
+    minHeight:38,
+    fontSize: 16
   },
   editButtonsContainer: {
     flex: 1,

components/Post/Post.jsx

@@ -375,7 +375,7 @@ export default class Post extends React.Component {
 
             <CardItem button onPress={this.onPressPost} style={styles.postContent}>
               <Body>
-              <Autolink text={content} numberOfLines={this.props.maxLines} ellipsizeMode='tail' />
+              <Autolink text={content} numberOfLines={this.props.maxLines} ellipsizeMode='tail' style={styles.autolinkContent} />
                 {poll ?
                   (this.props.onPressPost ?
                   <PollPreview data={poll} loggedInUser={loggedInUser} />

components/Post/PostStyle.js

@@ -18,6 +18,9 @@ export default (styles = StyleSheet.create({
 		paddingTop: 0,
 		paddingBottom: 0,
 	},
+	autolinkContent: {
+		fontSize: 16
+	},
 	postFooter: {
 		marginTop: 3,
 		marginBottom: 3

components/UserProfile/UserProfileStyle.js

@@ -48,7 +48,8 @@ export default (styles = StyleSheet.create({
     fontWeight: "400",
     fontSize: 26,
     marginTop: 10,
-    marginBottom: 15
+    marginBottom: 15,
+    textAlign: 'center'
   },
   infoBlock: {
     alignSelf: 'flex-start',