Combining Views and View Models

LAST EDIT Feb 17 2021

MessageListHeaderView, MessageListView, MessageInputView, and corresponding ViewModels are separate components that usually will be displayed on the same screen. They work great without knowing about each other, but some of the chat features require passing data between different components

Handling threads

Copied!

MessageListViewModel contains information about the current mode which can be changed by interacting with its view. Information needs to be passed to both MessageListHeaderViewModel and MessageInputViewModel which handle different modes. You can combine those view models in the following way:

1
2
3
4
5
6
7
8
9
10
11
12
messageListViewModel.getMode().observe(getViewLifecycleOwner(), (mode) -> { 
    if (mode instanceof MessageListViewModel.Mode.Thread) { 
        // Handle entering thread mode 
        Message parentMessage = ((MessageListViewModel.Mode.Thread) mode).getParentMessage(); 
        messageListHeaderViewModel.setActiveThread(parentMessage); 
        messageInputViewModel.setActiveThread(parentMessage); 
    } else if (mode instanceof MessageListViewModel.Mode.Normal) { 
        // Handle leaving thread mode 
        messageListHeaderViewModel.resetThread(); 
       messageInputViewModel.resetThread(); 
   } 
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
messageListViewModel.mode.observe(viewLifecycleOwner) { mode -> 
    when (mode) { 
        is MessageListViewModel.Mode.Thread -> { 
            // Handle entering thread mode 
            messageListHeaderViewModel.setActiveThread(mode.parentMessage) 
            messageInputViewModel.setActiveThread(mode.parentMessage) 
        } 
        MessageListViewModel.Mode.Normal -> { 
            // Handle leaving thread mode 
            messageListHeaderViewModel.resetThread() 
            messageInputViewModel.resetThread() 
        } 
    } 
}

Editing message

Copied!

MessageListView gives a possibility to set a handler that will be responsible for editing message action. The handler should pass a message to MessageInputViewModel which is responsible for displaying it in MessageInputView:

1
2
3
messageListView.setMessageEditHandler((message) -> { 
    messageInputViewModel.getEditMessage().postValue(message); 
});
1
2
3
messageListView.setMessageEditHandler { message -> 
    messageInputViewModel.editMessage.postValue(message) 
}

Handling back button clicks

Copied!

MessageListHeaderView gives a possibility to override the back button behaviour which should be combined with MessageListViewModel which can handle back button clicks considering whether the user is in thread mode or not. You can easily combine those two components in the following way:

1
2
3
messageListHeaderView.setBackButtonClickListener(() -> { 
    messageListViewModel.onEvent(MessageListViewModel.Event.BackButtonPressed.INSTANCE); 
});
1
2
3
messageListHeaderView.setBackButtonClickListener { 
    messageListViewModel.onEvent(MessageListViewModel.Event.BackButtonPressed) 
}