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 loaded.
    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")
        }
        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],
  }
};