The current system is an online whiteboard system. Tech stack:
typescript, react, redux, konvajs and react-konva. And vitest, react
testing library for model, view model and related hooks, cypress component
tests for view.

All codes should be written in the tech stack mentioned above.
Requirements should be implemented as react components in the MVVM
architecture pattern.

There are 2 types
of view model in the system.

1. Shared view model. View model that represents states shared among
local and remote users.

2. Local view model. View model that represents states only applicable
to local user

Here are the common implementation strategy:

1. Shared view model is implemented as Redux store slice. Tested in
vitest.

2. Local view model is implemented as React component props or states(by
useState hook), unless for global local view model, which is also
implemented as Redux store slice. Tested in vitest.

3. Hooks are used as the major view helpers to retrieve data from shared
view model. For most the case, it will use ‘createSelector’ and
‘useSelector’ for memorization. Tested in vitest and react testing
library.

4. Don’t dispatch action directly to change the states of shared view
model, use an encapsulated view model interface instead. In the interface,
each redux action is mapped to a method. Tested in vitest.

5. View is consist of konva shapes, and implemented as react component via
react-konva. Tested in cypress component tests 

Here are certain patterns should be followed when implement and test
the  Write your response with at least 700 words.
user