card component refactor

creates a different component class for each shot fixes circleci errors card component code refactor
mozilla-services · Jun 2, 2017 · 2bb3bc8 · 2bb3bc8
1 parent 3b839e7
commit 2bb3bc8
Showing 1 changed file with 76 additions and 72 deletions.
diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
@@ -52,8 +52,7 @@ class Body extends React.Component {
   renderShots() {
     let children = [];
     for (let shot of this.props.shots) {
-      let downloadUrl = this.props.downloadUrls[shot.id];
-      children.push(this.renderShot(shot, downloadUrl));
+      children.push(<Card shot={shot} downloadUrl={this.props.downloadUrls[shot.id]} abTests={this.props.abTests} clipUrl={shot.urlDisplay} isOwner={this.props.isOwner} staticLink={this.props.staticLink} isExtInstalled={this.props.isExtInstalled} />);
     }
 
     if (children.length === 0) {
@@ -110,19 +109,61 @@ class Body extends React.Component {
     );
   }
 
-  getClipType(dimensions) {
-    // an image is considered a square if it is within
-    // a squareBuffer pixels of being one
-    const squareBuffer = 50;
-    if (dimensions.x - squareBuffer > dimensions.y) {
-      return "landscape";
-    } else if (dimensions.x < dimensions.y - squareBuffer ) {
-      return "portrait";
+  onSubmitForm(e) {
+    e.preventDefault();
+    let val = ReactDOM.findDOMNode(this.refs.search).value;
+    if (val) {
+      sendEvent("search", "submit");
+    } else {
+      sendEvent("clear-search", "submit");
     }
-    return "square";
+    controller.onChangeSearch(val);
   }
 
-  renderShot(shot, downloadUrl) {
+  onChangeSearch() {
+    let val = ReactDOM.findDOMNode(this.refs.search).value;
+    this.setState({defaultSearch: val});
+    if (!val) {
+      sendEvent("clear-search", "keyboard");
+      controller.onChangeSearch(val);
+      return;
+    }
+    if (this._keyupTimeout) {
+      clearTimeout(this._keyupTimeout);
+      this._keyupTimeout = undefined;
+    }
+    if (val.length > 3) {
+      this._keyupTimeout = setTimeout(() => {
+        sendEvent("search", "timed");
+        controller.onChangeSearch(val);
+      }, 1000);
+    }
+  }
+
+  onClearSearch(e) {
+    const val = '';
+    ReactDOM.findDOMNode(this.refs.search).value = val;
+    this.setState({defaultSearch: val});
+    controller.onChangeSearch(val);
+    sendEvent("clear-search", "button");
+    return null;
+  }
+
+  componentDidUpdate() {
+    if ((this.props.defaultSearch || "") !== (this.state.defaultSearch || "")) {
+      document.body.classList.add("search-results-loading");
+    } else {
+      document.body.classList.remove("search-results-loading");
+    }
+  }
+
+}
+
+class Card extends React.Component {
+
+  render() {
+    let shot = this.props.shot;
+    let downloadUrl = this.props.downloadUrl;
     let imageUrl;
     let clip = shot.clipNames().length ? shot.getClip(shot.clipNames()[0]) : null;
     if (clip && clip.image && clip.image.url) {
@@ -169,6 +210,29 @@ class Body extends React.Component {
     );
   }
 
+  getClipType(dimensions) {
+    // an image is considered a square if it is within
+    // a squareBuffer pixels of being one
+    const squareBuffer = 50;
+    if (dimensions.x - squareBuffer > dimensions.y) {
+      return "landscape";
+    } else if (dimensions.x < dimensions.y - squareBuffer ) {
+      return "portrait";
+    }
+    return "square";
+  }
+
+  onOpen(url, event) {
+    if (event.ctrlKey || event.metaKey || event.button === 1) {
+      // Don't override what might be an open-in-another-tab click
+      sendEvent("goto-shot", "myshots-tile-new-tab", {useBeacon: true});
+      return;
+    }
+
+    sendEvent("goto-shot", "myshots-tile", {useBeacon: true});
+    location.href = url;
+  }
+
   displayTitle(title) {
     if (title.length > 140) {
       return (title.substring(0, 140) + "...");
@@ -189,69 +253,9 @@ class Body extends React.Component {
     return false;
   }
 
-  onOpen(url, event) {
-    if (event.ctrlKey || event.metaKey || event.button === 1) {
-      // Don't override what might be an open-in-another-tab click
-      sendEvent("goto-shot", "myshots-tile-new-tab", {useBeacon: true});
-      return;
-    }
-
-    sendEvent("goto-shot", "myshots-tile", {useBeacon: true});
-    location.href = url;
-  }
-
   onClickDownload() {
     sendEvent("download", "myshots-tile");
   }
-
-  onSubmitForm(e) {
-    e.preventDefault();
-    let val = ReactDOM.findDOMNode(this.refs.search).value;
-    if (val) {
-      sendEvent("search", "submit");
-    } else {
-      sendEvent("clear-search", "submit");
-    }
-    controller.onChangeSearch(val);
-  }
-
-  onChangeSearch() {
-    let val = ReactDOM.findDOMNode(this.refs.search).value;
-    this.setState({defaultSearch: val});
-    if (!val) {
-      sendEvent("clear-search", "keyboard");
-      controller.onChangeSearch(val);
-      return;
-    }
-    if (this._keyupTimeout) {
-      clearTimeout(this._keyupTimeout);
-      this._keyupTimeout = undefined;
-    }
-    if (val.length > 3) {
-      this._keyupTimeout = setTimeout(() => {
-        sendEvent("search", "timed");
-        controller.onChangeSearch(val);
-      }, 1000);
-    }
-  }
-
-  onClearSearch(e) {
-    const val = '';
-    ReactDOM.findDOMNode(this.refs.search).value = val;
-    this.setState({defaultSearch: val});
-    controller.onChangeSearch(val);
-    sendEvent("clear-search", "button");
-    return null;
-  }
-
-  componentDidUpdate() {
-    if ((this.props.defaultSearch || "") !== (this.state.defaultSearch || "")) {
-      document.body.classList.add("search-results-loading");
-    } else {
-      document.body.classList.remove("search-results-loading");
-    }
-  }
-
 }
 
 exports.HeadFactory = React.createFactory(Head);