Merge pull request #55 from mirmirmirr/mobile-fixes

Mobile fixes
tomeeto · Dec 3, 2024 · 2b2c3bf · 2b2c3bf
2 parents 5d0a865 + 978b8eb
commit 2b2c3bf
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/src/pages/Availability.jsx b/src/pages/Availability.jsx
@@ -41,6 +41,7 @@ export default function Availability() {
 
   const { isDarkMode, toggleTheme } = useTheme();
 
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const [dragStart, setDragStart] = useState(null);
   const [dragEnd, setDragEnd] = useState(null);
@@ -83,14 +84,22 @@ export default function Availability() {
     };
   }, [isDragging]);
 
+  useEffect(() => {
+    const checkTouchDevice = () => {
+      setIsTouchDevice(
+        'ontouchstart' in window || navigator.maxTouchPoints > 0
+      );
+    };
+    checkTouchDevice();
+  }, []);
+
   const handleTouchStart = (e) => {
     const touch = e.touches[0];
     const targetCell = document.elementFromPoint(touch.clientX, touch.clientY);
 
     if (targetCell && targetCell.tagName === 'TD') {
       const day = targetCell.getAttribute('data-day');
       const hour = targetCell.getAttribute('data-hour');
-      console.log('hover: ', currentPage * daysPerPage + hour);
       setIsDragging(true);
       setDragStart({
         day: Number(day),
@@ -120,9 +129,6 @@ export default function Availability() {
   };
 
   const handleTouchEnd = () => {
-    setIsDragging(false);
-    setDragStart(null);
-    setDragEnd(null);
     handleMouseUp();
   };
 
@@ -697,18 +703,21 @@ export default function Availability() {
                             : 'transparent',
                         userSelect: 'none',
                       }}
-                      onMouseDown={() =>
-                        handleMouseDown(row, currentPage * daysPerPage + column)
-                      }
-                      onMouseEnter={() =>
-                        handleMouseEnter(
-                          row,
-                          currentPage * daysPerPage + column
-                        )
-                      }
                       onTouchStart={handleTouchStart}
                       onTouchMove={handleTouchMove}
                       onTouchEnd={handleTouchEnd}
+                      {...(!isTouchDevice && {
+                        onMouseDown: (e) =>
+                          handleMouseDown(
+                            row,
+                            currentPage * daysPerPage + column
+                          ),
+                        onMouseEnter: (e) =>
+                          handleMouseEnter(
+                            row,
+                            currentPage * daysPerPage + column
+                          ),
+                      })}
                     ></td>
                   ))}
                 </tr>

diff --git a/src/resources/TimeSelector.jsx b/src/resources/TimeSelector.jsx
@@ -16,6 +16,7 @@ export default function TimeSelector({
 
   const times = [
     '12:00 AM',
+    '1:00 AM',
     '2:00 AM',
     '3:00 AM',
     '4:00 AM',
@@ -27,6 +28,7 @@ export default function TimeSelector({
     '10:00 AM',
     '11:00 AM',
     '12:00 PM',
+    '1:00 PM',
     '2:00 PM',
     '3:00 PM',
     '4:00 PM',