From 24c269c9d52ec7cf2cd383a8d7c3aee43ed475c1 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@thetaggid.com>
Date: Tue, 27 Oct 2020 20:44:36 -0400
Subject: [TMA-180] Image Carousel for Tagg Posts (#77)

* image carousel done

* fixed a minor bug

* TikTok is TikTok NOT Tiktok OKAY?

Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>
---
 src/components/taggs/TaggPost.tsx        | 24 ++++++++++++++++++------
 src/components/taggs/TwitterTaggPost.tsx | 15 ++++++++++++---
 2 files changed, 30 insertions(+), 9 deletions(-)

(limited to 'src/components/taggs')

diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx
index 07efd797..071dbfc4 100644
--- a/src/components/taggs/TaggPost.tsx
+++ b/src/components/taggs/TaggPost.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
 import {SimplePostType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
-import {DateLabel} from '../common';
+import {DateLabel, PostCarousel} from '../common';
 import TaggPostFooter from './TaggPostFooter';
 import Hyperlink from 'react-native-hyperlink';
 
@@ -14,11 +14,18 @@ const TaggPost: React.FC<TaggPostProps> = ({post}) => {
     // 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>
+        {post.media_url.length === 1 && post.media_url[0] !== null ? (
+          <Image
+            style={styles.imageWithMargin}
+            source={{uri: post.media_url[0]}}
+          />
+        ) : (
+          <PostCarousel
+            data={post.media_url}
+            imageStyles={styles.image}
+            marginBottom={30}
+          />
+        )}
         <TaggPostFooter
           // we currently don't have a way to retreive num of likes information
           likes={undefined}
@@ -49,6 +56,11 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH,
     height: SCREEN_WIDTH,
     backgroundColor: '#eee',
+  },
+  imageWithMargin: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
+    backgroundColor: '#eee',
     marginBottom: 30,
   },
   textContianer: {marginBottom: 50, paddingHorizontal: 10},
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index c72b4fa8..d0d066c6 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -6,7 +6,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import {AVATAR_DIM, TAGGS_GRADIENT} from '../../constants';
 import {TwitterPostType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
-import {DateLabel} from '../common';
+import {DateLabel, PostCarousel} from '../common';
 
 interface TwitterTaggPostProps {
   ownerHandle: string;
@@ -56,9 +56,17 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
           <React.Fragment />
         )}
         {/* Second part of content is an image or empty */}
-        {post.media_url ? (
+        {post.media_url.length !== 0 ? (
           <View style={styles.imageContainer}>
-            <Image style={styles.image} source={{uri: post.media_url}} />
+            {post.media_url.length === 1 && post.media_url[0] !== null ? (
+              <Image style={styles.image} source={{uri: post.media_url[0]}} />
+            ) : (
+              <PostCarousel
+                data={post.media_url}
+                imageStyles={styles.image}
+                marginBottom={0}
+              />
+            )}
           </View>
         ) : (
           <React.Fragment />
@@ -89,6 +97,7 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
                   }>
                   @{post.in_reply_to.handle}
                 </Text>
+                {/* We're not displaying any images here in the container */}
                 <DateLabel
                   timestamp={post.in_reply_to.timestamp}
                   type={'short'}
-- 
cgit v1.2.3-70-g09d2