Skip to content

Commit

Permalink
Add Prettier (#312)
Browse files Browse the repository at this point in the history
  • Loading branch information
charpeni authored May 24, 2018
1 parent b49a1d2 commit 0a78a64
Show file tree
Hide file tree
Showing 32 changed files with 2,994 additions and 5,817 deletions.
2 changes: 2 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
package.json
example/
4 changes: 4 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"singleQuote": true,
"trailingComma": "es5"
}
90 changes: 46 additions & 44 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@


# react-native-meteor
[![react-native-meteor](http://img.shields.io/npm/dm/react-native-meteor.svg)](https://www.npmjs.org/package/react-native-meteor) [![npm version](https://badge.fury.io/js/react-native-meteor.svg)](http://badge.fury.io/js/react-native-meteor) [![Dependency Status](https://david-dm.org/inProgress-team/react-native-meteor.svg)](https://david-dm.org/inProgress-team/react-native-meteor)

[![react-native-meteor](http://img.shields.io/npm/dm/react-native-meteor.svg)](https://www.npmjs.org/package/react-native-meteor) [![npm version](https://badge.fury.io/js/react-native-meteor.svg)](http://badge.fury.io/js/react-native-meteor) [![Dependency Status](https://david-dm.org/inProgress-team/react-native-meteor.svg)](https://david-dm.org/inProgress-team/react-native-meteor)

Meteor-like methods for React Native.

If you have questions, you can open a new issue in the repository or ask in the our Gitter chat:
https://gitter.im/react-native-meteor/Lobby

<!-- prettier-ignore-start -->
<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->

- [react-native-meteor](#react-native-meteor)
Expand Down Expand Up @@ -48,6 +48,7 @@ https://gitter.im/react-native-meteor/Lobby
- [Want to help ?](#want-to-help-)

<!-- /TOC -->
<!-- prettier-ignore-end -->

## Compatibility notes

Expand All @@ -61,67 +62,64 @@ https://gitter.im/react-native-meteor/Lobby
## What is it for ?

The purpose of this library is :

* to set up and maintain a ddp connection with a ddp server, freeing the developer from having to do it on their own.
* be fully compatible with react-native and help react-native developers.
* **to match with [Meteor documentation](http://docs.meteor.com/) used with React.**



## Install

npm i --save react-native-meteor

[!! See detailed installation guide](https://github.com/inProgress-team/react-native-meteor/blob/master/docs/Install.md)

## Install from Git

Sometimes we do not have time to update the version of the NPM package. In this case, you can use the latest version from the repository.

npm i --save https://github.com/inProgress-team/react-native-meteor

## Example usage

```javascript

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Meteor, { createContainer, MeteorListView } from 'react-native-meteor';

Meteor.connect('ws://192.168.X.X:3000/websocket');//do this only once
Meteor.connect('ws://192.168.X.X:3000/websocket'); //do this only once

class App extends Component {
renderRow(todo) {
return (
<Text>{todo.title}</Text>
);
return <Text>{todo.title}</Text>;
}
render() {
const { settings, todosReady } = this.props;

return(
return (
<View>
<Text>{settings.title}</Text>
{!todosReady && <Text>Not ready</Text>}

<MeteorListView
collection="todos"
selector={{done: true}}
options={{sort: {createdAt: -1}}}
renderRow={this.renderRow}
/>
{!todosReady && <Text>Not ready</Text>}

<MeteorListView
collection="todos"
selector={{ done: true }}
options={{ sort: { createdAt: -1 } }}
renderRow={this.renderRow}
/>
</View>
)
);
}
}

export default createContainer(params=>{
export default createContainer(params => {
const handle = Meteor.subscribe('todos');
Meteor.subscribe('settings');

return {
todosReady: handle.ready(),
settings: Meteor.collection('settings').findOne()
settings: Meteor.collection('settings').findOne(),
};
}, App)
}, App);
```

# Connect your components
Expand All @@ -130,7 +128,7 @@ export default createContainer(params=>{

## createContainer

Very similar to getMeteorData but your separate container components from presentational components.
Very similar to getMeteorData but your separate container components from presentational components.

### Example

Expand Down Expand Up @@ -215,23 +213,23 @@ These methods (except update) work offline. That means that elements are correct
* [.remove(id, callback(err, countRemoved))](http://docs.meteor.com/#/full/remove)

# ListView Components

## MeteorListView Component

Same as [ListView](https://facebook.github.io/react-native/docs/listview.html) Component but does not need dataSource and accepts three arguments :

- `collection` **string** *required*
- `selector` [**string** / **object**]
- `options` **object**
- `listViewRef` [**string** / **function**] ref to ListView component.

* `collection` **string** _required_
* `selector` [**string** / **object**]
* `options` **object**
* `listViewRef` [**string** / **function**] ref to ListView component.

### Example usage

```javascript
<MeteorListView
collection="todos"
selector={{done: true}}
options={{sort: {createdAt: -1}}}
selector={{ done: true }}
options={{ sort: { createdAt: -1 } }}
renderRow={this.renderItem}
//...other listview props
/>
Expand All @@ -241,14 +239,16 @@ Same as [ListView](https://facebook.github.io/react-native/docs/listview.html) C

Same as [ListView](https://facebook.github.io/react-native/docs/listview.html) Component but does not need dataSource and accepts one argument. You may need it if you make complex requests combining multiples collections.

- `elements` **function** *required* : a reactive function which returns an array of elements.
- `listViewRef` [**string** / **function**] ref to ListView component.
* `elements` **function** _required_ : a reactive function which returns an array of elements.
* `listViewRef` [**string** / **function**] ref to ListView component.

### Example usage

```javascript
<MeteorComplexListView
elements={()=>{return Meteor.collection('todos').find()}}
elements={() => {
return Meteor.collection('todos').find();
}}
renderRow={this.renderItem}
//...other listview props
/>
Expand All @@ -259,9 +259,11 @@ Same as [ListView](https://facebook.github.io/react-native/docs/listview.html) C
## Meteor Collections

### Meteor.subscribe

[Meteor.subscribe()](http://docs.meteor.com/#/full/meteor_subscribe) returns an handle. If the component which called subscribe is unmounted, the subscription is automatically canceled.

### Meteor.collection(collectionName, options)

You need pass the `cursoredFind` option when you get your collection if you want to use cursor-like method:

```‍‍‍javascript
Expand All @@ -270,20 +272,19 @@ Meteor.collection("collectionName", { cursoredFind: true })

Or you can simply use `find()` to get an array of documents. The option default to false for backward compatibility. Cursor methods are available to share code more easily between a react-native app and a standard Meteor app.


## Meteor DDP connection

### Meteor.connect(endpoint, options)

Connect to a DDP server. You only have to do this once in your app.

*Arguments*
_Arguments_

- `url` **string** *required*
- `options` **object** Available options are :
- autoConnect **boolean** [true] whether to establish the connection to the server upon instantiation. When false, one can manually establish the connection with the Meteor.ddp.connect method.
- autoReconnect **boolean** [true] whether to try to reconnect to the server when the socket connection closes, unless the closing was initiated by a call to the disconnect method.
- reconnectInterval **number** [10000] the interval in ms between reconnection attempts.
* `url` **string** _required_
* `options` **object** Available options are :
* autoConnect **boolean** [true] whether to establish the connection to the server upon instantiation. When false, one can manually establish the connection with the Meteor.ddp.connect method.
* autoReconnect **boolean** [true] whether to try to reconnect to the server when the socket connection closes, unless the closing was initiated by a call to the disconnect method.
* reconnectInterval **number** [10000] the interval in ms between reconnection attempts.

### Meteor.disconnect()

Expand All @@ -298,7 +299,8 @@ Disconnect from the DDP server.

## Availables packages

### Convenience packages
### Convenience packages

Example `import { composeWithTracker } from 'react-native-meteor';``

* EJSON
Expand All @@ -310,7 +312,6 @@ Example `import { composeWithTracker } from 'react-native-meteor';``

See [documentation](https://atmospherejs.com/meteor/reactive-dict).


### Meteor.Accounts

`import { Accounts } from 'react-native-meteor';``
Expand Down Expand Up @@ -339,6 +340,7 @@ import { FSCollectionImagesPreloader } from 'react-native-meteor';
### Meteor.ddp

Once connected to the ddp server, you can access every method available in [ddp.js](https://github.com/mondora/ddp.js/).

* Meteor.ddp.on('connected')
* Meteor.ddp.on('added')
* Meteor.ddp.on('changed')
Expand All @@ -349,6 +351,7 @@ Once connected to the ddp server, you can access every method available in [ddp.
## react-native-router-flux

* You can use Switch with createContainer. Example :

```javascript
componentWillMount() {
this.scenes = Actions.create(
Expand Down Expand Up @@ -381,7 +384,6 @@ Once connected to the ddp server, you can access every method available in [ddp.
return "loggedIn";
}
}

```

# Author
Expand Down
11 changes: 5 additions & 6 deletions docs/FSCollection.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@ export default class ImageFS extends Component {
}
getMeteorData() {
return {
image: Meteor.FSCollection('imagesFiles').findOne()
}
image: Meteor.FSCollection('imagesFiles').findOne(),
};
}
render() {
const { image } = this.data;

if(!image) return null;
if (!image) return null;

return (
<Image
style={{height: 400, width: 400}}
source={{uri: image.url()}}
style={{ height: 400, width: 400 }}
source={{ uri: image.url() }}
/>
);
}
Expand All @@ -46,4 +46,3 @@ All methods accept an optional parameter to choose another store. Example `file.
## Something wrong or missing ?

Please create an issue or make a PR ;)

8 changes: 3 additions & 5 deletions docs/Install.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,12 @@ If running an android emulator you have to forward the port of your meteor app.
$ adb reverse tcp:3000 tcp:3000
```



# Installing decorators

## With RN >= 0.16.0 (Babel 6)

- `npm i --save-dev babel-plugin-transform-decorators-legacy babel-preset-react-native` in your project
- Create a .babelrc file at the root of your project :
* `npm i --save-dev babel-plugin-transform-decorators-legacy babel-preset-react-native` in your project
* Create a .babelrc file at the root of your project :

```json
{
Expand All @@ -38,6 +36,6 @@ Use a .babelrc file at the root of your project that contains :

```json
{
"optional": ["es7.decorators"],
"optional": ["es7.decorators"]
}
```
16 changes: 9 additions & 7 deletions lib/Random.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
const UNMISTAKABLE_CHARS = "23456789ABCDEFGHJKLMNPQRSTWXYZabcdefghijkmnopqrstuvwxyz";
const UNMISTAKABLE_CHARS =
'23456789ABCDEFGHJKLMNPQRSTWXYZabcdefghijkmnopqrstuvwxyz';

module.exports = {
id(count = 17) {
let res = "";
for(let i=0;i<count;i++) {
res+=UNMISTAKABLE_CHARS[Math.floor(Math.random() * UNMISTAKABLE_CHARS.length)];
let res = '';
for (let i = 0; i < count; i++) {
res +=
UNMISTAKABLE_CHARS[
Math.floor(Math.random() * UNMISTAKABLE_CHARS.length)
];
}
return res;
}
},
};


Loading

0 comments on commit 0a78a64

Please sign in to comment.