Merge pull request #185 from QUACK-INTEC/develop

Develop to Master
QUACK-INTEC · Jan 20, 2020 · 7e7bdaf · 7e7bdaf
2 parents a127680 + cdc785b
commit 7e7bdaf
Show file tree

Hide file tree

Showing 57 changed files with 814 additions and 265 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,8 +5,8 @@
     "prettier/react"
   ],
   "rules": {
-    "react/prop-types": ["error", { "ignore": ["imageUri","onPress","children","style","predefinedStyle", "logger", "focused", "navigation","logout", "value","loggedIn","userToken","showActionSheetWithOptions", "MessagesKey", "initialsValue", "isModalVisible", "prevIsModalVisible", "initialsValue","toastRef", "myClasses",
-      "myClassesLookup"] }],
+    "react/prop-types": ["error", { "ignore": ["renderItem","isLoading","imageUri","onPress","children","style","predefinedStyle", "logger", "focused", "navigation","logout", "value","loggedIn","userToken","showActionSheetWithOptions", "MessagesKey", "initialsValue", "isModalVisible", "prevIsModalVisible", "initialsValue","toastRef", "myClasses",
+      "myClassesLookup","isFocused"] }],
     "no-fallthrough": "off",
     "jsx-a11y/anchor-is-valid": "off",
     "react/jsx-props-no-spreading": "off",

diff --git a/App/Components/Calendar/Calendar.js b/App/Components/Calendar/Calendar.js
@@ -162,7 +162,7 @@ class Calendar extends React.Component {
     return (
       <View style={styles.container}>
         {this.renderDatePicker()}
-        <View style={{ ...spacers.ML_4, ...spacers.MR_4, flex: 1 }}>
+        <View style={{ ...spacers.ML_3, ...spacers.MR_3, flex: 1 }}>
           <View
             style={{
               justifyContent: 'flex-end',

diff --git a/App/Components/ClassHub/ClassHub.js b/App/Components/ClassHub/ClassHub.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet, FlatList } from 'react-native';
+import { View, StyleSheet, Animated } from 'react-native';
 import PropTypes from 'prop-types';
 
 import Text from '../Common/Text';
@@ -10,7 +10,49 @@ import { toBaseDesignPx, spacers, fonts, colors, constants } from '../../Core/Th
 import SubjectPostRecent from '../SubjectPostRecent';
 import LoadingState from '../LoadingState';
 
+const OPACITY_VALUE = 1;
+
 class ClassHub extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classHubHeaderHeight: new Animated.Value(toBaseDesignPx(297)),
+    };
+  }
+
+  handleInterpolateHeaderHub = () => {
+    const { classHubHeaderHeight } = this.state;
+    const headerHub = classHubHeaderHeight.interpolate({
+      inputRange: [
+        toBaseDesignPx(297),
+        toBaseDesignPx(297) * 2,
+        toBaseDesignPx(297) * 3,
+        toBaseDesignPx(297) * 4,
+      ],
+      outputRange: [
+        toBaseDesignPx(297),
+        toBaseDesignPx(297) / 2,
+        toBaseDesignPx(297) / 3,
+        constants.DEVICE.STATUS_BAR_HEIGHT,
+      ],
+      extrapolate: 'clamp',
+      useNativeDriver: true,
+    });
+
+    const headerHubOpacity = classHubHeaderHeight.interpolate({
+      inputRange: [
+        toBaseDesignPx(297),
+        toBaseDesignPx(297) * 2,
+        toBaseDesignPx(297) * 3,
+        toBaseDesignPx(297) * 4,
+      ],
+      outputRange: [OPACITY_VALUE, OPACITY_VALUE / 2, OPACITY_VALUE / 4, 0],
+      extrapolate: 'clamp',
+      useNativeDriver: true,
+    });
+    return { headerHub, headerHubOpacity };
+  };
+
   renderHeaderHub = () => {
     const {
       onBackArrowPress,
@@ -23,8 +65,13 @@ class ClassHub extends React.PureComponent {
       subjectSection,
       subjectRoom,
     } = this.props;
+    const headerHubTransitions = this.handleInterpolateHeaderHub();
+    const { headerHub, headerHubOpacity } = headerHubTransitions;
+
     return (
-      <View style={styles.headerContainer}>
+      <Animated.View
+        style={[styles.headerContainer, { height: headerHub, opacity: headerHubOpacity }]}
+      >
         <View style={styles.headerInfoContainer}>
           <View style={styles.headerBackIconContainer}>
             <Icon
@@ -65,7 +112,7 @@ class ClassHub extends React.PureComponent {
             </View>
           </View>
         </View>
-      </View>
+      </Animated.View>
     );
   };
 
@@ -123,10 +170,12 @@ class ClassHub extends React.PureComponent {
   };
 
   renderRecentPosts = () => {
+    const { classHubHeaderHeight } = this.state;
+
     const { posts, isFetchingPost, onRefreshPosts } = this.props;
 
     return (
-      <FlatList
+      <Animated.FlatList
         refreshing={isFetchingPost}
         onRefresh={onRefreshPosts}
         data={posts}
@@ -136,6 +185,8 @@ class ClassHub extends React.PureComponent {
         keyExtractor={item => item.id}
         ListEmptyComponent={this.renderPostsEmpty}
         ItemSeparatorComponent={() => <View style={{ ...spacers.MA_2 }} />}
+        ListFooterComponent={() => <View style={{ ...spacers.MB_4 }} />}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: classHubHeaderHeight } } }])}
       />
     );
   };

