New Registration Screen

ios/kitsu_mobile.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };

src/assets/img/onboarding/index.js

@@ -2,10 +2,12 @@ import intro1 from './intro1.png';
 import intro2 from './intro2.png';
 import intro3 from './intro3.png';
 import intro4 from './intro4.png';
+import placeholderImage from './placeholderImage.png';
 
 export {
   intro1,
   intro2,
   intro3,
   intro4,
+  placeholderImage,
 };

src/components/Button/component.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, ActivityIndicator, ViewPropTypes } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { PropTypes } from 'prop-types';
+import { styles } from './styles';
+
+const LoadingComponent = () => (
+  <View style={styles.contentWrapper}>
+    <ActivityIndicator color={'rgba(255,255,255,0.6)'} />
+  </View>
+);
+
+export const Button = ({
+  style,
+  title,
+  titleStyle,
+  icon,
+  iconStyle,
+  onPress,
+  loading,
+  disabled,
+}) => (
+  <TouchableOpacity
+    disabled={disabled || loading}
+    onPress={onPress}
+    style={[styles.button, disabled ? styles.buttonDisabled : null, style]}
+  >
+    {loading ? <LoadingComponent />
+      : <View style={styles.contentWrapper}>
+        {icon ? <Icon name={icon} style={[styles.icon, iconStyle]} /> : null}
+        <Text style={[styles.title, titleStyle]}>
+          {title}
+        </Text>
+      </View>
+    }
+  </TouchableOpacity>
+);
+
+Button.propTypes = {
+  ...TouchableOpacity.propTypes,
+  style: ViewPropTypes.style,
+  title: PropTypes.string.isRequired,
+  titleStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  icon: PropTypes.string,
+  iconStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  onPress: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+Button.defaultProps = {
+  style: null,
+  title: 'Save',
+  titleStyle: null,
+  icon: null,
+  iconStyle: null,
+  loading: false,
+  disabled: false,
+};

src/components/Button/index.js

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

src/components/Button/styles.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+import * as colors from 'kitsu/constants/colors';
+
+export const styles = StyleSheet.create({
+  button: {
+    marginVertical: 4,
+    marginHorizontal: 16,
+    backgroundColor: colors.green,
+    height: 47,
+    borderRadius: 4,
+  },
+  buttonDisabled: {
+    backgroundColor: colors.buttonDisabledColor,
+  },
+  contentWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    color: colors.white,
+    fontFamily: 'OpenSans',
+    lineHeight: 25,
+    fontSize: 15,
+  },
+  icon: {
+    fontSize: 20,
+    color: colors.white,
+    paddingRight: 8,
+    paddingLeft: 8,
+  },
+});

src/constants/colors.js

@@ -37,6 +37,7 @@ export const offBlack = '#2B212B';
 export const softBlack = '#333';
 
 /* misc */
+export const transparent = 'transparent';
 export const buttonDisabledColor = '#878787';
 export const imageBackColor = 'rgb(153, 130, 153)';
 export const listSeparatorColor = '#261C25';

src/screens/Onboarding/OnboardingScreen.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
+import { View, ScrollView, Dimensions } from 'react-native';
 import { intro1, intro2, intro3, intro4 } from 'kitsu/assets/img/onboarding/';
+import { Button } from 'kitsu/components/Button';
 import { OnboardingHeader } from './common/';
 import styles from './styles';
 import Step from './Step';
@@ -66,31 +67,32 @@ export default class OnboardingScreen extends React.Component {
 
     return (
       <View style={styles.container}>
-        <View style={styles.contentWrapper}>
-          <OnboardingHeader />
-          <View style={styles.pageWrapper}>
-            <View style={styles.page}>
-              <ScrollView
-                pagingEnabled
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                alwaysBounceHorizontal={false}
-                onScroll={this.handleScroll}
-                scrollEventThrottle={300} // decrease for precision, lower values trigger onScroll more.
-              >
-                {this.renderStep()}
-              </ScrollView>
-            </View>
+        <OnboardingHeader style={styles.header} />
+        <View style={{ flex: 8 }}>
+          <View style={styles.page}>
+            <ScrollView
+              pagingEnabled
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              alwaysBounceHorizontal={false}
+              onScroll={this.handleScroll}
+              scrollEventThrottle={300} // decrease for precision, lower values trigger onScroll more.
+            >
+              {this.renderStep()}
+            </ScrollView>
+          </View>
+          <View style={{ flex: 1, justifyContent: 'center' }}>
             <View style={styles.dotContainer}>
               {this.renderDots()}
             </View>
+            <Button
+              style={styles.getStartedButton}
+              title={'Get Started'}
+              titleStyle={styles.getStartedText}
+              onPress={() => navigate('Registration')}
+            />
           </View>
         </View>
-        <TouchableOpacity onPress={() => navigate('Registration')} style={styles.button}>
-          <Text style={styles.getStartedText}>
-            Get Started
-          </Text>
-        </TouchableOpacity>
       </View>
     );
   }

src/screens/Onboarding/RegistrationScreen.js

@@ -1,99 +1,147 @@
 import React from 'react';
