From 4ff21deb896ac2385131c30e994185e135437023 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Mon, 4 Apr 2022 09:53:17 -0600
Subject: [PATCH] #2325 Followup (#2369)

* Adds initial MDX implementation for App Store pages

* Adds endpoint to serve app store static files

* Replaces zoom icon with dynamic-served one

* Fixes zoom icon

* Makes Slider reusable

* Adds gray-matter for MDX

* Adds zoom screenshots

* Update yarn.lock

* Slider improvements

* WIP

* Update TrendingAppsSlider.tsx

* WIP

* Adds MS teams screenshots

* Adds stripe screenshots

* Cleanup

* Update index.ts

* WIP

* Cleanup

* Cleanup

* Adds jitsi screenshot

* Adds Google meet screenshots

* Adds office 365 calendar screenshots

* Adds google calendar screenshots

* Follow #2325

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/components/apps/Slider.tsx         | 10 ++++------
 apps/web/pages/api/app-store/[...static].ts |  6 +++---
 apps/web/pages/apps/[slug].tsx              |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/apps/web/components/apps/Slider.tsx b/apps/web/components/apps/Slider.tsx
index 79693287..b22d88c3 100644
--- a/apps/web/components/apps/Slider.tsx
+++ b/apps/web/components/apps/Slider.tsx
@@ -20,19 +20,17 @@ const Slider = <T extends unknown>({
   options?: Options;
 }) => {
   const glide = useRef(null);
+  const slider = useRef<Glide.Properties | null>(null);
 
   useEffect(() => {
     if (glide.current) {
-      const slider = new Glide(glide.current, {
+      slider.current = new Glide(glide.current, {
         type: "carousel",
         ...options,
-      });
-
-      slider.mount();
+      }).mount();
     }
 
-    // @ts-ignore TODO: This method is missing in types
-    return () => slider.destroy();
+    return () => slider.current?.destroy();
   }, [options]);
 
   return (
diff --git a/apps/web/pages/api/app-store/[...static].ts b/apps/web/pages/api/app-store/[...static].ts
index 32db9d05..3c6cac81 100644
--- a/apps/web/pages/api/app-store/[...static].ts
+++ b/apps/web/pages/api/app-store/[...static].ts
@@ -16,15 +16,15 @@ import path from "path";
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const [appName, fileName] = Array.isArray(req.query.static) ? req.query.static : [req.query.static];
   const fileNameParts = fileName.split(".");
-  const { [fileNameParts.length - 1]: fileExtentsion } = fileNameParts;
+  const { [fileNameParts.length - 1]: fileExtension } = fileNameParts;
   const STATIC_PATH = path.join(process.cwd(), "..", "..", "packages/app-store", appName, "static", fileName);
 
   try {
     const imageBuffer = fs.readFileSync(STATIC_PATH);
-    const mimeType = mime.lookup(fileExtentsion);
+    const mimeType = mime.lookup(fileExtension);
     if (mimeType) res.setHeader("Content-Type", mimeType);
     res.send(imageBuffer);
   } catch (e) {
-    res.status(400).json({ error: true, message: "Image not found" });
+    res.status(400).json({ error: true, message: "Resource not found" });
   }
 }
diff --git a/apps/web/pages/apps/[slug].tsx b/apps/web/pages/apps/[slug].tsx
index c25e9e46..6cc30ed5 100644
--- a/apps/web/pages/apps/[slug].tsx
+++ b/apps/web/pages/apps/[slug].tsx
@@ -33,7 +33,7 @@ const components = {
         }}
         renderItem={(item) =>
           isTabletAndUp ? (
-            <Image src={item} alt="" layout="fixed" width={573} height={382} />
+            <Image src={item} alt="" loading="eager" layout="fixed" width={573} height={382} />
           ) : (
             <Image src={item} alt="" layout="responsive" width={573} height={382} />
           )