feat(media): Replace CFS

BREAKING CHANGES

.meteor/packages

@@ -14,7 +14,7 @@ es5-shim@4.7.0               # ECMAScript 5 compatibility for older browsers.
 ecmascript@0.10.0              # Enable ECMAScript2015+ syntax in app code
 audit-argument-checks@1.0.7   # ensure meteor method argument validation
 browser-policy@1.1.0          # security-related policies enforced by newer browsers
-juliancwirko:postcss          # CSS post-processing plugin (replaces standard-minifier-css)
+juliancwirko:postcss@1.3.0    # CSS post-processing plugin (replaces standard-minifier-css)
 session@1.1.7                 # ReactiveDict whose contents are preserved across Hot Code Push
 tracker@1.1.3                 # Meteor transparent reactive programming library
 mongo@1.4.2
@@ -53,18 +53,11 @@ aldeed:collection2
 aldeed:schema-index
 aldeed:template-extension
 bozhao:accounts-instagram
-cfs:filesystem
-cfs:graphicsmagick
-cfs:gridfs
-cfs:standard-packages
-cfs:storage-adapter
-cfs:ui
 dispatch:run-as-user
 matb33:collection-hooks
 meteorhacks:ssr
 meteorhacks:subs-manager
 ongoworks:security
-raix:ui-dropped-event
 tmeasday:publish-counts
 percolate:migrations
 gadicc:blaze-react-component

.meteor/versions

@@ -16,8 +16,8 @@ allow-deny@1.1.0
 audit-argument-checks@1.0.7
 autoupdate@1.4.0
 babel-compiler@7.0.4
-babel-runtime@1.2.2
-base64@1.0.11
+babel-runtime@1.2.0
+base64@1.0.10
 binary-heap@1.0.10
 blaze@2.3.2
 blaze-html-templates@1.1.2
@@ -28,29 +28,9 @@ browser-policy@1.1.0
 browser-policy-common@1.0.11
 browser-policy-content@1.1.0
 browser-policy-framing@1.1.0
-caching-compiler@1.1.11
+caching-compiler@1.1.9
 caching-html-compiler@1.1.2
 callback-hook@1.1.0
-cfs:access-point@0.1.49
-cfs:base-package@0.0.30
-cfs:collection@0.5.5
-cfs:collection-filters@0.2.4
-cfs:data-man@0.0.6
-cfs:file@0.1.17
-cfs:filesystem@0.1.2
-cfs:graphicsmagick@0.0.18
-cfs:gridfs@0.0.34
-cfs:http-methods@0.0.32
-cfs:http-publish@0.0.13
-cfs:power-queue@0.9.11
-cfs:reactive-list@0.0.9
-cfs:reactive-property@0.0.4
-cfs:standard-packages@0.5.10
-cfs:storage-adapter@0.2.4
-cfs:tempstore@0.1.6
-cfs:ui@0.1.3
-cfs:upload-http@0.0.20
-cfs:worker@0.1.5
 check@1.3.0
 coffeescript@1.0.17
 dburles:factory@1.1.0
@@ -65,11 +45,11 @@ dispatch:run-as-user@1.1.1
 dynamic-import@0.3.0
 ecmascript@0.10.4
 ecmascript-runtime@0.5.0
-ecmascript-runtime-client@0.6.2
+ecmascript-runtime-client@0.6.0
 ecmascript-runtime-server@0.5.0
 ejson@1.1.0
 email@1.2.3
-es5-shim@4.7.3
+es5-shim@4.7.0
 facebook-config-ui@1.0.1
 facebook-oauth@1.4.0
 gadicc:blaze-react-component@1.4.0
@@ -83,9 +63,9 @@ http@1.4.0
 id-map@1.1.0
 johanbrook:publication-collector@1.1.0
 jquery@1.11.11
-juliancwirko:postcss@1.2.0
+juliancwirko:postcss@1.3.0
 launch-screen@1.1.1
-less@2.7.12
+less@2.7.11
 livedata@1.0.18
 localstorage@1.2.0
 logging@1.1.19
@@ -99,19 +79,18 @@ meteorhacks:subs-manager@1.6.4
 meteortesting:browser-tests@0.1.2
 meteortesting:mocha@0.5.0
 minifier-css@1.3.1
-minifier-js@2.3.2
+minifier-js@2.3.1
 minimongo@1.4.3
 mobile-experience@1.0.5
 mobile-status-bar@1.0.14
-modules@0.11.4
-modules-runtime@0.9.2
+modules@0.11.3
+modules-runtime@0.9.1
 momentjs:moment@2.19.4
-mongo@1.4.3
+mongo@1.4.2
 mongo-dev-server@1.1.0
 mongo-id@1.0.6
-mongo-livedata@1.0.12
 npm-bcrypt@0.9.3
-npm-mongo@2.2.34
+npm-mongo@2.2.33
 oauth@1.2.1
 oauth-encryption@1.3.0
 oauth1@1.2.0
