trjhtr

I'm shifting my focus towards frontend as much as I can, but I'm still quite unsure if I'm writing good code or not. Please take a look

import * as React from 'react'
import remove as removeDiacritics from 'diacritics'

export interface HighlighterProps 
 text: string,
 highlight: string,


export interface HighlighterState 
 highlightedText?: string


const withHighlighting = <T extends HighlighterProps> (WrappedComponent: React.ComponentType<T>) => 

return class Highlightable extends React.Component<T, HighlighterState> 

 constructor(props: any) 
 super(props)
 this.componentDidMount = this.componentDidMount.bind(this)
 this.componentWillReceiveProps = this.componentWillReceiveProps.bind(this)
 this.state = 
 highlightedText: ''
 
 

 componentDidMount() 
 const text, highlight = this.props
 this.updateHighlightTextAsState(text, highlight)
 

 componentWillReceiveProps(nextProps: any) 
 this.updateHighlightTextAsState(nextProps)
 

 updateHighlightTextAsState = ( text, highlight ) => 
 const highlightedText = this.createHighlightedText(text, highlight)
 this.setState( highlightedText )
 

 createRegexp = (searchParts: string) => '), 'gui')
 

 createHtml = (regexp, htmlText) => 
 let unified = removeDiacritics(htmlText)
 let replaceData = 
 unified.replace(regexp, (val, offset) => 
 replaceData.unshift([val, offset])
 return replaceData.join()
 )

 for (let [val, offset] of replaceData) 
 htmlText = `$htmlText.substr(0, offset)` +
 `<span style="font-weight:bold">$htmlText.substr(offset, val.length)</span>` +
 `$htmlText.substr(offset + val.length)`
 
 return htmlText
 

 createHighlightedText = (text, highlight) => 
 const highlightList = highlight.split(/s+/g)
 if (highlightList.length > 0) 
 text = this.createHtml(this.createRegexp(highlightList.map(removeDiacritics)), text)
 
 return text
 

 render() 
 const value = this.state.highlightedText
 return <WrappedComponent ...this.props text=value />
 
 

export default withHighlighting

And some tests:

import React from 'react'
import shallow, mount from 'enzyme'
import withHighlighting from '../src/withHighlighting'

let HighlightableMockComponent
let wrapper

beforeEach(() => 
 HighlightableMockComponent = (text, highlight) => <div>text</div>
 const HighLighterComponent = withHighlighting(HighlightableMockComponent)
 wrapper = mount(<HighLighterComponent text="I would like to highlight" highlight="like" />)
)

it('should contain a highlight', () => 
 expect(wrapper.text()).toContain("span")
)

it('should place the highlight inside the wrapped component', () => 
 expect(wrapper.find('div')).toHaveLength(1)
)

it('should match snapshot', () => 
 expect(wrapper).toMatchSnapshot()
)

it('should not highlight anything in case of unmatched words', () => 
 const HighLighterComponent = withHighlighting(HighlightableMockComponent)
 wrapper = mount(<HighLighterComponent text="apple" highlight="text" />)
 expect(wrapper.text()).not.toContain('span')
)