[TMA-186] Instagram Taggs - Frontend (#45)

* Renamed Moments(Bar) to Taggs(Bar)

* created initial navigation and empty social media taggs screen

* made more progress for the header styling

* Finished social media taggs screen, organized code structure

* linted stuff D:

* moved bar height utility function to utils

* moved color constants to constants

* moved avatar title

* updated comments for social media taggs

* NOW the file is there

16 files changed, 304 insertions, 54 deletions

diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
new file mode 100644
index 00000000..b6d95bd8
--- /dev/null
+++ b/src/components/common/AvatarTitle.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Image, StyleSheet} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT } from '../../constants';
+import {AuthContext} from '../../routes/authentication';
+
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const AvatarTitle: React.FC = () => {
+  const {avatar} = React.useContext(AuthContext);
+  return (
+    <LinearGradient
+      colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+      useAngle={true}
+      angle={154.72}
+      angleCenter={{x: 0.5, y: 0.5}}
+      style={[styles.gradient]}>
+      <Image
+        style={styles.avatar}
+        source={
+          avatar
+            ? {uri: avatar}
+            : require('../../assets/images/avatar-placeholder.png')
+        }
+      />
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradient: {
+    width: AVATAR_GRADIENT_DIM,
+    height: AVATAR_GRADIENT_DIM,
+    borderRadius: AVATAR_GRADIENT_DIM / 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  avatar: {
+    width: AVATAR_DIM,
+    height: AVATAR_DIM,
+    borderRadius: AVATAR_DIM / 2,
+  },
+});
+
+export default AvatarTitle;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index c9c4f27a..4a226c8f 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -1,9 +1,10 @@
+export {default as AvatarTitle} from './AvatarTitle';
 export {default as CenteredView} from './CenteredView';
 export {default as OverlayView} from './OverlayView';
 export {default as RadioCheckbox} from './RadioCheckbox';
 export {default as NavigationIcon} from './NavigationIcon';
 export {default as GradientBackground} from './GradientBackground';
-export {default as Post} from './post';
 export {default as SocialIcon} from './SocialIcon';
 export {default as TabsGradient} from './TabsGradient';
 export {default as RecentSearches} from '../search/RecentSearches';
+export * from './post';
diff --git a/src/components/common/post/Post.tsx b/src/components/common/post/Post.tsx
index e5f68917..9fa167f2 100644
--- a/src/components/common/post/Post.tsx
+++ b/src/components/common/post/Post.tsx
@@ -7,14 +7,12 @@ import {SCREEN_WIDTH} from '../../../utils';
 interface PostProps {
   post: PostType;
 }
-const Post: React.FC<PostProps> = ({post: {owner, instagram, social}}) => {
+const Post: React.FC<PostProps> = ({post: {owner, social, data}}) => {
   return (
     <>
-      <PostHeader post={instagram} owner={owner} social={social} />
+      <PostHeader post={data} owner={owner} social={social} />
       <View style={styles.image}>
-        {instagram && (
-          <Image style={styles.image} source={{uri: instagram.media_url}} />
-        )}
+        {data && <Image style={styles.image} source={{uri: data.media_url}} />}
       </View>
     </>
   );
diff --git a/src/components/common/post/index.ts b/src/components/common/post/index.ts
index 033f8a8d..358a59d5 100644
--- a/src/components/common/post/index.ts
+++ b/src/components/common/post/index.ts
@@ -1 +1 @@
-export {default} from './Post';
+export {default as Post} from './Post';
diff --git a/src/components/index.ts b/src/components/index.ts
index 77ba0f67..1b726051 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,3 +2,4 @@ export * from './common';
 export * from './onboarding';
 export * from './profile';
 export * from './search';
+export * from './taggs';
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 49cc2c35..206fd9e4 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -6,7 +6,7 @@ import {UserType} from '../../types';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
 import ProfileBody from './ProfileBody';
-import MomentsBar from './MomentsBar';
+import TaggsBar from '../taggs/TaggsBar';
 import Feed from './Feed';
 
 interface ContentProps {
@@ -30,7 +30,7 @@ const Content: React.FC<ContentProps> = ({y, user}) => {
         <ProfileHeader />
       </ProfileCutout>
       <ProfileBody {...{onLayout}} />
-      <MomentsBar {...{y, profileBodyHeight}} />
+      <TaggsBar {...{y, profileBodyHeight}} />
       <Feed {...{user}} />
     </Animated.ScrollView>
   );
diff --git a/src/components/profile/Feed.tsx b/src/components/profile/Feed.tsx
index a10d8d6d..3353d25b 100644
--- a/src/components/profile/Feed.tsx
+++ b/src/components/profile/Feed.tsx
@@ -12,8 +12,9 @@ const Feed: React.FC<FeedProps> = ({user}) => {
   for (let i = 0; i < 10; i++) {
     const testPost: PostType = {
       owner: user,
-      instagram: instaPosts[i],
       social: 'Instagram',
+      socialHandle: 'igHandle',
+      data: instaPosts[i],
     };
     posts.push(testPost);
   }
diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx
deleted file mode 100644
index eaf43fea..00000000
--- a/src/components/profile/Moment.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import {View, StyleSheet, ViewProps} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-
-interface MomentProps extends ViewProps {}
-const Moment: React.FC<MomentProps> = ({style}) => {
-  return (
-    <LinearGradient
-      colors={['#9F00FF', '#27EAE9']}
-      useAngle={true}
-      angle={154.72}
-      angleCenter={{x: 0.5, y: 0.5}}
-      style={[styles.gradient, style]}>
-      <View style={styles.image} />
-    </LinearGradient>
-  );
-};
-
-const styles = StyleSheet.create({
-  gradient: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  image: {
-    width: 72,
-    height: 72,
-    borderRadius: 37.5,
-    backgroundColor: 'pink',
-  },
-});
-
-export default Moment;
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index 2052ee5b..e0ca5742 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -1,7 +1,6 @@
 export {default as Cover} from './Cover';
 export {default as Content} from './Content';
 export {default as ProfileCutout} from './ProfileCutout';
-export {default as MomentsBar} from './MomentsBar';
 export {default as ProfileBody} from './ProfileBody';
 export {default as ProfileHeader} from './ProfileHeader';
 export {default as Feed} from './Feed';
diff --git a/src/components/taggs/SocialMediaInfo.tsx b/src/components/taggs/SocialMediaInfo.tsx
new file mode 100644
index 00000000..0e93660d
--- /dev/null
+++ b/src/components/taggs/SocialMediaInfo.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {SocialIcon} from '..';
+
+interface SocialMediaInfoProps {
+  fullname: string;
+  type: string;
+  handle: string;
+}
+
+const SocialMediaInfo: React.FC<SocialMediaInfoProps> = ({
+  fullname,
+  type,
+  handle,
+}) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.handle}> @{handle} </Text>
+      <View style={styles.row}>
+        <View />
+        <SocialIcon style={styles.icon} social={type} />
+        <Text style={styles.name}>{fullname}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingBottom: 40,
+  },
+  handle: {
+    color: 'white',
+    fontSize: 12,
+  },
+  name: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 20,
+    paddingLeft: 5,
+  },
+  icon: {
+    width: 20,
+    height: 20,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 10,
+  },
+});
+
+export default SocialMediaInfo;
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
new file mode 100644
index 00000000..9a5ec1e2
--- /dev/null
+++ b/src/components/taggs/Tagg.tsx
@@ -0,0 +1,47 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { TAGGS_GRADIENT } from '../../constants';
+
+interface TaggProps extends ViewProps {}
+
+const Tagg: React.FC<TaggProps> = ({style}) => {
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity
+      onPress={() =>
+        navigation.navigate('SocialMediaTaggs', {
+          socialMediaType: 'Instagram',
+        })
+      }>
+      <LinearGradient
+        colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+        useAngle={true}
+        angle={154.72}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={[styles.gradient, style]}>
+        <View style={styles.image} />
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradient: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: 72,
+    height: 72,
+    borderRadius: 37.5,
+    backgroundColor: 'pink',
+  },
+});
+
+export default Tagg;
diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx
new file mode 100644
index 00000000..73f15268
--- /dev/null
+++ b/src/components/taggs/TaggPost.tsx
@@ -0,0 +1,39 @@
+import moment from 'moment';
+import React from 'react';
+import {Image, StyleSheet, View} from 'react-native';
+import {PostType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+import TaggPostFooter from './TaggPostFooter';
+
+interface TaggPostProps {
+  post: PostType;
+}
+const TaggPost: React.FC<TaggPostProps> = ({post: {socialHandle, data}}) => {
+  const parsedDate = moment(data?.timestamp || '');
+  const date = parsedDate.isValid() ? parsedDate.format('MMM d') : '';
+
+  return (
+    <>
+      <View style={styles.image}>
+        {data && <Image style={styles.image} source={{uri: data.media_url}} />}
+      </View>
+      <TaggPostFooter
+        // we currently don't have a way to retreive num of likes information
+        likes={109}
+        handle={socialHandle}
+        caption={data?.caption || ''}
+        date={date}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
+    backgroundColor: '#eee',
+  },
+});
+
+export default TaggPost;
diff --git a/src/components/taggs/TaggPostFooter.tsx b/src/components/taggs/TaggPostFooter.tsx
new file mode 100644
index 00000000..024670a8
--- /dev/null
+++ b/src/components/taggs/TaggPostFooter.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+
+interface TaggPostFooterProps {
+  likes: number;
+  handle: string;
+  caption: string;
+  date: string;
+}
+const TaggPostFooter: React.FC<TaggPostFooterProps> = ({
+  likes,
+  handle,
+  caption,
+  date,
+}) => {
+  return (
+    <View>
+      <View style={styles.container}>
+        <Text style={styles.likeText}>{likes} likes</Text>
+        <View style={styles.captionContainer}>
+          <Text style={styles.handleText}>
+            {handle}
+            <Text style={styles.captionText}> {caption}</Text>
+          </Text>
+        </View>
+        <Text style={styles.dateText}>{date}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    padding: 10,
+    paddingBottom: '10%',
+  },
+  captionContainer: {
+    paddingVertical: 10,
+  },
+  likeText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  handleText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#8FA9C2',
+  },
+  captionText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: 'white',
+    flexWrap: 'wrap',
+  },
+  dateText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#8FA9C2',
+  },
+});
+
+export default TaggPostFooter;
diff --git a/src/components/profile/MomentsBar.tsx b/src/components/taggs/TaggsBar.tsx
index dcc88d89..1022c4fc 100644
--- a/src/components/profile/MomentsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -2,19 +2,19 @@
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
-import Moment from './Moment';
+import Tagg from './Tagg';
 import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
 import {StatusBarHeight} from '../../utils';
 
 const {View, ScrollView, interpolate, Extrapolate} = Animated;
