[TMA-242] Twitter and Facebook Tagg View (#63)

* modified the way we store social media data, initial skeleton

* MVP? Twitter done?

* cleaned up some things

* forgot to lint and cleaned up some more code

* minor change to text display

* fixed some UI bug, linting, and minor adjustment to posts UI

* fixed a couple of things

* added DateLabel, Facebook taggs view, fixed minor stuff

* Some small changes for the PR

* removed unused Feed

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>

1 files changed, 42 insertions, 21 deletions

diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx
index 73f15268..0d3aee50 100644
--- a/src/components/taggs/TaggPost.tsx
+++ b/src/components/taggs/TaggPost.tsx
@@ -1,38 +1,59 @@
-import moment from 'moment';
 import React from 'react';
-import {Image, StyleSheet, View} from 'react-native';
-import {PostType} from '../../types';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {SimplePostType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
+import {DateLabel} from '../common';
 import TaggPostFooter from './TaggPostFooter';
 
 interface TaggPostProps {
-  post: PostType;
+  post: SimplePostType;
 }
-const TaggPost: React.FC<TaggPostProps> = ({post: {socialHandle, data}}) => {
-  const parsedDate = moment(data?.timestamp || '');
-  const date = parsedDate.isValid() ? parsedDate.format('MMM d') : '';
-
-  return (
-    <>
-      <View style={styles.image}>
-        {data && <Image style={styles.image} source={{uri: data.media_url}} />}
+const TaggPost: React.FC<TaggPostProps> = ({post}) => {
+  if (post.media_type === 'photo') {
+    // Post with image and footer that shows caption
+    return (
+      <View style={styles.photoContainer}>
+        <View style={styles.image}>
+          {post && (
+            <Image style={styles.image} source={{uri: post.media_url}} />
+          )}
+        </View>
+        <TaggPostFooter
+          // we currently don't have a way to retreive num of likes information
+          likes={undefined}
+          handle={post.username}
+          caption={post.caption || ''}
+          timestamp={post.timestamp}
+        />
+      </View>
+    );
+  } else {
+    // Post with large text
+    return (
+      <View style={styles.textContianer}>
+        <Text style={styles.text}>{post.caption}</Text>
+        <DateLabel timestamp={post.timestamp} type={'default'} />
       </View>
-      <TaggPostFooter
-        // we currently don't have a way to retreive num of likes information
-        likes={109}
-        handle={socialHandle}
-        caption={data?.caption || ''}
-        date={date}
-      />
-    </>
-  );
+    );
+  }
 };
 
 const styles = StyleSheet.create({
+  photoContainer: {
+    marginBottom: 50,
+  },
   image: {
     width: SCREEN_WIDTH,
     height: SCREEN_WIDTH,
     backgroundColor: '#eee',
+    marginBottom: 30,
+  },
+  textContianer: {marginBottom: 50, paddingHorizontal: 10},
+  text: {
+    marginBottom: 30,
+    fontSize: 18,
+    color: 'white',
+    flexWrap: 'wrap',
   },
 });