KSUP - How I Customized Operational Plan Updates with a Virtual SPListItem and React/Redux

Task

It was necessary to customize the existing functionality for updating Operational Plans. The goal was to allow users to independently select changed/created items as candidates for the new version of the operational plan. For reference: updating the OP is a procedure in which all sales/contracts from the previous version are compared with current entities, new added entities are identified, and all of them are marked as new or changed and become candidates for inclusion in the next version of the OP.

Implementation

The existing update mechanism was improved so that during candidate selection, everything did not happen automatically, but the user could participate. Since the existing logic was very tightly coupled to working with list items (SPListItem), it was necessary to add a wrapper around this element, which was almost identical in signature, but allowed working with the item without physically creating it in the SharePoint list (previously, it was always created). This wrapper helped avoid significant rewriting of the existing code.

A web part was developed with a UserControl that connects a JS bundle on the page. Since the React part is called from the SharePoint menu, I had to get creative to link the internal context of the React-JS application with the global JS context (I wrote an article about this here, by the way). Development was done using class components with TypeScript, bundler - Webpack, state management - Redux, state reading - reselect. For server side effects, redux-saga was chosen. For displaying nice comparison tables, I used React-Table (with its useTable hook). Around this time, I realized it was time to start migrating my own components to functional ones.

Main component code with modal:

Column generation utilities:

Module typings for working with the service

Sagas and Watchers

Some reducers: