refactor: use styled-components in user-list-item (#601)

* refactor: use styled-components in user-list-item

* Changed BorderBottom prop's name

* fix(style): Fix invalid css prop

Author: simonhoyos

src/components/user-list-item.component.js

@@ -1,65 +1,76 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import {
-  StyleSheet,
-  View,
-  TouchableHighlight,
-  TouchableOpacity,
-  Text,
-  Image,
-} from 'react-native';
+import { View, TouchableHighlight } from 'react-native';
 import { Icon } from 'react-native-elements';
+import styled, { css } from 'styled-components';
 
 import { colors, fonts, normalize } from 'config';
 
-const styles = StyleSheet.create({
-  borderContainer: {
-    borderBottomColor: colors.greyLight,
-    borderBottomWidth: 1,
-  },
-  wrapper: {
-    padding: 10,
-    flexDirection: 'row',
-  },
-  userInfo: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  avatarContainer: {
-    backgroundColor: colors.greyLight,
-    borderRadius: 17,
-    width: 34,
-    height: 34,
-  },
-  avatar: {
-    borderRadius: 17,
-    width: 34,
-    height: 34,
-  },
-  titleSubtitleContainer: {
-    justifyContent: 'center',
-    flex: 1,
-  },
-  title: {
-    color: colors.black,
-    ...fonts.fontPrimary,
-    fontSize: normalize(14),
-    marginLeft: 10,
-  },
-  subtitle: {
-    color: colors.greyDark,
-    fontSize: normalize(10),
-    marginTop: 1,
-    ...fonts.fontPrimarySemiBold,
-    marginLeft: 10,
-  },
-  iconContainer: {
-    flex: 0.15,
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-  },
-});
+const ViewBorderContainer = styled.View`
+  ${props =>
+    props.hasBorderBottom &&
+    css`
+      border-bottom-color: ${colors.greyLight};
+      border-bottom-width: 1;
+    `};
+`;
+const TouchableBorderContainer = ViewBorderContainer.withComponent(
+  TouchableHighlight
+);
+
+const Wrapper = styled.View`
+  padding: 10px;
+  flex-direction: row;
+`;
+
+const TouchableUserInfo = styled.TouchableOpacity`
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+`;
+const ViewUserInfo = TouchableUserInfo.withComponent(View);
+
+const TouchableAvatarContainer = styled.TouchableOpacity`
+  background-color: ${colors.greyLight};
+  border-radius: 17;
+  width: 34;
+  height: 34;
+`;
+const ViewAvatarContainer = TouchableAvatarContainer.withComponent(View);
+
+const Avatar = styled.Image`
+  border-radius: 17;
+  width: 34;
+  height: 34;
+`;
+
+const TitleSubtitleContainer = styled.View`
+  justify-content: center;
+  flex: 1;
+`;
+
+const Title = styled.Text`
+  color: ${colors.black};
+  ${fonts.fontPrimary};
+  font-size: ${normalize(14)};
+  margin-left: 10;
+  ${props => props.titleStyle};
+`;
+
+const Subtitle = styled.Text`
+  color: ${colors.greyDark};
+  font-size: ${normalize(10)};
+  margin-top: 1;
+  ${fonts.fontPrimarySemiBold};
+  margin-left: 10;
+`;
+
+const TouchableIconContainer = styled.TouchableOpacity`
+  flex: 0.15;
+  align-items: flex-end;
+  justify-content: center;
+`;
+const ViewIconContainer = TouchableIconContainer.withComponent(View);
 
 const mapStateToProps = state => ({
   authUser: state.auth.user,
@@ -94,11 +105,17 @@ class UserListItemComponent extends Component {
     } = this.props;
 
     const ContainerComponent =
-      iconAction || onlyImageNavigate ? View : TouchableHighlight;
+      iconAction || onlyImageNavigate
+        ? ViewBorderContainer
+        : TouchableBorderContainer;
     const UserComponent =
-      iconAction && !onlyImageNavigate ? TouchableOpacity : View;
-    const ImageContainerComponent = onlyImageNavigate ? TouchableOpacity : View;
-    const IconComponent = iconAction ? TouchableOpacity : View;
+      iconAction && !onlyImageNavigate ? TouchableUserInfo : ViewUserInfo;
+    const ImageContainerComponent = onlyImageNavigate
+      ? TouchableAvatarContainer
+      : ViewAvatarContainer;
+    const IconComponent = iconAction
+      ? TouchableIconContainer
+      : ViewIconContainer;
 
     const userScreen =
       authUser.login === user.login ? 'AuthProfile' : 'Profile';
@@ -109,54 +126,49 @@ class UserListItemComponent extends Component {
           navigation.navigate(
             user.type === 'User' ? userScreen : 'Organization',
             user.type === 'User' ? { user } : { organization: user }
-          )}
+          )
+        }
         underlayColor={colors.greyLight}
-        style={!noBorderBottom && styles.borderContainer}
+        hasBorderBottom={!noBorderBottom}
       >
-        <View style={styles.wrapper}>
+        <Wrapper>
           <UserComponent
-            style={styles.userInfo}
             onPress={() =>
               navigation.navigate(userScreen, {
                 user,
-              })}
+              })
+            }
           >
             <ImageContainerComponent
-              style={styles.avatarContainer}
               onPress={() =>
                 navigation.navigate(userScreen, {
                   user,
-                })}
+                })
+              }
             >
-              <Image
-                style={styles.avatar}
+              <Avatar
                 source={{
                   uri: user.avatar_url,
                 }}
               />
             </ImageContainerComponent>
 
-            <View style={styles.titleSubtitleContainer}>
-              <Text style={[styles.title, titleStyle && titleStyle]}>
-                {title || user.login}
-              </Text>
+            <TitleSubtitleContainer>
+              <Title titleStyle={titleStyle}>{title || user.login}</Title>
 
-              {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
-            </View>
+              {subtitle && <Subtitle>{subtitle}</Subtitle>}
+            </TitleSubtitleContainer>
           </UserComponent>
 
-          <IconComponent
-            style={styles.iconContainer}
-            onPress={() => iconAction(user.login)}
-          >
+          <IconComponent onPress={() => iconAction(user.login)}>
             <Icon
               color={colors.grey}
               size={icon ? 24 : 28}
               name={icon || 'chevron-right'}
               type={icon && 'octicon'}
             />
           </IconComponent>
-        </View>
+        </Wrapper>
       </ContainerComponent>
     );
   }