From 2a300bd5e09e44832699a0bcd449de5a35368706 Mon Sep 17 00:00:00 2001 From: Justin Shillingford Date: Mon, 17 Aug 2020 11:17:31 -0400 Subject: [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 --- src/components/common/SocialIcon.tsx | 50 +++++++++++++++++++++++++ src/components/common/index.ts | 1 + src/components/common/post/PostHeader.tsx | 35 +---------------- src/components/onboarding/SocialMediaLinker.tsx | 13 +------ 4 files changed, 55 insertions(+), 44 deletions(-) create mode 100644 src/components/common/SocialIcon.tsx (limited to 'src') 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 of the icon for a specific social media platform. + */ +const SocialIcon: React.FC = ({ + 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 ; +}; + +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 = ({ 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 ( @@ -61,7 +30,7 @@ const PostHeader: React.FC = ({ } /> {username} - {post && } + {post && } {post && ( 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 = ({ 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 = ({ activeOpacity={0.7} onPress={handlePress} style={styles.container}> - + {label} {state.authenticated && (