used new context

Author: seeden

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-facebook",
-  "version": "5.0.3",
+  "version": "6.0.3",
   "description": "Facebook components like a Login button, Like, Share, Comments, Embedded Post/Video, Messenger Chat and others",
   "author": {
     "name": "Zlatko Fedor",
@@ -56,40 +56,39 @@
     ]
   },
   "dependencies": {
-    "debug": "^3.1.0",
+    "debug": "^4.0.1",
     "react-spinner-children": "^1.0.8",
     "can-use-dom": "^0.1.0",
-    "prop-types": "^15.6.1",
     "babel-runtime": "^6.26.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.1",
     "babel-plugin-transform-flow-strip-types": "6.22.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-proto-to-assign": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "cross-env": "^5.1.4",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-loader": "^2.0.0",
-    "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-import": "^2.9.0",
-    "jest": "^22.4.3",
-    "jest-cli": "^22.4.3",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0"
+    "cross-env": "^5.2.0",
+    "eslint": "^5.6.1",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-import": "^2.14.0",
+    "jest": "^23.6.0",
+    "jest-cli": "^23.6.0",
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-test-renderer": "^16.5.2"
   },
   "peerDependencies": {
-    "react": "15.x || 16.x"
+    "react": "16.x"
   }
 }

src/Comments.jsx

@@ -1,38 +1,32 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
-import Parser from './Parser';
+import React, { type Node } from 'react';
+import Parser, { type ParserProps } from './Parser';
 import getCurrentHref from './utils/getCurrentHref';
-import ColorScheme from './constants/ColorScheme';
-import CommentsOrderBy from './constants/CommentsOrderBy';
 
