From b76e2be6c1dbde2536fc4d844788cac1428df05a Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 25 Jun 2018 19:16:39 -0700
Subject: [PATCH] Refactor overlay technology to not use redux store

---
 ui/src/App.tsx                                |   2 -
 ui/src/shared/actions/overlayTechnology.ts    |  34 ------
 .../shared/components/OverlayTechnology.tsx   | 108 +++++++-----------
 ui/src/shared/reducers/overlayTechnology.ts   |  29 -----
 ui/src/store/configureStore.js                |   2 -
 5 files changed, 39 insertions(+), 136 deletions(-)
 delete mode 100644 ui/src/shared/actions/overlayTechnology.ts
 delete mode 100644 ui/src/shared/reducers/overlayTechnology.ts

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 6272dd485b..03157d8989 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -2,7 +2,6 @@ import React, {SFC, ReactChildren} from 'react'
 
 import SideNav from 'src/side_nav'
 import Notifications from 'src/shared/components/Notifications'
-import Overlay from 'src/shared/components/OverlayTechnology'
 
 interface Props {
   children: ReactChildren
@@ -10,7 +9,6 @@ interface Props {
 
 const App: SFC<Props> = ({children}) => (
   <div className="chronograf-root">
-    <Overlay />
     <Notifications />
     <SideNav />
     {children}
diff --git a/ui/src/shared/actions/overlayTechnology.ts b/ui/src/shared/actions/overlayTechnology.ts
deleted file mode 100644
index 400dd7f9b1..0000000000
--- a/ui/src/shared/actions/overlayTechnology.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {ReactElement} from 'react'
-
-type OverlayNodeType = ReactElement<any>
-
-interface Options {
-  dismissOnClickOutside?: boolean
-  dismissOnEscape?: boolean
-  transitionTime?: number
-}
-
-export type ShowOverlayActionCreator = (
-  OverlayNode: OverlayNodeType,
-  options: Options
-) => ShowOverlayAction
-
-interface ShowOverlayAction {
-  type: 'SHOW_OVERLAY'
-  payload: {
-    OverlayNode
-    options
-  }
-}
-
-export const showOverlay = (
-  OverlayNode: OverlayNodeType,
-  options: Options
-): ShowOverlayAction => ({
-  type: 'SHOW_OVERLAY',
-  payload: {OverlayNode, options},
-})
-
-export const dismissOverlay = () => ({
-  type: 'DISMISS_OVERLAY',
-})
diff --git a/ui/src/shared/components/OverlayTechnology.tsx b/ui/src/shared/components/OverlayTechnology.tsx
index ad1d3ccb5f..c6eda81101 100644
--- a/ui/src/shared/components/OverlayTechnology.tsx
+++ b/ui/src/shared/components/OverlayTechnology.tsx
@@ -1,104 +1,74 @@
-import React, {PureComponent, Component} from 'react'
-import {connect} from 'react-redux'
+import React, {Component} from 'react'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-import {dismissOverlay} from 'src/shared/actions/overlayTechnology'
-
 interface Props {
-  OverlayNode?: Component<any>
-  dismissOnClickOutside?: boolean
-  dismissOnEscape?: boolean
-  transitionTime?: number
-  handleDismissOverlay: () => void
-}
-
-interface State {
+  children: JSX.Element
   visible: boolean
 }
 
-export const OverlayContext = React.createContext()
+interface State {
+  showChildren: boolean
+}
 
 @ErrorHandling
-class Overlay extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
-    dismissOnClickOutside: false,
-    dismissOnEscape: false,
-    transitionTime: 300,
-  }
-
+class OverlayTechnology extends Component<Props, State> {
   private animationTimer: number
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props)
 
     this.state = {
-      visible: false,
+      showChildren: false,
     }
   }
 
   public componentDidUpdate(prevProps) {
-    if (prevProps.OverlayNode === null && this.props.OverlayNode) {
-      return this.setState({visible: true})
+    if (prevProps.visible === true && this.props.visible === false) {
+      this.animationTimer = window.setTimeout(this.hideChildren, 300)
+      return
     }
+
+    if (prevProps.visible === false && this.props.visible === true) {
+      this.showChildren()
+      return
+    }
+
+    return
   }
 
   public render() {
-    const {OverlayNode} = this.props
-
     return (
-      <OverlayContext.Provider
-        value={{
-          onDismissOverlay: this.handleAnimateDismiss,
-        }}
-      >
-        <div className={this.overlayClass}>
-          <div className="overlay--dialog">{OverlayNode}</div>
-          <div className="overlay--mask" onClick={this.handleClickOutside} />
-        </div>
-      </OverlayContext.Provider>
+      <div className={this.overlayClass}>
+        {this.childContainer}
+        <div className="overlay--mask" />
+      </div>
     )
   }
 
+  private get childContainer(): JSX.Element {
+    const {children} = this.props
+    const {showChildren} = this.state
+
+    if (showChildren) {
+      return <div className="overlay--dialog">{children}</div>
+    }
+
+    return <div className="overlay--dialog" />
+  }
+
   private get overlayClass(): string {
-    const {visible} = this.state
+    const {visible} = this.props
     return `overlay-tech ${visible ? 'show' : ''}`
   }
 
-  public handleClickOutside = () => {
-    const {handleDismissOverlay, dismissOnClickOutside} = this.props
-
-    if (dismissOnClickOutside) {
-      handleDismissOverlay()
-    }
+  private showChildren = (): void => {
+    this.setState({showChildren: true})
   }
 
-  public handleAnimateDismiss = () => {
-    const {transitionTime} = this.props
-    this.setState({visible: false})
-    this.animationTimer = window.setTimeout(this.handleDismiss, transitionTime)
-  }
-
-  public handleDismiss = () => {
-    const {handleDismissOverlay} = this.props
-    handleDismissOverlay()
+  private hideChildren = (): void => {
+    this.setState({showChildren: false})
     clearTimeout(this.animationTimer)
   }
 }
 
-const mapStateToProps = ({
-  overlayTechnology: {
-    OverlayNode,
-    options: {dismissOnClickOutside, dismissOnEscape, transitionTime},
-  },
-}) => ({
-  OverlayNode,
-  dismissOnClickOutside,
-  dismissOnEscape,
-  transitionTime,
-})
-
-const mapDispatchToProps = {
-  handleDismissOverlay: dismissOverlay,
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Overlay)
+export default OverlayTechnology
diff --git a/ui/src/shared/reducers/overlayTechnology.ts b/ui/src/shared/reducers/overlayTechnology.ts
deleted file mode 100644
index e8c685df45..0000000000
--- a/ui/src/shared/reducers/overlayTechnology.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-const initialState = {
-  options: {
-    dismissOnClickOutside: false,
-    dismissOnEscape: false,
-    transitionTime: 300,
-  },
-  OverlayNode: null,
-}
-
-export default function overlayTechnology(state = initialState, action) {
-  switch (action.type) {
-    case 'SHOW_OVERLAY': {
-      const {OverlayNode, options} = action.payload
-
-      return {...state, OverlayNode, options}
-    }
-
-    case 'DISMISS_OVERLAY': {
-      const {options} = initialState
-      return {
-        ...state,
-        OverlayNode: null,
-        options,
-      }
-    }
-  }
-
-  return state
-}
diff --git a/ui/src/store/configureStore.js b/ui/src/store/configureStore.js
index 764230fbac..351c125fd5 100644
--- a/ui/src/store/configureStore.js
+++ b/ui/src/store/configureStore.js
@@ -14,7 +14,6 @@ import adminReducers from 'src/admin/reducers'
 import kapacitorReducers from 'src/kapacitor/reducers'
 import dashboardUI from 'src/dashboards/reducers/ui'
 import cellEditorOverlay from 'src/dashboards/reducers/cellEditorOverlay'
-import overlayTechnology from 'src/shared/reducers/overlayTechnology'
 import dashTimeV1 from 'src/dashboards/reducers/dashTimeV1'
 import persistStateEnhancer from './persistStateEnhancer'
 import servicesReducer from 'src/shared/reducers/services'
@@ -28,7 +27,6 @@ const rootReducer = combineReducers({
   ...adminReducers,
   dashboardUI,
   cellEditorOverlay,
-  overlayTechnology,
   dashTimeV1,
   logs: logsReducer,
   routing: routerReducer,