From 5de44211bbadb451b5951eb3f77658d9bab42bc5 Mon Sep 17 00:00:00 2001
From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>
Date: Mon, 7 Dec 2020 15:27:27 -0800
Subject: [TMA - 431] Make socials browsable (#134)

* Open socials apart from twitter on browser

* Revert "Open socials apart from twitter on browser"

This reverts commit 5b6626811ab7cf9a944b22a1d1d5c4047fe47c64.

* Open socials apart from twitter on browser

* Fixed

* make twitter round

* Make some more placeholders browsable

Co-authored-by: Ivan Chen <ivan@tagg.id>
---
 src/components/taggs/SocialMediaInfo.tsx | 19 +++++++++++++++++--
 src/components/taggs/TaggPost.tsx        |  4 +++-
 src/components/taggs/TaggPostFooter.tsx  |  9 +++++++--
 src/components/taggs/TwitterTaggPost.tsx | 15 +++++++--------
 src/constants/constants.ts               |  5 +++++
 src/screens/profile/SocialMediaTaggs.tsx |  7 ++++++-
 src/utils/common.ts                      | 12 +++++++++++-
 7 files changed, 56 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/components/taggs/SocialMediaInfo.tsx b/src/components/taggs/SocialMediaInfo.tsx
index a7ed6fe6..c25d0297 100644
--- a/src/components/taggs/SocialMediaInfo.tsx
+++ b/src/components/taggs/SocialMediaInfo.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {SocialIcon} from '..';
+import {handleOpenSocialUrlOnBrowser} from '../../utils';
 
 interface SocialMediaInfoProps {
   fullname: string;
@@ -16,14 +17,27 @@ const SocialMediaInfo: React.FC<SocialMediaInfoProps> = ({
   return (
     <View style={styles.container}>
       {handle && type !== 'Facebook' ? (
-        <Text style={styles.handle}> @{handle} </Text>
+        <Text
+          style={styles.handle}
+          onPress={() => {
+            handleOpenSocialUrlOnBrowser(handle, type);
+          }}>
+          {' '}
+          @{handle}{' '}
+        </Text>
       ) : (
         <></>
       )}
       <View style={styles.row}>
         <View />
         <SocialIcon style={styles.icon} social={type} />
-        <Text style={styles.name}>{fullname}</Text>
+        <Text
+          style={styles.name}
+          onPress={() => {
+            handleOpenSocialUrlOnBrowser(handle, type);
+          }}>
+          {fullname}
+        </Text>
       </View>
     </View>
   );
@@ -47,6 +61,7 @@ const styles = StyleSheet.create({
   icon: {
     width: 20,
     height: 20,
+    borderRadius: 20,
   },
   row: {
     flexDirection: 'row',
diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx
index f587506f..a7f851a5 100644
--- a/src/components/taggs/TaggPost.tsx
+++ b/src/components/taggs/TaggPost.tsx
@@ -8,8 +8,9 @@ import Hyperlink from 'react-native-hyperlink';
 
 interface TaggPostProps {
   post: SimplePostType;
+  social: string;
 }
-const TaggPost: React.FC<TaggPostProps> = ({post}) => {
+const TaggPost: React.FC<TaggPostProps> = ({post, social}) => {
   if (post.media_type === 'photo') {
     // Post with image and footer that shows caption
     return (
@@ -32,6 +33,7 @@ const TaggPost: React.FC<TaggPostProps> = ({post}) => {
           handle={post.username}
           caption={post.caption || ''}
           timestamp={post.timestamp}
+          social={social}
         />
       </View>
     );
diff --git a/src/components/taggs/TaggPostFooter.tsx b/src/components/taggs/TaggPostFooter.tsx
index 8371a847..ae9d889d 100644
--- a/src/components/taggs/TaggPostFooter.tsx
+++ b/src/components/taggs/TaggPostFooter.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {Linking, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
+import {handleOpenSocialUrlOnBrowser} from '../../utils';
 import {DateLabel} from '../common';
 
 interface TaggPostFooterProps {
@@ -8,12 +9,14 @@ interface TaggPostFooterProps {
   handle?: string;
   caption: string;
   timestamp: string;
+  social: string;
 }
 const TaggPostFooter: React.FC<TaggPostFooterProps> = ({
   likes,
   handle,
   caption,
   timestamp,
+  social,
 }) => {
   const handleText = handle ? handle : '';
   return (
@@ -21,7 +24,9 @@ const TaggPostFooter: React.FC<TaggPostFooterProps> = ({
       <View style={styles.container}>
         {likes ? <Text style={styles.likeText}>{likes} likes</Text> : <></>}
         <View style={styles.captionContainer}>
-          <Text style={styles.handleText}>
+          <Text
+            style={styles.handleText}
+            onPress={() => handleOpenSocialUrlOnBrowser(handleText, social)}>
             {handleText}
             <Text style={styles.captionText}> {caption}</Text>
           </Text>
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index fb4cbd0f..c971a82c 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -3,9 +3,13 @@ import {Image, Linking, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import Hyperlink from 'react-native-hyperlink';
 import LinearGradient from 'react-native-linear-gradient';
-import {AVATAR_DIM, TAGGS_GRADIENT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {
+  AVATAR_DIM,
+  TAGGS_GRADIENT,
+  TAGG_TEXT_LIGHT_BLUE,
+} from '../../constants';
 import {TwitterPostType} from '../../types';
-import {SCREEN_WIDTH} from '../../utils';
+import {handleOpenSocialUrlOnBrowser, SCREEN_WIDTH} from '../../utils';
 import {DateLabel, PostCarousel} from '../common';
 
 interface TwitterTaggPostProps {
@@ -16,11 +20,6 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
   ownerHandle,
   post,
 }) => {
-  const openTwitterProfileLink = (handle?: string) => {
-    if (handle) {
-      Linking.openURL(`https://twitter.com/${handle}`);
-    }
-  };
   return (
     <View style={styles.mainContainer}>
       {/* Retweeted? */}
@@ -41,7 +40,7 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
         />
         <Text
           style={styles.headerText}
-          onPress={() => openTwitterProfileLink(post.handle)}>
+          onPress={() => handleOpenSocialUrlOnBrowser(post.handle, 'Twitter')}>
           @{post.handle}
         </Text>
       </View>
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 4b76a1e0..570018b2 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -94,3 +94,8 @@ export const defaultMoments: Array<string> = [
   'Creativity',
   'Activity',
 ];
+
+export const BROWSABLE_SOCIAL_URLS: Record<string, string> = {
+  Instagram: 'https://instagram.com/',
+  Twitter: 'https://twitter.com/',
+};
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 5634c251..b058e38d 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -82,6 +82,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
       colors={[AVATAR_GRADIENT.start, AVATAR_GRADIENT.end]}>
       <StatusBar barStyle={'light-content'} />
       {/* Cropping the scroll view to mimic the presence of a header while preserving the gradient background */}
+
       {accountData?.posts && accountData.posts.length > 0 ? (
         <View
           // we want a slightly bigger header here for the avatar image
@@ -104,7 +105,11 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
                   post={post as TwitterPostType}
                 />
               ) : (
-                <TaggPost key={index} post={post as SimplePostType} />
+                <TaggPost
+                  key={index}
+                  post={post as SimplePostType}
+                  social={socialMediaType}
+                />
               ),
             )}
           </ScrollView>
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 9e74ca33..ae83ad9c 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,4 +1,5 @@
-import {TOGGLE_BUTTON_TYPE} from '../constants';
+import {Linking} from 'react-native';
+import {BROWSABLE_SOCIAL_URLS, TOGGLE_BUTTON_TYPE} from '../constants';
 
 export const getToggleButtonText: (
   button_type: string,
@@ -13,3 +14,12 @@ export const getToggleButtonText: (
       return null;
   }
 };
+
+export const handleOpenSocialUrlOnBrowser = (
+  handle: string | undefined,
+  social: string,
+) => {
+  if (handle && social in BROWSABLE_SOCIAL_URLS) {
+    Linking.openURL(BROWSABLE_SOCIAL_URLS[social] + `${handle}/`);
+  }
+};
-- 
cgit v1.2.3-70-g09d2