Move the clearfix hack to the list

src/public/js/components/list/poster.js

@@ -1,41 +1,18 @@
 import React from "react"
 
-export default class Poster extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  shouldComponentUpdate(nextProps) {
-    if (nextProps.index !== this.props.index) { return true }
-    if (nextProps.selected !== this.props.selected) { return true }
-    if (nextProps.data.get("poster_url") !== this.props.data.get("poster_url")) { return true }
-    return false;
-  }
-  render() {
-    const selected = this.props.selected ? " thumbnail-selected" : "";
+export default function Poster(props) {
+  const selected = props.selected ? " thumbnail-selected" : "";
   const imgClass = "thumbnail" + selected;
-    const displayClearFixLg = (this.props.index % 6) === 0;
-    const displayClearFixMd = (this.props.index % 4) === 0;
-    const displayClearFixSm = (this.props.index % 2) === 0;
   return (
     <div>
-        {displayClearFixLg &&
-            <div className="clearfix visible-lg"></div>
-        }
-        {displayClearFixMd &&
-            <div className="clearfix visible-md"></div>
-        }
-        {displayClearFixSm &&
-            <div className="clearfix visible-sm"></div>
-        }
       <div className="col-xs-12 col-sm-6 col-md-3 col-lg-2">
         <a className={imgClass}>
           <img
-              src={this.props.data.get("poster_url")}
-              onClick={this.props.onClick}
+            src={props.data.get("poster_url")}
+            onClick={props.onClick}
           />
         </a>
       </div>
     </div>
   );
 }
-}

src/public/js/components/list/posters.js

@@ -131,14 +131,26 @@ class Posters extends React.PureComponent {
           {this.props.elmts.toIndexedSeq().map(function(movie, index) {
             const imdbId = movie.get("imdb_id");
             const selected = (imdbId === this.props.selectedImdbId) ? true : false;
+
+            let clearFixes = [];
+            if ((index % 6) === 0) { clearFixes.push("clearfix visible-lg") };
+            if ((index % 4) === 0) { clearFixes.push("clearfix visible-md") };
+            if ((index % 2) === 0) { clearFixes.push("clearfix visible-sm") };
+
             return (
+              <div>
+                {clearFixes.length > 0 && clearFixes.map(function(el, i) {
+                  return (
+                    <div key={`${imdbId}-${i}`} className={el}></div>
+                  );
+                })}
                 <Poster
-                index={index}
                   data={movie}
                   key={imdbId}
                   selected={selected}
                   onClick={() => this.props.onClick(imdbId)}
                 />
+              </div>
             )
           } ,this)}
         </InfiniteScroll>