Is there a counterpart for @refresh() in JSX widgets?

[d-fischer]

I depend on being able to call @refresh() in certain situations in my old widgets. Now that I want to port some of the widgets to the new React style, I seem to be missing that function or something equivalent. this.refresh does not exist, even if render is not an arrow function.

I do understand that changing state refreshes the widget, but this is not helping me, as this is basically just a widget that loads some global stylesheets and needs the manual refresh as a workaround for the background blur breaking sometimes (which is another problem I recently bumped #172 for, and I hope that one gets reopened)

Code:

const theme = 'light';

export const className = {
  position: 'absolute',
  display: 'block',
  bottom: 0,
  left: 0,
  borderLeft: 'none',
  borderBottom: 'none',
  borderRadius: '0 7px 0 0',
  padding: '10px'
}

function refreshHandler(e) {
  e.preventDefault();
  this.refresh();
}

export function render() {
  return (
    <div>
      <link rel="stylesheet" href={`global-style.widget/style-${theme}.css`} />
      <link rel="stylesheet" href="global-style.widget/style.css" />

      <a href="javascript:;" onClick={refreshHandler.bind(this)}>Refresh</a>
    </div>
  );
}

Error:

TypeError: this.refresh is not a function. (In 'this.refresh()', 'this.refresh' is undefined)

Equivalent, working .coffee widget:

theme: 'light'

command: 'true'
refreshFrequency: false

style: """
  position absolute
  display block
  bottom 0
  left 0
  border-left none
  border-bottom none
  border-radius 0 7px 0 0
  padding 10px
"""

render: -> """
	<link rel="stylesheet" href="global-style.widget/style-#{@theme}.css">
	<link rel="stylesheet" href="global-style.widget/style.css">

	<a href="javascript:;" class="refresher">Refresh</a>
"""

afterRender: (domEl) ->
  $(domEl).find('.refresher').click (e) =>
    e.preventDefault()
    @refresh()

[felixhageloh]

It is a bit of a workaround but you can do this:

const theme = 'light';

export const className = {
  position: 'absolute',
  display: 'block',
  bottom: 0,
  left: 0,
  borderLeft: 'none',
  borderBottom: 'none',
  borderRadius: '0 7px 0 0',
  padding: '10px'
}

const refresh = (dispatch) => (e) => {
  e.preventDefault();
  dispatch({type: 'REFRESH'});
}

const updateState = (event, state) => event.type === 'REFRESH' ? {...state} : state;

export function render(state, dispatch) {
  return (
    <div>
      <link rel="stylesheet" href={`global-style.widget/style-${theme}.css`} />
      <link rel="stylesheet" href="global-style.widget/style.css" />

      <a href="javascript:;" onClick={refresh(dispatch)}>Refresh</a>
    </div>
  );
}

It creates a copy of the current state so that the widget re-renders.