Merge remote-tracking branch 'upstream/master' into add-notifications-reducer-tests

jglover · jglover · commit f6f8445622f8 · 2017-10-25T00:19:00.000+10:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 __tests__/**
 testenv.js
+coverage/**
diff --git a/.travis.yml b/.travis.yml
@@ -6,5 +6,5 @@ cache:
 node_js:
   - 7
 script:
-  - yarn run test
+  - yarn run test:coverage
   - yarn run eslint
diff --git a/README.md b/README.md
@@ -40,6 +40,7 @@
 ## Introduction
 
 [![Build Status](https://img.shields.io/travis/gitpoint/git-point.svg?style=flat-square)](https://travis-ci.org/gitpoint/git-point)
+[![Coveralls](https://img.shields.io/coveralls/github/gitpoint/git-point.svg?style=flat-square)](https://coveralls.io/github/gitpoint/git-point)
 [![All Contributors](https://img.shields.io/badge/all_contributors-59-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "prettier": "prettier --write \"**/*.js\"",
     "test": "jest",
     "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls",
     "flow-start": "flow start",
     "flow-stop": "flow stop",
     "flow-status": "flow status",
@@ -106,6 +107,7 @@
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react-native": "1.9.1",
     "concurrently": "^3.5.0",
+    "coveralls": "^3.0.0",
     "cz-conventional-changelog": "^2.0.0",
     "doctoc": "^1.3.0",
     "eslint": "^3.19.0",
diff --git a/src/components/badge.component.js b/src/components/badge.component.js
@@ -12,8 +12,8 @@ type Props = {
 
 const BadgeContainer = styled.View`
   flex: 1;
-  align-items: 'center';
-  justify-content: 'center';
+  align-items: center;
+  justify-content: center;
   border-radius: 18;
   width: 18;
   height: 18;
@@ -24,7 +24,7 @@ const BadgeContainer = styled.View`
 
 const BadgeText = styled.Text`
   ${{ ...fonts.fontPrimaryBold }};
-  background-color: 'transparent';
+  background-color: transparent;
   ${({ largeText }) =>
     `font-size: ${largeText ? normalize(9.5) : normalize(7)};`};
 `;
diff --git a/src/components/entity-info.component.js b/src/components/entity-info.component.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import styled from 'styled-components/native';
 import { ListItem } from 'react-native-elements';
 import Communications from 'react-native-communications';
 
@@ -14,31 +14,18 @@ type Props = {
   navigation: Object,
 };
 
-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,
-  },
-  listTitle: {
+const StyledListItem = styled(ListItem).attrs({
+  titleStyle: {
     color: colors.black,
     ...fonts.fontPrimary,
   },
-  listSubTitle: {
+  subtitleStyle: {
     color: colors.greyDark,
     ...fonts.fontPrimary,
   },
-});
+  underlayColor: props => (props.unknown ? null : colors.greyLight),
+  hideChevron: props => props.unknown,
+})``;
 
 const getBlogLink = url =>
   url.substr(0, 4) === 'http' ? url : `http://${url}`;
@@ -78,73 +65,59 @@ export const EntityInfo = ({ entity, orgs, locale, navigation }: Props) => {
     <SectionList title={translate('common.info', locale)}>
       {!!entity.company &&
         entity.company !== '' && (
-          <ListItem
+          <StyledListItem
             title={translate('common.company', locale)}
-            titleStyle={styles.listTitle}
             leftIcon={{
               name: 'organization',
               color: colors.grey,
               type: 'octicon',
             }}
             subtitle={entity.company}
-            subtitleStyle={styles.listSubTitle}
             onPress={() => navigateToCompany(entity.company, orgs, navigation)}
-            underlayColor={
-              companyInOrgs(entity.company, orgs) ? colors.greyLight : null
-            }
-            hideChevron={!companyInOrgs(entity.company, orgs)}
+            unknown={companyInOrgs(entity.company, orgs)}
           />
         )}
 
       {!!entity.location &&
         entity.location !== '' && (
-          <ListItem
+          <StyledListItem
             title={translate('common.location', locale)}
-            titleStyle={styles.listTitle}
             leftIcon={{
               name: 'location',
               color: colors.grey,
               type: 'octicon',
             }}
             subtitle={entity.location}
-            subtitleStyle={styles.listSubTitle}
             onPress={() => Communications.web(getLocationLink(entity.location))}
-            underlayColor={colors.greyLight}
           />
         )}
 
       {!!entity.email &&
         entity.email !== '' && (
-          <ListItem
+          <StyledListItem
             title={translate('common.email', locale)}
-            titleStyle={styles.listTitle}
             leftIcon={{
               name: 'mail',
               color: colors.grey,
               type: 'octicon',
             }}
             subtitle={entity.email}
-            subtitleStyle={styles.listSubTitle}
             onPress={() =>
               Communications.email([entity.email], null, null, null, null)}
-            underlayColor={colors.greyLight}
           />
         )}
 
       {!!entity.blog &&
         entity.blog !== '' && (
-          <ListItem
+          <StyledListItem
             title={translate('common.website', locale)}
-            titleStyle={styles.listTitle}
             leftIcon={{
               name: 'link',
               color: colors.grey,
               type: 'octicon',
             }}
             subtitle={entity.blog}
-            subtitleStyle={styles.listSubTitle}
             onPress={() => Communications.web(getBlogLink(entity.blog))}
-            underlayColor={colors.greyLight}
           />
         )}
     </SectionList>
diff --git a/src/components/image-zoom.component.js b/src/components/image-zoom.component.js
@@ -1,35 +1,46 @@
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  Image,
-  View,
-  Modal,
-  Dimensions,
-  TouchableOpacity,
-  TouchableHighlight,
-} from 'react-native';
+import { Image, Modal, Dimensions } from 'react-native';
 import { Icon } from 'react-native-elements';
