From 59ea758ba64dd4e00f12b5ceb941d0ea5e273210 Mon Sep 17 00:00:00 2001
From: Justin Shillingford <jgs272@cornell.edu>
Date: Fri, 14 Aug 2020 16:39:26 -0400
Subject: [TMA-19] Social Media Post Container (#31)

* Basic mostly functional implementation

Need to figure out why API is being called so much

* Hey it works now! Without a million API calls!

* Fixed bug where app would crash upon login

Also updated property names to be more appropriate

* Added post datetime and social icon

* Updated error message

* Fixed typecheck errors

I don't know that these fixes are the best since I don't think they're generalizable

* Formatted datetime in PostHeader
---
 src/components/common/post/Post.tsx       | 12 ++++--
 src/components/common/post/PostHeader.tsx | 68 ++++++++++++++++++++++++++++---
 2 files changed, 71 insertions(+), 9 deletions(-)

(limited to 'src/components/common')

diff --git a/src/components/common/post/Post.tsx b/src/components/common/post/Post.tsx
index d6c5a7d6..e5f68917 100644
--- a/src/components/common/post/Post.tsx
+++ b/src/components/common/post/Post.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, Image} from 'react-native';
 import {PostType} from '../../../types';
 import PostHeader from './PostHeader';
 import {SCREEN_WIDTH} from '../../../utils';
@@ -7,11 +7,15 @@ import {SCREEN_WIDTH} from '../../../utils';
 interface PostProps {
   post: PostType;
 }
-const Post: React.FC<PostProps> = ({post: {owner}}) => {
+const Post: React.FC<PostProps> = ({post: {owner, instagram, social}}) => {
   return (
     <>
-      <PostHeader owner={owner} />
-      <View style={styles.image} />
+      <PostHeader post={instagram} owner={owner} social={social} />
+      <View style={styles.image}>
+        {instagram && (
+          <Image style={styles.image} source={{uri: instagram.media_url}} />
+        )}
+      </View>
     </>
   );
 };
diff --git a/src/components/common/post/PostHeader.tsx b/src/components/common/post/PostHeader.tsx
index 8558d21d..a07efd10 100644
--- a/src/components/common/post/PostHeader.tsx
+++ b/src/components/common/post/PostHeader.tsx
@@ -1,17 +1,57 @@
 import React from 'react';
-import {UserType} from '../../../types';
+import {UserType, InstagramPostType} from '../../../types';
 import {View, StyleSheet, Image, Text} from 'react-native';
 import {AuthContext} from '../../../routes/authentication';
+import moment from 'moment';
 
 const AVATAR_DIM = 35;
 interface PostHeaderProps {
   owner: UserType;
+  post: InstagramPostType | undefined;
+  social: string;
 }
-const PostHeader: React.FC<PostHeaderProps> = ({owner: {username}}) => {
+const PostHeader: React.FC<PostHeaderProps> = ({
+  owner: {username},
+  post,
+  social,
+}) => {
   const {avatar} = React.useContext(AuthContext);
+  switch (social) {
+    case 'Instagram':
+      var icon = require('../../../assets/images/instagram-icon.png');
+      break;
+    case 'Facebook':
+      var icon = require('../../../assets/images/facebook-icon.png');
+      break;
+    case 'Twitter':
+      var icon = require('../../../assets/images/twitter-icon.png');
+      break;
+    case 'Twitch':
+      var icon = require('../../../assets/images/twitch-icon.png');
+      break;
+    case 'Pinterest':
+      var icon = require('../../../assets/images/pinterest-icon.png');
+      break;
+    case 'Whatsapp':
+      var icon = require('../../../assets/images/whatsapp-icon.png');
+      break;
+    case 'Linkedin':
+      var icon = require('../../../assets/images/linkedin-icon.png');
+      break;
+    case 'Snapchat':
+      var icon = require('../../../assets/images/snapchat-icon.png');
+      break;
+    case 'Youtube':
+      var icon = require('../../../assets/images/youtube-icon.png');
+      break;
+    default:
+      var icon = require('../../../assets/images/logo.png');
+      break;
+  }
+
   return (
     <View style={styles.container}>
-      <View style={styles.leftElem}>
+      <View style={styles.topRow}>
         <Image
           style={styles.avatar}
           source={
@@ -21,19 +61,26 @@ const PostHeader: React.FC<PostHeaderProps> = ({owner: {username}}) => {
           }
         />
         <Text style={styles.username}>{username}</Text>
+        {post && <Image style={styles.icon} source={icon} />}
       </View>
+      {post && (
+        <Text style={styles.timestamp}>
+          {moment(post.timestamp).format('LL')} at{' '}
+          {moment(post.timestamp).format('LT')}
+        </Text>
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
+    flexDirection: 'column',
     justifyContent: 'space-between',
     padding: 10,
     backgroundColor: 'white',
   },
-  leftElem: {
+  topRow: {
     flexDirection: 'row',
     alignItems: 'center',
   },
@@ -43,9 +90,20 @@ const styles = StyleSheet.create({
     borderRadius: AVATAR_DIM / 2,
     marginRight: 10,
   },
+  icon: {
+    width: AVATAR_DIM,
+    height: AVATAR_DIM,
+    borderRadius: AVATAR_DIM / 2,
+    marginLeft: '55%',
+  },
   username: {
     fontSize: 18,
   },
+  timestamp: {
+    color: '#6A757D',
+    fontSize: 11,
+    marginLeft: AVATAR_DIM + 10,
+  },
 });
 
 export default PostHeader;
-- 
cgit v1.2.3-70-g09d2