ryandrewjohnson

import React from 'react';

export const LocalizeContext = React.createContext();

ryandrewjohnson

import React from 'react';
import Enzyme, { mount } from 'enzyme';

// ensure you're resetting modules before each test
beforeEach(() => {
  jest.resetModules();
});

// Takes the context data we want to test, or uses defaults
const getLanguageSelectorWithContext = (context = {languages: ['en', 'fr', 'es'], activeLanguage: 'en'}) => {

ryandrewjohnson

import React from "react";
import { withLocalize } from "react-localize-redux";

const LanguageToggle = ({ languages, activeLanguage, setActiveLanguage }) => (
  <ul className="selector">
    {languages.map(lang => (
      <li key={lang.code}>
        <button onClick={() => setActiveLanguage(lang.code)}>
          {lang.name}
        </button>

ryandrewjohnson

import React from 'react';
import { LocalizeContext } from './LocalizeContext';

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      activeLanguage: 'en',
      languages: ['en', 'fr', 'es']

ryandrewjohnson

import { getTranslate, getActiveLanguage } from 'react-localize-redux';

const Greeting = ({ translate, currentLanguage }) => (
  <div>
    <h1>{ translate('greeting') }</h1>
    <button>{ translate('farewell') }</button>
  </div>
);

const mapStateToProps = state => ({

ryandrewjohnson

const languages = (state = [], action) => {
  // reducer logic here
};

const translations = (state = {}, action) => {
  // we now have access to language codes from action
  const codes = action.languageCodes;
  // reducer logic here
}

ryandrewjohnson

const languages = (state = [], action) => {
  // reducer logic here
};

const translations = (state = {}, action) => {
  // reducer logic here
}

const rootReducer = combineReducers({languages, translations});

ryandrewjohnson

const state = {
  languages: [{code: 'en', name: 'English'}, {code: 'fr', name: 'French'}],
  options: {
    'hello': ['Hello', 'Bonjour'],
    'goodbye': ['good bye', 'Au revoir']
  }
};

ryandrewjohnson

/*
  I will try my best to describe what I'm trying to accomplish, and what the problem is...
  react-router has a <Switch> component that loops through it's children, and assumes each child is of type <Route>.
  I have created a custom <RouteByUserRoleType> that is a connected component that will render a <Route> component, if the current
  user's role matches the type prop passed from the component. If it doens't match then null would be returned. 
  
  // Desired behaviour
  Ideally <Switch> would traverse each child until it finds either a <Route> component, or null. If it finds a <Route> then that would be
  treated like a normal <Route> component in a switch.
  

ryandrewjohnson

import { setActiveLanguage } from 'react-localize-redux';

const LanguageSelector = ({ languages, setActiveLanguage }) => (
  <ul>
    { languages.map(language => 
      <li key={language.code}><button onClick={ () => setActiveLanguage(language.code) }>{ language.name }</button></li>
    )}
  </ul>
)