How to use evergreen-ui - 10 common examples

toaster.warning("All Workers are successfully paused :)");
      } else if (action === "resume") {
        toaster.success("All Workers are successfully resumed :)");
      }
    } else {
      // If action is applied individually
      if (action === "pause") {
        toaster.warning("Worker " + worker_id + " is successfully paused :)");
      } else if (action === "resume") {
        toaster.success("Worker " + worker_id + " is successfully resumed :)");
      } else if (action === "abort") {
        toaster.notify("Worker " + worker_id + " is successfully aborted :)");
      } else if (action === "delete") {
        toaster.notify("Worker " + worker_id + " is successfully deleted :)");
      } else if (action === "create") {
        toaster.notify("Worker is successfully added :)");
      }
    }
  }

onSelect={this.handlePluginShow}
            justifyContent="left"
          >
            
            
          
           this.handleGroupSelect(group)}
            justifyContent="left"
          >
            
            
          
          
                
                  {templatesNames.map((template, index) => {
                    return (
                       this.getDocx(template)}
                      >
                        {template}
                      
                    );
                  })}

static getInitialProps({ renderPage }) {
    const page = renderPage()
    // `css` is a string with css from both glamor and ui-box.
    // No need to get the glamor css manually if you are using it elsewhere in your app.
    //
    // `hydrationScript` is a script you should render on the server.
    // It contains a stringified version of the glamor and ui-box caches.
    // Evergreen will look for that script on the client and automatically hydrate
    // both glamor and ui-box.
    const { css, hydrationScript } = extractStyles()

    return {
      ...page,
      css,
      hydrationScript
    }
  }

async deleteProject (id) {
    this.setState({
      isFetching: true
    })

    try {
      await api.delete(`projects/${id}`).json()
      this.setState({
        isFetching: false
      })

      return true
    } catch (err) {
      toaster.danger(err.message)
      console.log('error: ', err)
    }
  }
}

async fetchOptions (reportId) {
    this.setState({
      isFetching: true
    })

    try {
      const { info } = await api.get(`${reportId}/options`).json()

      this.setState({
        options: info,
        isFetching: false
      })
    } catch (err) {
      toaster.danger(err.message)
      console.log('error: ', err)
    }
  }
}

private handleSubmit() {
    const { onClickSubmit } = this.props
    const { name, token } = this.state

    if (name !== '' && token !== '') {
      onClickSubmit({ name, token })
      toaster.success('Complete to connect!', { duration: 1 })
    } else {
      toaster.warning('Invalid input!', { duration: 1 })
    }
  }