diff --git a/App/Components/ClassInfoCard/ClassInfoCard.js b/App/Components/ClassInfoCard/ClassInfoCard.js
@@ -17,13 +17,14 @@ class ClassInfoCard extends React.Component {
   };
 
   render() {
-    const { subject, schedule, onPress, disabled, titleStyle } = this.props;
+    const { subject, schedule, onPress, disabled, titleStyle, isLoading } = this.props;
     return (
       <InfoCard
         title={subject}
         onPress={disabled ? null : onPress}
         disabled={disabled}
         titleStyle={titleStyle}
+        isLoading={isLoading}
       >
         <Text.Light text={this.getProfessorLabel()} style={styles.professorStyle} />
         <Text.Light text={schedule} style={styles.scheduleStyle} />

diff --git a/App/Components/ClassInfoCard/ClassInfoCardLoadingState.js b/App/Components/ClassInfoCard/ClassInfoCardLoadingState.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import InfoCard from '../Common/InfoCard';
+
+class ClassInfoCardLoadingState extends React.Component {
+  renderClassInfoCardLoadingState = () => {
+    return <InfoCard isLoading />;
+  };
+
+  render() {
+    return this.renderClassInfoCardLoadingState();
+  }
+}
+
+export default ClassInfoCardLoadingState;
diff --git a/App/Components/ClassInfoCard/index.js b/App/Components/ClassInfoCard/index.js
@@ -1,3 +1,4 @@
 import ClassInfoCard from './ClassInfoCard';
+import ClassInfoCardLoadingState from './ClassInfoCardLoadingState';
 
-export default ClassInfoCard;
+export { ClassInfoCard as default, ClassInfoCardLoadingState };
diff --git a/App/Components/Common/Avatar/Avatar.js b/App/Components/Common/Avatar/Avatar.js
@@ -12,7 +12,7 @@ import Text from '../Text';
 
 class Avatar extends React.Component {
   renderAvatar = () => {
-    const { src, uri, initialsText, style, textStyle } = this.props;
+    const { src, uri, initialsText, style, textStyle, textBorderStyle } = this.props;
 
     if (src || uri) {
       return (
@@ -21,7 +21,10 @@ class Avatar extends React.Component {
     }
 
     return (
-      <View {...this.props} style={[styles.avatarStyle, style]}>
+      <View
+        {...this.props}
+        style={[styles.avatarStyle, styles.textBorderStyle, style, textBorderStyle]}
+      >
         <View style={[style, styles.textViewStyle]}>
           <Text.Medium text={initialsText} style={[styles.textStyle, textStyle]} />
         </View>
@@ -43,9 +46,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  textBorderStyle: {
+    height: toBaseDesignPx(110),
+    width: toBaseDesignPx(110),
+    borderRadius: toBaseDesignPx(100),
+  },
   textViewStyle: {
-    width: toBaseDesignPx(94),
-    height: toBaseDesignPx(94),
+    width: toBaseDesignPx(110),
+    height: toBaseDesignPx(110),
     alignItems: 'center',
     justifyContent: 'center',
     ...spacers.MR_0,
@@ -55,7 +63,7 @@ const styles = StyleSheet.create({
   },
   textStyle: {
     color: colors.GRAY,
-    fontSize: RFValue(48),
+    fontSize: RFValue(40),
     textAlign: 'center',
     ...spacers.ML_1,
     ...spacers.MT_1,
@@ -72,6 +80,7 @@ Avatar.defaultProps = {
   initialsText: null,
   style: null,
   textStyle: null,
+  textBorderStyle: null,
 };
 
 Avatar.propTypes = {
@@ -80,6 +89,7 @@ Avatar.propTypes = {
   initialsText: PropTypes.string,
   style: ViewPropTypes.style,
   textStyle: PropTypes.shape({}),
+  textBorderStyle: PropTypes.shape({}),
 };
 
 export default Avatar;
diff --git a/App/Components/Common/CalendarDatePicker/CalendarDatePicker.js b/App/Components/Common/CalendarDatePicker/CalendarDatePicker.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 import CalendarStrip from 'react-native-calendar-strip';
+import 'moment/locale/es';
 // import CalendarStrip from 'react-native-slideable-calendar-strip';
 
 import Moment from 'moment';

diff --git a/App/Components/Common/DropDown/DropDown.js b/App/Components/Common/DropDown/DropDown.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import { View, ViewPropTypes, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
@@ -14,21 +15,8 @@ import InLineComponent from '../InLineComponent';
 import Icon, { ICON_TYPE, ICON_SIZE } from '../Icon';
 
 class DropDownComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: null,
-    };
-  }
-
-  componentDidMount() {
-    const { value } = this.props;
-    this.setState({ value });
-  }
-
   handleOptionChange = value => {
     const { onChange } = this.props;
-    this.setState({ value });
     onChange(value);
   };
 
@@ -112,8 +100,16 @@ class DropDownComponent extends React.Component {
   };
 
   render() {
-    const { style, placeholder, options, disabled, containerStyle, hasError, ...rest } = this.props;
-    const { value: valueFromState } = this.state;
+    const {
+      style,
+      placeholder,
+      options,
+      disabled,
+      containerStyle,
+      hasError,
+      value,
+      ...rest
+    } = this.props;
     const errorStyle = hasError ? styles.errorStyle : null;
     return (
       <View style={[styles.mainView, errorStyle, containerStyle]}>
@@ -134,7 +130,7 @@ class DropDownComponent extends React.Component {
               right: 15,
             },
           }}
-          value={valueFromState}
+          value={value}
           useNativeAndroidPickerStyle={false}
           Icon={() => this.renderIcon()}
           {...rest}

diff --git a/App/Components/Common/InfoCard/InfoCard.js b/App/Components/Common/InfoCard/InfoCard.js
@@ -8,6 +8,7 @@ import { colors, toBaseDesignPx, spacers } from '../../../Core/Theme';
 
 // Common
 import Text from '../Text';
+import InfoCardLoadingState from './InfoCardLoadingState';
 
 class InfoCard extends React.Component {
   handleOnPress = () => {
@@ -21,7 +22,12 @@ class InfoCard extends React.Component {
   };
 
   render() {
-    const { children, title, style, titleStyle, disabled } = this.props;
+    const { children, title, style, titleStyle, disabled, isLoading } = this.props;
+
+    if (isLoading) {
+      return <InfoCardLoadingState />;
+    }
+
     return (
       <TouchableOpacity
         activeOpacity={disabled ? 1 : 0.2}
@@ -32,7 +38,7 @@ class InfoCard extends React.Component {
           text={title}
           style={[styles.titleStyle, titleStyle]}
           numberOfLines={2}
-          ellipzeModde="tail"
+          ellipSizeMode="tail"
         />
         {children}
       </TouchableOpacity>

diff --git a/App/Components/Common/InfoCard/InfoCardLoadingState.js b/App/Components/Common/InfoCard/InfoCardLoadingState.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient';
+
+import { Rect } from 'react-native-svg';
+
+import { toBaseDesignPx, constants } from '../../../Core/Theme';
+
+class SectionLoadingState extends React.Component {
+  renderSectionLoadingState = () => {
+    return (
+      <SvgAnimatedLinearGradient height={toBaseDesignPx(80)} width={toBaseDesignPx(151)}>
+        <Rect
+          x={toBaseDesignPx(8)}
+          y={toBaseDesignPx(19)}
+          rx={toBaseDesignPx(5)}
+          ry={toBaseDesignPx(5)}
+          width={toBaseDesignPx(200)}
+          height={toBaseDesignPx(104)}
+        />
+      </SvgAnimatedLinearGradient>
+    );
+  };
+
+  render() {
+    if (constants.isAndroid) {
+      return null;
+    }
+    return this.renderSectionLoadingState();
+  }
+}
+
+export default SectionLoadingState;
diff --git a/App/Components/Common/InfoCard/index.js b/App/Components/Common/InfoCard/index.js
@@ -1,3 +1,4 @@
 import InfoCard from './InfoCard';
+import InfoCardLoadingState from './InfoCardLoadingState';
 
-export default InfoCard;
+export { InfoCard as default, InfoCardLoadingState };
diff --git a/App/Components/Common/Link/Link.js b/App/Components/Common/Link/Link.js
@@ -46,7 +46,7 @@ class Link extends React.Component {
     return (
       <TouchableOpacity onPress={this.handleOnPress}>
         <InLineComponent leftChild={this.renderLeftIcon} rightChild={this.renderRightIcon}>
-          <Text.Black style={[styles.textStyle, textStyle]} text={text} />
+          <Text.Black {...this.props} style={[styles.textStyle, textStyle]} text={text} />
         </InLineComponent>
       </TouchableOpacity>
     );

diff --git a/App/Components/EventCalendar/EventCalendar.js b/App/Components/EventCalendar/EventCalendar.js
@@ -54,6 +54,7 @@ class EventCalendar extends React.Component {
             initialsText={initialsText}
             style={styles.avatarStyle}
             textStyle={styles.avatarTextStyle}
+            textBorderStyle={styles.textBorderStyle}
           />
           <Text.Medium
             text={author}
@@ -106,15 +107,21 @@ const styles = StyleSheet.create({
     color: colors.GRAY,
   },
   avatarStyle: {
-    height: toBaseDesignPx(16),
-    width: toBaseDesignPx(16),
-    borderRadius: toBaseDesignPx(8),
+    height: toBaseDesignPx(32),
+    width: toBaseDesignPx(32),
+    borderRadius: toBaseDesignPx(16),
     ...spacers.MR_1,
   },
+  textBorderStyle: {
+    height: toBaseDesignPx(32),
+    width: toBaseDesignPx(32),
+    borderRadius: toBaseDesignPx(32),
+  },
   authorStyle: {
     ...fonts.SIZE_XS,
     color: colors.GRAY,
     ...spacers.MR_1,
+    maxWidth: toBaseDesignPx(280),
   },
   badgeStyle: {
     width: toBaseDesignPx(11.5),