Aivant/offline

App.js

@@ -10,6 +10,7 @@ export default class App extends React.Component {
       <Provider store={store}>
         <HomeStack />
       </Provider>
+
     )
   }
 }

actions/index.js

@@ -3,6 +3,26 @@ import types from '../lib/actionTypes'
 
 let actions = {
   // GENERAL
+  enrollStudent: (student, courseId) => {
+    return {
+      type: types.ENROLL_STUDENT,
+      student,
+      courseId,
+    }
+  },
+  unenrollStudent: (studentId, courseId) => {
+    return {
+      type: types.UNENROLL_STUDENT,
+      studentId,
+      courseId,
+    }
+  },
+  updateLocale: (locale) => {
+    return {
+      type: types.UPDATE_LOCALE,
+      locale
+    }
+  },
   receiveStandardError: (error) => {
     return {
       type: types.RECEIVE_STANDARD_ERROR,
@@ -71,6 +91,44 @@ let actions = {
       courseId
     }
   },
+  updateStudentAttendanceStats: (attendances, curAttendances, courseId) => {
+    return {
+      type: types.UPDATE_STUDENT_ATTENDANCE_STATS,
+      attendances,
+      curAttendances,
+      courseId
+    }
+  },
+
+  // Sessions
+  requestSessions: (courseId) => {
+    return {
+      type: types.REQUEST_SESSIONS,
+      courseId
+    }
+  },
+  receiveSessionsSuccess: (sessions, courseId) => {
+    return {
+      type: types.RECEIVE_SESSIONS_SUCCESS,
+      sessions,
+      courseId
+    }
+  },
+
+  // Course Teachers
+  requestCourseTeachers: (courseId) => {
+    return {
+      type: types.REQUEST_COURSE_TEACHERS,
+      courseId
+    }
+  },
+  receiveCourseTeachersSuccess: (courseTeachers, courseId) => {
+    return {
+      type: types.RECEIVE_COURSE_TEACHERS_SUCCESS,
+      courseTeachers,
+      courseId
+    }
+  },
 
   // ATTENDANCES
   requestAttendances: (courseId, date) => {

components/AttendanceCard/AttendanceCard.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Image, View, Text, StyleSheet, Button, TouchableHighlight } from 'react-native';
 import styles from './styles'
 import Dropdown from '../Dropdown'
+import PropTypes from 'prop-types'
 import { textStyles } from '../../styles/textStyles';
 
 class AttendanceCard extends React.Component {
@@ -57,7 +58,7 @@ class AttendanceCard extends React.Component {
           source={require('../../icons/comment_active.png')}
         />
       )
-    } 
+    }
     return (
       <Image
         style={styles.commentButton}
@@ -72,28 +73,29 @@ class AttendanceCard extends React.Component {
         <View style={styles.nameContainer}>
           <Text style={textStyles.body}>{this.props.name}</Text>
         </View>
-        <View style={styles.spaceContainer}>
-        </View>
-        <View style={styles.leftContainer}>
-          {this.renderSelect()}
-          <TouchableHighlight
-            style={styles.commentButtonOuter}
-            onPress={() => this.props.setModal(this.props.index, this.props.attendance.comment)}
-            underlayColor='transparent'>
-            {this.renderCommentButton(this.props.attendance.comment)}
-          </TouchableHighlight>
+        <View style={styles.spaceContainer}/>
+        <View style={styles.leftOuterContainer}>
+          <View style={styles.leftContainer}>
+              {this.renderSelect()}
+            <TouchableHighlight
+              style={styles.commentButtonOuter}
+              onPress={() => this.props.setModal(this.props.attendance.comment)}
+              underlayColor='transparent'>
+              {this.renderCommentButton(this.props.attendance.comment)}
+            </TouchableHighlight>
+          </View>
         </View>
       </View>
     )
   }
 }
 
 AttendanceCard.propTypes = {
-  attendance: React.PropTypes.object.isRequired,
-  name: React.PropTypes.string.isRequired,
-  index: React.PropTypes.number.isRequired,
-  setModal: React.PropTypes.func.isRequired,
-  setType: React.PropTypes.func.isRequired,
+  attendance: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  setModal: PropTypes.func.isRequired,
+  setType: PropTypes.func.isRequired,
 };
 
 export default AttendanceCard;

components/AttendanceCard/styles.js

