Refactor SourceIndicator to use context API

pull/10616/head
Alex P 2018-06-19 15:06:03 -07:00
parent 239e4b9656
commit fc361aa57d
1 changed files with 24 additions and 28 deletions

View File

@ -1,50 +1,46 @@
import React, {SFC} from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import uuid from 'uuid'
import ReactTooltip from 'react-tooltip'
import {SourceContext} from 'src/CheckSources'
import {Source} from 'src/types'
interface Props {
sourceOverride?: Source
}
const SourceIndicator: SFC<Props> = ({sourceOverride}, {source}) => {
if (!source) {
return null
}
const getTooltipText = (source: Source, sourceOverride: Source): string => {
const {name, url} = source
const sourceName: string = _.get(sourceOverride, 'name', name)
const sourceUrl: string = _.get(sourceOverride, 'url', url)
const sourceNameTooltip: string = `<h1>Connected to Source:</h1><p><code>${sourceName} @ ${sourceUrl}</code></p>`
return `<h1>Connected to Source:</h1><p><code>${sourceName} @ ${sourceUrl}</code></p>`
}
const SourceIndicator: SFC<Props> = ({sourceOverride}) => {
const uuidTooltip: string = uuid.v4()
return (
<div
className="source-indicator"
data-for={uuidTooltip}
data-tip={sourceNameTooltip}
>
<span className="icon disks" />
<ReactTooltip
id={uuidTooltip}
effect="solid"
html={true}
place="left"
class="influx-tooltip"
/>
</div>
<SourceContext.Consumer>
{(source: Source) => (
<div
className="source-indicator"
data-for={uuidTooltip}
data-tip={getTooltipText(source, sourceOverride)}
>
<span className="icon disks" />
<ReactTooltip
id={uuidTooltip}
effect="solid"
html={true}
place="left"
class="influx-tooltip"
/>
</div>
)}
</SourceContext.Consumer>
)
}
const {shape} = PropTypes
SourceIndicator.contextTypes = {
source: shape({}),
}
export default SourceIndicator