From 317b520220ec553b466238107b813bf87e9d398b Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Fri, 23 Oct 2015 10:07:50 -0400
Subject: [PATCH] Handle arrow display dynamically

And handle specific case for studio homepage row. Fixes #130 and also stuff left over from #105
---
 src/components/carousel/carousel.jsx | 26 ++++++++++++---------
 src/views/splash/splash.jsx          | 35 +++++++---------------------
 2 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx
index 3ee6e9968..07e4ed417 100644
--- a/src/components/carousel/carousel.jsx
+++ b/src/components/carousel/carousel.jsx
@@ -1,5 +1,7 @@
+var defaults = require('lodash.defaults');
 var React = require('react');
 var Slider = require('react-slick');
+
 var Thumbnail = require('../thumbnail/thumbnail.jsx');
 
 require('slick-carousel/slick/slick.scss');
@@ -15,21 +17,23 @@ var Carousel = React.createClass({
         return {
             items: require('./carousel.json'),
             showRemixes: false,
-            showLoves: false,
-            settings: {
-                arrows: true,
-                dots: false,
-                infinite: false,
-                lazyLoad: true,
-                slidesToShow: 5,
-                slidesToScroll: 5,
-                variableWidth: true
-            }
+            showLoves: false
         };
     },
     render: function () {
+        var settings = this.props.settings || {};
+        defaults(settings, {
+            arrows: this.props.items.length > settings.slidesToShow,
+            dots: false,
+            infinite: false,
+            lazyLoad: true,
+            slidesToShow: 5,
+            slidesToScroll: 5,
+            variableWidth: true
+        });
+
         return (
-            <Slider className={'carousel ' + this.props.className} {... this.props.settings}>
+            <Slider className={'carousel ' + this.props.className} {... settings}>
                 {this.props.items.map(function (item) {
                     var href = '';
                     switch (item.type) {
diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx
index 1f2e69ed6..1157e1d4e 100644
--- a/src/views/splash/splash.jsx
+++ b/src/views/splash/splash.jsx
@@ -22,11 +22,6 @@ var Splash = injectIntl(React.createClass({
         Api,
         Session
     ],
-    getDefaultProps: function () {
-        return {
-            slidesToShow: 5
-        };
-    },
     getInitialState: function () {
         return {
             projectCount: 10569070,
@@ -106,7 +101,7 @@ var Splash = injectIntl(React.createClass({
     },
     renderHomepageRows: function () {
         var formatMessage = this.props.intl.formatMessage;
-        var showArrows = true;
+
         var rows = [
             <Box
                     title={formatMessage({
@@ -120,14 +115,14 @@ var Splash = injectIntl(React.createClass({
                         id: 'splash.featuredStudios',
                         defaultMessage: 'Featured Studios'})}
                     key="community_featured_studios">
-                <Carousel items={this.state.featuredGlobal.community_featured_studios} />
+                <Carousel items={this.state.featuredGlobal.community_featured_studios}
+                          settings={{slidesToShow: 4, slidesToScroll: 4, lazyLoad: false}} />
             </Box>
         ];
 
         if (this.state.featuredGlobal.curator_top_projects &&
             this.state.featuredGlobal.curator_top_projects.length > 4) {
             
-            showArrows = this.state.featuredGlobal.curator_top_projects.length > this.props.slidesToShow;
             rows.push(
                 <Box
                         key="curator_top_projects"
@@ -137,8 +132,7 @@ var Splash = injectIntl(React.createClass({
                         moreTitle={formatMessage({id: 'general.learnMore', defaultMessage: 'Learn More'})}
                         moreHref="/studios/386359/">
                     <Carousel
-                        items={this.state.featuredGlobal.curator_top_projects}
-                        arrows={showArrows} />
+                        items={this.state.featuredGlobal.curator_top_projects} />
                 </Box>
             );
         }
@@ -146,7 +140,6 @@ var Splash = injectIntl(React.createClass({
         if (this.state.featuredGlobal.scratch_design_studio &&
             this.state.featuredGlobal.scratch_design_studio.length > 4) {
             
-            showArrows = this.state.featuredGlobal.scratch_design_studio.length > this.props.slidesToShow;
             rows.push(
                 <Box
                         key="scratch_design_studio"
@@ -158,8 +151,7 @@ var Splash = injectIntl(React.createClass({
                         moreTitle={formatMessage({id: 'splash.visitTheStudio', defaultMessage: 'Visit the studio'})}
                         moreHref={'/studios/' + this.state.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}>
                     <Carousel
-                        items={this.state.featuredGlobal.scratch_design_studio}
-                        arrows={showArrows} />
+                        items={this.state.featuredGlobal.scratch_design_studio} />
                 </Box>
             );
         }
@@ -168,7 +160,6 @@ var Splash = injectIntl(React.createClass({
             this.state.featuredGlobal.community_newest_projects &&
             this.state.featuredGlobal.community_newest_projects.length > 0) {
             
-            showArrows = this.state.featuredGlobal.community_newest_projects.length > this.props.slidesToShow;
             rows.push(
                 <Box
                         title={
@@ -177,8 +168,7 @@ var Splash = injectIntl(React.createClass({
                                 defaultMessage: 'Recently Shared Projects' })}
                         key="community_newest_projects">
                     <Carousel
-                        items={this.state.featuredGlobal.community_newest_projects}
-                        arrows={showArrows} />
+                        items={this.state.featuredGlobal.community_newest_projects} />
                 </Box>
             );
         }
@@ -186,7 +176,6 @@ var Splash = injectIntl(React.createClass({
         if (this.state.featuredCustom.custom_projects_by_following &&
             this.state.featuredCustom.custom_projects_by_following.length > 0) {
             
-            showArrows = this.state.featuredCustom.custom_projects_by_following.length > this.props.slidesToShow;
             rows.push(
                 <Box title={
                             formatMessage({
@@ -194,15 +183,13 @@ var Splash = injectIntl(React.createClass({
                                 defaultMessage: 'Projects by Scratchers I\'m Following'})}
                      key="custom_projects_by_following">
                     
-                    <Carousel items={this.state.featuredCustom.custom_projects_by_following}
-                              arrows={showArrows} />
+                    <Carousel items={this.state.featuredCustom.custom_projects_by_following} />
                 </Box>
             );
         }
         if (this.state.featuredCustom.custom_projects_loved_by_following &&
             this.state.featuredCustom.custom_projects_loved_by_following.length > 0) {
 
-            showArrows = this.state.featuredCustom.custom_projects_loved_by_following.length > this.props.slidesToShow;
             rows.push(
                 <Box title={
                             formatMessage({
@@ -210,8 +197,7 @@ var Splash = injectIntl(React.createClass({
                                 defaultMessage: 'Projects Loved by Scratchers I\'m Following'})}
                      key="custom_projects_loved_by_following">
                     
-                    <Carousel items={this.state.featuredCustom.custom_projects_loved_by_following}
-                              arrows={showArrows} />
+                    <Carousel items={this.state.featuredCustom.custom_projects_loved_by_following} />
                 </Box>
             );
         }
@@ -219,8 +205,6 @@ var Splash = injectIntl(React.createClass({
         if (this.state.featuredCustom.custom_projects_in_studios_following &&
             this.state.featuredCustom.custom_projects_in_studios_following.length > 0) {
             
-            showArrows =
-                this.state.featuredCustom.custom_projects_in_studios_following.length > this.props.slidesToShow;
             rows.push(
                 <Box title={
                             formatMessage({
@@ -228,8 +212,7 @@ var Splash = injectIntl(React.createClass({
                                 defaultMessage: 'Projects in Studios I\'m Following'})}
                      key="custom_projects_in_studios_following">
                     
-                    <Carousel items={this.state.featuredCustom.custom_projects_in_studios_following}
-                              arrows={showArrows} />
+                    <Carousel items={this.state.featuredCustom.custom_projects_in_studios_following} />
                 </Box>
             );
         }