[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

5 files changed, 4 insertions, 114 deletions

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/MomentsBar.tsx b/src/components/profile/MomentsBar.tsx
deleted file mode 100644
index dcc88d89..00000000
--- a/src/components/profile/MomentsBar.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// @refresh react
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import Animated from 'react-native-reanimated';
-import Moment from './Moment';
-import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
-import {StatusBarHeight} from '../../utils';
-
-const {View, ScrollView, interpolate, Extrapolate} = Animated;
-interface MomentsBarProps {
-  y: Animated.Value<number>;
-  profileBodyHeight: number;
-}
-const MomentsBar: React.FC<MomentsBarProps> = ({y, profileBodyHeight}) => {
-  const moments: Array<JSX.Element> = [];
-  for (let i = 0; i < 10; i++) {
-    moments.push(<Moment key={i} style={styles.moment} />);
-  }
-  const shadowOpacity: Animated.Node<number> = interpolate(y, {
-    inputRange: [
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20,
-    ],
-    outputRange: [0, 0.2],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const paddingTop: Animated.Node<number> = interpolate(y, {
-    inputRange: [
-      0,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
-    ],
-    outputRange: [20, 20, StatusBarHeight],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const paddingBottom: Animated.Node<number> = interpolate(y, {
-    inputRange: [
-      0,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
-    ],
-    outputRange: [30, 30, 15],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  return (
-    <View style={[styles.container, {shadowOpacity}]}>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        style={{paddingTop, paddingBottom}}
-        contentContainerStyle={styles.contentContainer}>
-        {moments}
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-    shadowColor: '#000',
-    shadowRadius: 10,
-    shadowOffset: {width: 0, height: 2},
-    zIndex: 1,
-  },
-  contentContainer: {
-    alignItems: 'center',
-    paddingHorizontal: 15,
-  },
-  moment: {
-    marginHorizontal: 14,
-  },
-});
-
-export default MomentsBar;
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';