[TMA-19*] Abstracted out Social Icon logic (#32)

* Basic mostly functional implementation

Need to figure out why API is being called so much

* Hey it works now! Without a million API calls!

* Fixed bug where app would crash upon login

Also updated property names to be more appropriate

* Added post datetime and social icon

* Updated error message

* Fixed typecheck errors

I don't know that these fixes are the best since I don't think they're generalizable

* Formatted datetime in PostHeader

* Abstracted out social icon switching logic

* Basic mostly functional implementation

Need to figure out why API is being called so much

* Hey it works now! Without a million API calls!

* Fixed bug where app would crash upon login

Also updated property names to be more appropriate

* Added post datetime and social icon

* Updated error message

* Fixed typecheck errors

I don't know that these fixes are the best since I don't think they're generalizable

* Abstracted out social icon switching logic

4 files changed, 55 insertions, 44 deletions

diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
new file mode 100644
index 00000000..5c1098af
--- /dev/null
+++ b/src/components/common/SocialIcon.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import {Image} from 'react-native';
+
+interface SocialIconProps {
+  social: string;
+  style: object;
+}
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const SocialIcon: React.FC<SocialIconProps> = ({
+  social: social,
+  style: style,
+}) => {
+  switch (social) {
+    case 'Instagram':
+      var icon = require('../../assets/images/instagram-icon.png');
+      break;
+    case 'Facebook':
+      var icon = require('../../assets/images/facebook-icon.png');
+      break;
+    case 'Twitter':
+      var icon = require('../../assets/images/twitter-icon.png');
+      break;
+    case 'Twitch':
+      var icon = require('../../assets/images/twitch-icon.png');
+      break;
+    case 'Pinterest':
+      var icon = require('../../assets/images/pinterest-icon.png');
+      break;
+    case 'Whatsapp':
+      var icon = require('../../assets/images/whatsapp-icon.png');
+      break;
+    case 'Linkedin':
+      var icon = require('../../assets/images/linkedin-icon.png');
+      break;
+    case 'Snapchat':
+      var icon = require('../../assets/images/snapchat-icon.png');
+      break;
+    case 'Youtube':
+      var icon = require('../../assets/images/youtube-icon.png');
+      break;
+    default:
+      var icon = require('../../assets/images/logo.png');
+      break;
+  }
+  return <Image style={style} source={icon} />;
+};
+
+export default SocialIcon;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index cb8b9b6a..8d0ef778 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -4,3 +4,4 @@ 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';
diff --git a/src/components/common/post/PostHeader.tsx b/src/components/common/post/PostHeader.tsx
index a07efd10..0e9c708b 100644
--- a/src/components/common/post/PostHeader.tsx
+++ b/src/components/common/post/PostHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {UserType, InstagramPostType} from '../../../types';
 import {View, StyleSheet, Image, Text} from 'react-native';
 import {AuthContext} from '../../../routes/authentication';
+import SocialIcon from '../SocialIcon';
 import moment from 'moment';
 
 const AVATAR_DIM = 35;
@@ -16,38 +17,6 @@ const PostHeader: React.FC<PostHeaderProps> = ({
   social,
 }) => {
   const {avatar} = React.useContext(AuthContext);
-  switch (social) {
-    case 'Instagram':
-      var icon = require('../../../assets/images/instagram-icon.png');
-      break;
-    case 'Facebook':
-      var icon = require('../../../assets/images/facebook-icon.png');
-      break;
-    case 'Twitter':
-      var icon = require('../../../assets/images/twitter-icon.png');
-      break;
-    case 'Twitch':
-      var icon = require('../../../assets/images/twitch-icon.png');
-      break;
-    case 'Pinterest':
-      var icon = require('../../../assets/images/pinterest-icon.png');
-      break;
-    case 'Whatsapp':
-      var icon = require('../../../assets/images/whatsapp-icon.png');
-      break;
-    case 'Linkedin':
-      var icon = require('../../../assets/images/linkedin-icon.png');
-      break;
-    case 'Snapchat':
-      var icon = require('../../../assets/images/snapchat-icon.png');
-      break;
-    case 'Youtube':
-      var icon = require('../../../assets/images/youtube-icon.png');
-      break;
-    default:
-      var icon = require('../../../assets/images/logo.png');
-      break;
-  }
 
   return (
     <View style={styles.container}>
@@ -61,7 +30,7 @@ const PostHeader: React.FC<PostHeaderProps> = ({
           }
         />
         <Text style={styles.username}>{username}</Text>
-        {post && <Image style={styles.icon} source={icon} />}
+        {post && <SocialIcon style={styles.icon} social={social} />}
       </View>
       {post && (
         <Text style={styles.timestamp}>
diff --git a/src/components/onboarding/SocialMediaLinker.tsx b/src/components/onboarding/SocialMediaLinker.tsx
index f1da8186..fc823979 100644
--- a/src/components/onboarding/SocialMediaLinker.tsx
+++ b/src/components/onboarding/SocialMediaLinker.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import {LinkerType} from 'src/types';
 import {SOCIAL_FONT_COLORS} from '../../constants/constants';
+import SocialIcon from '../common/SocialIcon';
 
 interface SocialMediaLinkerProps extends TouchableOpacityProps {
   social: LinkerType;
@@ -29,43 +30,33 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
 
   switch (label) {
     case 'Instagram':
-      var icon = require('../../assets/images/instagram-icon.png');
       var font_color = SOCIAL_FONT_COLORS.INSTAGRAM;
       break;
     case 'Facebook':
-      var icon = require('../../assets/images/facebook-icon.png');
       var font_color = SOCIAL_FONT_COLORS.FACEBOOK;
       break;
     case 'Twitter':
-      var icon = require('../../assets/images/twitter-icon.png');
       var font_color = SOCIAL_FONT_COLORS.TWITTER;
       break;
     case 'Twitch':
-      var icon = require('../../assets/images/twitch-icon.png');
       var font_color = SOCIAL_FONT_COLORS.TWITCH;
       break;
     case 'Pinterest':
-      var icon = require('../../assets/images/pinterest-icon.png');
       var font_color = SOCIAL_FONT_COLORS.PINTEREST;
       break;
     case 'Whatsapp':
-      var icon = require('../../assets/images/whatsapp-icon.png');
       var font_color = SOCIAL_FONT_COLORS.WHATSAPP;
       break;
     case 'Linkedin':
-      var icon = require('../../assets/images/linkedin-icon.png');
       var font_color = SOCIAL_FONT_COLORS.LINKEDIN;
       break;
     case 'Snapchat':
-      var icon = require('../../assets/images/snapchat-icon.png');
       var font_color = SOCIAL_FONT_COLORS.SNAPCHAT;
       break;
     case 'Youtube':
-      var icon = require('../../assets/images/youtube-icon.png');
       var font_color = SOCIAL_FONT_COLORS.YOUTUBE;
       break;
     default:
-      var icon = require('../../assets/images/logo.png');
       var font_color = '#fff';
   }
 
@@ -74,7 +65,7 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
       activeOpacity={0.7}
       onPress={handlePress}
       style={styles.container}>
-      <Image source={icon} style={styles.icon} />
+      <SocialIcon social={label} style={styles.icon} />
       <Text style={[styles.label, {color: font_color}]}>{label}</Text>
       {state.authenticated && (
         <Image