Skip to content

Commit

Permalink
docs: added event listeners
Browse files Browse the repository at this point in the history
  • Loading branch information
hieunc229 committed Oct 30, 2018
1 parent 42b05fa commit 082fafe
Show file tree
Hide file tree
Showing 14 changed files with 510 additions and 57 deletions.
49 changes: 49 additions & 0 deletions crowdin.yaml
@@ -0,0 +1,49 @@
project_identifier_env: CROWDIN_DOCUSAURUS_PROJECT_ID
api_key_env: CROWDIN_DOCUSAURUS_API_KEY
base_path: "./"
preserve_hierarchy: true

files:
-
source: '/docs/*.md'
translation: '/website/translated_docs/%locale%/%original_file_name%'
languages_mapping: &anchor
locale:
'af': 'af'
'ar': 'ar'
'bs-BA': 'bs-BA'
'ca': 'ca'
'cs': 'cs'
'da': 'da'
'de': 'de'
'el': 'el'
'es-ES': 'es-ES'
'fa': 'fa-IR'
'fi': 'fi'
'fr': 'fr'
'he': 'he'
'hu': 'hu'
'id': 'id-ID'
'it': 'it'
'ja': 'ja'
'ko': 'ko'
'mr': 'mr-IN'
'nl': 'nl'
'no': 'no-NO'
'pl': 'pl'
'pt-BR': 'pt-BR'
'pt-PT': 'pt-PT'
'ro': 'ro'
'ru': 'ru'
'sk': 'sk-SK'
'sr': 'sr'
'sv-SE': 'sv-SE'
'tr': 'tr'
'uk': 'uk'
'vi': 'vi'
'zh-CN': 'zh-CN'
'zh-TW': 'zh-TW'
-
source: '/website/i18n/en.json'
translation: '/website/i18n/%locale%.json'
languages_mapping: *anchor
172 changes: 172 additions & 0 deletions docs/event-listeners.md
@@ -0,0 +1,172 @@
---
id: event-listeners
title: Event Listeners
---

Event listeners are callback functions that subscribe to a `Document`'s event
(including loaded, insert, update, delete). Each time an event happen,
it will automatically execute callback functions that was subsribed to that event

The following content are event listeners that available to Vasern.

