Nimbus To Do App Tutorial - Part 2

todoapp-list.json

{
  "_:component":"layout:screen",
  "children":[
    {
      "_:component":"layout:lifecycle",
      "state":{
        "isLoading":true,
        "notes":[
          
        ],
        "searchTerm":"",
        "doneFilter":"All"
      },
      "children":[
        {
          "_:component":"if",
          "children":[
            {
              "_:component":"then",
              "children":[
                {
                  "_:component":"layout:text",
                  "properties":{
                    "text":"Loading"
                  }
                }
              ]
            },
            {
              "_:component":"else",
              "children":[
                {
                  "_:component":"layout:column",
                  "children":[
                    {
                      "_:component":"layout:row",
                      "children":[
                        {
                          "_:component":"todoapp:icon",
                          "properties":{
                            "name":"search",
                            "color":"#FFFFFF",
                            "size":28
                          }
                        },
                        {
                          "_:component":"layout:row",
                          "children":[
                            {
                              "_:component":"todoapp:textInput",
                              "properties":{
                                "onChange":[
                                  {
                                    "_:action":"setState",
                                    "properties":{
                                      "path":"searchTerm",
                                      "value":"@{onChange}"
                                    }
                                  }
                                ],
                                "color":"#FFFFFF",
                                "label":"Search",
                                "value":"@{searchTerm}"
                              }
                            }
                          ],
                          "properties":{
                            "width":"expand"
                          }
                        },
                        {
                          "_:component":"todoapp:selectionGroup",
                          "properties":{
                            "onChange":[
                              {
                                "_:action":"setState",
                                "properties":{
                                  "path":"doneFilter",
                                  "value":"@{onChange}"
                                }
                              }
                            ],
                            "options":[
                              "All",
                              "To do",
                              "Done"
                            ],
                            "value":"@{doneFilter}"
                          }
                        }
                      ],
                      "properties":{
                        "backgroundColor":"#5F72C0",
                        "crossAxisAlignment":"center",
                        "paddingHorizontal":20,
                        "height":65
                      }
                    },
                    {
                      "_:component":"forEach",
                      "children":[
                        {
                          "_:component":"layout:column",
                          "children":[
                            {
                              "_:component":"layout:text",
                              "properties":{
                                "weight":"bold",
                                "text":"@{item.date}"
                              }
                            },
                            {
                              "_:component":"forEach",
                              "children":[
                                {
                                  "_:component":"layout:text",
                                  "properties":{
                                    "text":"@{item.title}"
                                  }
                                }
                              ],
                              "properties":{
                                "key":"id",
                                "items":"@{item.items}"
                              }
                            }
                          ],
                          "properties":{
                            "marginTop":5
                          }
                        }
                      ],
                      "properties":{
                        "key":"date",
                        "items":"@{notes}"
                      }
                    }
                  ],
                  "properties":{
                    "height":"expand",
                    "width":"expand",
                    "backgroundColor":"#F1F3F5"
                  }
                }
              ]
            }
          ],
          "properties":{
            "condition":"@{isLoading}"
          }
        }
      ],
      "properties":{
        "onInit":[
          {
            "_:action":"sendRequest",
            "properties":{
              "onError":[
                {
                  "_:action":"log",
                  "properties":{
                    "level":"error",
                    "message":"@{onError.message}"
                  }
                }
              ],
              "onSuccess":[
                {
                  "_:action":"setState",
                  "properties":{
                    "path":"notes",
                    "value":"@{onSuccess.data}"
                  }
                }
              ],
              "url":"https://gist.githubusercontent.com/Tiagoperes/3888902b98494708202fa05569444451/raw/dbc705192e2f87233da2f1eec35936aef8125545/todo.json",
              "onFinish":[
                {
                  "_:action":"setState",
                  "properties":{
                    "path":"isLoading",
                    "value":false
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ],
  "properties":{
    "safeAreaTopBackground":"#5F72C0",
    "statusBarColorScheme":"dark"
  }
}