Replace props with fluxContext

influxdata · Aug 29, 2018 · f671c9d · f671c9d
1 parent a2193c3
commit f671c9d
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 101 deletions.
diff --git a/ui/src/flux/components/BodyBuilder.tsx b/ui/src/flux/components/BodyBuilder.tsx
@@ -9,12 +9,11 @@ import BodyDelete from 'src/flux/components/BodyDelete'
 import {funcNames} from 'src/flux/constants'
 
 import {Service} from 'src/types'
-import {Body, Suggestion, Context} from 'src/types/flux'
+import {Body, Suggestion} from 'src/types/flux'
 
 interface Props {
   body: Body[]
   service: Service
-  context: Context
   suggestions: Suggestion[]
   onAppendFrom: () => void
   onAppendJoin: () => void
@@ -23,7 +22,7 @@ interface Props {
 
 class BodyBuilder extends PureComponent<Props> {
   public render() {
-    const {body, onDeleteBody, context} = this.props
+    const {body, onDeleteBody} = this.props
 
     const bodybuilder = body.map((b, i) => {
       if (b.declarations.length) {
@@ -40,7 +39,6 @@ class BodyBuilder extends PureComponent<Props> {
                 <ExpressionNode
                   bodyID={b.id}
                   funcs={d.funcs}
-                  context={context}
                   declarationID={d.id}
                   funcNames={this.funcNames}
                   onDeleteBody={onDeleteBody}
@@ -73,7 +71,6 @@ class BodyBuilder extends PureComponent<Props> {
           <ExpressionNode
             bodyID={b.id}
             funcs={b.funcs}
-            context={context}
             funcNames={this.funcNames}
             onDeleteBody={onDeleteBody}
             isLastBody={this.isLastBody(i)}

diff --git a/ui/src/flux/components/ExpressionNode.tsx b/ui/src/flux/components/ExpressionNode.tsx
@@ -1,16 +1,16 @@
 import React, {PureComponent, Fragment} from 'react'
 
+import {FluxContext} from 'src/shared/components/TimeMachine/TimeMachine'
 import FuncSelector from 'src/flux/components/FuncSelector'
 import FuncNode from 'src/flux/components/FuncNode'
 import YieldFuncNode from 'src/flux/components/YieldFuncNode'
 import {getDeep} from 'src/utils/wrappers'
 
-import {Func, Context} from 'src/types/flux'
+import {Func} from 'src/types/flux'
 
 interface Props {
   funcs: Func[]
   bodyID: string
-  context: Context
   funcNames: any[]
   isLastBody: boolean
   declarationID?: string
@@ -36,7 +36,6 @@ class ExpressionNode extends PureComponent<Props, State> {
 
   public render() {
     const {
-      context,
       declarationID,
       bodyID,
       funcNames,
@@ -46,97 +45,105 @@ class ExpressionNode extends PureComponent<Props, State> {
     } = this.props
 
     const {nonYieldableIndexesToggled} = this.state
-    const {
-      onDeleteFuncNode,
-      onAddNode,
-      onChangeArg,
-      onGenerateScript,
-      onToggleYield,
-      service,
-      data,
-      scriptUpToYield,
-    } = context
-
-    let isAfterRange = false
-    let isAfterFilter = false
 
     return (
-      <>
-        {funcs.map((func, i) => {
-          if (func.name === 'yield') {
-            return null
-          }
-
-          if (func.name === 'range') {
-            isAfterRange = true
-          }
-
-          if (func.name === 'filter') {
-            isAfterFilter = true
-          }
-          const isYieldable = isAfterFilter && isAfterRange
-
-          const funcNode = (
-            <FuncNode
-              key={i}
-              index={i}
-              func={func}
-              funcs={funcs}
-              bodyID={bodyID}
-              service={service}
-              onChangeArg={onChangeArg}
-              onDelete={onDeleteFuncNode}
-              onToggleYield={onToggleYield}
-              isYieldable={isYieldable}
-              isYielding={this.isBeforeYielding(i)}
-              isYieldedInScript={this.isYieldNodeIndex(i + 1)}
-              declarationID={declarationID}
-              onGenerateScript={onGenerateScript}
-              declarationsFromBody={declarationsFromBody}
-              onToggleYieldWithLast={this.handleToggleYieldWithLast}
-              onDeleteBody={onDeleteBody}
-            />
+      <FluxContext.Consumer>
+        {({
+          onDeleteFuncNode,
+          onAddNode,
+          onChangeArg,
+          onGenerateScript,
+          onToggleYield,
+          service,
+          data,
+          scriptUpToYield,
+        }: Context) => {
+          let isAfterRange = false
+          let isAfterFilter = false
+
+          return (
+            <>
+              {funcs.map((func, i) => {
+                if (func.name === 'yield') {
+                  return null
+                }
+
+                if (func.name === 'range') {
+                  isAfterRange = true
+                }
+
+                if (func.name === 'filter') {
+                  isAfterFilter = true
+                }
+                const isYieldable = isAfterFilter && isAfterRange
+
+                const funcNode = (
+                  <FuncNode
+                    key={func.id}
+                    index={i}
+                    func={func}
+                    funcs={funcs}
+                    bodyID={bodyID}
+                    service={service}
+                    onChangeArg={onChangeArg}
+                    onDelete={onDeleteFuncNode}
+                    onToggleYield={onToggleYield}
+                    isYieldable={isYieldable}
+                    isYielding={this.isBeforeYielding(i)}
+                    isYieldedInScript={this.isYieldNodeIndex(i + 1)}
+                    declarationID={declarationID}
+                    onGenerateScript={onGenerateScript}
+                    declarationsFromBody={declarationsFromBody}
+                    onToggleYieldWithLast={this.handleToggleYieldWithLast}
+                    onDeleteBody={onDeleteBody}
+                  />
+                )
+
+                if (
+                  nonYieldableIndexesToggled[i] ||
+                  this.isYieldNodeIndex(i + 1)
+                ) {
+                  const script: string = scriptUpToYield(
+                    bodyID,
+                    declarationID,
+                    i,
+                    isYieldable
+                  )
+
+                  let yieldFunc = func
+
+                  if (this.isYieldNodeIndex(i + 1)) {
+                    yieldFunc = funcs[i + 1]
+                  }
+
+                  return (
+                    <Fragment key={`${i}-notInScript`}>
+                      {funcNode}
+                      <YieldFuncNode
+                        index={i}
+                        func={yieldFunc}
+                        data={data}
+                        script={script}
+                        bodyID={bodyID}
+                        service={service}
+                        declarationID={declarationID}
+                      />
+                    </Fragment>
+                  )
+                }
+
+                return funcNode
+              })}
+              <FuncSelector
+                bodyID={bodyID}
+                funcs={funcNames}
+                onAddNode={onAddNode}
+                declarationID={declarationID}
+              />
+            </>
           )
-
-          if (nonYieldableIndexesToggled[i] || this.isYieldNodeIndex(i + 1)) {
-            const script: string = scriptUpToYield(
-              bodyID,
-              declarationID,
-              i,
-              isYieldable
-            )
-
-            let yieldFunc = func
-
-            if (this.isYieldNodeIndex(i + 1)) {
-              yieldFunc = funcs[i + 1]
-            }
-
-            return (
-              <Fragment key={`${i}-notInScript`}>
-                {funcNode}
-                <YieldFuncNode
-                  index={i}
-                  func={yieldFunc}
-                  data={data}
-                  script={script}
-                  bodyID={bodyID}
-                  service={service}
-                  declarationID={declarationID}
-                />
-              </Fragment>
-            )
-          }
-
-          return funcNode
-        })}
-        <FuncSelector
-          bodyID={bodyID}
-          funcs={funcNames}
-          onAddNode={onAddNode}
-          declarationID={declarationID}
-        />
-      </>
+        }}
+      </FluxContext.Consumer>
     )
   }
 

diff --git a/ui/src/flux/components/FluxQueryBuilder.tsx b/ui/src/flux/components/FluxQueryBuilder.tsx
@@ -12,7 +12,6 @@ import {HANDLE_VERTICAL} from 'src/shared/constants'
 
 // Types
 import {
-  Context,
   Suggestion,
   OnChangeScript,
   OnSubmitScript,
@@ -25,7 +24,6 @@ import {Service, NotificationAction} from 'src/types'
 interface Props {
   body: Body[]
   script: string
-  context: Context
   service: Service
   status: ScriptStatus
   suggestions: Suggestion[]
@@ -47,7 +45,6 @@ const FluxQueryBuilder: SFC<Props> = props => {
     body,
     notify,
     service,
-    context,
     suggestions,
     onAppendFrom,
     onDeleteBody,
@@ -91,7 +88,6 @@ const FluxQueryBuilder: SFC<Props> = props => {
       render: () => (
         <BodyBuilder
           body={body}
-          context={context}
           service={service}
           suggestions={suggestions}
           onDeleteBody={onDeleteBody}

diff --git a/ui/src/shared/components/TimeMachine/TimeMachine.tsx b/ui/src/shared/components/TimeMachine/TimeMachine.tsx
@@ -359,7 +359,6 @@ class TimeMachine extends PureComponent<Props, State> {
             script={script}
             status={status}
             notify={notify}
-            context={this.getContext}
             service={this.service}
             suggestions={suggestions}
             onValidate={this.handleValidate}

diff --git a/ui/test/flux/components/FluxQueryBuilder.test.tsx b/ui/test/flux/components/FluxQueryBuilder.test.tsx
@@ -10,6 +10,7 @@ const setup = () => {
     data: [],
     service,
     suggestions: [],
+    notify: () => {},
     onSubmitScript: () => {},
     onChangeScript: () => {},
     onValidate: () => {},