open-index/open-npm huggingface dataset:
npm package: @mrizki/qsi-store
Description: javascript client for connect to couchdb/firestore
Author: akbar rizqi luhur pambudi
Latest version: 2.0.0


# react-native-store

## Getting started

`$ yarn add qsi-store` or `$ npm install qsi-store`
## Usage
1. Create a new client by creating an instance of `QStoreClient`  
	```javascript 
		import QStoreClient from 'qsi-store';
		// constructor or something else
		this.qStore = new QStoreClient(<COUCH_DB_URL>);
	```
2. register your CouchDB database as a collection by using `registerCollection` method
   ```javascript
	 	 this.qStore.registerCollection('todos');
	 ```
3. use `getCollection` to interact with your collection
   ```javascript
	 		this.qStore.getCollection('todos').localDb.<PouchDbMethod_API>
	 ```
## Example
```javascript
import QStoreClient from 'qsi-store';

export default class Todos extends Component {

  constructor(props){
    super(props);
    this.qStore = new QStoreClient('http://192.168.99.100:5984');
    this.qStore.registerCollection('todos');
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount(){
    this.qStore.getCollection('todos').localDb.changes({
        live: true,
        include_docs: true
    }).on('change', this.handleChange);
  }

  handleChange(change){
    const {doc} = change;
    if(!doc) return;
    if (doc._deleted) {
        this.removeTodo(doc);
    } else if(!change.deleted){
        this.addOrModifyDoc(doc);
    }
  }

  handleDetailChange(change){
    const {doc} = change;
    console.log("doc",doc);
  }

  removeTodo(doc){
      const todos = this.state.todos.filter((_doc)=> _doc._id != doc._id);
      this.setState({todos});
  }

  addOrModifyDoc(doc){
    const todos = this.state.todos.filter((_doc)=> _doc._id != doc._id).concat([doc]);
    console.log("state.todos",this.state.todos);
    console.log("todos",todos);
    
    this.setState({todos});
  }

  

  renderListItem = ({item})=>{
    return(
    <View style={styles.todo}>
        <Text>{item.name}</Text>
        <Text>{item.status}</Text>
    </View>);
  };

  renderHeader(){
    return (<View style={styles.header}><Text>Status : {this.state.status}</Text></View>)
  }

  render() {
    return (
      <View style={styles.todosContainer}>
        <FlatList
            style={styles.todos}
            data={this.state.todos}
            renderItem={this.renderListItem}
        />
      </View>
    )
  }
}
```