From 0701f82174dca7e15400672341b7501761ef72d0 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Wed, 29 May 2024 16:17:37 +0200 Subject: [PATCH] refactor: add hook use-is-mobile for use-window-width calls --- src/components/challenge-modal/challenge-modal.tsx | 4 ++-- src/components/comment-media/comment-media.tsx | 8 ++++---- src/components/post/post.tsx | 4 ++-- src/components/reply-modal/reply-modal.tsx | 4 ++-- src/hooks/use-is-mobile.ts | 8 ++++++++ src/hooks/use-reply-modal.ts | 4 ++-- 6 files changed, 20 insertions(+), 12 deletions(-) create mode 100644 src/hooks/use-is-mobile.ts diff --git a/src/components/challenge-modal/challenge-modal.tsx b/src/components/challenge-modal/challenge-modal.tsx index c9a57908..f95abb5c 100644 --- a/src/components/challenge-modal/challenge-modal.tsx +++ b/src/components/challenge-modal/challenge-modal.tsx @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'; import { Challenge as ChallengeType } from '@plebbit/plebbit-react-hooks'; import { getPublicationType } from '../../lib/utils/challenge-utils'; import useChallenges from '../../hooks/use-challenges'; -import useWindowWidth from '../../hooks/use-window-width'; +import useIsMobile from '../../hooks/use-is-mobile'; import styles from './challenge-modal.module.css'; import _ from 'lodash'; @@ -54,7 +54,7 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => { // react-draggable requires a ref to the modal node const nodeRef = useRef(null); - const isMobile = useWindowWidth() < 640; + const isMobile = useIsMobile(); const modalContent = (
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx index 25f4c659..0df99bc7 100644 --- a/src/components/comment-media/comment-media.tsx +++ b/src/components/comment-media/comment-media.tsx @@ -4,7 +4,7 @@ import styles from './comment-media.module.css'; import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils'; import { getHostname } from '../../lib/utils/url-utils'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; -import useWindowWidth from '../../hooks/use-window-width'; +import useIsMobile from '../../hooks/use-is-mobile'; import Embed, { canEmbed } from '../embed'; interface MediaProps { @@ -24,7 +24,7 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid const handleError = () => setHasError(true); let displayWidth, displayHeight; - const isMobile = useWindowWidth() < 640; + const isMobile = useIsMobile(); const maxThumbnailSize = isMobile || isReply ? 125 : 250; if (linkWidth && linkHeight) { @@ -97,7 +97,7 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => { const { t } = useTranslation(); const { thumbnail, type, url } = commentMediaInfo || {}; - const isMobile = useWindowWidth() < 640; + const isMobile = useIsMobile(); const mediaClass = isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp; return ( @@ -134,7 +134,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => { const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => { const { t } = useTranslation(); - const isMobile = useWindowWidth() < 640; + const isMobile = useIsMobile(); const { type, url } = commentMediaInfo || {}; return ( diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index ec65fdaa..2dc6569b 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -1,5 +1,5 @@ import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks'; -import useWindowWidth from '../../hooks/use-window-width'; +import useIsMobile from '../../hooks/use-is-mobile'; import styles from './post.module.css'; import PostDesktop from './post-desktop'; import PostMobile from './post-mobile'; @@ -15,7 +15,7 @@ export interface PostProps { const Post = ({ post, showAllReplies = false, openReplyModal }: PostProps) => { const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress }); - const isMobile = useWindowWidth() < 640; + const isMobile = useIsMobile(); return (
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index 35d7eac7..17bed746 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -6,7 +6,7 @@ import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks'; import { isValidURL } from '../../lib/utils/url-utils'; import useReply from '../../hooks/use-reply'; -import useWindowWidth from '../../hooks/use-window-width'; +import useIsMobile from '../../hooks/use-is-mobile'; import styles from './reply-modal.module.css'; import _ from 'lodash'; @@ -51,7 +51,7 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { }, [replyIndex, resetContent, closeModal]); const nodeRef = useRef(null); - const isMobile = useWindowWidth() < 640; + const isMobile = useIsMobile(); // on mobile, the position is absolute instead of fixed, so we need to calculate the top position useEffect(() => { diff --git a/src/hooks/use-is-mobile.ts b/src/hooks/use-is-mobile.ts new file mode 100644 index 00000000..fc7cd9f6 --- /dev/null +++ b/src/hooks/use-is-mobile.ts @@ -0,0 +1,8 @@ +import useWindowWidth from './use-window-width'; + +const useIsMobile = () => { + const windowWidth = useWindowWidth(); + return windowWidth < 640; +}; + +export default useIsMobile; diff --git a/src/hooks/use-reply-modal.ts b/src/hooks/use-reply-modal.ts index acb4a8df..d15cc2b1 100644 --- a/src/hooks/use-reply-modal.ts +++ b/src/hooks/use-reply-modal.ts @@ -1,12 +1,12 @@ import { useState, useCallback } from 'react'; -import useWindowWidth from './use-window-width'; +import useIsMobile from './use-is-mobile'; const useReplyModal = () => { const [showReplyModal, setShowReplyModal] = useState(false); const [activeCid, setActiveCid] = useState(null); // on mobile, the position is absolute instead of fixed, so we need to calculate the top position - const isMobile = useWindowWidth() < 640; + const isMobile = useIsMobile(); const [scrollY, setScrollY] = useState(0); const closeModal = useCallback(() => {