Fix contextType to be class property of CloudinaryComponent (#145)

Nir Maoz · web-flow · commit 5d506b5b8ea3 · 2020-03-01T16:12:57.000+02:00
diff --git a/babel.config.js b/babel.config.js
@@ -1,9 +1,13 @@
 "use strict";
 
-module.exports = function (api){
+module.exports = function (api) {
   api.cache.never();
   return {
-    plugins: ["@babel/proposal-export-default-from"],
-  "presets":
-    ["@babel/preset-env", "@babel/preset-react"],
-}};
+    plugins: [
+      "@babel/proposal-export-default-from",
+      "@babel/plugin-proposal-class-properties"
+    ],
+    "presets":
+      ["@babel/preset-env", "@babel/preset-react"],
+  }
+};
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -57,4 +57,4 @@
     console.warn('unable to connect to parent frame for connecting dev tools');
   }</script></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the storybook config.</li><li>Try reloading the page.</li></ul></div></div><div class="sb-errordisplay sb-wrapper"><div id="error-message" class="sb-heading"></div><pre class="sb-errordisplay_code">
     <code id="error-stack"></code>
-  </pre></div><div id="root"></div><script src="runtime~main.1db343d140cd02179525.bundle.js"></script><script src="vendors~main.1db343d140cd02179525.bundle.js"></script><script src="main.1db343d140cd02179525.bundle.js"></script></body></html>
+  </pre></div><div id="root"></div><script src="runtime~main.53eb4e935b55fc68a17b.bundle.js"></script><script src="vendors~main.53eb4e935b55fc68a17b.bundle.js"></script><script src="main.53eb4e935b55fc68a17b.bundle.js"></script></body></html>
diff --git a/docs/index.html b/docs/index.html
@@ -11,4 +11,4 @@
     }
   } catch (e) {
     console.warn('unable to connect to parent frame for connecting dev tools');
-  }</script></head><body><div id="root"></div><script src="./sb_dll/storybook_ui_dll.js"></script><script src="runtime~main.67b3c42af12dc2b7ac9d.bundle.js"></script><script src="vendors~main.c7cdde8fdc5d62ae5ce6.bundle.js"></script><script src="main.584ae462a0cb36e05a05.bundle.js"></script></body></html>
+  }</script></head><body><div id="root"></div><script src="./sb_dll/storybook_ui_dll.js"></script><script src="runtime~main.23a842e0cf9f5bd27e60.bundle.js"></script><script src="vendors~main.cf21e66639e7e7094b5b.bundle.js"></script><script src="main.8a2064d11d740364a590.bundle.js"></script></body></html>
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
   "devDependencies": {
     "@babel/cli": "^7.2.0",
     "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
diff --git a/samples/photo_album/package.json b/samples/photo_album/package.json
@@ -12,7 +12,7 @@
     "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
-    "cloudinary-react": "^1.1.4",
+    "cloudinary-react": "^1.3.1",
     "css-loader": "2.1.1",
     "dotenv": "4.0.0",
     "eslint": "4.18.2",
diff --git a/samples/photo_album/src/components/Photo.js b/samples/photo_album/src/components/Photo.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Image, Transformation } from 'cloudinary-react';
 import { url } from '../utils/CloudinaryService';
 import PhotoThumbnails from './PhotoThumbnails';
+import {CloudinaryContext} from 'cloudinary-react';
 
 class Photo extends Component {
     constructor(props) {
@@ -64,16 +65,13 @@ class Photo extends Component {
     showLess() {
         this.setState({ showMore: false });
     }
+
+    static contextType = CloudinaryContext.contextType;
 }
 
 Photo.propTypes = {
     context: PropTypes.object,
     publicId: PropTypes.string,
 };
 
-Photo.contextTypes = {
-    cloudName: PropTypes.string,
-    uploadPreset: PropTypes.string,
-};
-
 export default Photo;
diff --git a/samples/photo_album/src/components/PhotoList.js b/samples/photo_album/src/components/PhotoList.js
@@ -7,6 +7,7 @@ import { photosUploaded } from '../actions';
 import Photo from './Photo';
 import FacebookImage from './FacebookImage';
 import Introduction from './Introduction';
+import {CloudinaryContext} from 'cloudinary-react';
 
 class PhotoList extends Component {
     render() {
@@ -69,18 +70,15 @@ class PhotoList extends Component {
             }
         });
     }
+
+    static contextType = CloudinaryContext.contextType;
 }
 
 PhotoList.propTypes = {
     photos: PropTypes.array,
     onPhotosUploaded: PropTypes.func,
 };
 