@@ -3,25 +3,32 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   container: {
     flexDirection: 'row',
+    flex: 1,
     justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 24,
   },
   nameContainer: {
     flexDirection: 'row',
-    flex: 1,
+    flex: 0.5,
   },
   spaceContainer:{
-    flex: 0.1,
+    flex: 0.01,
+  },
+  leftOuterContainer: {
+    flex: 0.49,
   },
   leftContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     marginRight: 16,
-    flex: 1,
   },
   attendanceButton: {
-    width: 116,
+    width: 100,
+    height: 40,
+  },
+  attendanceContainer: {
+    width: 100,
     height: 40,
   },
   commentButton: {

components/Button/Button.js

@@ -24,12 +24,12 @@ export default class StyledButton extends React.Component {
 			  	>{this.props.text}</Button>
 			);
 		}
-		if (this.props.noPaddingPrimaryButtonSmall) {
+		if (this.props.editButton) {
 			return (
 				<Button
 				  onPress={this.props.onPress}
-				  style={ buttonStyles.noPaddingPrimaryButtonSmall }
-				  textStyle={ textStyles.buttonTextSmall }
+				  style={ buttonStyles.editButton }
+				  textStyle={ [textStyles.buttonTextDark] }
 			    >{this.props.text}</Button>
 			);
 		}
@@ -38,7 +38,7 @@ export default class StyledButton extends React.Component {
 				<Button
 				  onPress={this.props.onPress}
 				  style={ buttonStyles.enrollSmall }
-				  textStyle={ textStyles.enrollSmall }
+				  textStyle={ textStyles.buttonText }
 			  	>{this.props.text}</Button>
 			);
 		}
@@ -65,7 +65,7 @@ export default class StyledButton extends React.Component {
 				<Button
 				  onPress={this.props.onPress}
 				  style={ buttonStyles.whiteButtonLarge } 
-				  textStyle={ textStyles.buttonTextYellow }
+				  textStyle={ textStyles.buttonTextDark }
 			  	>{this.props.text}</Button>
 			);
 		}

components/Button/styles.js