-type Props = {
-  className?: string,
+type Props = ParserProps & {
   href?: string,
   numPosts?: number,
   orderBy?: string,
   width?: number | string,
   colorScheme?: string,
   children?: Node,
-  onParse?: Function,
   mobile?: boolean,
 };
 
 export default function Comments(props: Props) {
   const {
-    className,
     colorScheme,
     href = getCurrentHref(),
     numPosts,
     orderBy,
     width,
     children,
-    onParse,
     mobile,
+    ...rest
   } = props;
 
   return (
-    <Parser className={className} onParse={onParse}>
+    <Parser {...rest}>
       <div
         className="fb-comments"
         data-colorscheme={colorScheme}
@@ -50,13 +44,12 @@ export default function Comments(props: Props) {
 }
 
 Comments.defaultProps = {
+  ...Parser.defaultProps,
   href: undefined,
   numPosts: undefined,
   orderBy: undefined,
   width: undefined,
   colorScheme: undefined,
   children: undefined,
-  className: undefined,
-  onParse: undefined,
   mobile: undefined,
 };

src/CommentsCount.jsx

@@ -1,26 +1,22 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
-import Parser from './Parser';
+import React, { type Node } from 'react';
+import Parser, { type ParserProps } from './Parser';
 import getCurrentHref from './utils/getCurrentHref';
 
-type Props = {
-  className?: string,
+type Props = ParserProps & {
   href?: string,
   children?: Node,
-  onParse?: Function,
 };
 
 export default function CommentsCount(props: Props) {
   const {
-    className,
     href = getCurrentHref(),
     children,
-    onParse,
+    ...rest
   } = props;
 
   return (
-    <Parser className={className} onParse={onParse}>
+    <Parser {...rest}>
       <span
         className="fb-comments-count"
         data-href={href}
@@ -32,8 +28,7 @@ export default function CommentsCount(props: Props) {
 }
 
 CommentsCount.defaultProps = {
-  className: undefined,
+  ...Parser.defaultProps,
   href: undefined,
   children: undefined,
-  onParse: undefined,
 };

src/CustomChat.jsx

@@ -1,13 +1,10 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
-import Parser from './Parser';
+import React, { type Node } from 'react';
+import Parser, { type ParserProps } from './Parser';
 
-type Props = {
-  className?: string,
+type Props = ParserProps & {
   pageId: string,
   minimized?: boolean,
-  onParse?: Function,
   children?: Node,
   themeColor?: string,
   loggedInGreeting?: string,
@@ -17,19 +14,18 @@ type Props = {
 
 export default function CustomChat(props: Props) {
   const {
-    className,
     minimized,
     children,
     pageId,
-    onParse,
     themeColor,
     loggedInGreeting,
     loggedOutGreeting,
     dataRef,
+    ...rest
   } = props;
 
   return (
-    <Parser className={className} onParse={onParse}>
+    <Parser {...rest}>
       <div
         className="fb-customerchat"
         page_id={pageId}
@@ -46,10 +42,9 @@ export default function CustomChat(props: Props) {
 }
 
 CustomChat.defaultProps = {
+  ...Parser.defaultProps,
   minimized: undefined,
   children: undefined,
-  className: undefined,
-  onParse: undefined,
   themeColor: undefined,
   loggedInGreeting: undefined,
   loggedOutGreeting: undefined,

src/EmbeddedPost.jsx

@@ -1,29 +1,25 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
-import Parser from './Parser';
+import React, { type Node } from 'react';
+import Parser, { type ParserProps } from './Parser';
 
-type Props = {
-  className?: string,
+type Props = ParserProps & {
   href: string,
   width?: string | number,
   showText?: boolean,
   children?: Node,
-  onParse?: Function,
 };
 
 export default function EmbeddedPost(props: Props) {
   const {
-    className,
     href,
     width,
     showText,
     children,
-    onParse,
+    ...rest
   } = props;
 
   return (
-    <Parser className={className} onParse={onParse}>
+    <Parser {...rest}>
       <div
         className="fb-post"
         data-href={href}
@@ -37,9 +33,8 @@ export default function EmbeddedPost(props: Props) {
 }
 
 EmbeddedPost.defaultProps = {
+  ...Parser.defaultProps,
   width: undefined,
   showText: undefined,
   children: undefined,
-  className: undefined,
-  onParse: undefined,
 };

src/EmbeddedVideo.jsx

@@ -1,9 +1,8 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
-import Parser from './Parser';
+import React, { type Node } from 'react';
+import Parser, { type ParserProps } from './Parser';
 
-type Props = {
+type Props = ParserProps & {
   className?: string,
   href: string,
   width?: number | string,
@@ -17,19 +16,18 @@ type Props = {
 
 export default function EmbeddedVideo(props: Props): Node {
   const {
-    className,
     href,
     width,
     showText,
     allowFullScreen,
     autoPlay,
     showCaptions,
     children,
-    onParse,
+    ...rest
   } = props;
 
   return (
-    <Parser className={className} onParse={onParse}>
+    <Parser {...rest}>
       <div
         className="fb-video"
         data-href={href}
@@ -46,12 +44,11 @@ export default function EmbeddedVideo(props: Props): Node {
 }
 
 EmbeddedVideo.defaultProps = {
+  ...Parser.defaultProps,
   width: undefined,
   showText: undefined,
   allowFullScreen: undefined,
   autoPlay: undefined,
   showCaptions: undefined,
   children: undefined,
-  className: undefined,
-  onParse: undefined,
 };

src/Facebook.js

@@ -17,7 +17,7 @@ export default class Facebook {
   constructor(options = {}) {
     this.options = {
       domain: 'connect.facebook.net',
-      version: 'v2.9',
+      version: 'v3.1',
       cookie: false,
       status: false,
       xfbml: false,
@@ -60,17 +60,17 @@ export default class Facebook {
         resolve(window.FB);
       };
 
-      const fjs = document.getElementsByTagName('script')[0];
+      const fjs = window.document.getElementsByTagName('script')[0];
       if (!fjs) {
         log('Script tag does not exists in the DOM');
         return;
       }
 
-      if (document.getElementById('facebook-jssdk')) {
+      if (window.document.getElementById('facebook-jssdk')) {
         return;
       }
 
-      const js = document.createElement('script');
+      const js = window.document.createElement('script');
       js.id = 'facebook-jssdk';
       js.async = true;
       js.src = `https://${options.domain}/${options.language}/sdk.js`;
@@ -181,10 +181,12 @@ export default class Facebook {
     const usersPermissions = await this.getPermissions();
 
     const findedPermissions = permissions.filter((p) => {
-      return !!usersPermissions.find((row) => {
+      const currentPermission = usersPermissions.find((row) => {
         const { permission, status } = row;
         return status === 'granted' && permission === p;
       });
+
+      return !!currentPermission;
     });
 
     return findedPermissions.length === permissions.length;
@@ -324,7 +326,7 @@ export default class Facebook {
           return callback(err);
         }
 
-        var fqlQuery = 'SELECT uid FROM page_fan WHERE page_id = ' + pageID + ' and uid =  '+ userID;
+        var fqlQuery = `SELECT uid FROM page_fan WHERE page_id = ${pageID} and uid = ${userID}`;
         var query = FB.Data.query(fqlQuery);
 
         query.wait(function(rows) {
@@ -384,7 +386,14 @@ export default class Facebook {
         return callback(err);
       }
 
-      FB.api('fql', { q: 'SELECT uid, name, first_name, last_name, online_presence, status FROM user WHERE uid IN ( SELECT uid2 FROM friend WHERE uid1 = me()) ORDER BY name' }, function (response)
+      FB.api('fql', {
+        q: `
+          SELECT uid, name, first_name, last_name, online_presence, status
+          FROM user
+          WHERE uid IN
+            ( SELECT uid2 FROM friend WHERE uid1 = me()) ORDER BY name
+        `,
+      }, function (response)
       {
         var users = fbApi._prepareUsers(response.data);
         callback(null, users, response);