From 586b50d130b7b0d226112665ec7caa6ddd29f69f Mon Sep 17 00:00:00 2001
From: son <sonduong272@gmail.com>
Date: Fri, 29 Oct 2021 14:05:01 +0700
Subject: [PATCH] add facebook page

---
 package.json                      |  1 +
 src/Content/FacebookPage/index.js | 44 +++++++++++++++++++++++++++++++
 src/Content/Innercontent.js       |  5 +++-
 yarn.lock                         |  5 ++++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/Content/FacebookPage/index.js

diff --git a/package.json b/package.json
index 7151bec..31d5620 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
 		"react-helmet": "^6.1.0",
 		"react-html-parser": "^2.0.2",
 		"react-lazyload": "^3.2.0",
+		"react-load-script": "^0.0.6",
 		"react-responsive-carousel": "^3.2.18"
 	},
 	"presets": [
diff --git a/src/Content/FacebookPage/index.js b/src/Content/FacebookPage/index.js
new file mode 100644
index 0000000..7c84907
--- /dev/null
+++ b/src/Content/FacebookPage/index.js
@@ -0,0 +1,44 @@
+import React, { useState, useEffect, Fragment } from 'react';
+import Script from 'react-load-script';
+
+const FacebookPage = props => {
+	const [scriptLoaded, setScriptLoaded] = useState(false);
+
+	const { pageURL } = props.item.dataParsed;
+
+	console.log(pageURL);
+
+	useEffect(() => {
+		if (window.FB) {
+			window.FB.XFBML.parse();
+		}
+	}, []);
+
+	return (
+		<>
+			<Script
+				url={'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v12.0'}
+				onCreate={() => setScriptLoaded(false)}
+				onError={() => setScriptLoaded(true)}
+				onLoad={() => setScriptLoaded(true)}
+			/>
+			<div
+				className={'fb-page'}
+				data-href={pageURL}
+				data-tabs={'timeline'}
+				data-width={'500'}
+				data-height={'500'}
+				data-small-header={'false'}
+				data-adapt-container-width={'true'}
+				data-hide-cover={'false'}
+				data-show-facepile={'true'}
+			>
+				<blockquote cite={pageURL} className={'fb-xfbml-parse-ignore'}>
+					<a href={pageURL}>Facebook</a>
+				</blockquote>
+			</div>
+		</>
+	);
+};
+
+export default FacebookPage;
diff --git a/src/Content/Innercontent.js b/src/Content/Innercontent.js
index e4b7d1a..8c95c29 100644
--- a/src/Content/Innercontent.js
+++ b/src/Content/Innercontent.js
@@ -5,6 +5,7 @@ import { YoutubeVideo } from './YoutubeVideo/YoutubeVideo';
 import { Tab } from './Tab';
 import { LikeShareGeneric } from './LikeAndShare/LikeShare/LikeShareGeneric';
 import { Instagram } from './Instagram';
+import FacebookPage from './FacebookPage';
 import { icons } from './icons/icons.js';
 import { randomString } from '../Helper/Data';
 import { Dropdown } from './Dropdown';
@@ -201,7 +202,9 @@ const Innercontent = (props) => {
 		return <LikeShareGeneric item={item} formatMessage={formatMessage} />;
 	} else if (item.type === 'instagram') {
 		return <Instagram item={item} formatMessage={formatMessage} />;
-	} else if (item.type === 'custom_html') {
+	} else if (item.type === 'facebook_page') {
+		return <FacebookPage item={item} formatMessage={formatMessage} />;
+	}  else if (item.type === 'custom_html') {
 		if (data.htmlContent)
 			return HtmlParser(data.htmlContent, {
 				transform: HTMLTransform,
diff --git a/yarn.lock b/yarn.lock
index fe79778..f2058a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9609,6 +9609,11 @@ react-lazyload@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-lazyload/-/react-lazyload-3.2.0.tgz#497bd06a6dbd7015e3376e1137a67dc47d2dd021"
   integrity sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==
 
+react-load-script@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/react-load-script/-/react-load-script-0.0.6.tgz#db6851236aaa25bb622677a2eb51dad4f8d2c258"
+  integrity sha512-aRGxDGP9VoLxcsaYvKWIW+LRrMOzz2eEcubTS4NvQPPugjk2VvMhow0wWTkSl7RxookomD1MwcP4l5UStg5ShQ==
+
 react-responsive-carousel@^3.2.18:
   version "3.2.21"
   resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.21.tgz#a464a93c33f9fc29e3bbd1944ce885a0a343a996"