FSCollectionImagesPreloader

README.md

@@ -98,7 +98,7 @@ Inside getMeteorData, you can access any Meteor reactive data source, which mean
   * [.insert(doc, callback)](http://docs.meteor.com/#/full/insert)
   * [.update(id, modifier, [options], [callback])](http://docs.meteor.com/#/full/update)
   * [.remove(id, callback(err, countRemoved))](http://docs.meteor.com/#/full/remove)
-* Meteor.FSCollection(collectionName) : Helper for [Meteor-CollectionFS](https://github.com/CollectionFS/Meteor-CollectionFS). Full documentation [here](https://github.com/inProgress-team/react-native-meteor/blob/master/docs/FSCollection.md)
+
 
 # MeteorListView Component
 
@@ -175,10 +175,28 @@ Once connected to the ddp server, you can access every method available in [ddp.
 * Meteor.ddp.on('changed')
 * ...
 
+## CollectionFS
+
+* Meteor.FSCollection(collectionName) : Helper for [Meteor-CollectionFS](https://github.com/CollectionFS/Meteor-CollectionFS). Full documentation [here](https://github.com/inProgress-team/react-native-meteor/blob/master/docs/FSCollection.md)
+* This plugin also exposes a FSCollectionImagesPreloader component which helps you preload every image you want in CollectionFS
+
+```javascript
+import { FSCollectionImagesPreloader } from 'react-native-meteor';
+
+<FSCollectionImagesPreloader
+  collection="imagesFiles"
+  selector={{metadata.owner: XXX}}
+/>
+```
+
+
 ## react-native-router-flux
 
 * [Github repository](https://github.com/inProgress-team/react-native-meteor-router-flux)
 * npm i --save react-native-meteor-router-flux@latest
 * [Custom scene renderer](https://github.com/aksonov/react-native-router-flux#switch-new-feature) which allows to select tab scene to show depending from app state. It could be useful for authentication, restricted scenes, etc.
 
-Pull Requests are welcome ! :)
+
+# Want to help ?
+
+Pull Requests and issues reported are welcome ! :)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-meteor",
-  "version": "1.0.0-beta23",
+  "version": "1.0.0-beta24",
   "description": "Full Meteor Client for React Native",
   "main": "src/Meteor.js",
   "scripts": {

src/CollectionFS/FSCollection.js

@@ -0,0 +1,48 @@
+import EJSON from "ejson";
+
+import Collection from '../Collection';
+import Data from '../Data';
+import setProperties from './setProperties';
+
+
+EJSON.addType('FS.File', function(value) {
+  return {
+    getFileRecord() {
+      const collection = Data.db['cfs.'+value.collectionName+'.filerecord'];
+
+      const item = collection && collection.get(value._id);
+
+      if(!item) return value;
+
+      return setProperties(value.collectionName, item);
+    }
+  };
+});
+
+export default function(name) {
+
+  const collectionName = 'cfs.'+name+'.filerecord';
+
+
+  return {
+    find(selector, options) {
+      const elems = Collection(collectionName).find(selector, options);
+      return elems.map(elem=>{
+        return setProperties(name, elem);
+      });
+    },
+    findOne(selector, options) {
+      const elem = Collection(collectionName).findOne(selector, options);
+      return elem && setProperties(name, elem);
+    },
+    insert: Collection(collectionName).insert,
+    update: Collection(collectionName).update,
+    remove: Collection(collectionName).remove
+  };
+}
+
+
+
+
+
+

src/CollectionFS/FSCollectionImagesPreloader.js

@@ -0,0 +1,76 @@
+'use strict';
+
+import React, {
+  Component,
+  PropTypes,
+  View,
+  Image,
+  StyleSheet
+} from 'react-native';
+
+
+import Data from '../Data';
+import setProperties from './setProperties';
+
+export default class FSCollectionImagesPreloader extends Component {
+  static propTypes = {
+    collection: PropTypes.string.isRequired,
+    selector: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ])
+  };
+  static defaultProps = {
+    selector: {}
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: []
+    };
+  }
+  componentWillMount() {
+    const { collection, selector } = this.props;
+
+
+    this.update = results=>{
+      this.setState({
+        items: results.map(elem=>setProperties(collection, elem))
+      });
+    };
+
+    if(!Data.db[collection]) {
+      Data.db.addCollection(collection)
+    }
+
+    this.items = Data.db.observe(() => {
+      return Data.db['cfs.'+collection+'.filerecord'].find(selector);
+    });
+
+    this.items.subscribe(this.update);
+  }
+  componentWillUnmount() {
+    this.items.dispose();
+  }
+  render() {
+    const { items } = this.state;
+
+    return (
+      <View style={styles.hidden}>
+        {items && items.map(item=>{
+          return (
+            <Image style={styles.hidden} key={item._id} onLoadEnd={()=>console.log('LOADED IMAGE')} source={{uri: item.url()}} />
+          );
+        })}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  hidden: {
+    width: 1,
+    height: 1,
+    position: 'absolute',
+    top: -100000,
+    left: -10000,
+    opacity: 0
+  }
+})

src/FSCollection.js → src/CollectionFS/setProperties.js

@@ -1,54 +1,8 @@
-import EJSON from "ejson";
-import base64 from 'base-64';
-
-import Collection from './Collection';
-import Data from './Data';
-
-
-
-EJSON.addType('FS.File', function(value) {
-  return {
-    getFileRecord() {
-      const collection = Data.db['cfs.'+value.collectionName+'.filerecord'];
-
-      const item = collection && collection.get(value._id);
-
-      if(!item) return value;
-
-      return setProperties(value.collectionName, item);
-    }
-  };
-});
-
-export default function(name) {
-
-  const collectionName = 'cfs.'+name+'.filerecord';
-
-
-  return {
-    find(selector, options) {
-      const elems = Collection(collectionName).find(selector, options);
-      return elems.map(elem=>{
-        return setProperties(name, elem);
-      });
-    },
-    findOne(selector, options) {
-      const elem = Collection(collectionName).findOne(selector, options);
-      return elem && setProperties(name, elem);
-    },
-    insert: Collection(collectionName).insert,
-    update: Collection(collectionName).update,
-    remove: Collection(collectionName).remove
-  };
-}
-
-
-
-
-
 
+import base64 from 'base-64';
+import Data from '../Data';
 
-const setProperties = (name, file)=> {
+export default (name, file)=> {
   const getStoreName = (params = {store: name}) => {
     return params.store;
   };

src/Meteor.js

@@ -9,12 +9,15 @@ import Random from '../lib/Random';
 
 import Data from './Data';
 import collection from './Collection';
-import FSCollection from './FSCollection';
 import call from './Call';
 
 import Mixin from './components/Mixin';
 import ListView from './components/ListView';
 import MeteorComplexListView from './components/ComplexListView';
+
+import FSCollection from './CollectionFS/FSCollection';
+import FSCollectionImagesPreloader from './CollectionFS/FSCollectionImagesPreloader';
+
 import User from './user/User';
 import Accounts from './user/Accounts';
 
@@ -23,6 +26,7 @@ module.exports = {
   Accounts: Accounts,
   MeteorListView: ListView,
   MeteorComplexListView: MeteorComplexListView,
+  FSCollectionImagesPreloader: FSCollectionImagesPreloader,
   collection: collection,
   FSCollection: FSCollection,
   getData() {
@@ -111,12 +115,12 @@ module.exports = {
     });
 
     Data.ddp.on("ready", message => {
-      /*
+
       for(var i in Data.subscriptions) {
         const sub = Data.subscriptions[i];
         //console.log(sub.name, EJSON.clone(sub.params), sub.subIdRemember);
       }
-      */
+
     });
 
     Data.ddp.on("changed", message => {