- [onAvailable](#onavailable-event)
- [onLoaded](#onloaded-event)
- [onInsert](#oninsert-event)
- [onUpdate](#onupdate-event)
- [onRemove](#onremove-event)
- [onChange](#onchange-event)

## onAvailable event

`onAvailable` is triggered when the app started, and raw records is loaded from Vasern's native module.

_Note: raw records are in the raw form, which has **id** and **raw** properties.
Use [`onLoaded`](#onloaded-event) if you need normal records_

```javascript
Document.onAvailable(callback)
```

#### Arguments

- **_callback ( Function )_**: callback function when data is available in raw form

#### Example

```javascript
// Assuming Todos is a Document instance
Todos.onAvailable(() => {

// Notify user number of records
alert(`Loading ${Todos.count()} items`)
})
```

## onLoaded event

`onLoaded` is triggered when raw records are converted to normal record objects.

```javascript
Document.onLoaded(callback)
```
#### Arguments

- **_callback ( Function )_**: callback function when data is loaded completely

#### Example

```javascript
// Assuming Todos is a Document instance
Todos.onLoaded(() => {

// Display incompleted items to users
this.setState({
items: Todos.filter({ completed: false }).data(),
});
})
```

## onInsert event

`onInsert` is triggered after a record or muliple records are inserted and saved to the `Document`.
Callback function will receive a list of new records.

```javascript
Document.onLoaded(callback)
```
#### Arguments

- **_callback ( Function: { changed } )_**: callback function when records are inserted
- _changed ( Array[object] )_: a list of records has just inserted

#### Example

```javascript
// Assuming Todos is a Document instance
Todos.onInsert(({ changed }) => {

// Log number of inserted records
console.log(changed.length);
})
```

## onUpdate event

`onUpdate` is triggered after a record or muliple records are updated and saved to the `Document`.
Callback function will receive a list of updated records.

```javascript
Document.onUpdate(callback)
```
#### Arguments

- **_callback ( Function: { changed } )_**: callback function when records are updated
- _changed ( Array[object] )_: a list of records has been updated

#### Example

```javascript
// Assuming Todos is a Document instance
Todos.onUpdate(({ changed }) => {

// Log number of updated records
console.log(changed.length);
})
```

## onRemove event

`onRemove` is triggered after a record or muliple records are removed from the `Document`.
Callback function will receive a list of removed records.

```javascript
Document.onRemove(callback)
```
#### Arguments

- **_callback ( Function: { changed } )_**: callback function when records are removed
- _changed ( Array[object] )_: a list of removed records has been removed

#### Example

```javascript
// Assuming Todos is a Document instance
Todos.onRemove(({ changed }) => {

// Log number of removed records
console.log(changed.length);
})
```

## onChange event

`onChange` is triggered after any of the above event is triggered from the `Document`. In other words,
it captured all events. Callback function will receive an event name and a list of affected records.

```javascript
Document.onChange(callback)
```
#### Arguments

- **_callback ( Function: { event, changed } )_**: callback function when an event is triggered
- _event ( string )_: name of the event that was triggered
- _changed ( Array[object] )_: a list of affected records

#### Example

```javascript
// Assuming Todos is a Document instance
Todos.onChange(({ changed }) => {

// Log triggered event and number of records that was affected
console.log(event, "was triggered that affects", changed.length, "records");
})
```

# What's next?

Visit [Support and Feedback](support-and-feedback.md) for contribution, ask for help or give us feedback.

If you have gone this far, and have read information provided, we'd like to thank you for your intests in Vasern. We have some [examples](todo-example.md) in case you want some more.

P/s: Don't hesitate to start to build your dream app!
8 changes: 2 additions & 6 deletions docs/queries.md
Expand Up @@ -27,7 +27,7 @@ Queryable.get(lookupQuery)

#### Arguments

- **_lookupQuery ( string, Object )_**
- **_lookupQuery ( string | Object )_**
- (string): match record id with `string` value
- (Object): match record properties and values with `Object` properties and values

Expand Down Expand Up @@ -111,8 +111,4 @@ var records = Queryable.filter({ completed: true });

# What's next?

Visit [Support and Feedback](support-and-feedback.md) for contribution, ask for help or give us feedback.

If you have gone this far, and have read information provided, we'd like to thank you for your intests in Vasern. We have some [examples](todo-example.md) in case you want some more.

P/s: Don't wait to start building your dream app!
Learn about [Event listeners](event-listeners.md)
10 changes: 10 additions & 0 deletions website/i18n/en.json
Expand Up @@ -8,6 +8,9 @@
"basic-crud-operation": {
"title": "Basic CRUD operations"
},
"event-listeners": {
"title": "Event Listeners"
},
"install-vasern": {
"title": "Installation"
},
Expand Down Expand Up @@ -71,12 +74,18 @@
"version-0.3.0-beta-basic-crud-operation": {
"title": "Basic CRUD operations"
},
"version-0.3.0-beta-event-listeners": {
"title": "Event Listeners"
},
"version-0.3.0-beta-install-vasern": {
"title": "Installation"
},
"version-0.3.0-beta-queries": {
"title": "Queries"
},
"version-0.3.0-beta-support-and-feedback": {
"title": "Support and Feedback"
},
"version-0.3.0-beta-supported-data-types": {
"title": "Supported Data Types"
},
Expand All @@ -90,6 +99,7 @@
"links": {
"Docs": "Docs",
"Examples": "Examples",
"Blog": "Blog",
"Github": "Github",
"Subscribe": "Subscribe"
},
Expand Down
55 changes: 30 additions & 25 deletions website/pages/en/index.js
Expand Up @@ -315,23 +315,36 @@ const Media = () => (
<div className="block block__centered block__nowidth">
{/* <h2>Vasern on Media</h2> */}
<div className="block__container">
{siteConfig.mediaItems.map((item, i) => (
<div key={`article_${i}`} className="block__item">
<h4>{item.title}</h4>
<p className="block__content">{item.description}</p>
<div className="block__footer">
{ !item.profilePhoto ? null :
<img src={imgUrl(item.profilePhoto)} alt={item.author} />
}
<p>
<b>{item.author}</b>
<a href={item.link} alt={item.title}>
View on {item.publisher}
</a>
</p>
<div
className="block__container"
style={{
width: 300 * siteConfig.mediaItems.length,
flexWrap: "nowrap",
}}
>
{siteConfig.mediaItems.map((item, i) => (
<div key={`article_${i}`} className="block__item">
<h4>{item.title}</h4>
<p className="block__content">{item.description}</p>
<div className="block__footer">
{!item.profilePhoto ? null : (
<img src={imgUrl(item.profilePhoto)} alt={item.author} />
)}
<p>
<b>{item.author}</b>
<a
href={item.link}
alt={item.title}
target="_blank"
rel="noopener noreferrer"
>
View on {item.publisher}
</a>
</p>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -420,18 +433,10 @@ const NavMessage = () => (
>
Subscribe to receive updates
</a>
.
<a
href="https://medium.com/vasern/vasern-a-fast-lightweight-and-open-source-data-storage-for-react-native-7fccff7506a1"
target="_blank"
rel="noopener noreferrer"
>
Read about Beta Release
</a>
</p>
);

class Index extends React.Component {
class Index extends React.PureComponent {
render() {
const language = this.props.language || "";

Expand Down
1 change: 1 addition & 0 deletions website/sidebars.json
Expand Up @@ -10,6 +10,7 @@
"write-schema-setup-vasern",
"basic-crud-operation",
"queries",
"event-listeners",
"support-and-feedback"
],
"Examples": [
Expand Down

0 comments on commit 082fafe

Please sign in to comment.