+import styled from 'styled-components/native';
 import PhotoView from 'react-native-photo-view';
 
 import { colors } from 'config';
 
-const styles = StyleSheet.create({
-  touchable: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContainer: {
-    flex: 1,
-    backgroundColor: colors.black,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 30,
-    right: 10,
-  },
-});
+const Touchable = styled.TouchableHighlight`
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalContainer = styled.View`
+  flex: 1;
+  background-color: ${colors.black};
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledPhotoView = styled(PhotoView).attrs({
+  resizeMode: 'contain',
+  minimumZoomScale: 0.5,
+  maximumZoomScale: 3,
+})`
+   width: ${Dimensions.get('window').width}px;
+   height: ${Dimensions.get('window').height}px;
+`;
+
+const CloseButton = styled.TouchableOpacity.attrs({
+  activeOpacity: 0.5,
+})`
+  position: absolute;
+  top: 30px;
+  right: 10px;
+`;
+
+const CloseIcon = styled(Icon).attrs({
+  color: colors.white,
+  size: 28,
+  name: 'x',
+  type: 'octicon',
+})``;
 
 export class ImageZoom extends Component {
   props: {
@@ -53,42 +64,26 @@ export class ImageZoom extends Component {
   }
 
   render() {
-    const window = Dimensions.get('window');
     const { uri, style } = this.props;
 
     if (this.state.imgZoom) {
       return (
         <Modal animationType={'fade'} onRequestClose={() => this.closeModal()}>
-          <View style={styles.modalContainer}>
-            <PhotoView
-              resizeMode={'contain'}
-              onTap={() => this.closeModal()}
-              source={uri}
-              minimumZoomScale={0.5}
-              maximumZoomScale={3}
-              style={{ width: window.width, height: window.height }}
-            />
+          <ModalContainer>
+            <StyledPhotoView onTap={() => this.closeModal()} source={uri} />
 
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={() => this.closeModal()}
-              style={styles.closeButton}
-            >
-              <Icon color={colors.white} size={28} name="x" type="octicon" />
-            </TouchableOpacity>
-          </View>
+            <CloseButton onPress={() => this.closeModal()}>
+              <CloseIcon />
+            </CloseButton>
+          </ModalContainer>
         </Modal>
       );
     }
 
     return (
-      <TouchableHighlight
-        onPress={() => this.openModal()}
-        underlayColor="transparent"
-        style={styles.touchable}
-      >
+      <Touchable onPress={() => this.openModal()} underlayColor="transparent">
         <Image style={style} source={uri} />
-      </TouchableHighlight>
+      </Touchable>
     );
   }
 }
diff --git a/src/components/mention-area.component.js b/src/components/mention-area.component.js
@@ -1,36 +1,34 @@
 import React, { Component } from 'react';
 import fuzzysort from 'fuzzysort';
-import {
-  Text,
-  View,
-  TouchableOpacity,
-  Animated,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
+import styled from 'styled-components/native';
+import { TouchableOpacity, Animated, ScrollView } from 'react-native';
 
 import { animations, fonts, normalize } from 'config';
 
-const styles = StyleSheet.create({
-  suggestionsRowContainer: {
-    padding: 5,
-    flexDirection: 'row',
-    paddingRight: 15,
-    paddingBottom: 15,
-  },
-  userDetailsBox: {
-    flex: 1,
-    margin: 5,
-  },
-  displayNameText: {
-    fontSize: normalize(12),
-    ...fonts.fontPrimary,
-  },
-  realNameText: {
-    fontSize: normalize(12),
-    ...fonts.fontPrimarySemiBold,
-  },
-});
+const StyledAnimatedView = styled(Animated.View)`
+  ${({ style }) => style};
+`;
+
+const SuggestionsRowContainer = styled.View`
+  flex-direction: row;
+  padding-top: 5;
+  padding-left: 5;
+  padding-right: 15;
+  padding-bottom: 15;
+`;
+
+const UserDetailsBox = styled.View`
+  flex: 1;
+  margin-left: 5;
+  margin-right: 5;
+  margin-top: 5;
+  margin-bottom: 5;
+`;
+
+const DisplayNameText = styled.Text`
+  fontsize: ${normalize(12)};
+  ${fonts.fontPrimary};
+`;
 
 export class MentionArea extends Component {
   props: {
@@ -149,11 +147,11 @@ export class MentionArea extends Component {
         key={user}
         onPress={() => this.onSuggestionTap(user, true)}
       >
-        <View style={styles.suggestionsRowContainer}>
-          <View style={styles.userDetailsBox}>
-            <Text style={styles.displayNameText}>@{user}</Text>
-          </View>
-        </View>
+        <SuggestionsRowContainer>
+          <UserDetailsBox>
+            <DisplayNameText>@{user}</DisplayNameText>
+          </UserDetailsBox>
+        </SuggestionsRowContainer>
       </TouchableOpacity>
     ));
   }
@@ -167,13 +165,13 @@ export class MentionArea extends Component {
     }
 
     return (
-      <Animated.View
-        style={[{ ...this.props.style }, { height: this.state.height }]}
+      <StyledAnimatedView
+        style={{ ...this.props.style, height: this.state.height }}
       >
         <ScrollView keyboardShouldPersistTaps="always">
           {this.state.tracking && this.renderSuggestionsRow(searched)}
         </ScrollView>
-      </Animated.View>
+      </StyledAnimatedView>
     );
   }
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`__tests__/**`
`2`	`2`	`testenv.js`
	`3`	`+coverage/**`