@@ -123,11 +102,10 @@ percolate:migrations@0.9.8
 practicalmeteor:chai@2.1.0_1
 practicalmeteor:mocha-core@1.0.1
 practicalmeteor:sinon@1.14.1_2
-promise@0.10.2
+promise@0.10.1
 raix:eventemitter@0.1.3
-raix:ui-dropped-event@0.0.7
 random@1.1.0
-rate-limit@1.0.9
+rate-limit@1.0.8
 reactive-dict@1.2.0
 reactive-var@1.0.11
 reload@1.2.0
@@ -143,7 +121,7 @@ socket-stream-client@0.1.0
 spacebars@1.0.15
 spacebars-compiler@1.1.3
 srp@1.0.10
-standard-minifier-js@2.3.2
+standard-minifier-js@2.3.1
 templating@1.3.2
 templating-compiler@1.3.3
 templating-runtime@1.3.2

imports/plugins/core/accounts/client/components/ordersList.js

@@ -13,12 +13,11 @@ import CompletedOrder from "../../../checkout/client/components/completedOrder";
 class OrdersList extends Component {
   static propTypes = {
     allOrdersInfo: PropTypes.array,
-    handleDisplayMedia: PropTypes.func,
     isProfilePage: PropTypes.bool
   }
 
   render() {
-    const { allOrdersInfo, handleDisplayMedia } = this.props;
+    const { allOrdersInfo } = this.props;
 
     if (allOrdersInfo) {
       return (
@@ -32,8 +31,6 @@ class OrdersList extends Component {
                 order={order.order}
                 orderSummary={order.orderSummary}
                 paymentMethods={order.paymentMethods}
-                productImages={order.productImages}
-                handleDisplayMedia={handleDisplayMedia}
                 isProfilePage={this.props.isProfilePage}
               />
             );

imports/plugins/core/accounts/client/containers/userOrdersListContainer.js

@@ -1,37 +1,9 @@
 import { compose, withProps } from "recompose";
 import { Meteor } from "meteor/meteor";
 import { Router } from "/client/modules/router/";
-import { Media } from "/lib/collections";
 import { registerComponent, composeWithTracker } from "@reactioncommerce/reaction-components";
 import OrdersList from "../components/ordersList";
 
-
-const handlers = {};
-
-handlers.handleDisplayMedia = (item) => {
-  const variantId = item.variants._id;
-  const { productId } = item;
-
-  const variantImage = Media.findOne({
-    "metadata.variantId": variantId,
-    "metadata.productId": productId
-  });
-
-  if (variantImage) {
-    return variantImage;
-  }
-
-  const defaultImage = Media.findOne({
-    "metadata.productId": productId,
-    "metadata.priority": 0
-  });
-
-  if (defaultImage) {
-    return defaultImage;
-  }
-  return false;
-};
-
 function composer(props, onData) {
   // Get user order from props
   const { orders } = props;
@@ -44,7 +16,7 @@ function composer(props, onData) {
 
   if (orders.length > 0) {
     orders.map((order) => {
-      const imageSub = Meteor.subscribe("CartImages", order.items);
+      const imageSub = Meteor.subscribe("Orders", order._id);
       const orderSummary = {
         quantityTotal: order.getCount(),
         subtotal: order.getSubTotal(),
@@ -55,15 +27,13 @@ function composer(props, onData) {
         shipping: order.shipping
       };
       if (imageSub.ready()) {
-        const productImages = Media.find().fetch();
         const orderId = order._id;
         const orderInfo = {
           shops: order.getShopSummary(),
           order,
           orderId,
           orderSummary,
-          paymentMethods: order.getUniquePaymentMethods(),
-          productImages
+          paymentMethods: order.getUniquePaymentMethods()
         };
         allOrdersInfo.push(orderInfo);
       }
@@ -83,11 +53,7 @@ function composer(props, onData) {
 
 
 registerComponent("OrdersList", OrdersList, [
-  withProps(handlers),
   composeWithTracker(composer)
 ]);
 
-export default compose(
-  withProps(handlers),
-  composeWithTracker(composer)
-)(OrdersList);
+export default compose(composeWithTracker(composer))(OrdersList);

imports/plugins/core/checkout/client/components/cartItems.js

@@ -36,6 +36,8 @@ class CartItems extends Component {
       item
     } = this.props;
 
+    const fileRecord = handleImage(item);
+
     return (
       <div
         className="cart-items"
@@ -57,9 +59,9 @@ class CartItems extends Component {
           data-event-value={item.productId}
           onClick={this.handleClick}
         >
-          {handleImage(item) ?
-            <div className="center-cropped" style={{ backgroundImage: `url('${handleImage(item).url({ store: "small" })}')` }}>
-              <img src={handleImage(item).url({ store: "small" })} className="product-grid-item-images img-responsive" alt="" />
+          {fileRecord ?
+            <div className="center-cropped" style={{ backgroundImage: `url('${fileRecord.url({ store: "small" })}')` }}>
+              <img src={fileRecord.url({ store: "small" })} className="product-grid-item-images img-responsive" alt="" />
             </div> :
             <div className="center-cropped" style={{ backgroundImage: "url('/resources/placeholder.gif')" }}>
               <img src="/resources/placeholder.gif" className="product-grid-item-images img-responsive" alt="" />

imports/plugins/core/checkout/client/components/completedOrder.js

@@ -13,11 +13,10 @@ import AddEmail from "./addEmail";
  * @property {Array} shops - An Array contains information broken down by shop
  * @property {Object} orderSummary - An object containing the items making up the order summary
  * @property {Array} paymentMethod - An array of paymentMethod objects
- * @property {Function} handleDisplayMedia - A function for displaying the product image
  * @property {Booleam} isProfilePage - A boolean value that checks if current page is user profile page
  * @return {Node} React node containing the top-level component for displaying the completed order/receipt page
  */
-const CompletedOrder = ({ order, shops, orderSummary, paymentMethods, handleDisplayMedia, isProfilePage }) => {
+const CompletedOrder = ({ order, shops, orderSummary, paymentMethods, isProfilePage }) => {
   if (!order) {
     return (
       <Components.NotFound
@@ -60,7 +59,6 @@ const CompletedOrder = ({ order, shops, orderSummary, paymentMethods, handleDisp
               items={shop[shopKey].items}
               key={shopKey}
               shippingMethod={shop[shopKey].shippingMethod}
-              handleDisplayMedia={handleDisplayMedia}
               isProfilePage={isProfilePage}
             />
           );
@@ -107,7 +105,6 @@ const CompletedOrder = ({ order, shops, orderSummary, paymentMethods, handleDisp
 };
 
 CompletedOrder.propTypes = {
-  handleDisplayMedia: PropTypes.func,
   isProfilePage: PropTypes.bool,
   order: PropTypes.object,
   orderSummary: PropTypes.object,

imports/plugins/core/checkout/client/components/completedOrderItem.js

@@ -1,20 +1,20 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { getPrimaryMediaForOrderItem } from "/lib/api";
 import { Components, registerComponent } from "@reactioncommerce/reaction-components";
 
 /**
  * @summary Shows the individual line items for a completed order
  * @param {Object} props - React PropTypes
  * @property {Object} item - An object representing each item on the order
- * @property {Function} handleDisplayMedia - a function for displaying the proper product image
  * @return {Node} React node containing each line item on an order
  */
-const CompletedOrderItem = ({ item, handleDisplayMedia }) => (
+const CompletedOrderItem = ({ item }) => (
   <div className="row order-details-line">
     <div className="order-details-media">
       <Components.ProductImage
         item={item}
-        displayMedia={handleDisplayMedia}
+        displayMedia={getPrimaryMediaForOrderItem}
         size="small"
         badge={false}
       />
@@ -25,9 +25,7 @@ const CompletedOrderItem = ({ item, handleDisplayMedia }) => (
   </div>
 );
 
-
 CompletedOrderItem.propTypes = {
-  handleDisplayMedia: PropTypes.func,
   item: PropTypes.object
 };
 

imports/plugins/core/checkout/client/components/completedShopOrders.js

@@ -8,11 +8,10 @@ import CompletedOrderItem from "./completedOrderItem";
  * @param {Object} props - React PropTypes
  * @property {String} shopName - The name of the shop
  * @property {Array} items - an array of individual items for this shop
- * @property {Function} handleDisplayMedia - A function for displaying product images
  * @property {boolean} isProfilePage - Checks if current page is profile page
  * @return {Node} React node containing the break down of the order by Shop
  */
-const CompletedShopOrders = ({ shopName, items, handleDisplayMedia, shippingMethod, isProfilePage }) => {
+const CompletedShopOrders = ({ shopName, items, shippingMethod, isProfilePage }) => {
   const shippingName = isProfilePage ? (
     <span>
       <strong>
@@ -30,7 +29,7 @@ const CompletedShopOrders = ({ shopName, items, handleDisplayMedia, shippingMeth
         </div>
       </div>
       <div className="order-details-info-box-topless">
-        {items.map((item) => <CompletedOrderItem item={item} key={item._id} handleDisplayMedia={handleDisplayMedia} />)}
+        {items.map((item) => <CompletedOrderItem item={item} key={item._id} />)}
       </div>
 
       {/* This is the left side / main content */}
@@ -39,7 +38,6 @@ const CompletedShopOrders = ({ shopName, items, handleDisplayMedia, shippingMeth
 };
 
 CompletedShopOrders.propTypes = {
-  handleDisplayMedia: PropTypes.func,
   isProfilePage: PropTypes.bool,
   items: PropTypes.array,
   order: PropTypes.object,