[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, 25 insertions, 18 deletions

diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index c82a310e..5a2e638e 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -3,9 +3,15 @@ import React from 'react';
 import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {AVATAR_GRADIENT} from '../../constants';
-import {SocialMediaInfo, TabsGradient, TaggsFeed} from '../../components';
+import {
+  SocialMediaInfo,
+  TabsGradient,
+  TaggPost,
+  TwitterTaggPost,
+} from '../../components';
 import {AuthContext, ProfileStackParams, ProfileContext} from '../../routes';
 import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';
+import {SimplePostType, TwitterPostType} from '../../types';
 
 type SocialMediaTaggsRouteProp = RouteProp<
   ProfileStackParams,
@@ -28,24 +34,17 @@ interface SocialMediaTaggsProps {
  *  + dark background
  */
 const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({route}) => {
-  const {isProfileView} = route.params;
+  const {socialMediaType, isProfileView} = route.params;
   const context = isProfileView
     ? React.useContext(ProfileContext)
     : React.useContext(AuthContext);
   const {
-    user,
     profile: {name},
+    socialAccounts,
   } = context;
 
-  // TODO: We should use the passed-in socialmedia type/handle instead.
-  //        Currently don't have an intuitive way of doing so, for now,
-  //        just grabbing from user's AuthContext.
-  // const {socialMediaType, socialMediaHandle} = route.params;
-  const {instaPosts} = context;
-  const socialMediaType = 'Instagram';
-  const socialMediaHandle =
-    instaPosts ? instaPosts[0].username : '_';
-
+  const handle = socialAccounts[socialMediaType].handle;
+  const posts = socialAccounts[socialMediaType].posts || [];
   const headerHeight = headerBarHeightWithImage();
 
   return (
@@ -65,13 +64,21 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({route}) => {
           <SocialMediaInfo
             fullname={name}
             type={socialMediaType}
-            handle={socialMediaHandle}
-          />
-          <TaggsFeed
-            user={user}
-            socialHandle={socialMediaHandle}
-            posts={instaPosts}
+            handle={handle}
           />
+          {(posts as Array<
+            SimplePostType | TwitterPostType
+          >).map((post, index) =>
+            socialMediaType === 'Twitter' ? (
+              <TwitterTaggPost
+                key={index}
+                ownerHandle={handle || '_'}
+                post={post as TwitterPostType}
+              />
+            ) : (
+              <TaggPost key={index} post={post as SimplePostType} />
+            ),
+          )}
         </ScrollView>
         <TabsGradient />
       </View>