From a6519df1a2b29bb98a5c13b0fbbe0ea004464d35 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Mon, 17 Apr 2023 01:07:28 +0100
Subject: [PATCH] feat: disable medium-zoom for mobile layout

---
 src/components/dashboard/PagesManager.tsx |  3 --
 src/components/ui/Image.tsx               | 35 ++++++++++++-----------
 src/hooks/useMobileLayout.ts              |  2 +-
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/dashboard/PagesManager.tsx b/src/components/dashboard/PagesManager.tsx
index f730254351..3dd6ab76a0 100644
--- a/src/components/dashboard/PagesManager.tsx
+++ b/src/components/dashboard/PagesManager.tsx
@@ -19,7 +19,6 @@ import { Tooltip } from "../ui/Tooltip"
 import { Trans, useTranslation } from "next-i18next"
 import { readFiles } from "~/lib/read-files"
 import { PagesManagerMenu } from "./PagesManagerMenu"
-import { useMobileLayout } from "~/hooks/useMobileLayout"
 
 export const PagesManager: React.FC<{
   isPost: boolean
@@ -38,8 +37,6 @@ export const PagesManager: React.FC<{
   const { t } = useTranslation(["dashboard", "site"])
   const date = useDate()
 
-  const isMobileLayout = useMobileLayout()
-
   const pages = useGetPagesBySite({
     type: isPost ? "post" : "page",
     site: subdomain!,
diff --git a/src/components/ui/Image.tsx b/src/components/ui/Image.tsx
index 43aebabd5b..c8b83fa93c 100644
--- a/src/components/ui/Image.tsx
+++ b/src/components/ui/Image.tsx
@@ -46,23 +46,26 @@ export const Image: React.FC<TImageProps> = ({
   useEffect(() => {
     const $image = imageRefInternal.current
     if (!$image) return
-    if (isMobileLayout) {
-      const clickHandler = () => {
-        window.open(getSrc(), "_blank")
-      }
-      $image.addEventListener("click", clickHandler)
-      return () => {
-        $image.removeEventListener("click", clickHandler)
-      }
-    }
     if (zoom) {
-      import("medium-zoom").then(({ default: mediumZoom }) => {
-        mediumZoom($image, {
-          margin: 10,
-          background: "rgb(var(--tw-colors-i-white))",
-          scrollOffset: 0,
-        })
-      })
+      if (isMobileLayout !== undefined) {
+        if (isMobileLayout) {
+          const clickHandler = () => {
+            window.open(getSrc(), "_blank")
+          }
+          $image.addEventListener("click", clickHandler)
+          return () => {
+            $image.removeEventListener("click", clickHandler)
+          }
+        } else {
+          import("medium-zoom").then(({ default: mediumZoom }) => {
+            mediumZoom($image, {
+              margin: 10,
+              background: "rgb(var(--tw-colors-i-white))",
+              scrollOffset: 0,
+            })
+          })
+        }
+      }
     }
   }, [zoom, isMobileLayout])
 
diff --git a/src/hooks/useMobileLayout.ts b/src/hooks/useMobileLayout.ts
index b0f19acd23..7f006e0383 100644
--- a/src/hooks/useMobileLayout.ts
+++ b/src/hooks/useMobileLayout.ts
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from "react"
 const mobileWidth = 1024
 
 export function useMobileLayout() {
-  const [isMobile, setIsMobile] = useState(false)
+  const [isMobile, setIsMobile] = useState<boolean>()
 
   const onResize = useCallback(() => {
     setIsMobile(window.innerWidth < mobileWidth)