Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Prettier #312

Merged
merged 1 commit into from
May 24, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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