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

4 files changed, 34 insertions, 13 deletions

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>