SWIK-2257 Show recently used decks on the homepage if logged in

actions/user/userprofile/fetchHomeUserDecks.js

@@ -0,0 +1,23 @@
+import async from 'async';
+import { fetchUserDecks } from './fetchUserDecks';
+import fetchUser from './fetchUser';
+
+export default function fetchHomeUserDecks(context, payload, done) {
+    async.series([
+        (callback) => {
+            context.executeAction(fetchUser, {params:{username: payload.username, id: payload.userid}}, callback);
+        },
+        (callback) => {
+            context.executeAction(fetchUserDecks, {
+                deckListType: undefined,
+                params: {
+                    username: payload.username,
+                    sort: 'lastUpdate',
+                    status: 'any',
+                    roles: 'editor,owner'
+                }
+            }, callback);
+        }
+    ]);
+    done();
+}

components/Home/Home.js

@@ -5,6 +5,10 @@ import {NavLink, navigateAction} from 'fluxible-router';
 import { FormattedMessage, defineMessages} from 'react-intl';
 import LocaleSwitcher from '../LocaleSwitcher/LocaleSwitcher';
 import {Button} from 'semantic-ui-react';
+import UserProfileStore from '../../stores/UserProfileStore';
+import { connectToStores } from 'fluxible-addons-react';
+import PopularDecks from '../User/UserProfile/PopularDecks';
+import fetchHomeUserDecks from '../../actions/user/userprofile/fetchHomeUserDecks';
 
 class Home extends React.Component {
 
@@ -13,6 +17,12 @@ class Home extends React.Component {
             url: '/featured'
         });
     };
+
+    componentDidMount() {
+        if(this.props.UserProfileStore.userid)
+            this.context.executeAction(fetchHomeUserDecks, {username: this.props.UserProfileStore.username, id: this.props.UserProfileStore.userid});
+    }
+
     render() {
         const heightStyle = {
             height: '100px'
@@ -24,19 +34,21 @@ class Home extends React.Component {
         const compMessageStyle = {
             background: '#1E78BB'
         };
-
+        let optionalCarousel = <div className="ui blue inverted segment" style={{borderRadius: '0px'}}><h1><FormattedMessage id='home.slogan' defaultMessage='SlideWiki...Create, Share and Enjoy Presentations'/></h1><Carousel /></div>;
+        let optionalUserDecks = '';
+        if(this.props.UserProfileStore.userid){
+            optionalCarousel = '';
+            optionalUserDecks = <div className="ui segments"><div className="ui segment top attached"><h3>Recently edited decks</h3></div><div className="ui segment"><PopularDecks size={8} decks={this.props.UserProfileStore.userDecks} fourCards={true}/></div><div className="ui segment bottom attached"><h5><NavLink href={'/user/' + this.props.UserProfileStore.username}>See More</NavLink></h5></div></div>;
+        }
 
         return (
             <div ref="home">
-                <div className="ui blue inverted segment" style={{borderRadius: '0px'}}>
-                    <h1><FormattedMessage id='home.slogan' defaultMessage='SlideWiki...Create, Share and Enjoy Presentations'/></h1>
-                    <Carousel />
-
-                </div>
+                {optionalCarousel}
                 <div className="ui fluid container">
                     <div className="ui padded stackable grid ">
                         <div className="one wide column"></div>
                         <div className="ten wide column">
+                            {optionalUserDecks}
                             <div className="ui segments">
                                 <div className="ui segment top attached">
                                     <h3><FormattedMessage id='home.welcome' defaultMessage='Welcome to SlideWiki'/>
@@ -246,9 +258,10 @@ Home.contextTypes = {
     executeAction: React.PropTypes.func.isRequired
 };
 
+Home = connectToStores(Home, [UserProfileStore], (context, props) => {
+    return {
+        UserProfileStore: context.getStore(UserProfileStore).getState()
+    };
+});
 
 export default Home;
-
-
-
-//export default Home;

components/User/UserProfile/PopularDecks.js

@@ -3,12 +3,20 @@ import DeckCard from './DeckCard';
 import { connectToStores } from 'fluxible-addons-react';
 import UserProfileStore from '../../../stores/UserProfileStore';
 import { isEmpty } from './../../../common';
+import classNames from 'classnames/bind';
 
 class PublicUserDecks extends React.Component {
 
     render() {
         let size = 0;
         let content = this.props.decks;
+        let cardsClasses = classNames({
+            'ui': true,
+            'three': this.props.fourCards === undefined,
+            'four': this.props.fourCards,
+            'stackable': true,
+            'cards': true
+        });
         if(!isEmpty(content)){
             // if no sort property is given the order of decks is preserved
             if(this.props.sort){
@@ -29,7 +37,7 @@ class PublicUserDecks extends React.Component {
                 size = content.length;
             else
                 size = content.length < 3 ? content.length : this.props.size;
-            return (<div className="ui three stackable cards">
+            return (<div className={cardsClasses}>
                 {[...Array(size).keys()].map( (i) => <DeckCard userid={this.props.UserProfileStore.user.id} key={i} cardContent={content[i]} newTab={this.props.newTab}/>)}
                     </div>);
         } else {