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 {
+export default function Poster(props) {
-  constructor(props) {
+  const selected = props.selected ? " thumbnail-selected" : "";
-    super(props);
+  const imgClass = "thumbnail" + selected;
-  }
+  return (
-  shouldComponentUpdate(nextProps) {
+    <div>
-    if (nextProps.index !== this.props.index) { return true }
+      <div className="col-xs-12 col-sm-6 col-md-3 col-lg-2">
-    if (nextProps.selected !== this.props.selected) { return true }
+        <a className={imgClass}>
-    if (nextProps.data.get("poster_url") !== this.props.data.get("poster_url")) { return true }
+          <img
-    return false;
+            src={props.data.get("poster_url")}
-  }
+            onClick={props.onClick}
-  render() {
+          />
-    const selected = this.props.selected ? " thumbnail-selected" : "";
+        </a>
-    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}
-            />
-          </a>
-        </div>
       </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 (
-              <Poster
+              <div>
-                index={index}
+                {clearFixes.length > 0 && clearFixes.map(function(el, i) {
-                data={movie}
+                  return (
-                key={imdbId}
+                    <div key={`${imdbId}-${i}`} className={el}></div>
-                selected={selected}
+                  );
-                onClick={() => this.props.onClick(imdbId)}
+                })}
-              />
+                <Poster
+                  data={movie}
+                  key={imdbId}
+                  selected={selected}
+                  onClick={() => this.props.onClick(imdbId)}
+                />
+              </div>
             )
           } ,this)}
         </InfiniteScroll>