localstorage+ save/delete local classes

src/actions/LocalStorageActions.js

@@ -0,0 +1,46 @@
+import {
+  LS_CLASE_SAVE,
+  LS_CLASE_DELETE,
+  LS_CLASE_INIT
+} from './types';
+
+var ls = require('react-native-local-storage');
+
+export const saveClase = ({clase}) => {
+	//_id, profesor, texto, titulo, fecha
+	return (dispatch) => {
+		ls.get('clases').then( (data) => {
+			ls.save('clases', [...data, clase]).then(() => {
+				dispatch({
+					type: LS_CLASE_SAVE,
+					payload: clase
+				});
+			});
+		}).catch( err => {
+			console.log("caught", err);
+		});
+	};
+}
+
+export const deleteClase = ({clase}) => {
+	return (dispatch) => {
+		dispatch({
+			type: LS_CLASE_DELETE,
+			payload: clase._id
+		});
+	}
+}
+
+export const initLSClase = () => {
+	return (dispatch) => {
+		ls.get('clases').then( (data) => {
+			if (data===null || data===undefined)
+				data = [];
+
+			dispatch({
+				type: LS_CLASE_INIT,
+				payload: data
+			});
+		});
+	};
+}

src/actions/index.js

@@ -2,3 +2,4 @@ export * from './AuthActions';
 export * from './CursadaActions';
 export * from './ProfActions';
 export * from './RegisterActions';
+export * from './LocalStorageActions';

src/actions/types.js

@@ -23,5 +23,6 @@ export const REGISTER_USER = "register_user";
 export const REGISTER_USER_SUCCESS = "register_user_success";
 export const REGISTER_USER_FAILURE = "register_user_failure";
 
-export const CLASE_SAVE = "clase_save";
-export const CLASE_DELETE = "clase_delete";
+export const LS_CLASE_SAVE = "clase_save";
+export const LS_CLASE_DELETE = "clase_delete";
+export const LS_CLASE_INIT = "clase_init";

src/reducers/LocalStorageReducer.js

