From 1bb204b9a554abfb276a75821e232b609b83ce9e Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Mon, 18 May 2020 19:49:32 +0200
Subject: [PATCH] Stop using children

---
 extensions/default/src/ViewerLayout/index.jsx   |  9 ++++-----
 platform/viewer/src/components/ViewportGrid.jsx | 12 ++++++++----
 platform/viewer/src/routes/Mode/Mode.jsx        |  5 ++---
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx
index 64dd6222b..83f8c2475 100644
--- a/extensions/default/src/ViewerLayout/index.jsx
+++ b/extensions/default/src/ViewerLayout/index.jsx
@@ -28,12 +28,11 @@ function ViewerLayout({
   rightPanels,
   viewports,
   children,
+  ViewportGridComp
 }) {
   const [displaySets, setDisplaySets] = useState({});
 
-  const ViewportGrid = React.Children.only(children);
-  debugger;
-
+  //const ViewportGrid = React.Children.only(children);
 
   /**
    * Set body classes (tailwindcss) that don't allow vertical
@@ -109,10 +108,10 @@ function ViewerLayout({
             <Toolbar type="secondary" tools={secondaryToolBarLayout.tools} />
           </div>
           <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
-            {/*<ViewportGrid
+            <ViewportGridComp
               servicesManager={servicesManager}
               viewportComponents={viewportComponents}
-            />*/}
+            />
             {/*
               viewportContents={[
                 <Viewport
diff --git a/platform/viewer/src/components/ViewportGrid.jsx b/platform/viewer/src/components/ViewportGrid.jsx
index f49fb433f..03225857d 100644
--- a/platform/viewer/src/components/ViewportGrid.jsx
+++ b/platform/viewer/src/components/ViewportGrid.jsx
@@ -1,13 +1,15 @@
 /**
  * CSS Grid Reference: http://grid.malven.co/
  */
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ViewportGrid, ViewportPane } from '@ohif/ui';
 // import DefaultViewport from './DefaultViewport.js';
 // import EmptyViewport from './EmptyViewport.js';
 
 function ViewerViewportGrid(props) {
+  debugger;
+
   const {
     activeViewportIndex,
     servicesManager,
@@ -15,8 +17,6 @@ function ViewerViewportGrid(props) {
     dataSource,
   } = props;
 
-  debugger;
-
   // TODO -> Need some way of selecting which displaySets hit the viewports.
   const { DisplaySetService } = servicesManager.services;
 
@@ -50,7 +50,11 @@ function ViewerViewportGrid(props) {
   }, []);
 
   // From ViewportGridService and/or ContextProvider
-  const [viewportGrid, setViewportGrid] = useState({});
+  const [viewportGrid, setViewportGrid] = useState({
+    numCols: 1,
+    numRows: 1,
+    viewports: []
+  });
 
   // viewportData --> displaySets
 
diff --git a/platform/viewer/src/routes/Mode/Mode.jsx b/platform/viewer/src/routes/Mode/Mode.jsx
index cee9babe6..610aa5d1d 100644
--- a/platform/viewer/src/routes/Mode/Mode.jsx
+++ b/platform/viewer/src/routes/Mode/Mode.jsx
@@ -54,6 +54,7 @@ export default function ModeRoute({
     Compose({ components: contextModuleProviders, children });
 
   function ViewportGridWithDataSource(props) {
+    debugger;
     return ViewportGrid({ ...props, dataSource });
   }
 
@@ -88,9 +89,7 @@ export default function ModeRoute({
          *  Use it from there instead of passing as a prop here.
          */}
         <DragAndDropProvider>
-          <LayoutComponent {...layoutTemplateData.props}>
-            <div>test</div>
-          </LayoutComponent>
+          <LayoutComponent {...layoutTemplateData.props} ViewportGridComp={ViewportGridWithDataSource}/>
         </DragAndDropProvider>
       </CombinedContextProvider>
       {/*</ToolbarLayoutProvider>*/}