Refactor url generation to CloudinaryComponent.getUrl(). Add all properties to Image.

Author: Amir Tocker

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -1,8 +1,8 @@
 import React, {Component, PropTypes} from 'react';
-import cloudinary from 'cloudinary-core';
+import {Cloudinary, Configuration, Transformation, Util} from 'cloudinary-core';
 
-const camelCase = cloudinary.Util.camelCase;
-const snakeCase = cloudinary.Util.snakeCase;
+const camelCase = Util.camelCase;
+const snakeCase = Util.snakeCase;
 
 export default class CloudinaryComponent extends Component {
   constructor(props, context) {
@@ -63,8 +63,15 @@ export default class CloudinaryComponent extends Component {
     }
     return options;
   }
+
+  getUrl(props, context = {}) {
+    var options = this.getOptions(props, context);
+    let cl = Cloudinary.new(options);
+    return  cl.url(props.publicId, options);
+  }
+
 }
-CloudinaryComponent.VALID_OPTIONS = cloudinary.Configuration.CONFIG_PARAMS.concat(cloudinary.Transformation.new().PARAM_NAMES).map( camelCase);
+CloudinaryComponent.VALID_OPTIONS = Configuration.CONFIG_PARAMS.concat(Transformation.new().PARAM_NAMES).map( camelCase);
 CloudinaryComponent.contextTypes = typesFrom(CloudinaryComponent.VALID_OPTIONS);
 
 CloudinaryComponent.propTypes = CloudinaryComponent.contextTypes ;
@@ -73,13 +80,13 @@ CloudinaryComponent.childContextTypes = {};
 
 /**
  * Create a React type definition object. All items are PropTypes.string.
- * @param {Array} configparams a list of parameter names
+ * @param {Array} configParams a list of parameter names
  * @returns {Object}
  */
-function typesFrom(configparams) {
-  configparams = configparams || [];
+function typesFrom(configParams) {
+  configParams = configParams || [];
   const types = {};
-  for (let key of configparams) {
+  for (let key of configParams) {
     types[camelCase(key)] = PropTypes.string;
   }
   return types;

src/components/Image/Image.js

@@ -1,25 +1,18 @@
 import React, {Component, PropTypes} from 'react';
-import cloudinary from 'cloudinary-core';
+import {Transformation} from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
 
 export default class Image extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
-    var options = this.getOptions(props, context);
-    let cl = cloudinary.Cloudinary.new(options);
-    var url = cl.url(props.publicId, options);
-    this.state = {url: url};
+    let url = this.getUrl(props, context);
+    this.state = {url};
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
-    var options = this.getOptions(nextProps, nextContext);
-
-    let cl = cloudinary.Cloudinary.new(options);
-    var url = cl.url(this.props.publicId, options);
-    if(url != this.state.url){
-      this.setState({
-        url: url
-      })
+    let url = this.getUrl(nextProps, nextContext);
+    if(url !== this.state.url){
+      this.setState({url});
     }
   }
 
@@ -44,28 +37,13 @@ export default class Image extends CloudinaryComponent {
 
   render() {
     var options = this.getOptions(this.props, this.context);
-    var attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
+    var attributes = Transformation.new(options).toHtmlAttributes();
     return (
       <img {...attributes} src={this.state.url} />
     );
   }
 }
 
-Image.propTypes = {
-  publicId: PropTypes.string.isRequired,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.number,
-  transformation: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.arrayOf(PropTypes.object)
-  ]),
-  handleLoad: PropTypes.func,
-  breakpoints: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.arrayOf(PropTypes.number)
-  ])
-
-};
 Image.defaultProps = {};
-Image.contextTypes = CloudinaryComponent.contextTypes;
+Image.contextTypes = CloudinaryComponent.contextTypes;
+Image.propTypes = CloudinaryComponent.propTypes;