[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>

9 files changed, 90 insertions, 16 deletions

diff --git a/package.json b/package.json
index 72ff434d..80f146c9 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react-native-reanimated": "^1.9.0",
     "react-native-safe-area-context": "^3.0.6",
     "react-native-screens": "^2.9.0",
+    "react-native-snap-carousel": "^3.9.1",
     "react-native-svg": "^12.1.0",
     "react-native-vector-icons": "^7.0.0",
     "react-promise-tracker": "^2.1.0",
@@ -47,6 +48,7 @@
     "@types/react-native": "^0.62.0",
     "@types/react-native-datepicker": "^1.7.0",
     "@types/react-test-renderer": "16.9.2",
+    "@types/react-native-snap-carousel": "^3.8.2",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
     "babel-jest": "^24.9.0",
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'}
diff --git a/src/routes/authentication/AuthProvider.tsx b/src/routes/authentication/AuthProvider.tsx
index 68182ee3..55a6f3ad 100644
--- a/src/routes/authentication/AuthProvider.tsx
+++ b/src/routes/authentication/AuthProvider.tsx
@@ -169,7 +169,7 @@ const AuthProvider: React.FC = ({children}) => {
         loadSocialPosts(userId, social).then((accountData) => {
           socialAccounts[social] = accountData;
           setSocialAccounts(socialAccounts);
-          console.log('Updated posts data', social);
+          console.log('Refreshed posts data:', social);
         });
       }
       setSocialsNeedUpdate([]);
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 2a319326..4b63b843 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -1,5 +1,5 @@
 import {RouteProp} from '@react-navigation/native';
-import React, {useEffect, useState} from 'react';
+import React from 'react';
 import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {
@@ -10,8 +10,7 @@ import {
 } from '../../components';
 import {AVATAR_GRADIENT} from '../../constants';
 import {AuthContext, ProfileContext, ProfileStackParams} from '../../routes';
-import {loadSocialPosts} from '../../services';
-import {SimplePostType, SocialAccountType, TwitterPostType} from '../../types';
+import {SimplePostType, TwitterPostType} from '../../types';
 import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';
 
 type SocialMediaTaggsRouteProp = RouteProp<
diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts
index a2d53dbb..6e1d1ef5 100644
--- a/src/services/UserProfileService.ts
+++ b/src/services/UserProfileService.ts
@@ -99,6 +99,7 @@ export const loadSocialPosts: (
   const token = await AsyncStorage.getItem('token');
   const endpoint = integratedSocialPostsEndpoints[socialType];
   const accountData: SocialAccountType = {};
+  accountData.posts = [];
   try {
     const response = await fetch(endpoint + `${userId}/`, {
       method: 'GET',
@@ -115,7 +116,7 @@ export const loadSocialPosts: (
       throw 'Unable to fetch posts data from ' + socialType;
     }
   } catch (error) {
-    console.warn(error);
+    console.log(error);
   }
   return accountData;
 };
diff --git a/src/types/types.ts b/src/types/types.ts
index f9929017..97c8ef64 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -30,6 +30,7 @@ interface TwitterReplyType {
   handle: string;
   profile_pic: string;
   text: string;
+  // Not going to display any images here
   timestamp: string;
   permalink: string;
 }
@@ -40,7 +41,7 @@ export interface TwitterPostType {
   profile_pic: string;
   text: string;
   timestamp: string;
-  media_url: string;
+  media_url: string[];
   permalink: string;
   in_reply_to?: TwitterReplyType;
 }
@@ -49,7 +50,7 @@ export interface SimplePostType {
   post_id: string;
   username: string;
   profile_pic: string;
-  media_url: string;
+  media_url: string[];
   media_type: 'text' | 'photo';
   caption: string;
   timestamp: string;