Update dependents to use new exposed service

extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx

@@ -7,7 +7,7 @@ import {
 
 function LayoutSelector() {
   const [isOpen, setIsOpen] = useState(false);
-  const [viewportGridState, dispatch] = useViewportGrid();
+  const [viewportGridState, viewportGridService] = useViewportGrid();
 
   useEffect(() => {
     function closeOnOutsideClick() {
@@ -35,13 +35,7 @@ function LayoutSelector() {
         DropdownContent !== null && (
           <DropdownContent
             onSelection={({ numRows, numCols }) => {
-              dispatch({
+              viewportGridService.setLayout({ numCols, numRows });
-                type: 'SET_LAYOUT',
-                payload: {
-                  numCols,
-                  numRows,
-                },
-              });
             }}
           />
         )

extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

@@ -25,7 +25,7 @@ function OHIFCornerstoneSRViewport({
   viewportIndex,
   DisplaySetService,
 }) {
-  const [viewportGrid, dispatchViewportGrid] = useViewportGrid();
+  const [viewportGrid, viewportGridService] = useViewportGrid();
   const [measurementSelected, setMeasurementSelected] = useState(0);
   const [measurementCount, setMeasurementCount] = useState(1);
   const [viewportData, setViewportData] = useState(null);

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx

@@ -19,10 +19,7 @@ function PanelStudyBrowserTracking({
   // doesn't have to have such an intense shape. This works well enough for now.
   // Tabs --> Studies --> DisplaySets --> Thumbnails
   const [{ StudyInstanceUIDs }, dispatchImageViewer] = useImageViewer();
-  const [
+  const [{ activeViewportIndex, viewports }] = useViewportGrid();
-    { activeViewportIndex, viewports },
-    dispatchViewportGrid,
-  ] = useViewportGrid();
   const [
     trackedMeasurements,
     sendTrackedMeasurementsEvent,

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js

@@ -41,10 +41,7 @@ function TrackedCornerstoneViewport({
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
 
-  const [
+  const [{ activeViewportIndex, viewports }] = useViewportGrid();
-    { activeViewportIndex, viewports },
-    dispatchViewportGrid,
-  ] = useViewportGrid();
   // viewportIndex, onSubmit
   const [viewportDialogState, viewportDialogApi] = useViewportDialog();
   const [viewportData, setViewportData] = useState(null);

platform/viewer/src/components/ViewportGrid.jsx

@@ -10,11 +10,13 @@ function ViewerViewportGrid(props) {
   const { servicesManager, viewportComponents, dataSource } = props;
   const [
     { numCols, numRows, activeViewportIndex, viewports },
-    dispatch,
+    viewportGridService,
   ] = useViewportGrid();
 
+  debugger;
+
   const setActiveViewportIndex = index => {
-    dispatch({ type: 'SET_ACTIVE_VIEWPORT_INDEX', payload: index });
+    viewportGridService.setActiveViewportIndex(index);
   };
 
   // TODO -> Need some way of selecting which displaySets hit the viewports.
@@ -71,12 +73,9 @@ function ViewerViewportGrid(props) {
   // ]);
   const onDropHandler = (viewportIndex, { displaySetInstanceUID }) => {
     console.warn(`DROPPED: ${displaySetInstanceUID}`);
-    dispatch({
+    viewportGridService.setDisplaysetForViewport({
-      type: 'SET_DISPLAYSET_FOR_VIEWPORT',
+      viewportIndex,
-      payload: {
+      displaySetInstanceUID,
-        viewportIndex,
-        displaySetInstanceUID,
-      },
     });
   };