[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

1 files changed, 2 insertions, 11 deletions

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