Refactor StateBadge component (#715)

* refactor: StateBadge refactor with styled-components

#532

* refactor: Remove unused StyleSheet from issue-description component

* test: Update StateBadge tests to match component updates

* refactor: StateBadge color selection refactor for readability

* refactor: Remove "/native" from styled-components import

Author: rkpasia

__tests__/tests/components/StateBadge.js

@@ -21,7 +21,7 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('Open');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.green);
+    expect(wrapper.prop('color')).toEqual(colors.green);
   });
 
   it('correctly renders with closed issue', () => {
@@ -33,7 +33,7 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('Closed');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.red);
+    expect(wrapper.prop('color')).toEqual(colors.red);
   });
 
   it('correctly renders with open pull request', () => {
@@ -45,7 +45,7 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('Open');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.green);
+    expect(wrapper.prop('color')).toEqual(colors.green);
   });
 
   it('correctly renders with closed pull request', () => {
@@ -57,7 +57,7 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('Closed');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.red);
+    expect(wrapper.prop('color')).toEqual(colors.red);
   });
 
   it('correctly renders with merged pull request', () => {
@@ -71,7 +71,7 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('Merged');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.purple);
+    expect(wrapper.prop('color')).toEqual(colors.purple);
   });
 
   it('correctly renders without issue', () => {
@@ -83,7 +83,7 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('Merged');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.purple);
+    expect(wrapper.prop('color')).toEqual(colors.purple);
   });
 
   it('correctly renders with open type', () => {
@@ -95,7 +95,7 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.green);
+    expect(wrapper.prop('color')).toEqual(colors.green);
   });
 
   it('correctly renders with closed type', () => {
@@ -107,7 +107,7 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.red);
+    expect(wrapper.prop('color')).toEqual(colors.red);
   });
 
   it('correctly renders with closed type', () => {
@@ -119,7 +119,7 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.purple);
+    expect(wrapper.prop('color')).toEqual(colors.purple);
   });
 
   it('correctly renders with custom text', () => {
@@ -133,6 +133,6 @@ describe('<StateBadge />', () => {
         .childAt(0)
         .text()
     ).toEqual('test text');
-    expect(wrapper.prop('style')[2].backgroundColor).toEqual(colors.green);
+    expect(wrapper.prop('color')).toEqual(colors.green);
   });
 });

src/components/issue-description.component.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { StyleSheet, ActivityIndicator } from 'react-native';
+import { ActivityIndicator } from 'react-native';
 import { ListItem } from 'react-native-elements';
 import Parse from 'parse-diff';
 import styled from 'styled-components';
@@ -15,13 +15,6 @@ import { translate, relativeTimeToNow } from 'utils';
 import { colors, fonts, normalize } from 'config';
 import { v3 } from 'api';
 
-const styles = StyleSheet.create({
-  badge: {
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-  },
-});
-
 const HeaderContainer = styled.View`
   flex-direction: row;
   align-items: center;
@@ -164,7 +157,6 @@ export class IssueDescription extends Component {
             (issue.pull_request &&
               !isPendingCheckMerge && (
                 <StateBadge
-                  style={styles.badge}
                   issue={issue}
                   isMerged={isMerged && issue.pull_request}
                   locale={locale}

src/components/state-badge.component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import styled from 'styled-components';
 
 import { colors, fonts, normalize } from 'config';
 import { translate } from 'utils';
@@ -13,28 +13,17 @@ type Props = {
   locale: string,
 };
 
-const styles = StyleSheet.create({
-  badge: {
-    padding: 12,
-    paddingTop: 3,
-    paddingBottom: 3,
-    borderRadius: 20,
-  },
-  mergedIssue: {
-    backgroundColor: colors.purple,
-  },
-  openIssue: {
-    backgroundColor: colors.green,
-  },
-  closedIssue: {
-    backgroundColor: colors.red,
-  },
-  text: {
-    fontSize: normalize(12),
-    ...fonts.fontPrimarySemiBold,
-    color: colors.white,
-  },
-});
+const Badge = styled.View`
+  padding: 3px 12px;
+  border-radius: 20px;
+  background-color: ${props => props.color};
+`;
+
+const BadgeText = styled.Text`
+  color: ${colors.white};
+  font-size: ${normalize(12)};
+  ${fonts.fontPrimarySemiBold};
+`;
 
 export const StateBadge = ({
   issue,
@@ -58,19 +47,18 @@ export const StateBadge = ({
     issueText = translate('issue.main.states.closed', locale);
   }
 
-  let issueStyle = {};
-
-  if (issueState === 'merged') {
-    issueStyle = styles.mergedIssue;
-  } else if (issueState === 'open') {
-    issueStyle = styles.openIssue;
-  } else if (issueState === 'closed') {
-    issueStyle = styles.closedIssue;
-  }
+  const stateColor = {
+    merged: colors.purple,
+    open: colors.green,
+    closed: colors.red,
+  };
+  const issueStateColor = stateColor[issueState]
+    ? stateColor[issueState]
+    : colors.gray;
 
   return (
-    <View style={[styles.badge, style, issueStyle]}>
-      <Text style={styles.text}>{issueText}</Text>
-    </View>
+    <Badge color={issueStateColor} style={style}>
+      <BadgeText>{issueText}</BadgeText>
+    </Badge>
   );
 };