[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

3 files changed, 53 insertions, 33 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}>