From 963312aacbd7490b23eed654b15cb938e50a0a01 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 25 Apr 2023 20:41:08 +0800
Subject: [PATCH] Swipe to toggle poll results

---
 src/app.jsx               |  1 +
 src/components/poll.jsx   | 16 +++++++++++++++-
 src/components/status.jsx |  1 -
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 0937406d..a2b4c2b3 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -15,6 +15,7 @@ import {
   useNavigate,
   useParams,
 } from 'react-router-dom';
+import 'swiped-events';
 import { useSnapshot } from 'valtio';
 
 import AccountSheet from './components/account-sheet';
diff --git a/src/components/poll.jsx b/src/components/poll.jsx
index e370957c..c53b209b 100644
--- a/src/components/poll.jsx
+++ b/src/components/poll.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 import emojifyText from '../utils/emojify-text';
 import shortenNumber from '../utils/shorten-number';
@@ -61,8 +61,22 @@ export default function Poll({
 
   const [showResults, setShowResults] = useState(false);
   const optionsHaveVoteCounts = options.every((o) => o.votesCount !== null);
+
+  const pollRef = useRef();
+  useEffect(() => {
+    const handleSwipe = () => {
+      console.log('swiped left');
+      setShowResults(!showResults);
+    };
+    pollRef.current?.addEventListener?.('swiped-left', handleSwipe);
+    return () => {
+      pollRef.current?.removeEventListener?.('swiped-left', handleSwipe);
+    };
+  }, [showResults]);
+
   return (
     <div
+      ref={pollRef}
       lang={lang}
       dir="auto"
       class={`poll ${readOnly ? 'read-only' : ''} ${
diff --git a/src/components/status.jsx b/src/components/status.jsx
index b7c2e776..057fcae8 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -15,7 +15,6 @@ import pThrottle from 'p-throttle';
 import { memo } from 'preact/compat';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
-import 'swiped-events';
 import { useLongPress } from 'use-long-press';
 import useResizeObserver from 'use-resize-observer';
 import { useSnapshot } from 'valtio';