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/common/PostCarousel.tsx   | 49 ++++++++++++++++++++++++++++++++
 src/components/common/index.ts           |  1 +
 src/components/taggs/TaggPost.tsx        | 24 ++++++++++++----
 src/components/taggs/TwitterTaggPost.tsx | 15 ++++++++--
 4 files changed, 80 insertions(+), 9 deletions(-)
 create mode 100644 src/components/common/PostCarousel.tsx

(limited to 'src/components')

diff --git a/src/components/common/PostCarousel.tsx b/src/components/common/PostCarousel.tsx
new file mode 100644
index 00000000..cda9d8db
--- /dev/null
+++ b/src/components/common/PostCarousel.tsx
@@ -0,0 +1,49 @@
+import React, {Fragment, useRef, useState} from 'react';
+import {Image} from 'react-native';
+import Carousel, {Pagination} from 'react-native-snap-carousel';
+import {SCREEN_WIDTH} from '../../utils';
+
+interface PostCarouselProps {
+  data: string[];
+  imageStyles: Object;
+  marginBottom: number;
+}
+
+const PostCarousel: React.FC<PostCarouselProps> = ({
+  data,
+  imageStyles,
+  marginBottom,
+}) => {
+  const carouselRef = useRef(null);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const renderItem: (item: any) => Object = ({item}) => {
+    if (item === null) {
+      return <Fragment />;
+    } else {
+      return <Image style={imageStyles} source={{uri: item}} />;
+    }
+  };
+
+  return (
+    <>
+      <Carousel
+        ref={carouselRef}
+        data={data}
+        renderItem={renderItem}
+        sliderWidth={SCREEN_WIDTH}
+        itemWidth={SCREEN_WIDTH}
+        onSnapToItem={setCurrentPage}
+      />
+      <Pagination
+        activeDotIndex={currentPage}
+        dotsLength={data.length}
+        containerStyle={{marginBottom: marginBottom}}
+        dotColor={'#6ee7e7'}
+        inactiveDotColor={'#e0e0e0'}
+      />
+    </>
+  );
+};
+
+export default PostCarousel;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 87ebe810..c7ed13cd 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -11,5 +11,6 @@ export {default as LoadingIndicator} from './LoadingIndicator';
 export {default as DateLabel} from './DateLabel';
 export {default as SocialLinkModal} from './SocialLinkModal';
 export {default as ComingSoon} from './ComingSoon';
+export {default as PostCarousel} from './PostCarousel';
 export {default as TaggDatePicker} from './TaggDatePicker';
 export * from './post';
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