High Order Component for using nanoSQL with React
npm install nano-sql-react
npm i nano-sql-react --save
`
Usage
`ts
import { bindNSQL } from "nano-sql-react";
import { DatabaseEvent } from "nano-sql";
import * as React from "react";
/*
Step 1: Make your component as usual, just add the two additional nSQL* props below.
Step 2: Add the two static methods below, tables() and onChange().
*/
export class MyComponent extends React.Component<{
some: any;
other: any;
props: any; // any number of props you need
nSQLdata: any; // holds data from nanoSQL
nSQLloading: boolean; // if a query is pending
}, {}> {
// Tables to listen for changes on
static tables() {
return ["tables", "to", "listen"];
}
// Method is called on each change
static onChange: (event, complete) => {
nSQL("table").query("select").exec().then((rows) => {
if (!rows.length) return;
// whatever you pass into complete()
// will become this.props.nSQLdata in the render method
complete({message: rows[0].message});
});
}
render() {
return this.props.nSQLloading ?
"Loading..." :
this.props.nSQLdata.message + this.props.some;
}
}
/*
Step 2: In the parent component, call the bindNSQL function against a new variable.
Step 3. Pass in the arguments as described.
Step 4: Use the new variable as your component.
*/
export class ParentComponnt extends React.Component<{}, {}> {
public messageComponent: React.ComponentClass;
constructor(p) {
super(p);
this.messageComponent = bindNSQL(MyComponent);
}
render() {
// You can pass in your other props while you're at it.
return ;
}
}
`
As an additional note, the onChange function will be called once on component mount to bring in any state from nanoSQL, then any subsequent onChange calls will be due to actual events from the database.
You can check to see if it's the first mount call by doing this check in the onChange function: event.notes === ["mount"]. That will return false for all standard queries from nanoSQL but true` for the first call on the component mount.