ferrannp

import 'whatwg-fetch';

...

export function fetchData(id) {
  return (dispatch, getState) => {
    if(getState().id === id)) {
      return; // No need to fetch
    }
    dispatch(requestData(id));

ferrannp

pit('calls request and success actions if the fetch response was successful', () => {

  window.fetch = jest.fn().mockImplementation(() =>
    Promise.resolve(mockResponse(200, null, '{"id":"1234"}')));

  return store.dispatch(fetchData(1234))
    .then(() => {
      const expectedActions = store.getActions();
      expect(expectedActions.length).toBe(2);
      expect(expectedActions[0]).toEqual({type: types.FETCH_DATA_REQUEST});

ferrannp

pit('calls request and failure actions if the fetch response was not successful', () => {

  window.fetch = jest.fn().mockImplementation(() => Promise.resolve(mockResponse(
    400, 'Test Error', '{"status":400, "statusText": Test Error!}')));

  return store.dispatch(fetchData(1234))
    .then(() => {
      const expectedActions = store.getActions();
      expect(expectedActions.length).toBe(2);
      expect(expectedActions[0]).toEqual({type: types.FETCH_DATA_REQUEST});

ferrannp

it('does check if we already fetched that id and only calls fetch if necessary', () => {
  const store = mockStore({id: 1234, isFetching: false }});
  window.fetch = jest.fn().mockImplementation(() => Promise.resolve());  
  
  store.dispatch(fetchData(1234)); // Same id
  expect(window.fetch).not.toBeCalled();

  store.dispatch(fetchData(1234 + 1)); // Different id
  expect(window.fetch).toBeCalled();
});

ferrannp

const Dropdown = (props) => (
  <div className='dropdown'>
    <button onClick={props.onToggle}>
      Selected option: {props.data[props.optionSelected]}
    </button>
    <ul className={props.isOpen ? 'active':null}>
      {
        props.data.map((item, i) => {
          return (
            <li key={i} className={i === props.optionSelected ? 'selected':null}

ferrannp

const EnhanceDropdown = ComposedComponent => class extends Component {
  constructor() {
    super();
    this.state = { isOpen: false };
    this.onToggle = this.onToggle.bind(this);
    this.handleDocumentClick = this.handleDocumentClick.bind(this);
    this.onSelect = this.onSelect.bind(this);
  }
  componentDidMount() {
    window.addEventListener('click', this.handleDocumentClick)

ferrannp

static String currentLocale;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    MainActivity.currentLocale = getResources().getConfiguration().locale.toString();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {

ferrannp

React Native Folder Structure

Motivations

• Sharing what has worked for me in different React Native projects
• Reusing screens in different parts of your app
• Easy to work separately in a feature
• Add an extra level (nested folder) only when necessary
• Don't overuse index.js for everything

ferrannp

// MainActivity.java

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
  return new ReactActivityDelegate(this, getMainComponentName()) {
    @Override
    protected ReactRootView createRootView() {
      return new RNGestureHandlerEnabledRootView(MainActivity.this);
    }

ferrannp

// MainActivity.java

public void switchToReactView() {
  if (mReactRootView != null && !mReactRootView.isAttachedToWindow()) {
    mReactRootView.setAlpha(0f);
    mReactRootView.animate()
        .alpha(1f)
        .setInterpolator(new AccelerateDecelerateInterpolator())
        .setDuration(350)
        .setListener(new Animator.AnimatorListener() {