@@ -1,6 +1,7 @@
 import {
-  CLASE_SAVE,
-  CLASE_DELETE,
+  LS_CLASE_SAVE,
+  LS_CLASE_DELETE,
+  LS_CLASE_INIT
 } from '../actions/types';
 
 const INITIAL_STATE = {
@@ -8,8 +9,17 @@ const INITIAL_STATE = {
 };
 
 export default (state = INITIAL_STATE, action) => {
-  switch(action.type) {
-    default:
-      return state;
+	switch(action.type) {
+		case LS_CLASE_SAVE:
+			//payload === clase
+			return { ...state, clases: [ ...state.clases, action.payload ] } ;
+		case LS_CLASE_DELETE:
+			//payload === clase._id
+			return { ...state, clases: state.clases.filter( c => { return c._id !== action.payload } ) };
+		case LS_CLASE_INIT:
+			console.log("clases init value:", action.payload);
+			return { clases: action.payload };
+		default:
+			return state;
   }
 };

src/reducers/index.js

@@ -4,11 +4,13 @@ import CursadaReducer from './CursadaReducer';
 import ProfReducer from './ProfReducer';
 import RegisterReducer from './RegisterReducer';
 import ClasesReducer from './ClasesReducer';
+import LocalStorageReducer from './LocalStorageReducer';
 
 export default combineReducers({
   auth: AuthReducer,
   cursadasR: CursadaReducer,
   ProfReducer,
   RegisterReducer,
-  ClasesReducer
+  ClasesReducer,
+  LocalStorageReducer
 });

src/scenes/Clase.js

@@ -7,7 +7,7 @@ import ActionButton from 'react-native-action-button';
 import { Actions, ActionConst } from 'react-native-router-flux';
 
 
-import { claseFetch } from '../actions/';
+import { claseFetch, saveClase, deleteClase } from '../actions/';
 import Teoria from './Clase/Teoria';
 import Comentarios from './Clase/Comentarios';
 import { Spinner } from '../components/common/';
@@ -17,63 +17,78 @@ import { ConnectionError } from '../components/common';
 
 
 class Clase extends Component {
-  state = { page: 'Teoria' };
+	state = { page: 'Teoria' };
 
-  componentWillMount() {
-    this.props.claseFetch(this.props);
+	componentWillMount() {
+		this.props.claseFetch(this.props);
 	}
 
-  renderView() {
-    if ( this.state.page === 'Teoria' )
-      return <Teoria titulo={titulo} profesor={profesor} texto={texto} style={{flex:1}} />;
-
-    if ( this.state.page === 'Comentarios' )
-      return <Comentarios style={{flex:1}} comentarios={comentarios} respuestas={respuestas} />;
-
-    return <Text>{this.state.page}!!!</Text>;
-  }
-  render() {
-    const { clase } = this.props;
-
-	if (this.props.loading)
-		return <Spinner size="large" />;
-
-	if (clase.error)
-		return <ConnectionError />;
-
-    var ScrollableTabView = require('react-native-scrollable-tab-view');
-    const { titulo, profesor, texto, comentarios, respuestas } = this.props.clase;
-
-    return (
-	  <View style={{flex:1}}>
-        <ScrollableTabView style={styles.container, {flex:1}}>
-  		 <Teoria titulo={titulo} profesor={profesor} texto={texto} style={{flex:1}} tabLabel="Teoria" />
-  		 <View tabLabel="Videos" />
-  		 <Comentarios style={{flex:1}} comentarios={comentarios} respuestas={respuestas} tabLabel="Comentarios" />
-        </ScrollableTabView>
-  	  <MyActionButton onPress={() => true}>
-	  	<ActionButton.Item buttonColor='#22eeee' title="Comentario">
-            <Icon name="md-create" style={styles.actionButtonIcon} />
-		</ActionButton.Item>
-
-		<ActionButton.Item onPress={() => {} } buttonColor='#ee22ee' title="Guardar clase">
-			<Icon name={ false ? "ios-star" : "ios-star-outline" } style={styles.actionButtonIcon} />
-		</ActionButton.Item>
-
-		<ActionButton.Item onPress={() => Actions.Menu()} buttonColor='#eeee22' title="Menu">
-			<Icon name="md-apps" style={styles.actionButtonIcon} />
-		</ActionButton.Item>
-	  </MyActionButton>
-	  </View>
-    );
-  }
+	renderView() {
+		if ( this.state.page === 'Teoria' )
+			return <Teoria titulo={titulo} profesor={profesor} texto={texto} style={{flex:1}} />;
+
+		if ( this.state.page === 'Comentarios' )
+			return <Comentarios style={{flex:1}} comentarios={comentarios} respuestas={respuestas} />;
+
+		return <Text>{this.state.page}!!!</Text>;
+	}
+	onSavePress() {
+		const { local, clase } = this.props;
+		if ( !local ) {
+			this.props.saveClase({ clase });
+			return;
+		}
+		this.props.deleteClase({ clase });
+	}
+
+	render() {
+		const { clase, local, loading } = this.props;
+
+		if (loading)
+			return <Spinner size="large" />;
+
+		if (clase.error)
+			return <ConnectionError />;
+
+		var ScrollableTabView = require('react-native-scrollable-tab-view');
+		const { titulo, profesor, texto, comentarios, respuestas } = this.props.clase;
+
+		const icon = local ? "ios-star" : "ios-star-outline";
+		const title = local ? "Borrar clase" : "Guardar clase";
+
+		return (
+			<View style={{flex:1}}>
+
+				<ScrollableTabView style={styles.container, {flex:1}}>
+					<Teoria titulo={titulo} profesor={profesor} texto={texto} style={{flex:1}} tabLabel="Teoria" />
+					<View tabLabel="Videos" />
+					<Comentarios style={{flex:1}} comentarios={comentarios} respuestas={respuestas} tabLabel="Comentarios" />
+				</ScrollableTabView>
+
+				<MyActionButton onPress={() => true}>
+					<ActionButton.Item buttonColor='#22eeee' title="Comentario">
+						<Icon name="md-create" style={styles.actionButtonIcon} />
+					</ActionButton.Item>
+
+					<ActionButton.Item onPress={this.onSavePress.bind(this)} buttonColor='#ee22ee' title={title}>
+						<Icon name={ icon } style={styles.actionButtonIcon} />
+					</ActionButton.Item>
+
+					<ActionButton.Item onPress={() => Actions.Menu()} buttonColor='#eeee22' title="Menu">
+						<Icon name="md-apps" style={styles.actionButtonIcon} />
+					</ActionButton.Item>
+				</MyActionButton>
+
+			</View>
+		);
+	}
 };
 
 const styles = {
 	actionButtonIcon: {
-	  fontSize: 20,
-	  height: 22,
-	  color: 'white',
+		fontSize: 20,
+		height: 22,
+		color: 'white',
 	},
 	container: {
 		flex: 1,
@@ -84,8 +99,14 @@ const styles = {
 };
 
 const mapStateToProps = state => {
-  const { curClase, loading } = state.ClasesReducer;
-	return { loading, clase: curClase };
+	const { curClase, loading } = state.ClasesReducer;
+	const localClases = state.LocalStorageReducer.clases;
+
+	const local = localClases.filter( c => {
+		return c._id === curClase._id
+	}).length > 0;
+	
+	return { loading, clase: curClase, local };
 };
 
-export default connect(mapStateToProps, { claseFetch })(Clase);
+export default connect(mapStateToProps, { claseFetch, saveClase, deleteClase })(Clase);

src/scenes/ListaCursadas.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { View, Text, ListView } from 'react-native';
 import { connect } from 'react-redux';
-import { cursadasFetch } from '../actions/';
+import { initLSClase, cursadasFetch } from '../actions/';
 import ItemCursada from './Cursada/ItemCursada';
 import MyActionButton from '../components/ActionButton';
 import { ConnectionError } from '../components/common';
@@ -9,7 +9,9 @@ import { ConnectionError } from '../components/common';
 class ListaCursadas extends Component  {
 
 	componentWillMount() {
-    this.props.cursadasFetch();
+    	this.props.cursadasFetch();
+		this.props.initLSClase();
+		
 		this.createDataSource(this.props);
 	}
 	componentWillReceiveProps(nextProps) {
@@ -50,4 +52,4 @@ const mapStateToProps = state => {
 	return { cursadas, cursos, error };
 };
 
-export default connect(mapStateToProps, { cursadasFetch })(ListaCursadas);
+export default connect(mapStateToProps, { initLSClase, cursadasFetch })(ListaCursadas);