class BinderPage extends StatefulWidget {
  const BinderPage({Key key}) : super(key: key);

  @override
  _BinderPageState createState() => _BinderPageState();
}

class _BinderPageState extends State<BinderPage> {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();

    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Subscribe to NotesState
    final state = context.watch(notesRef);

    return Scaffold(
      appBar: AppBar(title: Text('My notes app')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            FlatButton(
                onPressed: () {
                  // Get a reference of NotesViewLogic 
                  // and add a note.
                  context.use(notesViewLogicRef).addNote();
                  _controller.clear();
                },
                child: Text('Create Note')),
            TextField(
              controller: _controller,
              // Get a reference of NotesViewLogic 
              // and update the input value.
              onChanged: (value) =>
                  context.use(notesViewLogicRef).updateInput(value),
              decoration: InputDecoration.collapsed(hintText: 'Add a note'),
            ),
            Divider(),
            Expanded(
              child: ListView.builder(
                itemBuilder: (context, index) => Note(text: state.notes[index]),
                itemCount: state.notes.length,
              ),
            )
          ],
        ),
      ),
    );
  }
}