diff --git a/actions/user/userprofile/fetchHomeUserDecks.js b/actions/user/userprofile/fetchHomeUserDecks.js new file mode 100644 index 000000000..4f6f5815a --- /dev/null +++ b/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(); +} diff --git a/components/Home/Home.js b/components/Home/Home.js index 2944defbd..c3b8d7a5b 100644 --- a/components/Home/Home.js +++ b/components/Home/Home.js @@ -6,6 +6,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 { @@ -14,6 +18,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' @@ -25,19 +35,21 @@ class Home extends React.Component { const compMessageStyle = { background: '#1E78BB' }; - + let optionalCarousel =

; + let optionalUserDecks = ''; + if(this.props.UserProfileStore.userid){ + optionalCarousel = ''; + optionalUserDecks =

Recently edited decks

See More
; + } return (
-
-

- - -
+ {optionalCarousel}
+ {optionalUserDecks}

@@ -247,9 +259,10 @@ Home.contextTypes = { executeAction: PropTypes.func.isRequired }; +Home = connectToStores(Home, [UserProfileStore], (context, props) => { + return { + UserProfileStore: context.getStore(UserProfileStore).getState() + }; +}); export default Home; - - - -//export default Home; diff --git a/components/User/UserProfile/PopularDecks.js b/components/User/UserProfile/PopularDecks.js index 948957fe1..7707197b1 100644 --- a/components/User/UserProfile/PopularDecks.js +++ b/components/User/UserProfile/PopularDecks.js @@ -4,12 +4,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){ @@ -30,7 +38,7 @@ class PublicUserDecks extends React.Component { size = content.length; else size = content.length < 3 ? content.length : this.props.size; - return (
+ return (
{[...Array(size).keys()].map( (i) => )}
); } else {