-PhotoList.contextTypes = {
-    cloudName: PropTypes.string,
-    uploadPreset: PropTypes.string,
-};
-
 const PhotoListContainer = connect(
     state => ({ photos: state.photos }),
     {
diff --git a/samples/photo_album/src/components/PhotosUploader.js b/samples/photo_album/src/components/PhotosUploader.js
@@ -6,6 +6,7 @@ import request from 'superagent';
 import Dropzone from 'react-dropzone';
 import { photosUploaded, updateUploadedPhoto } from '../actions';
 import UploadedPhotoStatusContainer from './UploadedPhotosStatus';
+import {CloudinaryContext} from "cloudinary-react";
 
 class PhotosUploader extends Component {
     constructor(props, context) {
@@ -135,6 +136,8 @@ class PhotosUploader extends Component {
 
         this.props.onPhotosUploaded([response.body]);
     }
+
+    static contextType = CloudinaryContext.contextType;
 }
 
 PhotosUploader.propTypes = {
@@ -143,11 +146,6 @@ PhotosUploader.propTypes = {
     onPhotosUploaded: PropTypes.func,
 };
 
-PhotosUploader.contextTypes = {
-    cloudName: PropTypes.string,
-    uploadPreset: PropTypes.string,
-};
-
 const PhotosUploaderContainer = connect(
     state => state,
     {
diff --git a/samples/photo_album/src/components/UploadedPhotosStatus.js b/samples/photo_album/src/components/UploadedPhotosStatus.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import request from 'superagent';
 import { deleteUploadedPhoto } from '../actions';
+import {CloudinaryContext} from "cloudinary-react";
 
 class UploadedPhotoStatus extends Component {
     render() {
@@ -78,18 +79,15 @@ class UploadedPhotoStatus extends Component {
             this.props.uploadedPhoto.response.body.public_id
         );
     }
+
+    static contextType = CloudinaryContext.contextType;
 }
 
 UploadedPhotoStatus.propTypes = {
     uploadedPhoto: PropTypes.object,
     onDeleteUploadedPhoto: PropTypes.func,
 };
 
-UploadedPhotoStatus.contextTypes = {
-    cloudName: PropTypes.string,
-    uploadPreset: PropTypes.string,
-};
-
 const UploadedPhotoStatusContainer = connect(
     state => state,
     {
diff --git a/samples/photo_album/src/index.js b/samples/photo_album/src/index.js
@@ -5,19 +5,19 @@ import { Provider } from 'react-redux';
 import App from './components/App';
 import PhotosListReducer from './reducers/PhotosListReducer';
 import UploadedPhotosReducer from './reducers/UploadedPhotosReducer';
-import Config from './config/config';
+import config from './config/config';
 
 const rootReducer = combineReducers({
     photos: PhotosListReducer,
     uploadedPhotos: UploadedPhotosReducer,
 });
 
 const store = createStore(rootReducer);
+const {cloud_name, upload_preset} = config;
 
 render(
     <Provider store={store}>
-        <App cloudName={Config.cloud_name}
-                      uploadPreset={Config.upload_preset} />
+        <App cloudName={cloud_name} uploadPreset={upload_preset}/>
     </Provider>,
     document.getElementById('root')
 );
diff --git a/samples/photo_album/src/utils/CloudinaryService.js b/samples/photo_album/src/utils/CloudinaryService.js
@@ -1,9 +1,14 @@
 import { Cloudinary as CoreCloudinary, Util } from 'cloudinary-core';
 
 export const url = (publicId, options) => {
-    const scOptions = Util.withSnakeCaseKeys(options);
-    const cl = CoreCloudinary.new();
-    return cl.url(publicId, scOptions);
+    try {
+        const scOptions = Util.withSnakeCaseKeys(options);
+        const cl = CoreCloudinary.new();
+        return cl.url(publicId, scOptions);
+    } catch (e) {
+        console.error(e);
+        return null;
+    }
 };
 
 export const openUploadWidget = (options, callback) => {
diff --git a/src/components/CloudinaryComponent/CloudinaryComponent.js b/src/components/CloudinaryComponent/CloudinaryComponent.js
@@ -113,9 +113,10 @@ class CloudinaryComponent extends PureComponent {
     let cl = Cloudinary.new(options);
     return cl.url(extendedProps.publicId, transformation);
   }
+
+  static contextType = CloudinaryContextType;
 }
 
-CloudinaryComponent.contextType = CloudinaryContextType;
 CloudinaryComponent.propTypes = typesFrom(Transformation.PARAM_NAMES.map(camelCase));
 CloudinaryComponent.propTypes.publicId = PropTypes.string;
 CloudinaryComponent.propTypes.responsive = PropTypes.bool;
diff --git a/src/components/CloudinaryContext/CloudinaryContext.js b/src/components/CloudinaryContext/CloudinaryContext.js
@@ -34,6 +34,5 @@ class CloudinaryContext extends CloudinaryComponent {
 
 CloudinaryContext.propTypes = {...CloudinaryComponent.propTypes, includeOwnBody: PropTypes.bool};
 CloudinaryContext.defaultProps = {includeOwnBody: false};
-CloudinaryContext.contextType = CloudinaryContextType;
 
 export default CloudinaryContext;

Original file line number	Diff line number	Diff line change
`@@ -11,4 +11,4 @@`
`11`	`11`	`}`
`12`	`12`	`} catch (e) {`
`13`	`13`	`console.warn('unable to connect to parent frame for connecting dev tools');`
`14`		`- }</script></head><body><div id="root"></div><script src="./sb_dll/storybook_ui_dll.js"></script><script src="runtime~main.67b3c42af12dc2b7ac9d.bundle.js"></script><script src="vendors~main.c7cdde8fdc5d62ae5ce6.bundle.js"></script><script src="main.584ae462a0cb36e05a05.bundle.js"></script></body></html>`
	`14`	`+ }</script></head><body><div id="root"></div><script src="./sb_dll/storybook_ui_dll.js"></script><script src="runtime~main.23a842e0cf9f5bd27e60.bundle.js"></script><script src="vendors~main.cf21e66639e7e7094b5b.bundle.js"></script><script src="main.8a2064d11d740364a590.bundle.js"></script></body></html>`