react-ig-feed - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.js

@@ -9,7 +9,17 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+
+  _setPrototypeOf(subClass, superClass);
 }
 
-var styles = {"instagramItems":"_2R-kh","instagramItem":"_wPDyp","instagramImg":"_vzTHL","instagramIcon":"_3xnQP"};
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
 
+  return _setPrototypeOf(o, p);
+}
+
+var styles = {"instagramItems":"_2R-kh","instagramItem":"_wPDyp","instagramImg":"_vzTHL","instagramIcon":"_3xnQP","errorMessage":"_3lhLL"};
+
 var InstagramFeed = /*#__PURE__*/function (_Component) {
@@ -22,20 +32,6 @@ _inheritsLoose(InstagramFeed, _Component);
     _this = _Component.call(this, props) || this;
-
-    _this.getWindowDimensions = function () {
-      _this.setState({
-        width: window.innerWidth
-      });
-    };
-
-    _this.toggleHover = function () {
-      _this.setState({
-        hover: !_this.state.hover
-      });
-    };
-
     _this.state = {
       feeds: [],
-      isLoaded: false,
-      hover: false,
-      width: ''
+      isError: '',
+      isLoaded: false
     };
@@ -50,15 +46,24 @@ return _this;
 
-    var url = "https://graph.instagram.com/me/media?fields=media_count,permalink,media_url&&access_token=" + this.props.token;
+    var url = "https://graph.instagram.com/me/media?fields=media_count,media_type,permalink,media_url&&access_token=" + this.props.token;
     fetch(url).then(function (response) {
       return response.json();
-    }).then(function (result) {
-      console.log(result);
+    }).then(function (data) {
+      if (data.hasOwnProperty('error')) {
+        _this2.setState({
+          isLoaded: true,
+          isError: true
+        });
+      } else {
+        _this2.setState({
+          isLoaded: true,
+          feeds: data.data,
+          isError: false
+        });
+      }
+    })["catch"](function (error) {
+      console.error('Error:', error);
 
       _this2.setState({
         isLoaded: true,
-        feeds: result.data
-      });
-    }, function (error) {
-      _this2.setState({
-        isLoaded: true,
+        isError: true,
         error: error
@@ -71,11 +76,14 @@ });
     var _this$state = this.state,
-        error = _this$state.error,
+        isError = _this$state.isError,
         isLoaded = _this$state.isLoaded,
         feeds = _this$state.feeds;
 
-    if (error) {
-      return /*#__PURE__*/React__default.createElement("div", null, " Error: ", error.message, " ");
+    if (isError) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: styles.errorMessage
+      }, /*#__PURE__*/React__default.createElement("p", null, " the access token is not valid"));
     } else if (!isLoaded) {
       return /*#__PURE__*/React__default.createElement("div", null, " Loading... ");
     } else {
+      console.log(feeds);
       return /*#__PURE__*/React__default.createElement("div", {
@@ -93,3 +101,3 @@ className: styles.instagramItems
           rel: "noreferrer"
-        }, /*#__PURE__*/React__default.createElement("img", {
+        }, feed.media_type === 'IMAGE' || feed.media_type === 'CAROUSEL_ALBUM' ? /*#__PURE__*/React__default.createElement("img", {
           className: styles.instagramImg,
@@ -99,2 +107,7 @@ key: index,
           alt: "description"
+        }) : /*#__PURE__*/React__default.createElement("video", {
+          className: styles.instagramImg,
+          key: index,
+          src: feed.media_url,
+          type: "video/mp4"
         }), /*#__PURE__*/React__default.createElement("div", {
@@ -101,0 +114,0 @@ className: styles.instagramIcon

dist/index.modern.js

@@ -6,7 +6,17 @@ import React, { Component } from 'react';
   subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+
+  _setPrototypeOf(subClass, superClass);
 }
 
-var styles = {"instagramItems":"_2R-kh","instagramItem":"_wPDyp","instagramImg":"_vzTHL","instagramIcon":"_3xnQP"};
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
 
+  return _setPrototypeOf(o, p);
+}
+
+var styles = {"instagramItems":"_2R-kh","instagramItem":"_wPDyp","instagramImg":"_vzTHL","instagramIcon":"_3xnQP","errorMessage":"_3lhLL"};
+
 var InstagramFeed = /*#__PURE__*/function (_Component) {
@@ -19,20 +29,6 @@ _inheritsLoose(InstagramFeed, _Component);
     _this = _Component.call(this, props) || this;
-
-    _this.getWindowDimensions = function () {
-      _this.setState({
-        width: window.innerWidth
-      });
-    };
-
-    _this.toggleHover = function () {
-      _this.setState({
-        hover: !_this.state.hover
-      });
-    };
-
     _this.state = {
       feeds: [],
-      isLoaded: false,
-      hover: false,
-      width: ''
+      isError: '',
+      isLoaded: false
     };
@@ -47,15 +43,24 @@ return _this;
 
-    var url = "https://graph.instagram.com/me/media?fields=media_count,permalink,media_url&&access_token=" + this.props.token;
+    var url = "https://graph.instagram.com/me/media?fields=media_count,media_type,permalink,media_url&&access_token=" + this.props.token;
     fetch(url).then(function (response) {
       return response.json();
-    }).then(function (result) {
-      console.log(result);
+    }).then(function (data) {
+      if (data.hasOwnProperty('error')) {
+        _this2.setState({
+          isLoaded: true,
+          isError: true
+        });
+      } else {
+        _this2.setState({
+          isLoaded: true,
+          feeds: data.data,
+          isError: false
+        });
+      }
+    })["catch"](function (error) {
+      console.error('Error:', error);
 
       _this2.setState({
         isLoaded: true,
-        feeds: result.data
-      });
-    }, function (error) {
-      _this2.setState({
-        isLoaded: true,
+        isError: true,
         error: error
@@ -68,11 +73,14 @@ });
     var _this$state = this.state,
-        error = _this$state.error,
+        isError = _this$state.isError,
         isLoaded = _this$state.isLoaded,
         feeds = _this$state.feeds;
 
-    if (error) {
-      return /*#__PURE__*/React.createElement("div", null, " Error: ", error.message, " ");
+    if (isError) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.errorMessage
+      }, /*#__PURE__*/React.createElement("p", null, " the access token is not valid"));
     } else if (!isLoaded) {
       return /*#__PURE__*/React.createElement("div", null, " Loading... ");
     } else {
+      console.log(feeds);
       return /*#__PURE__*/React.createElement("div", {
@@ -90,3 +98,3 @@ className: styles.instagramItems
           rel: "noreferrer"
-        }, /*#__PURE__*/React.createElement("img", {
+        }, feed.media_type === 'IMAGE' || feed.media_type === 'CAROUSEL_ALBUM' ? /*#__PURE__*/React.createElement("img", {
           className: styles.instagramImg,
@@ -96,2 +104,7 @@ key: index,
           alt: "description"
+        }) : /*#__PURE__*/React.createElement("video", {
+          className: styles.instagramImg,
+          key: index,
+          src: feed.media_url,
+          type: "video/mp4"
         }), /*#__PURE__*/React.createElement("div", {
@@ -98,0 +111,0 @@ className: styles.instagramIcon

package.json

 {
   "name": "react-ig-feed",
-  "version": "1.0.2",
-  "description": "A React component to display a user's Instagram photos Using Instagram Basic Graph API",
+  "version": "1.0.3",
+  "description": "A React component to display a user's Instagram photos Using Instagram Basic Graph API.",
   "author": "Mohammed RAJI",
   "license": "MIT",
   "repository": "https://github.com/MohammedRaji/react-ig-feed",
+  "homepage":"https://mohammedraji.github.io/react-ig-feed/",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.js",
-   "keywords": [
-   "instagram", 
-   "reactjs", 
-   "react-components",
-   "instagram-feed",
-   "graphapi"
-  ],
   "engines": {
@@ -19,0 +13,0 @@ "node": ">=10"

README.md

@@ -1,6 +0,6 @@
-# react-instagram-feed
+# react-ig-feed
 
 ![MIT](https://img.shields.io/badge/license-MIT-green)
 ![passing](https://img.shields.io/badge/build-passing-green)
-![v1.0.2](https://img.shields.io/badge/release-v1.0.2-blue)
+![v1.0.3](https://img.shields.io/badge/release-v1.0.3-blue)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
@@ -40,5 +40,14 @@
 
+## Support Me
+If you like this react component and you would like to support me, feel free to buy me coffee:
 
+<a href="https://www.buymeacoffee.com/mohammedraji" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
+
+and don't forget to stargaze this repository on GitHub
+
 ## License
 
 **react-ig-feed.js** is licensed under the [MIT](LICENSE).  Feel free to use this component in your products and distribute them. The only thing we ask is that mention `react-ig-feed.js` in your product info.
+
+
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25907

increased by8.78%

Lines of code

282

increased by12.35%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

53

increased by20.45%

No dependency changes