Merge pull request #335 from hummingbird-me/develop

Merge 6.6 into Master

README.md

@@ -34,3 +34,8 @@ If you run **OSX** then download the [iOS FacebookSDK](https://developers.facebo
 
 ### Known Issues :warning:
 1. Packager fails to resolve aliases at first run. Do `yarn start:reset` instead of `yarn start` at first launch. Same applies when running the app with `react-native run-ios` or `react-native run-android`. Kill the packager and type `yarn start:reset`
+
+## Download
+
+<a href="https://play.google.com/store/apps/details?id=com.everfox.animetrackerandroid&utm_source=github&utm_campaign=kitsu-mobile"><img src="https://i.imgur.com/HqUNEEU.png" alt="Kitsu on Google Play"></a>
+<a href="https://itunes.apple.com/us/app/kitsu-anime/id590452826?mt=8&utm_source=github&utm_campaign=kitsu-mobile"><img src="https://devimages-cdn.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg" alt="Kitsu on the App Store"></a>

android/app/build.gradle

@@ -118,7 +118,7 @@ android {
         minSdkVersion 16
         targetSdkVersion 27
         versionCode 1
-        versionName "6.5.1"
+        versionName "6.6"
         multiDexEnabled true
         ndk {
             abiFilters "armeabi-v7a", "x86"
@@ -190,7 +190,7 @@ dependencies {
     compile "com.facebook.fresco:animated-gif:1.3.0"
     compile 'com.facebook.fresco:animated-webp:1.3.0'
     compile 'com.facebook.fresco:webpsupport:1.3.0'
-    compile('com.crashlytics.sdk.android:crashlytics:2.6.8@aar') {
+    compile('com.crashlytics.sdk.android:crashlytics:2.9.3@aar') {
         transitive = true;
     }
 }

ios/kitsu_mobile/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>6.5.1</string>
+	<string>6.6</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>

src/components/ContentList/component.js

@@ -5,7 +5,7 @@ import { ContentListHeader } from './ContentListHeader';
 import { ItemRenderer } from './ItemRenderer';
 import { styles } from './styles';
 
-export const ContentList = ({ title, data, onPress, onScroll, dark = false, showViewAll = true, ...props }) => (
+export const ContentList = ({ title, data, onPress, dark = false, showViewAll = true, ...props }) => (
   // console.log('data is', title, data);
   <View style={[styles.contentListContainer, dark ? styles.darkBg : styles.lightBg]}>
     <ContentListHeader dark={dark} title={title} onPress={onPress} showViewAll={showViewAll} />
@@ -14,9 +14,6 @@ export const ContentList = ({ title, data, onPress, onScroll, dark = false, show
       data={data}
       ListHeaderComponent={() => <View style={{ width: 10 }} />}
       renderItem={({ item }) => <ItemRenderer item={item} {...props} />}
-      onTouchStart={() => onScroll(true)}
-      onTouchCancel={() => onScroll(false)}
-      onTouchEnd={() => onScroll(false)}
     />
   </View>
 );

src/components/Forms/LoginForm.js

@@ -3,6 +3,7 @@ import { View, Text, TouchableOpacity } from 'react-native';
 import { PropTypes } from 'prop-types';
 import { Button } from 'kitsu/components/Button/';
 import { Input } from 'kitsu/components/Input';
+import { PasswordInput } from 'kitsu/components/PasswordInput';
 import * as colors from 'kitsu/constants/colors';
 import styles from './styles';
 
@@ -24,12 +25,10 @@ const LoginForm = ({
       keyboardType={'email-address'}
       onChangeText={text => handleChange(text, 'email')}
     />
-    <Input
+    <PasswordInput
       placeholder="Password"
-      secureTextEntry
       value={data.password}
       onChangeText={text => handleChange(text, 'password')}
-      autoCapitalize="none"
     />
     <Button
       loading={loading}

src/components/Forms/RecoveryForm.js

@@ -1,12 +1,13 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 import { PropTypes } from 'prop-types';
 import { Button } from 'kitsu/components/Button/';
 import { Input } from 'kitsu/components/Input';
 import CustomIcon from 'kitsu/components/Icon';
 import * as colors from 'kitsu/constants/colors';
+import styles from './styles';
 
-const RecoveryForm = ({ handleChange, data, onReset, loading }) => (
+const RecoveryForm = ({ handleChange, data, onReset, loading, onCancel }) => (
   <View>
     <Input
       placeholder="E-mail"
@@ -20,6 +21,9 @@ const RecoveryForm = ({ handleChange, data, onReset, loading }) => (
       onPress={onReset}
       style={{ marginTop: 10 }}
     />
+    <TouchableOpacity style={styles.forgotButton} onPress={onCancel}>
+      <Text style={styles.forgotText}>Back to Sign In</Text>
+    </TouchableOpacity>
   </View>
 );
 
@@ -28,6 +32,7 @@ RecoveryForm.propTypes = {
   data: PropTypes.object.isRequired,
   onReset: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
 };
 
 export default RecoveryForm;

src/components/Forms/SignupForm.js

@@ -3,6 +3,7 @@ import { View, Text, TouchableOpacity } from 'react-native';
 import { PropTypes } from 'prop-types';
 import { Button } from 'kitsu/components/Button/';
 import { Input } from 'kitsu/components/Input';
+import { PasswordInput } from 'kitsu/components/PasswordInput';
 import styles from './styles';
 
 const SignupForm = ({
@@ -30,18 +31,15 @@ const SignupForm = ({
       value={data.username}
       onChangeText={text => handleChange(text, 'username')}
     />
-    <Input
+    <PasswordInput
       placeholder="Password"
-      secureTextEntry
       value={data.password}
       onChangeText={text => handleChange(text, 'password')}
     />
-    <Input
+    <PasswordInput
       placeholder="Confirm Password"
-      secureTextEntry
       value={data.confirmPassword}
       onChangeText={text => handleChange(text, 'confirmPassword')}
-      autoCapitalize="none"
     />
     <Button
       loading={loading}

src/components/ImageStatus/component.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import PropTypes from 'prop-types';
+import FastImage from 'react-native-fast-image';
+import styles from './styles';
+
+export const ImageStatus = ({ title, text, image, style }) => (
+  <View style={[styles.statusWrapper, style]}>
+    <Text style={styles.statusTitle}>{title}</Text>
+    <Text style={styles.statusText}>{text}</Text>
+    <FastImage style={styles.statusImage} source={image} />
+  </View>
+);
+
+ImageStatus.propTypes = {
+  title: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  image: PropTypes.object.isRequired,
+  style: PropTypes.object,
+};

src/components/ImageStatus/index.js

@@ -0,0 +1 @@
+export * from './component';

src/components/ImageStatus/styles.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import * as colors from 'kitsu/constants/colors';
+
+const styles = StyleSheet.create({
+  statusWrapper: {
+    marginTop: 4,
+    padding: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: colors.darkPurple,
+  },
+  statusTitle: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    color: colors.white,
+    fontFamily: 'OpenSans',
+    textAlign: 'center',
+    margin: 4,
+    width: 240,
+  },
+  statusText: {
+    width: 240,
+    fontSize: 12,
+    color: colors.lightGrey,
+    fontFamily: 'OpenSans',
+    textAlign: 'center',
+    margin: 4,
+  },
+  statusImage: {
+    marginTop: 16,
+    width: 140,
+    height: 160,
+    resizeMode: 'contain',
+  },
+});
+
+export default styles;

src/components/PasswordInput/component.js

@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { PropTypes } from 'prop-types';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { Input } from 'kitsu/components/Input';
+import { styles } from './styles';
+
+export class PasswordInput extends PureComponent {
+  static propTypes = {
+    value: PropTypes.string,
+    onChangeText: PropTypes.func,
+  };
+
+  static defaultProps = {
+    value: '',
+    onChangeText: null,
+  };
+
+  state = {
+    passwordVisible: false,
+  };
+
+  toggleVisibility = () => {
+    this.setState({
+      passwordVisible: !this.state.passwordVisible,
+    });
+  }
+
+  render() {
+    const { value, onChangeText, ...props } = this.props;
+    const { passwordVisible } = this.state;
+    return (
+      <View style={styles.container}>
+        <Input
+          containerStyle={styles.input}
+          {...props}
+          secureTextEntry={!passwordVisible}
+          value={value}
+          onChangeText={onChangeText}
+          autoCapitalize="none"
+        />
+        <TouchableOpacity style={styles.toggle} onPress={this.toggleVisibility}>
+          <Icon
+            name={passwordVisible ? 'eye' : 'eye-slash'}
+            style={styles.eyeIcon}
+          />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}

src/components/PasswordInput/index.js

@@ -0,0 +1 @@
+export * from './component';

src/components/PasswordInput/styles.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import * as colors from 'kitsu/constants/colors';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    backgroundColor: colors.white,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginHorizontal: 16,
+    height: 47,
+    marginVertical: 4,
+    borderRadius: 8,
+  },
+  input: {
+    flex: 1,
+    marginHorizontal: 0,
+    marginVertical: 0,
+  },
+  eyeIcon: {
+    color: colors.darkGrey,
+    marginHorizontal: 8,
+    fontSize: 18,
+    backgroundColor: 'transparent',
+  },
+  toggle: {
+    height: 47,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

src/components/ProgressiveImage/component.js

@@ -13,7 +13,7 @@ export class ProgressiveImage extends PureComponent {
     duration: PropTypes.number,
     style: PropTypes.any,
     resizeMode: PropTypes.string,
-    source: PropTypes.object.isRequired,
+    source: PropTypes.any.isRequired,
     defaultSource: PropTypes.number,
     hasOverlay: PropTypes.bool,
   };
@@ -70,7 +70,7 @@ export class ProgressiveImage extends PureComponent {
 
     return (
       <View style={[styles.imageBackground, backgroundStyle, style]}>
-        {source.uri && (
+        {source && (
           <FastImage
             onLoad={this.onLoad}
             onLayout={this.onLayout}

src/components/SearchBox/component.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { PropTypes } from 'prop-types';
-import { TextInput, View, ViewPropTypes } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import { TextInput, View, ViewPropTypes, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
 import { commonStyles } from 'kitsu/common/styles';
+import { isEmpty } from 'lodash';
 import { styles } from './styles';
 
 export class SearchBox extends React.PureComponent {
@@ -11,42 +12,54 @@ export class SearchBox extends React.PureComponent {
     defaultValue: PropTypes.string,
     onChangeText: PropTypes.func,
     placeholder: PropTypes.string,
-    searchIconOffset: PropTypes.number,
     value: PropTypes.string,
+    showClearButton: PropTypes.bool,
   };
 
   static defaultProps = {
     defaultValue: '',
     onChangeText: () => {},
     placeholder: 'Search',
-    searchIconOffset: 80,
     style: null,
     value: '',
+    showClearButton: true,
   };
 
   render() {
-    const { searchIconOffset, value, ...restProps } = this.props;
+    const { value, onChangeText, showClearButton, ...restProps } = this.props;
 
     return (
       <View style={[styles.searchContainer, this.props.style]}>
         <Icon
-          name="search"
+          name="ios-search"
           style={[
             styles.searchIcon,
             commonStyles.colorLightGrey,
-            { paddingRight: searchIconOffset },
-            value && styles.searchIconFocus,
           ]}
+          size={18}
         />
         <TextInput
           {...restProps}
           value={value}
           style={[commonStyles.text, styles.input]}
+          onChangeText={onChangeText}
           underlineColorAndroid="transparent"
           autoCapitalize={'none'}
           autoCorrect={false}
           keyboardAppearance={'dark'}
         />
+        {showClearButton && !isEmpty(value) &&
+          <TouchableOpacity style={styles.clearContainer} onPress={() => onChangeText('')}>
+            <Icon
+              name="ios-close-circle"
+              style={[
+                styles.clearIcon,
+                commonStyles.colorLightGrey,
+              ]}
+              size={16}
+            />
+          </TouchableOpacity>
+        }
       </View>
     );
   }