-interface MomentsBarProps {
+interface TaggsBarProps {
   y: Animated.Value<number>;
   profileBodyHeight: number;
 }
-const MomentsBar: React.FC<MomentsBarProps> = ({y, profileBodyHeight}) => {
-  const moments: Array<JSX.Element> = [];
+const TaggsBar: React.FC<TaggsBarProps> = ({y, profileBodyHeight}) => {
+  const taggs: Array<JSX.Element> = [];
   for (let i = 0; i < 10; i++) {
-    moments.push(<Moment key={i} style={styles.moment} />);
+    taggs.push(<Tagg key={i} style={styles.tagg} />);
   }
   const shadowOpacity: Animated.Node<number> = interpolate(y, {
     inputRange: [
@@ -49,7 +49,7 @@ const MomentsBar: React.FC<MomentsBarProps> = ({y, profileBodyHeight}) => {
         showsHorizontalScrollIndicator={false}
         style={{paddingTop, paddingBottom}}
         contentContainerStyle={styles.contentContainer}>
-        {moments}
+        {taggs}
       </ScrollView>
     </View>
   );
@@ -67,9 +67,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 15,
   },
-  moment: {
+  tagg: {
     marginHorizontal: 14,
   },
 });
 
-export default MomentsBar;
+export default TaggsBar;
diff --git a/src/components/taggs/TaggsFeed.tsx b/src/components/taggs/TaggsFeed.tsx
new file mode 100644
index 00000000..3f27e248
--- /dev/null
+++ b/src/components/taggs/TaggsFeed.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {InstagramPostType, UserType} from '../../types';
+import {TaggPost} from './';
+
+interface TaggsFeedProps {
+  user: UserType;
+  socialHandle: string;
+  posts: Array<InstagramPostType>;
+}
+
+const TaggsFeed: React.FC<TaggsFeedProps> = ({user, socialHandle, posts}) => {
+  return (
+    <>
+      {posts?.map((post, index) => (
+        <TaggPost
+          key={index}
+          post={{
+            owner: user,
+            social: 'Instagram',
+            socialHandle: socialHandle,
+            data: post,
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+export default TaggsFeed;
diff --git a/src/components/taggs/index.ts b/src/components/taggs/index.ts
new file mode 100644
index 00000000..1cb0c412
--- /dev/null
+++ b/src/components/taggs/index.ts
@@ -0,0 +1,4 @@
+export {default as TaggsBar} from './TaggsBar';
+export {default as SocialMediaInfo} from './SocialMediaInfo';
+export {default as TaggsFeed} from './TaggsFeed';
+export {default as TaggPost} from './TaggPost';