(feat) use thumbnail version of product images

app/frontend/src/javascript/components/store/product-item.tsx

@@ -23,9 +23,7 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
    * Get the main image
    */
   const thumbnail = () => {
-    const image = product.product_images_attributes
-      .find(att => att.is_main);
-    return image;
+    return product.product_images_attributes.find(att => att.is_main);
   };
   /**
    * Init the process of editing the given product
@@ -60,8 +58,7 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
   return (
     <div className={`product-item ${statusColor(product)}`}>
       <div className='itemInfo'>
-        {/* TODO: image size version ? */}
-        <img src={thumbnail()?.attachment_url || noImage} alt='' className='itemInfo-thumbnail' />
+        <img src={thumbnail()?.thumb_attachment_url || noImage} alt='' className='itemInfo-thumbnail' />
         <p className="itemInfo-name">{product.name}</p>
       </div>
       <div className='details'>

app/frontend/src/javascript/components/store/store-product.tsx

@@ -141,7 +141,7 @@ export const StoreProduct: React.FC<StoreProductProps> = ({ productSlug, current
             <div className='thumbnails'>
               {product.product_images_attributes.map(i => (
                 <div key={i.id} className={`picture ${i.id === showImage ? 'is-active' : ''}`}>
-                  <img alt='' onClick={() => setShowImage(i.id)} src={i.attachment_url} />
+                  <img alt='' onClick={() => setShowImage(i.id)} src={i.thumb_attachment_url} />
                 </div>
               ))}
             </div>

app/frontend/src/javascript/models/product.ts

@@ -116,6 +116,7 @@ export interface Product {
     attachment_files?: FileList,
     attachment_name?: string,
     attachment_url?: string,
+    thumb_attachment_url?: string,
     _destroy?: boolean,
     is_main?: boolean
   }>,

app/uploaders/product_image_uploader.rb

@@ -20,26 +20,6 @@ class ProductImageUploader < CarrierWave::Uploader::Base
     "uploads/#{model.class.to_s.underscore}"
   end
 
-  # Provide a default URL as a default if there hasn't been a file uploaded:
-  # def default_url
-  #   # For Rails 3.1+ asset pipeline compatibility:
-  #   # ActionController::Base.helpers.asset_pack_path("fallback/" + [version_name, "default.png"].compact.join('_'))
-  #
-  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
-  # end
-
-  # Process files as they are uploaded:
-  # process :scale => [200, 300]
-  #
-  # def scale(width, height)
-  #   # do something
-  # end
-
-  # Create different versions of your uploaded files:
-  # version :thumb do
-  #   process :resize_to_fit => [50, 50]
-  # end
-
   # Create different versions of your uploaded files:
   version :large do
     process resize_to_fit: [1000, 700]
@@ -53,6 +33,10 @@ class ProductImageUploader < CarrierWave::Uploader::Base
     process resize_to_fit: [400, 250]
   end
 
+  version :thumb do
+    process resize_to_fit: [100, 100]
+  end
+
   # Add a white list of extensions which are allowed to be uploaded.
   # For images you might use something like this:
   def extension_whitelist
@@ -66,11 +50,11 @@ class ProductImageUploader < CarrierWave::Uploader::Base
   # Override the filename of the uploaded files:
   # Avoid using model.id or version_name here, see uploader/store.rb for details.
   def filename
-    if original_filename
-      original_filename.split('.').map do |s|
-        ActiveSupport::Inflector.transliterate(s).to_s
-      end.join('.')
-    end
+    return unless original_filename
+
+    original_filename.split('.').map do |s|
+      ActiveSupport::Inflector.transliterate(s).to_s
+    end.join('.')
   end
 
   # return an array like [width, height]

app/views/api/products/_product.json.jbuilder

@@ -13,5 +13,6 @@ json.product_images_attributes product.product_images do |f|
   json.id f.id
   json.attachment_name f.attachment_identifier
   json.attachment_url f.attachment_url
+  json.thumb_attachment_url f.attachment.thumb.url
   json.is_main f.is_main
 end

app/views/api/products/index.json.jbuilder

@@ -9,6 +9,7 @@ json.data @products[:data] do |product|
     json.id f.id
     json.attachment_name f.attachment_identifier
     json.attachment_url f.attachment_url
+    json.thumb_attachment_url f.attachment.thumb.url
     json.is_main f.is_main
   end
 end