From 9c2036a6a17534b00198a2c2eda1e46b5a6ed580 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 29 Apr 2024 15:30:40 +0200
Subject: [PATCH] fix(challenge modal): disable draggable on mobile

---
 .../challenge-modal.module.css                |   6 +
 .../challenge-modal/challenge-modal.tsx       | 116 ++++++++++--------
 2 files changed, 68 insertions(+), 54 deletions(-)

diff --git a/src/components/challenge-modal/challenge-modal.module.css b/src/components/challenge-modal/challenge-modal.module.css
index 64a25b19..e4e1af72 100644
--- a/src/components/challenge-modal/challenge-modal.module.css
+++ b/src/components/challenge-modal/challenge-modal.module.css
@@ -77,4 +77,10 @@
   cursor: pointer;
   filter: var(--filter80);
   text-transform: capitalize;
+}
+
+@media (max-width: 640px) {
+  .title {
+    cursor: default;
+  }
 }
\ No newline at end of file
diff --git a/src/components/challenge-modal/challenge-modal.tsx b/src/components/challenge-modal/challenge-modal.tsx
index ea8c2f33..09461170 100644
--- a/src/components/challenge-modal/challenge-modal.tsx
+++ b/src/components/challenge-modal/challenge-modal.tsx
@@ -4,6 +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 styles from './challenge-modal.module.css';
 import _ from 'lodash';
 
@@ -53,67 +54,74 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
 
   // react-draggable requires a ref to the modal node
   const nodeRef = useRef(null);
+  const isMobile = useWindowWidth() < 640;
 
-  return (
-    <Draggable handle='.challengeHandle' nodeRef={nodeRef}>
-      <div className={styles.container} ref={nodeRef}>
-        <div className={`challengeHandle ${styles.title}`}>
-          Challenge for {publicationType}
-          <button className={styles.closeIcon} onClick={closeModal} title='close' />
+  const modalContent = (
+    <div className={styles.container} ref={nodeRef}>
+      <div className={`challengeHandle ${styles.title}`}>
+        Challenge for {publicationType}
+        <button className={styles.closeIcon} onClick={closeModal} title='close' />
+      </div>
+      <div className={styles.publication}>
+        <div className={styles.name}>
+          <input type='text' value={displayName || _.capitalize(t('anonymous'))} disabled />
         </div>
-        <div className={styles.publication}>
-          <div className={styles.name}>
-            <input type='text' value={displayName || _.capitalize(t('anonymous'))} disabled />
+        {title && (
+          <div className={styles.subject}>
+            <input type='text' value={title} disabled />
           </div>
-          {title && (
-            <div className={styles.subject}>
-              <input type='text' value={title} disabled />
-            </div>
-          )}
-          {content && (
-            <div className={styles.content}>
-              <textarea value={content} disabled cols={48} rows={4} wrap='soft' />
-            </div>
-          )}
-          {link && (
-            <div className={styles.link}>
-              <input type='text' value={link} disabled />
-            </div>
-          )}
-          <div className={styles.challengeContainer}>
-            <input
-              className={styles.challengeAnswer}
-              type='text'
-              autoComplete='off'
-              autoCorrect='off'
-              spellCheck='false'
-              placeholder='TYPE THE ANSWER HERE AND PRESS ENTER'
-              onKeyDown={onEnterKey}
-              onChange={onAnswersChange}
-              value={answers[currentChallengeIndex] || ''}
-              autoFocus
-            />
-            <div className={styles.challengeMediaWrapper}>
-              {isTextChallenge && <div className={styles.challengeMedia}>{challenges[currentChallengeIndex]?.challenge}</div>}
-              {isImageChallenge && (
-                <img alt={t('loading')} className={styles.challengeMedia} src={`data:image/png;base64,${challenges[currentChallengeIndex]?.challenge}`} />
-              )}
-            </div>
+        )}
+        {content && (
+          <div className={styles.content}>
+            <textarea value={content} disabled cols={48} rows={4} wrap='soft' />
           </div>
-          <div className={styles.challengeFooter}>
-            <div className={styles.counter}>{t('challenge_counter', { index: currentChallengeIndex + 1, total: challenges?.length })}</div>
-            <span className={styles.buttons}>
-              {!challenges[currentChallengeIndex + 1] && <button onClick={onSubmit}>{t('submit')}</button>}
-              {challenges.length > 1 && (
-                <button disabled={!challenges[currentChallengeIndex - 1]} onClick={() => setCurrentChallengeIndex((prev) => prev - 1)}>
-                  {t('previous')}
-                </button>
-              )}
-              {challenges[currentChallengeIndex + 1] && <button onClick={() => setCurrentChallengeIndex((prev) => prev + 1)}>{t('next')}</button>}
-            </span>
+        )}
+        {link && (
+          <div className={styles.link}>
+            <input type='text' value={link} disabled />
           </div>
+        )}
+        <div className={styles.challengeContainer}>
+          <input
+            className={styles.challengeAnswer}
+            type='text'
+            autoComplete='off'
+            autoCorrect='off'
+            spellCheck='false'
+            placeholder='TYPE THE ANSWER HERE AND PRESS ENTER'
+            onKeyDown={onEnterKey}
+            onChange={onAnswersChange}
+            value={answers[currentChallengeIndex] || ''}
+            autoFocus
+          />
+          <div className={styles.challengeMediaWrapper}>
+            {isTextChallenge && <div className={styles.challengeMedia}>{challenges[currentChallengeIndex]?.challenge}</div>}
+            {isImageChallenge && (
+              <img alt={t('loading')} className={styles.challengeMedia} src={`data:image/png;base64,${challenges[currentChallengeIndex]?.challenge}`} />
+            )}
+          </div>
+        </div>
+        <div className={styles.challengeFooter}>
+          <div className={styles.counter}>{t('challenge_counter', { index: currentChallengeIndex + 1, total: challenges?.length })}</div>
+          <span className={styles.buttons}>
+            {!challenges[currentChallengeIndex + 1] && <button onClick={onSubmit}>{t('submit')}</button>}
+            {challenges.length > 1 && (
+              <button disabled={!challenges[currentChallengeIndex - 1]} onClick={() => setCurrentChallengeIndex((prev) => prev - 1)}>
+                {t('previous')}
+              </button>
+            )}
+            {challenges[currentChallengeIndex + 1] && <button onClick={() => setCurrentChallengeIndex((prev) => prev + 1)}>{t('next')}</button>}
+          </span>
         </div>
       </div>
+    </div>
+  );
+
+  return isMobile ? (
+    modalContent
+  ) : (
+    <Draggable handle='.challengeHandle' nodeRef={nodeRef}>
+      {modalContent}
     </Draggable>
   );
 };