Create file

components/FileList/view.js

@@ -1,7 +1,6 @@
 import React, {
 	Component,
 	View,
-	ListView,
 	Text,
 	StatusBar,
 	StyleSheet,
@@ -11,8 +10,12 @@ import React, {
 	Platform
 } from 'react-native';
 import NavBar, { NavButton, NavTitle, NavGroup } from 'react-native-nav'
+import { ListView } from 'realm/react-native';
+import Prompt from 'react-native-prompt';
+
 import TouchableFeedback from '../TouchableFeedback';
 import NavBarStyle from '../navbarstyle';
+import Realm from '../models';
 
 var styles = StyleSheet.create({
 	row: {
@@ -35,28 +38,36 @@ var styles = StyleSheet.create({
 });
 
 export default class FileList extends Component {
-	constructor(){
-		super();
+	state = {
+		addFile: false,
+	};
 
-		let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-		let rows = [];
+	componentWillMount(){
+		this.onRealmUpdate();
+	}
 
-		for(let i = 1; i <= 100; i++){
-			rows.push(`File ${i}`);
-		}
+	componentDidMount(){
+		Realm.addListener('change', this.onRealmUpdate);
+	}
 
-		this.state = {
-			dataSource: ds.cloneWithRows(rows),
-		};
+	componentWillUnmount(){
+		Realm.removeListener('change', this.onRealmUpdate);
 	}
 
+	onRealmUpdate = () => {
+		let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+		this.setState({
+			dataSource: ds.cloneWithRows(Realm.objects('Document'))
+		});
+	};
+
 	render(){
 		return (
 			<View style={styles.root}>
 				<NavBar style={NavBarStyle}>
 					<NavTitle style={NavBarStyle.title}>Koan Deck</NavTitle>
 					<NavGroup>
-						<NavButton style={NavBarStyle.navButton}><Image style={NavBarStyle.navIcon} source={require('./ic_add_white.png')} /></NavButton>
+						<NavButton style={NavBarStyle.navButton} onPress={() => this.setState({addFile: true})}><Image style={NavBarStyle.navIcon} source={require('./ic_add_white.png')} /></NavButton>
 					</NavGroup>
 				</NavBar>
 				<ListView
@@ -65,6 +76,12 @@ export default class FileList extends Component {
 					renderRow={this._renderRow}
 					renderScrollComponent={(props) => <RecyclerViewBackedScrollView {...props} />}
 					renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />} />
+				<Prompt
+				 	title="File name"
+					placeholder="My awesome slides"
+					visible={this.state.addFile}
+					onCancel={() => this.setState({addFile: false})}
+					onSubmit={(value) => this.addSlide(value)}/>
 			</View>
 		);
 	}
@@ -73,7 +90,7 @@ export default class FileList extends Component {
 		return (
 			<TouchableFeedback onPress={this._onRowPress(rowData)}>
 				<View style={styles.row}>
-					<Text style={styles.text}>{rowData}</Text>
+					<Text style={styles.text}>{rowData.name}</Text>
 				</View>
 			</TouchableFeedback>
 		);
@@ -84,4 +101,33 @@ export default class FileList extends Component {
 			this.props.navigator.push({name: 'Editor', index: this.props.index + 1, file: data});
 		};
 	};
-}
+
+	addSlide(name){
+		if(!name){
+			return;
+		}
+
+		Realm.write(() => {
+			let ids = Realm.objects('Document').sorted('id');
+			let lastId = -1;
+
+			if(ids.length > 0){
+				lastId = ids[ids.length-1].id;
+			}
+
+			Realm.create('Document', {
+				id: lastId + 1,
+				name: name,
+				slides: [{
+					text1: '',
+					text2: '',
+					image: '',
+				}],
+			});
+		});
+
+		this.setState({
+			addFile: false,
+		});
+	}
+}

components/models.js

@@ -4,20 +4,23 @@ export default new Realm({
 	schema: [
 		{
 			name: 'Document',
+			primaryKey: 'id',
 			properties: {
+				id: 'int',
 				name: 'string',
 				slides: {type: 'list', objectType: 'Slide'},
 			}
 		},
 		{
 			name: 'Slide',
 			properties: {
-				text1: 'string',
-				text2: 'string',
-				text1Color: 'string',
-				text2Color: 'string',
-				image: 'string',
-				layout: 'int',
+				text1: {type: 'string', optional: true},
+				text2: {type: 'string', optional: true},
+				text1Color: {type: 'string', default: '#000000'},
+				text2Color: {type: 'string', default: '#000000'},
+				image: {type: 'string', optional: true},
+				backgroundColor: {type: 'string', default: '#ffffff'},
+				layout: {type: 'int', default: 4},
 			}
 		}
 	]

package.json

@@ -12,6 +12,7 @@
     "react-native-nav": "^1.0.9",
     "react-native-orientation": "^1.16.0",
     "react-native-page-swiper": "^0.1.0",
+    "react-native-prompt": "^0.18.3",
     "realm": "^0.11.1"
   }
 }