From 632a239bb95814689ce163ba3755827e09e1f225 Mon Sep 17 00:00:00 2001
From: "damian.przygodzki" <damian.przygodzki@jazzy.pro>
Date: Tue, 30 May 2017 09:12:32 +0200
Subject: [PATCH] Modals refactor #1

---
 src/components/Container.js    |  79 +++++++++++++-
 src/containers/Dashboard.js    |  49 ++++-----
 src/containers/DocList.js      |  74 +------------
 src/containers/InboxAll.js     |  36 ++++++-
 src/containers/MasterWindow.js | 192 ++++++++++++++++-----------------
 5 files changed, 228 insertions(+), 202 deletions(-)

diff --git a/src/components/Container.js b/src/components/Container.js
index d2e9267f7..42cee2b31 100644
--- a/src/components/Container.js
+++ b/src/components/Container.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import Header from './header/Header';
 import ErrorScreen from './app/ErrorScreen';
+import Modal from './app/Modal';
+import RawModal from './app/RawModal';
+import DocumentList from './app/DocumentList';
 
 class Container extends Component {
     constructor(props){
@@ -11,11 +14,13 @@ class Container extends Component {
 
     render() {
         const {
-            docActionElem, docStatusData, docNoData, docId,
+            docActionElem, docStatusData, docNoData, docId, processStatus,
             docSummaryData, dataId, windowType, breadcrumb, references, actions,
             showSidelist, siteName, connectionError, noMargin, entity, children,
             query, attachments, showIndicator, isDocumentNotSaved, hideHeader,
-            handleDeletedStatus, dropzoneFocused, notfound
+            handleDeletedStatus, dropzoneFocused, notfound, rawModal, modal,
+            selected, selectedWindowType, indicator, modalTitle, setModalTitle,
+            includedView, closeModalCallback
         } = this.props;
 
         return (
@@ -39,6 +44,76 @@ class Container extends Component {
                         (noMargin ? 'dashboard' : 'container-fluid')
                     }
                 >
+                {modal.visible &&
+                    <Modal
+                        windowType={modal.type}
+                        dataId={modal.dataId ? modal.dataId : ''}
+                        data={modal.data}
+                        layout={modal.layout}
+                        rowData={modal.rowData}
+                        tabId={modal.tabId}
+                        rowId={modal.rowId}
+                        modalTitle={modal.title}
+                        modalType={modal.modalType}
+                        modalViewId={modal.viewId}
+                        isAdvanced={modal.isAdvanced}
+                        relativeType={windowType}
+                        relativeDataId={dataId}
+                        triggerField={modal.triggerField}
+                        query={query}
+                        selected={selected}
+                        viewId={query && query.viewId}
+                        rawModalVisible={rawModal.visible}
+                        indicator={indicator}
+                        modalViewDocumentIds={modal.viewDocumentIds}
+                        closeCallback={closeModalCallback}
+                        modalSaveStatus={
+                            modal.saveStatus &&
+                            modal.saveStatus.saved !== undefined ?
+                                modal.saveStatus.saved : true
+                        }
+                        isDocumentNotSaved={
+                            (modal.saveStatus && !modal.saveStatus.saved) &&
+                            (modal.validStatus &&
+                                !modal.validStatus.initialValue)
+                        }
+                     />
+                 }
+
+                     {rawModal.visible &&
+                         <RawModal
+                             modalTitle={modalTitle}
+                         >
+                            <div className="document-lists-wrapper">
+                                 <DocumentList
+                                     type="grid"
+                                     windowType={rawModal.type}
+                                     defaultViewId={rawModal.viewId}
+                                     selected={selected}
+                                     selectedWindowType={selectedWindowType}
+                                     setModalTitle={setModalTitle}
+                                     isModal={true}
+                                     processStatus={processStatus}
+                                     includedView={includedView}
+                                     inBackground={
+                                         includedView.windowType &&
+                                            includedView.viewId
+                                     }
+                                 >
+                                 </DocumentList>
+                                 {includedView.windowType && includedView.viewId &&
+                                     <DocumentList
+                                         type="includedView"
+                                         selected={selected}
+                                         selectedWindowType={selectedWindowType}
+                                         windowType={includedView.windowType}
+                                         defaultViewId={includedView.viewId}
+                                         isIncluded={true}
+                                     />
+                                 }
+                            </div>
+                         </RawModal>
+                     }
                     {children}
                 </div>
             </div>
diff --git a/src/containers/Dashboard.js b/src/containers/Dashboard.js
index 6def61017..0ee182547 100644
--- a/src/containers/Dashboard.js
+++ b/src/containers/Dashboard.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import Container from '../components/Container';
 import DraggableWrapper from '../components/widget/DraggableWrapper';
-import Modal from '../components/app/Modal';
 
 export class Dashboard extends Component {
     constructor(props){
@@ -12,38 +11,17 @@ export class Dashboard extends Component {
 
     render() {
         const {
-            location, modal, selected, rawModal,
-            indicator
+            location, modal, selected, rawModal, indicator, processStatus,
+            includedView
         } = this.props;
 
         return (
             <Container
                 siteName="Dashboard"
                 noMargin={true}
+                {...{modal, rawModal, selected, indicator, processStatus, 
+                    includedView}}
             >
-                {modal.visible &&
-                    <Modal
-                        windowType={modal.type}
-                        data={modal.data}
-                        layout={modal.layout}
-                        rowData={modal.rowData}
-                        tabId={modal.tabId}
-                        rowId={modal.rowId}
-                        modalTitle={modal.title}
-                        modalType={modal.modalType}
-                        modalViewId={modal.viewId}
-                        selected={selected}
-                        viewId={null}
-                        rawModalVisible={rawModal.visible}
-                        indicator={indicator}
-                        isDocumentNotSaved={
-                            (modal.saveStatus && !modal.saveStatus.saved) &&
-                            (modal.validStatus &&
-                                !modal.validStatus.initialValue)
-                        }
-                     />
-                 }
-
                 <div className="container-fluid dashboard-wrapper">
                     <DraggableWrapper
                         dashboard={location.pathname}
@@ -60,14 +38,14 @@ Dashboard.propTypes = {
 
 function mapStateToProps(state) {
     const {
-        windowHandler
+        windowHandler, listHandler, appHandler
     } = state;
 
     const {
         modal,
         rawModal,
         selected,
-        indicator
+        indicator,
     } = windowHandler || {
         modal: false,
         rawModal: false,
@@ -75,8 +53,21 @@ function mapStateToProps(state) {
         indicator: ''
     }
 
+    
+    const {
+        includedView
+    } = listHandler || {
+        includedView: {}
+    }
+
+    const {
+        processStatus
+    } = appHandler || {
+        processStatus: ''
+    }
+
     return {
-        modal, selected, indicator, rawModal
+        modal, selected, indicator, rawModal, processStatus, includedView
     }
 }
 
diff --git a/src/containers/DocList.js b/src/containers/DocList.js
index 022f87416..e6f91fd57 100644
--- a/src/containers/DocList.js
+++ b/src/containers/DocList.js
@@ -4,8 +4,6 @@ import {connect} from 'react-redux';
 
 import DocumentList from '../components/app/DocumentList';
 import Container from '../components/Container';
-import Modal from '../components/app/Modal';
-import RawModal from '../components/app/RawModal';
 
 import {
     getWindowBreadcrumb
@@ -79,76 +77,12 @@ class DocList extends Component {
         return (
             <Container
                 entity="documentView"
-                breadcrumb={breadcrumb}
-                windowType={windowType}
-                query={query}
-                notfound={notfound}
+                {...{modal, rawModal, breadcrumb, windowType, query, notfound,
+                    selected, selectedWindowType, indicator, modalTitle,
+                    processStatus, includedView}}
+                setModalTitle={this.setModalTitle}
                 showIndicator={!modal.visible && !rawModal.visible}
             >
-                {modal.visible &&
-                    <Modal
-                        windowType={modal.type}
-                        dataId={modal.dataId ? modal.dataId : ''}
-                        data={modal.data}
-                        layout={modal.layout}
-                        rowData={modal.rowData}
-                        tabId={modal.tabId}
-                        rowId={modal.rowId}
-                        modalTitle={modal.title}
-                        modalType={modal.modalType}
-                        modalViewId={modal.viewId}
-                        query={query}
-                        selected={selected}
-                        viewId={query.viewId}
-                        rawModalVisible={rawModal.visible}
-                        indicator={indicator}
-                        modalSaveStatus={
-                            modal.saveStatus &&
-                            modal.saveStatus.saved !== undefined ?
-                                modal.saveStatus.saved : true
-                        }
-                        isDocumentNotSaved={
-                            (modal.saveStatus && !modal.saveStatus.saved) &&
-                            (modal.validStatus &&
-                                !modal.validStatus.initialValue)
-                        }
-                     />
-                 }
-
-                 {rawModal.visible &&
-                     <RawModal
-                         modalTitle={modalTitle}
-                     >
-                        <div className="document-lists-wrapper">
-                             <DocumentList
-                                 type="grid"
-                                 windowType={rawModal.type}
-                                 defaultViewId={rawModal.viewId}
-                                 selected={selected}
-                                 selectedWindowType={selectedWindowType}
-                                 setModalTitle={this.setModalTitle}
-                                 isModal={true}
-                                 processStatus={processStatus}
-                                 includedView={includedView}
-                                 inBackground={
-                                     includedView.windowType &&
-                                        includedView.viewId
-                                 }
-                             >
-                             </DocumentList>
-                             {includedView.windowType && includedView.viewId &&
-                                 <DocumentList
-                                     type="includedView"
-                                     selected={selected}
-                                     selectedWindowType={selectedWindowType}
-                                     windowType={includedView.windowType}
-                                     defaultViewId={includedView.viewId}
-                                     isIncluded={true}
-                                 />
-                             }
-                        </div>
-                     </RawModal>
-                 }
                  <DocumentList
                      type="grid"
                      updateUri={this.updateUriCallback}
diff --git a/src/containers/InboxAll.js b/src/containers/InboxAll.js
index e4de0765e..79dbb5b3f 100644
--- a/src/containers/InboxAll.js
+++ b/src/containers/InboxAll.js
@@ -8,11 +8,16 @@ import Inbox from '../components/inbox/Inbox';
 
 class InboxAll extends Component {
     render() {
-        const {inbox} = this.props;
+        const {
+            inbox, modal, rawModal, processStatus, indicator, selected, 
+            includedView
+        } = this.props;
 
         return (
             <Container
                 siteName = "Inbox"
+                {...{modal, rawModal, processStatus, indicator, selected,
+                    includedView}}
             >
                 <Inbox
                     all={true}
@@ -24,15 +29,36 @@ class InboxAll extends Component {
 }
 
 function mapStateToProps(state) {
-    const { appHandler } = state;
+    const { appHandler, windowHandler, listHandler  } = state;
+    
     const {
-        inbox
+        inbox,
+        processStatus
     } = appHandler || {
-        inbox: {}
+        inbox: {},
+        processStatus: ''
+    }
+    
+    const {
+        modal,
+        rawModal,
+        selected,
+        indicator,
+    } = windowHandler || {
+        modal: false,
+        rawModal: false,
+        selected: [],
+        indicator: ''
+    }
+    
+    const {
+        includedView
+    } = listHandler || {
+        includedView: {}
     }
 
     return {
-        inbox
+        inbox, modal, rawModal, selected, indicator, includedView, processStatus
     }
 }
 
diff --git a/src/containers/MasterWindow.js b/src/containers/MasterWindow.js
index 058da3d2c..e57580155 100644
--- a/src/containers/MasterWindow.js
+++ b/src/containers/MasterWindow.js
@@ -180,108 +180,90 @@ class MasterWindow extends Component {
 
         let body = [];
 
-        if(modal.visible){
-            body.push(
-                <Modal
-                    key="modal"
-                    relativeType={type}
-                    relativeDataId={dataId}
-                    triggerField={modal.triggerField}
-                    windowType={modal.type}
-                    dataId={modal.dataId ? modal.dataId : dataId}
-                    data={modal.data}
-                    layout={modal.layout}
-                    rowData={modal.rowData}
-                    tabId={modal.tabId}
-                    rowId={modal.rowId}
-                    modalTitle={modal.title}
-                    modalType={modal.modalType}
-                    modalViewId={modal.viewId}
-                    isAdvanced={modal.isAdvanced}
-                    viewId={null}
-                    modalViewDocumentIds={modal.viewDocumentIds}
-                    closeCallback={this.closeModalCallback}
-                    rawModalVisible={rawModal.visible}
-                    indicator={indicator}
-                    modalSaveStatus={
-                        modal.saveStatus &&
-                        modal.saveStatus.saved !== undefined ?
-                            modal.saveStatus.saved : true
-                    }
-                    isDocumentNotSaved={modal.saveStatus ?
-                        !modal.saveStatus.saved &&
-                        !modal.validStatus.initialValue : false
-                    }
-                 />
-            )
-        }
-
-        if(rawModal.visible){
-            body.push(
-                <RawModal
-                    key="rawModal"
-                    modalTitle={modalTitle}
-                >
-                    <div className="document-lists-wrapper">
-                        <DocumentList
-                            type="grid"
-                            windowType={rawModal.type}
-                            defaultViewId={rawModal.viewId}
-                            selected={selected}
-                            selectedWindowType={selectedWindowType}
-                            isModal={true}
-                            setModalTitle={this.setModalTitle}
-                            processStatus={processStatus}
-                            includedView={includedView}
-                            inBackground={
-                                includedView.windowType && includedView.viewId
-                            }
-                        >
-                        </DocumentList>
-                        {includedView.windowType && includedView.viewId &&
-                            <DocumentList
-                                type="includedView"
-                                selected={selected}
-                                selectedWindowType={selectedWindowType}
-                                windowType={includedView.windowType}
-                                defaultViewId={includedView.viewId}
-                                isIncluded={true}
-                            />
-                        }
-                    </div>
-                </RawModal>
-            )
-        }
-
-        body.push(
-            <Window
-                key="window"
-                data={master.data}
-                layout={master.layout}
-                rowData={master.rowData}
-                tabsInfo={master.includedTabsInfo}
-                sort={this.sort}
-                dataId={dataId}
-                isModal={false}
-                newRow={newRow}
-                handleDragStart={this.handleDragStart}
-                handleDropFile={accepted => this.handleDropFile(accepted)}
-                handleRejectDropped={
-                    rejected => this.handleRejectDropped(rejected)
-                }
-            />
-        )
+        // if(modal.visible){
+        //     body.push(
+        //         <Modal
+        //             key="modal"
+        //             relativeType={type}
+        //             relativeDataId={dataId}
+        //             triggerField={modal.triggerField}
+        //             windowType={modal.type}
+        //             dataId={modal.dataId ? modal.dataId : dataId}
+        //             data={modal.data}
+        //             layout={modal.layout}
+        //             rowData={modal.rowData}
+        //             tabId={modal.tabId}
+        //             rowId={modal.rowId}
+        //             modalTitle={modal.title}
+        //             modalType={modal.modalType}
+        //             modalViewId={modal.viewId}
+        //             isAdvanced={modal.isAdvanced}
+        //             viewId={null}
+        //             modalViewDocumentIds={modal.viewDocumentIds}
+        //             closeCallback={this.closeModalCallback}
+        //             rawModalVisible={rawModal.visible}
+        //             indicator={indicator}
+        //             modalSaveStatus={
+        //                 modal.saveStatus &&
+        //                 modal.saveStatus.saved !== undefined ?
+        //                     modal.saveStatus.saved : true
+        //             }
+        //             isDocumentNotSaved={modal.saveStatus ?
+        //                 !modal.saveStatus.saved &&
+        //                 !modal.validStatus.initialValue : false
+        //             }
+        //          />
+        //     )
+        // }
+        // 
+        // if(rawModal.visible){
+        //     body.push(
+        //         <RawModal
+        //             key="rawModal"
+        //             modalTitle={modalTitle}
+        //         >
+        //             <div className="document-lists-wrapper">
+        //                 <DocumentList
+        //                     type="grid"
+        //                     windowType={rawModal.type}
+        //                     defaultViewId={rawModal.viewId}
+        //                     selected={selected}
+        //                     selectedWindowType={selectedWindowType}
+        //                     isModal={true}
+        //                     setModalTitle={this.setModalTitle}
+        //                     processStatus={processStatus}
+        //                     includedView={includedView}
+        //                     inBackground={
+        //                         includedView.windowType && includedView.viewId
+        //                     }
+        //                 >
+        //                 </DocumentList>
+        //                 {includedView.windowType && includedView.viewId &&
+        //                     <DocumentList
+        //                         type="includedView"
+        //                         selected={selected}
+        //                         selectedWindowType={selectedWindowType}
+        //                         windowType={includedView.windowType}
+        //                         defaultViewId={includedView.viewId}
+        //                         isIncluded={true}
+        //                     />
+        //                 }
+        //             </div>
+        //         </RawModal>
+        //     )
+        // }
 
         return body;
     }
 
     render() {
         const {
-            master, modal, breadcrumb, params
+            master, modal, breadcrumb, params, rawModal, selected,
+            selectedWindowType, includedView, processStatus
         } = this.props;
 
         const {
-            dropzoneFocused
+            dropzoneFocused, newRow, modalTitle
         } = this.state;
 
         const {
@@ -308,8 +290,10 @@ class MasterWindow extends Component {
         return (
             <Container
                 entity="window"
-                {...{dropzoneFocused, docStatusData, docSummaryData,
-                    dataId, breadcrumb, docNoData, isDocumentNotSaved}}
+                {...{dropzoneFocused, docStatusData, docSummaryData, modal,
+                    dataId, breadcrumb, docNoData, isDocumentNotSaved, rawModal,
+                    selected, selectedWindowType}}
+                closeModalCallback={this.closeModalCallback}
                 docActionElem = {docActionElement}
                 windowType={params.windowType}
                 docId={params.docId}
@@ -318,7 +302,23 @@ class MasterWindow extends Component {
                 handleDeletedStatus={this.handleDeletedStatus}
             >
                 {dataId === 'notfound' ?
-                    <BlankPage what="Document" /> : this.renderBody()
+                    <BlankPage what="Document" /> :
+                    <Window
+                        key="window"
+                        data={master.data}
+                        layout={master.layout}
+                        rowData={master.rowData}
+                        tabsInfo={master.includedTabsInfo}
+                        sort={this.sort}
+                        dataId={dataId}
+                        isModal={false}
+                        newRow={newRow}
+                        handleDragStart={this.handleDragStart}
+                        handleDropFile={accepted => this.handleDropFile(accepted)}
+                        handleRejectDropped={
+                            rejected => this.handleRejectDropped(rejected)
+                        }
+                    />
                 }
             </Container>
         );