feat: move aspect ratio check to custom hook

newrelic · May 10, 2022 · 4a6954e · 4a6954e
1 parent bad3546
commit 4a6954e
Showing 1 changed file with 53 additions and 46 deletions.
diff --git a/src/components/LandingBanner/index.js b/src/components/LandingBanner/index.js
@@ -11,12 +11,8 @@ import BannerBackground from './BannerBackground';
 const IMAGE_DISPLAY_BREAKPOINT = '1200px';
 
 const LandingBanner = ({ quickstart, className, location }) => {
-  const defaultBannerImg = {
-    src: defaultImage,
-    //style the default img's element to fit 16:9 aspect ratio
-    style: { padding: ' 20px 60px 0' },
-  };
-  const [bannerImg, setBannerImg] = useState(defaultBannerImg);
+  const bannerImg = useDetermineBannerImg(quickstart, defaultImage);
+
   const breadcrumbs = [
     {
       name: 'Instant Observability',
@@ -27,46 +23,6 @@ const LandingBanner = ({ quickstart, className, location }) => {
     },
   ];
 
-  // get image resolution from URL
-  const getURLMeta = async (url) => {
-    const img = new Image();
-    img.src = url;
-    const { width, height } = await new Promise((resolve) => {
-      img.onload = function () {
-        resolve({
-          width: this.width,
-          height: this.height,
-        });
-      };
-    });
-    return { width, height };
-  };
-
-  const isImgAspect16by9 = async () => {
-    let image = {
-      src: bannerImg.src,
-      style: bannerImg.style,
-    };
-    for (const screenshot of quickstart.dashboards[0].screenshots) {
-      const { width, height } = await getURLMeta(screenshot);
-      const aspectRatio = width / height;
-      if (aspectRatio > 1.5 && aspectRatio < 2) {
-        //set quickstartImgUrl to this screenshot if it the aspec ratio fits the page layout
-        //the ideal ratio is near 16:9 (~1.7)
-        image.src = screenshot;
-        console.log('new image', image);
-        //unsetting the padding allows the image to size itself with no whitespace
-        image.style = { padding: '0' };
-        break;
-      }
-    }
-    setBannerImg(image);
-  };
-
-  useEffect(() => {
-    isImgAspect16by9();
-  }, []);
-
   return (
     <BannerBackground>
       <div
@@ -216,6 +172,57 @@ const LandingBanner = ({ quickstart, className, location }) => {
   );
 };
 
+function useDetermineBannerImg(quickstart, defaultImage) {
+  const defaultBannerImg = {
+    src: defaultImage,
+    //style the default img's element to fit 16:9 aspect ratio
+    style: { padding: ' 20px 100px 0' },
+  };
+  const [bannerImg, setBannerImg] = useState(defaultBannerImg);
+
+  // get image resolution from URL
+  const getURLMeta = async (url) => {
+    const img = new Image();
+    img.src = url;
+    const { width, height } = await new Promise((resolve) => {
+      img.onload = function () {
+        resolve({
+          width: this.width,
+          height: this.height,
+        });
+      };
+    });
+    return { width, height };
+  };
+
+  const isImgAspect16by9 = async () => {
+    let image = {
+      src: bannerImg.src,
+      style: bannerImg.style,
+    };
+    for (const screenshot of quickstart.dashboards[0].screenshots) {
+      const { width, height } = await getURLMeta(screenshot);
+      const aspectRatio = width / height;
+      if (aspectRatio > 1.6 && aspectRatio < 2.2) {
+        //set quickstartImgUrl to this screenshot if it the aspec ratio fits the page layout
+        //the ideal ratio is near 16:9 (~1.7)
+        image.src = screenshot;
+        console.log('new image', image);
+        //unsetting the padding allows the image to size itself with no whitespace
+        image.style = { padding: '0' };
+        break;
+      }
+    }
+    setBannerImg(image);
+  };
+
+  useEffect(() => {
+    isImgAspect16by9();
+  }, []);
+
+  return bannerImg;
+}
+
 LandingBanner.propTypes = {
   quickstart: quickstart.isRequired,
   className: PropTypes.string,