feat(With Member): Set isLoading when updating t he member (#54)

Author: gja

README.md

@@ -457,6 +457,8 @@ The render will also be passed a function to call for logging out, and another t
 
 On initial load, the `isLoading` prop will be set, which will become false when the user is loaded. Use this field to avoid showing a Login Button while fetch is happening.
 
+In order to update the current member, call `checkForMemberUpdated`.
+
 ```javascript
 import { WithMember } from '@quintype/components';
 

src/components/with-member.js

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { getRequest } from './api-client';
-import { MEMBER_UPDATED } from '../store/actions';
+import { MEMBER_UPDATED, MEMBER_BEING_LOADED } from '../store/actions';
 
 let loadedMember = false;
 
@@ -13,6 +13,7 @@ class WithMemberBase extends React.Component {
   }
 
   checkForMemberUpdated() {
+    this.props.memberBeingLoaded();
     return getRequest('/api/v1/members/me')
       .forbidden(() => this.props.memberUpdated(null))
       .unauthorized(() => this.props.memberUpdated(null))
@@ -41,12 +42,13 @@ export const WithMember = connect(mapStateToProps, mapDispatchToProps)(WithMembe
 function mapStateToProps(state) {
   return {
     member: state.member || null,
-    isLoading: state.member === false,
+    isLoading: state.memberLoading,
   }
 }
 
 function mapDispatchToProps(dispatch) {
   return {
+    memberBeingLoaded: () => dispatch({ type: MEMBER_BEING_LOADED }),
     memberUpdated: member => dispatch({ type: MEMBER_UPDATED, member }),
     logout: () => getRequest('/api/logout').res(() => dispatch({ type: MEMBER_UPDATED, member: null }))
   };

src/store/actions.js

@@ -9,4 +9,5 @@ export const HAMBURGER_CLOSED = 'QT-HAMBURGER_CLOSED';
 
 export const SERVICE_WORKER_UPDATED = 'QT-SERVICE_WORKER_UPDATED';
 
-export const MEMBER_UPDATED = 'QT-MEMBER_UPDATED';
+export const MEMBER_UPDATED = 'QT-MEMBER_UPDATED';
+export const MEMBER_BEING_LOADED = 'QT-MEMBER_BEING_LOADED';

src/store/reducers.js

@@ -7,6 +7,7 @@ import {
   HAMBURGER_CLICKED,
   HAMBURGER_CLOSED,
   MEMBER_UPDATED,
+  MEMBER_BEING_LOADED,
 } from './actions';
 
 function breakingNewsReducer(state = [], action) {
@@ -41,19 +42,26 @@ function hamburgerOpenedReducer(state = false, action) {
   }
 }
 
-// member is set to false when loading, then it is either
-// null or a member object
-function memberReducer(state = false, action) {
+function memberReducer(state = null, action) {
   switch(action.type) {
     case MEMBER_UPDATED: return action.member;
     default: return state;
   }
 }
 
+function memberLoadingReducer(state = true, action) {
+  switch (action.type) {
+    case MEMBER_BEING_LOADED: return true;
+    case MEMBER_UPDATED: return false;
+    default: return state;
+  }
+}
+
 export const ComponentReducers = {
   breakingNews: breakingNewsReducer,
   clientSideRendered: clientSideRenderedReducer,
   pageLoading: pageLoadingReducer,
   hamburgerOpened: hamburgerOpenedReducer,
   member: memberReducer,
+  memberLoading: memberLoadingReducer,
 };