rowlandekemezie

const { applyMiddleware, createStore } = Redux;
const createSagaMiddleware = ReduxSaga.default;
const { put, call } = ReduxSaga.effects;
const { takeLatest } = ReduxSaga;
const { connect, Provider } = ReactRedux;

// GitHub API
const gitHubApi = (username) => {
  return fetch(`https://api.github.com/users/${username}`)
    .then(response => {

rowlandekemezie

/*
1) Depending on your experience, this is all you might need to do to hook up your workflow
2) Remember, not to copy and paste. My idea is to show you how things fit it to you can tailor it to your application

GRACIAS 💪
*/

rowlandekemezie

// Current. The request is synchronous because the former needs to finish before the later
const earning = await fetchLastMonthEarning(teacherInfo.teacher.teacherId, startDate, endDate);
const teachingHours = await fetchTeachingHours(teacherInfo.teacher.teacherId);

// Refactored. Ensures the request is run concurrently
 const [ earning, teachingHours ]= await Promise.all([
   fetchLastMonthEarning(teacherInfo.teacher.teacherId, startDate, endDate),
   fetchTeachingHours(teacherInfo.teacher.teacherId)
])

rowlandekemezie

// Define a setup function you can reuse and maybe nuke beforeEach completely.
// Your test spec is currently too simple to even require the hasle beforeEach;
function setUp() {
  const props = {
    strategy: null,
    event: mockEvent, // You can use jest to mock
    eventId: mockEventId,
    ConfigLogo: null,
    handleDuplicateEvent: action("select provider")
  }

rowlandekemezie

// Dependencies
const { applyMiddleware, createStore } = Redux;
const createSagaMiddleware = ReduxSaga.default;
const { put, call, takeLatest } = ReduxSaga.effects;
const { connect, Provider } = ReactRedux;

// GitHub API
const gitHubApi = (username) => {
  // Make API calls here
};

rowlandekemezie

// Here, we use ES6 destructuring assignment to extract payload
// from the action object passed to it.
function* loadUserDetails({ payload }) {
  try {
    const user = yield call(gitHubApi, payload);
    // Yields effect to the reducer specifying action type 
    // and user details.
    yield put({type: 'LOAD_USER_SUCCESS', user}); 
  } catch (error) {
    yield put({ type: 'LOAD_USER_FAILURE', error });

rowlandekemezie

// Dependencies
const { applyMiddleware, createStore } = Redux;
const { connect, Provider } = ReactRedux;

// GitHub API
const gitHubApi = (username) => {
   // Put your Api call here
};

// redux-thunk implementation

rowlandekemezie

// UserProfile Component
class UserProfile extends React.Component {
  constructor() {
    super();
    this.state = {
      user: []
    }
  }
  // componentDidMount lifecycle method allows dynamic behaviour, AJAX, 
  // side effects, etc. We issue our API call here and set the 

rowlandekemezie

// Create a range of values
function range(start, end) {
  return Array.apply(null, Array(end - start  + 1))
    .map((_, index) => index + start);
}

rowlandekemezie

input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.label {
  display: block;
  position: relative;
  margin-left: 0;
  padding: 3px 0 3px 25px;