From 6a0cbcbfb3ff3b66c3a8ff7f1384cebad7e6f164 Mon Sep 17 00:00:00 2001
From: tai <nguyentientai10@gmail.com>
Date: Fri, 4 Nov 2022 15:08:04 +0700
Subject: [PATCH] #93 frontend

---
 frontend/package-lock.json                     | 14 ++++++++++++++
 frontend/package.json                          |  1 +
 frontend/src/index.js                          |  2 ++
 .../v1/user_ui/custom_hook/Lazy_Load_Img.js    | 18 ++++++++++++++----
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7d5205e..2d7c27a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10764,6 +10764,11 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -12639,6 +12644,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lazy-load-image-component": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.5.tgz",
+      "integrity": "sha512-pPtq48tIhkLIZg6MAhB3VvVhntJLrc3MBun/lQkNmNtrRFXdjEc5aHlPT5EhpXPQR1nsNVwN91ne6Aagm3rtNQ==",
+      "requires": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index cd61608..5a71829 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,6 +34,7 @@
     "react-helmet-async": "^1.3.0",
     "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1",
+    "react-lazy-load-image-component": "^1.5.5",
     "react-paypal-express-checkout": "^1.0.5",
     "react-phone-number-input": "^3.1.50",
     "react-redux": "^7.2.6",
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 4a1cefe..31ca1ac 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -4,6 +4,8 @@ import "react-phone-number-input/style.css";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 import "react-toastify/dist/ReactToastify.css";
+import "react-lazy-load-image-component/src/effects/blur.css";
+import "react-lazy-load-image-component/src/effects/opacity.css";
 import App from "./App";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
diff --git a/frontend/src/v1/user_ui/custom_hook/Lazy_Load_Img.js b/frontend/src/v1/user_ui/custom_hook/Lazy_Load_Img.js
index bb09786..ff480c9 100644
--- a/frontend/src/v1/user_ui/custom_hook/Lazy_Load_Img.js
+++ b/frontend/src/v1/user_ui/custom_hook/Lazy_Load_Img.js
@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from "react";
-const Lazy_Load_Img = ({ url, style }) => {
+import { LazyLoadImage, trackWindowScroll } from "react-lazy-load-image-component";
+import { comment_png } from "../imports/Assets_Import"
+const Lazy_Load_Img = ({ url, style, scrollPosition }) => {
   const imgRef = useRef();
   useEffect(() => {
     const img = imgRef.current;
@@ -19,7 +21,7 @@ const Lazy_Load_Img = ({ url, style }) => {
 
   return (
     <React.Fragment>
-      {style ? (
+      {/* {style ? (
         <img
           alt="...loading"
           ref={imgRef}
@@ -28,9 +30,17 @@ const Lazy_Load_Img = ({ url, style }) => {
         />
       ) : (
         <img alt="...loading" ref={imgRef} className="lazy-load" />
-      )}
+      )} */}
+      <LazyLoadImage
+        src={url}
+        PlaceholderSrc={comment_png}
+        effect="opacity"
+        alt={url}
+        placeholderSrc={url}
+        scrollPosition={scrollPosition}
+      />
     </React.Fragment>
   );
 };
 
-export default Lazy_Load_Img;
+export default trackWindowScroll(Lazy_Load_Img);