Connect to server
You can ping to server more easily now.
Request server and get data:
you can create network
object for any component and use fetch
or axios
to ping server.
For example, below is the button component in a screen. Whenever it is pressed, a request will go to server and get data.
const buttonPress = {
component: NANO.BUTTON,
value: 'CLICK ME',
onPress: ({ moduleParams }) => {
// this will get called first if network request action is 'onPress'
},
network:{
use: "fetch", // use `axios` if you want to use axios
action: "onPress" // use `onStart` if you want this request to be executed when component is mounted.
props:{
url: "",
method: "POST",
headers:{
},
body: {
}
// add more fetch parameters here
},
onSuccess: ({setUi, getUi, moduleParams, methodValues}) => {
const response = methodValues
console.log(response)
},
onFailure: ({setUi, getUi, moduleParams, methodValues}) => {
const response = methodValues
console.log(response)
}
}
};
const screen = {
name: 'HomeScreen',
screen: {
h1: [buttonPress],
}
};
Dynamic network props
In case if you want to dynamically create network props, you can do like below
const buttonPress = {
component: NANO.BUTTON,
value: 'CLICK ME',
onPress: ({ moduleParams }) => {
// this will get called first if network request action is 'onPress'
},
network:{
use: "fetch", // use `axios` if you want to use axios
action: "onPress" // use `onStart` if you want this request to be executed when component is loaded.
props:{
url: ({ moduleParams }) => {
// You can build a dynamic url here by using moduleParams data and return it
const url = "https://www.xxxx.com"
return url
},
method: "POST",
headers:({moduleParams}) => {
// You can build a dynamic headers here by using moduleParams data and return it
const headers = {
Authorization: "JWT " + moduleParams["database"].getValue("token")["value"]
}
return headers
},
body: ({getUi, moduleParams}) => {
// You can build a dynamic body here by using getUi data and return it
const textObj = getUi("text")
const body = {
name : textObj.value
}
return body
}
// add more fetch parameters here
},
onSuccess: ({setUi, getUi, moduleParams, methodValues}) => {
const response = methodValues
console.log(response)
},
onFailure: ({setUi, getUi, moduleParams, methodValues}) => {
const response = methodValues
console.log(response)
}
}
};
const screen = {
name: 'HomeScreen',
screen: {
h1: [buttonPress],
}
};