refactor: add hook use-is-mobile for use-window-width calls

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 = (
     <div className={styles.container} ref={nodeRef}>

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 (

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 (
     <div className={styles.thread}>

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<HTMLDivElement>(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(() => {

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;

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<string | null>(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<number>(0);
 
   const closeModal = useCallback(() => {