@@ -22,13 +22,13 @@ const buttonStyles = StyleSheet.create({
     marginBottom: 8,
   },
 
-  noPaddingPrimaryButtonSmall: {
-    backgroundColor: colors.primaryYellow,
-    borderColor: colors.primaryYellow,
+  editButton: {
+    backgroundColor: '#CFD8DC',
+    borderColor: '#CFD8DC',
     width: 85,
-    height: 37,
+    height: 32,
     marginLeft: 10,
-    marginBottom: -10,
+    marginBottom: 0,
   },
 
   clearButtonSmall: {
@@ -74,7 +74,7 @@ const buttonStyles = StyleSheet.create({
   enrollSmall: {
     backgroundColor: colors.courseBlue,
     borderColor: colors.courseBlue,
-    width: 140,
+    width: 120,
     height: 36,
   },
 

components/Collapse/Collapse.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, TouchableHighlight } from 'react-native';
 import { commonStyles } from '../../styles/styles';
 import styles from './styles';
+import PropTypes from 'prop-types'
 import Collapsible from 'react-native-collapsible';
 
 class Collapse extends React.Component {
@@ -24,10 +25,10 @@ class Collapse extends React.Component {
 
 
 Collapse.propTypes = {
-  setCollapsed: React.PropTypes.func.isRequired,
-  header: React.PropTypes.object.isRequired,
-  isCollapsed: React.PropTypes.bool.isRequired,
-  headerStyle: React.PropTypes.object,
+  setCollapsed: PropTypes.func.isRequired,
+  header: PropTypes.object.isRequired,
+  isCollapsed: PropTypes.bool.isRequired,
+  headerStyle: PropTypes.object,
 };
 
 export default Collapse;

components/CourseCard/CourseCard.js

@@ -6,6 +6,9 @@ import PropTypes from 'prop-types';
 import { cardStyles } from './styles';
 import { textStyles } from '../../styles/textStyles';
 import colors from '../../styles/colors';
+import { FontAwesome } from '@expo/vector-icons';
+import I18n from '../../lib/i18n/i18n';
+
 
 /**
  * @prop course_id - course ID
@@ -29,20 +32,26 @@ class CourseCard extends React.Component {
       4: colors.courseBrown
     }
     const colorKey = this.props.index % 5
-    let syncText = this.props.synced ? "" : "Not Synced"
+    const unsyncedAttendances = (
+      <Text style={[cardStyles.count, textStyles.titleSmallLight]}>
+        <FontAwesome name="exclamation-triangle" size={14} color={colors.iconLight}/> {I18n.t('unsyncedattendances', {locale: this.props.locale})}
+      </Text>
+    )
+    let syncText = this.props.synced ? (I18n.t('lastsynced', {locale: this.props.locale}) + ": " + this.props.last_synced) : unsyncedAttendances
     return (
       <TouchableHighlight onPress={() => this.props.onSelectCourse(this.props.course_id, colorKey)}
       underlayColor='transparent'>
         <View style={[cardStyles.outerContainer, {backgroundColor: colorList[colorKey]}]}>
           <View style={cardStyles.topContainer}>
             <Text style={[cardStyles.title, textStyles.titleMediumLight]}>{this.props.title}</Text>
-            <Text style={[cardStyles.count, textStyles.titleSmallLight]}>{this.props.numStudents} Students</Text>
+            <Text style={[cardStyles.count, textStyles.titleSmallLight]}>5 {I18n.t('students', {locale: this.props.locale})}</Text>
             <Text style={[cardStyles.count, textStyles.titleSmallLight]}>{syncText}</Text>
+
           </View>
           <View style={cardStyles.bottomContainer}>
             <StyledButton
               onPress={() => this.props.onTakeAttendance(this.props.course_id, this.props.title)}
-              text='Take Attendance'
+              text={I18n.t('takeattendance', {locale: this.props.locale})}
               clearButtonSmall>
             </StyledButton>
           </View>

components/CourseCard/styles.js

@@ -9,7 +9,9 @@ const cardStyles = StyleSheet.create({
   },
   topContainer: {
   	flex: 1,
-  	height: 100,
+  	// height: 100,
+    paddingRight: 8,
+    paddingBottom: 8,
     backgroundColor: 'transparent'
   },
   bottomContainer: {

components/Dropdown/Dropdown.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, Text, StyleSheet, Button, TextInput, Modal, TouchableHighlight } from 'react-native';
 import { Select, Option } from 'react-native-chooser';
 import styles from './styles';
+import PropTypes from 'prop-types'
 import { textStyles } from '../../styles/textStyles';
 
 class Dropdown extends React.Component {
@@ -57,11 +58,11 @@ class Dropdown extends React.Component {
 }
 
 Dropdown.propTypes = {
-  onSelect: React.PropTypes.func.isRequired,
-  value: React.PropTypes.any.isRequired,
-  options: React.PropTypes.object.isRequired,
-  defaultText: React.PropTypes.string.isRequired,
-  styles: React.PropTypes.object,
+  onSelect: PropTypes.func.isRequired,
+  value: PropTypes.any.isRequired,
+  options: PropTypes.object.isRequired,
+  defaultText: PropTypes.string.isRequired,
+  styles: PropTypes.object,
 };
 
 export default Dropdown;

components/SearchResultCard/SearchResultCard.js

@@ -19,7 +19,7 @@ class SearchResultCard extends React.Component {
 
   render() {
     return (
-      <TouchableHighlight onPress={() => this.props.onSelectStudent(this.props.student.id)}
+      <TouchableHighlight onPress={() => this.props.onSelectStudent(this.props.student)}
       underlayColor='transparent'>
         <View style={
           { backgroundColor: colors.courseWhite,

components/SimpleModal/SimpleModal.js

@@ -4,6 +4,7 @@ import { commonStyles } from '../../styles/styles';
 import styles from './styles';
 import StyledButton from '../../components/Button/Button';
 import Modal from 'react-native-modalbox';
+import PropTypes from 'prop-types'
 import { textStyles } from '../../styles/textStyles';
 
 /**
@@ -71,10 +72,10 @@ class SimpleModal extends React.Component {
 
 
 SimpleModal.propTypes = {
-  visible: React.PropTypes.bool.isRequired,
-  title: React.PropTypes.string.isRequired,
-  buttons: React.PropTypes.array.isRequired,
-  onClosed: React.PropTypes.func.isRequired,
+  visible: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  buttons: PropTypes.array.isRequired,
+  onClosed: PropTypes.func.isRequired,
 };
 
 export default SimpleModal;