Swik 1827 loading indicator for info panel

.gitignore

@@ -13,3 +13,4 @@ slidewiki
 migrate
 .idea/
 package-lock.json
+*.iml

actions/loadContributors.js

@@ -17,6 +17,8 @@ export default function loadContributors(context, payload, done) {
  return;
  }
 
+ context.dispatch('LOAD_CONTRIBUTORS_LOAD', {loadingIndicator: true});
+
  context.service.read('contributors.list', payload, {timeout: 20 * 1000}, (err, res) => {
  if (err) {
  log.error(context, {filepath: __filename});

common.js

@@ -139,5 +139,41 @@ export default {
  isEmailAddress: (email) => {
  let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
- }
+ },
+
+ equals: function(x, y) {
+ if (x === y) return true;
+ // if both x and y are null or undefined and exactly the same
+
+ if (! (x instanceof Object) || ! (y instanceof Object)) return false;
+ // if they are not strictly equal, they both need to be Objects
+
+ if (x.constructor !== y.constructor) return false;
+ // they must have the exact same prototype chain, the closest we can do is
+ // test there constructor.
+
+ for (let p in x) {
+ if (! x.hasOwnProperty(p)) continue;
+ // other properties were tested using x.constructor === y.constructor
+
+ if (! y.hasOwnProperty(p)) return false;
+ // allows to compare x[p] and y[p] when set to undefined
+
+ if (x[p] === y[p]) continue;
+ // if they have the same strict value or identity then they are equal
+
+ if (typeof(x[p]) !== 'object') return false;
+ // Numbers, Strings, Functions, Booleans must be strictly equal
+
+ if (! exports.default.equals(x[p], y[p])) return false;
+ // Objects and Arrays must be tested recursively
+ }
+
+ for (let p in y) {
+ if (y.hasOwnProperty(p) && !x.hasOwnProperty(p)) return false;
+ // allows x[p] to be set to undefined
+ }
+
+ return true;
+ },
 };

components/Deck/ActivityFeedPanel/ActivityFeedPanel.js

@@ -33,8 +33,7 @@ class ActivityFeedPanel extends React.Component {
 
  return (
  <div ref="activityFeedPanel">
- <h5 className="ui small header" tabIndex="0">Activity Feed
- </h5>
+ <h5 className="ui small header" tabIndex="0">Activity Feed</h5>
  <div className="ui basic segment" style={panelDIVStyles}>
  {activityDIV}
  </div>

components/Deck/ActivityFeedPanel/ActivityList.js

@@ -34,6 +34,8 @@ class ActivityList extends React.Component {
  // TODO: same as in the ActivityFeedStore; check if there is more elegant way to tell the component that action loadMoreActivities (in the onScroll function) was executed
  if (!nextProps.ActivityFeedStore.wasFetch) return;
  this.loading = false;
+ let activitiesCount = this.props.ActivityFeedStore.activities.length;
+ console.log('ActivityList.componentWillReceiveProps() [' + 'activitiesCount=' + activitiesCount + ']');
  }
  render() {
  return (

components/Deck/InfoPanel/InfoPanel.js

@@ -4,27 +4,47 @@ import {connectToStores} from 'fluxible-addons-react';
 import classNames from 'classnames';
 import InfoPanelHeader from './InfoPanelHeader';
 import InfoPanelInfoView from './InfoPanelInfoView';
-
+import {equals} from '../../../common.js';
+import ContributorsStore from '../../../stores/ContributorsStore';
 
 class InfoPanel extends React.Component {
+ constructor(props) {
+ super(props);
+ this.isLoading = this.isContentUndefined();
+ }
 
- render() {
- const rootNodeStyles = {
- fontSize: '1.06em'
- };
+ shouldComponentUpdate(nextProps, nextState) {
+ let samePropsState = equals(this.props, nextProps);
+ this.isLoading = this.isContentUndefined();
+ // Content should be updated only when properties have changed.
+ return !this.isLoading && !samePropsState;
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.isLoading = this.isContentUndefined();
+ }
 
+ componentWillUnmount() {
+ this.props.ContributorsStore.contributors = [];
+ this.isLoading = true;
+ }
 
- return (
- <InfoPanelInfoView />
- );
+ isContentUndefined() {
+ return this.props.ContributorsStore.contributors === undefined
+ || this.props.ContributorsStore.contributors === [];
+ }
+
+ render() {
+ return (<InfoPanelInfoView loadingIndicator={this.props.ContributorsStore.loadingIndicator}/>);
  }
 }
 
 InfoPanel.contextTypes = {
  executeAction: React.PropTypes.func.isRequired
 };
-InfoPanel = connectToStores(InfoPanel, [], (context, props) => {
+InfoPanel = connectToStores(InfoPanel, [ContributorsStore], (context, props) => {
  return {
+ ContributorsStore: context.getStore(ContributorsStore).getState()
  };
 });
 

components/Deck/InfoPanel/InfoPanelInfoView.js

@@ -2,18 +2,28 @@ import React from 'react';
 import {NavLink} from 'fluxible-router';
 import {connectToStores} from 'fluxible-addons-react';
 import DeckTreeStore from '../../../stores/DeckTreeStore';
-//import ActivityList from '../ActivityFeedPanel/ActivityList';
 import ActivityFeedPanel from '../ActivityFeedPanel/ActivityFeedPanel';
 import ContributorsPanel from '../ContentModulesPanel/ContributorsPanel/ContributorsPanel';
 import cheerio from 'cheerio';
 import PresentationPanel from './PresentationsPanel';
 import ActivityFeedStore from '../../../stores/ActivityFeedStore';
-
+import {equals} from '../../../common.js';
 
 class InfoPanelInfoView extends React.Component {
+ constructor(props) {
+ super(props);
+ this.isLoading = true;
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ let samePropsState = equals(this.props, nextProps);
+ this.isLoading = nextProps.loadingIndicator;
+ // Content should be updated only when properties have changed.
+ return !samePropsState;
+ }
 
  getNameofNodes(tree, selector) {
- if(!selector.get('spath')){
+ if (!selector.get('spath')) {
  return 0;
  }
  let names = [];
@@ -23,12 +33,13 @@ class InfoPanelInfoView extends React.Component {
  nodes.forEach ((node, index) => {
  position = node.split(':')[1];
  names.push(currentChildren.get(position - 1).get('title'));
- if(currentChildren.get(position - 1).get('children')){
+ if (currentChildren.get(position - 1).get('children')) {
  currentChildren = currentChildren.get(position - 1).get('children');
  }
  });
  return names;
  }
+
  render() {
  let deckTree = this.props.DeckTreeStore.deckTree;
  let selector = this.props.DeckTreeStore.selector;
@@ -71,27 +82,32 @@ class InfoPanelInfoView extends React.Component {
  });
  title = list; //use title of slide
  titlediv =
- <div className="ui segment top attached compact">
- <h3 className="ui small header">
- <i className="grey small file text icon" aria-label="Slide title"></i>
- {title}
- </h3>
- </div>;
-
+ <div className="ui segment top attached compact">
+ <h3 className="ui small header">
+ <i className="grey small file text icon" aria-label="Slide title"></i>
+ {title}
+ </h3>
+ </div>;
  }
  else {
  //title = rootNode.title;
  //title = ''; //use title of deck
  titlediv = '';
-
  }
+
  return (
  <div className="ui container" ref="infoPanel" role="complementary">
- {this.props.DeckTreeStore.revisionId !== this.props.DeckTreeStore.latestRevisionId &&
- <div className="ui vertical segment"><NavLink className="" href={'/deck/' + selector.get('id').split('-')[0]}><i className='warning sign icon'></i>
- Updated version available</NavLink>
- </div>}
- {titlediv}
+ {this.isLoading ? <div className="ui active dimmer"><div className="ui text loader">Loading</div></div> : ''}
+ {
+ this.props.DeckTreeStore.revisionId !== this.props.DeckTreeStore.latestRevisionId &&
+ <div className="ui vertical segment">
+ <NavLink className="" href={'/deck/' + selector.get('id').split('-')[0]}>
+ <i className='warning sign icon'></i>
+ Updated version available
+ </NavLink>
+ </div>
+ }
+ {titlediv}
  <div className="ui attached segment">
  <ContributorsPanel />
  </div>
@@ -125,7 +141,7 @@ InfoPanelInfoView.contextTypes = {
 InfoPanelInfoView= connectToStores(InfoPanelInfoView, [ActivityFeedStore, DeckTreeStore], (context, props) => {
  return {
  ActivityFeedStore: context.getStore(ActivityFeedStore).getState(),
- DeckTreeStore: context.getStore(DeckTreeStore).getState()
+ DeckTreeStore: context.getStore(DeckTreeStore).getState(),
  };
 });
 export default InfoPanelInfoView;

stores/ContributorsStore.js

@@ -9,13 +9,19 @@ class ContributorsStore extends BaseStore {
  this.translators = [];
  this.listName = '';
  this.selector = {};
+ this.loadingIndicator = false;
+ }
+ loading(payload){
+ this.loadingIndicator = payload.loadingIndicator;
+ this.emitChange();
  }
  updateContributors(payload) {
  this.contributors = this.getContributors(payload.contributors);
  this.creator = this.getCreator(payload.contributors);
  this.translators = this.getTranslators(payload.contributors);
  this.listName = payload.listName;
  this.selector = payload.selector;
+ this.loadingIndicator = false;
  this.emitChange();
  }
 
@@ -24,7 +30,8 @@ class ContributorsStore extends BaseStore {
  contributors: this.contributors,
  creator: this.creator,
  translators: this.translators,
- selector: this.selector
+ selector: this.selector,
+ loadingIndicator: this.loadingIndicator
  };
  }
  dehydrate() {
@@ -35,6 +42,7 @@ class ContributorsStore extends BaseStore {
  this.creator = state.creator;
  this.translators = state.translators;
  this.selector = state.selector;
+ this.loadingIndicator = state.loadingIndicator;
  }
 
  getBasedonRole(role, list) {
@@ -60,7 +68,8 @@ class ContributorsStore extends BaseStore {
 
 ContributorsStore.storeName = 'ContributorsStore';
 ContributorsStore.handlers = {
- 'LOAD_CONTRIBUTORS_SUCCESS': 'updateContributors'
+ 'LOAD_CONTRIBUTORS_SUCCESS': 'updateContributors',
+ 'LOAD_CONTRIBUTORS_LOAD': 'loading'
 };
 
 export default ContributorsStore;