I’m trying to develop a simple note taking app in jetpack compose. I’ve successfully developed an application that takes in text field inputs and saves them using room database then displays them into a lazy column.

I’ve create the basic room files. Here they are:

The Note Entity takes one parameter (other than the id) called text.

@Entity
data class Note(

    val Text: String,

    @PrimaryKey(autoGenerate = true)
    val id: Int = 0
)

The Doa has five functions. One for inserting a note, one for updating a note, one for deleting a note, one for retrieving all notes, and one for retrieving a note by it’s id.

@Dao
interface NoteDao {

    @Insert
    suspend fun insertNote(note: Note)

    @Update
    suspend fun updateNote(note: Note)

    @Delete
    suspend fun deleteNote(note: Note)

    @Query("SELECT * FROM note")
    fun getAllNotes(): Flow<List<Note>>

    @Query("SELECT * FROM note WHERE id = :id")
    fun getNoteById(id: Int): Flow<Note>
}

Here is the database as you’d expect.

@Database(
    entities = [Note::class],
    version = 1
)
abstract class NoteDatabase: RoomDatabase() {
    abstract val noteDao: NoteDao
}

Here is the view model. It takes all of the Dao functions.

class NoteViewModel(private val noteDatabase: NoteDatabase): ViewModel() {

    fun insertNote(note: Note){
        viewModelScope.launch {
            noteDatabase.noteDao.insertNote(note)
        }
    }

    fun updateNote(note: Note){
        viewModelScope.launch {
            noteDatabase.noteDao.updateNote(note)
        }
    }

    fun deleteNote(note: Note){
        viewModelScope.launch {
            noteDatabase.noteDao.deleteNote(note)
        }
    }

    fun getAllNotes() = noteDatabase.noteDao.getAllNotes()
        .asLiveData(viewModelScope.coroutineContext)

    fun getNoteById(id: Int) = noteDatabase.noteDao.getNoteById(id)
        .asLiveData(viewModelScope.coroutineContext)

}

Here is the Main Page Composable. It contains a column that displays two text fields, one holds a variable called “textValue” and the other holds a variable called “updateValue”. Beneath the text fields are two buttons. One successfully saves the value of the first text field and displays it in a lazy column, the other unsuccessfully updates the value of a saved note. Beneath buttons is a lazy column that displays the saved notes.

@Composable
fun MainPage(viewModel: NoteViewModel) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(20.dp),
        modifier = Modifier
            .fillMaxSize()
            .padding(50.dp)
    ) {

        val note = Note(
            Text = textValue
        )

        var noteList by remember { mutableStateOf(listOf<Note>())}

        viewModel.getAllNotes().observe(LocalLifecycleOwner.current) {
            noteList = it
        }

        NoteTextField(text = textValue, onTextChange = { textValue = it })

        NoteTextField(text = updateValue, onTextChange = { updateValue = it })

        Row {
            NoteButton(
                text = "Create",
                onClick = {
                    viewModel.insertNote(note)
                }

            )
            NoteButton(
                text = "Update",
                onClick = {
                        viewModel.updateNote(
                        note = Note(updateValue))
                }
            )
        }
        NoteList(noteList = noteList)
    }
}

Here the NoteList composable. It contains a lazy column, that holds a box that displays the saved note. When a box is pressed the saved note is displayed in the second text field.

@Composable
fun NoteList(
    noteList: List<Note>
    ) {
    LazyColumn {
        items(noteList){note ->
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .clickable {
                    savedText = note.Text
                    updateValue = note.Text
                }
                .border(width = 1.dp, color = Color.Black)
                .fillMaxWidth()
                .height(100.dp)
        ){
            Text(text = "${note.Text}    ${note.id}")
        }
    }}
}

I can’t figure out how to update the saved note after it is displayed in the second text field.