-import { View, Text, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import { View, Image, FlatList } from 'react-native';
 import { LoginManager } from 'react-native-fbsdk';
+import { connect } from 'react-redux';
+import { Button } from 'kitsu/components/Button';
+import { loginUser } from 'kitsu/store/auth/actions';
 import * as colors from 'kitsu/constants/colors';
+import { placeholderImage } from 'kitsu/assets/img/onboarding';
 import { OnboardingHeader } from './common/';
 import styles from './styles';
 
-const TEMP_IMG_URL = 'https://goo.gl/7XKV53';
-
-const GalleryRow = () => (
-  <View style={{ marginVertical: 8, flexDirection: 'row', justifyContent: 'center' }}>
-    <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} />
-    <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} />
-    <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} />
-    <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} />
-  </View>
-);
-
-export default class RegistrationScreen extends React.Component {
+class RegistrationScreen extends React.Component {
   static navigationOptions = {
     header: null,
   };
 
   state = {
+    loggingUser: false,
+    topAnime: Array(10).fill({}),
+    topManga: Array(10).fill({}),
   };
 
-  onSucess = () => {
-    // TODO: implement this function.
+  componentDidMount() {
+    this.fetchTopMedia();
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.animation);
+  }
+
+  animation = 0;
+
+  fetchTopMedia = async () => {
+    // TODO: handle network error.
+    try {
+      const topAnime = await fetch('https://kitsu.io/api/edge/trending/anime?limit=10').then(res => res.json());
+      const topManga = await fetch('https://kitsu.io/api/edge/trending/manga?limit=10').then(res => res.json());
+      this.setState({
+        topAnime: topAnime.data,
+        topManga: topManga.data,
+      }, this.animateLists);
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  animateLists = () => {
+    let offset = 4;
+    this.animation = setInterval(() => {
+      this.animeList.scrollToOffset({ offset, animated: true });
+      this.mangaList.scrollToOffset({ offset, animated: true });
+      offset += 4;
+    }, 120);
   }
 
   loginFacebook = () => {
+    this.setState({ loggingUser: true });
     LoginManager.logInWithReadPermissions(['public_profile']).then(
       (result) => {
         if (!result.isCancelled) {
-          onSuccess(true);
+          this.props.loginUser(null, navigation, 'signup');
+        } else {
+          this.setState({ loggingUser: false });
         }
       },
       (error) => {
+        this.setState({ loggingUser: false });
         console.log(`Login fail with error: ${error}`);
       },
     );
   };
 
+  populateList = (topList) => {
+    const list = this.state[topList];
+    this.setState({
+      [topList]: list.concat(list),
+    });
+  }
+
+  renderItem = ({ item }) => (
+    <Image source={(item.attributes && { uri: item.attributes.posterImage.large }) || placeholderImage} style={styles.squareImage} />
+  );
+
   render() {
     const { navigate } = this.props.navigation;
+    const { loggingUser, topAnime, topManga } = this.state;
     // TODO: make this screen responsive.
     return (
-      <ScrollView style={styles.container}>
-        <OnboardingHeader />
-        <View style={{ marginVertical: 24, justifyContent: 'center', }}>
-          <GalleryRow />
-          <GalleryRow />
-        </View>
-        <View style={{ height: 200, justifyContent: 'center' }}>
-          <TouchableOpacity
-            onPress={this.loginFacebook}
-            style={[styles.button, {
-              backgroundColor: colors.fbBlueDark,
-            }]}
-            disabled={false}
-          >
-            <Icon
-              size={20}
-              name="facebook-official"
-              style={styles.fbIcon}
+      <View style={styles.container}>
+        <OnboardingHeader style={styles.header} />
+        <View style={{ flex: 8 }}>
+          <View>
+            <FlatList
+              ref={ref => this.animeList = ref}
+              style={{ marginBottom: 8 }}
+              horizontal
+              inverted
+              scrollEnabled={false}
+              data={topAnime}
+              renderItem={this.renderItem}
+              onEndReached={() => this.populateList('topAnime')}
+              onEndReachedThreshold={0.5}
+              showsHorizontalScrollIndicator={false}
+            />
+            <FlatList
+              ref={ref => this.mangaList = ref}
+              horizontal
+              scrollEnabled={false}
+              style={{ marginTop: 8 }}
+              data={topManga}
+              renderItem={this.renderItem}
+              onEndReached={() => this.populateList('topManga')}
+              onEndReachedThreshold={0.5}
+              showsHorizontalScrollIndicator={false}
             />
-            <Text style={styles.buttonText}>
-              Sign up with Facebook
-            </Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => navigate('Signup')}
-            style={[styles.button, {
-              backgroundColor: 'transparent',
-              borderWidth: 1.5,
-              borderColor: colors.darkGrey,
-            }]}
-          >
-            <Text style={styles.buttonText}>Create an Account</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => navigate('Login')}
-            style={[styles.button, {
-              backgroundColor: 'transparent',
-            }]}
-          >
-            <Text style={[styles.buttonText, {
-              color: colors.lightGrey,
-            }]}
-            >
-              Already have an account?
-            </Text>
-          </TouchableOpacity>
+          </View>
+          <View style={styles.buttonsWrapper}>
+            <Button
+              style={{ backgroundColor: colors.fbBlueDark }}
+              title={'Sign up with Facebook'}
+              icon={'facebook-official'}
+              loading={loggingUser}
+              onPress={this.loginFacebook}
+            />
+            <Button
+              style={{
+                backgroundColor: colors.transparent,
+                borderWidth: 1.5,
+                borderColor: colors.darkGrey,
+              }}
+              title={'Create an Account'}
+              onPress={() => navigate('Signup')}
+            />
+            <Button
+              style={{ backgroundColor: colors.transparent }}
+              title={'Already have an account?'}
+              titleStyle={{ fontSize: 12, color: colors.lightGrey }}
+              onPress={() => navigate('Login')}
+            />
+          </View>
         </View>
-      </ScrollView>
+      </View>
     );
   }
 }
+
+export default connect(null, { loginUser })(RegistrationScreen);