Changes to swipe action

paulq1984 · Oct 22, 2024 · 77135ad · 77135ad
1 parent 48e1086
commit 77135ad
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 33 deletions.
diff --git a/src/App.css b/src/App.css
@@ -6,7 +6,7 @@
   min-height: 100vh;
   overflow: hidden;
   /* background: linear-gradient(#fff, #999); */
-  background: linear-gradient(#e666e666, #9198e5);
+  background: linear-gradient(#e66465, #9198e5);
 }
 
 * {
@@ -39,7 +39,15 @@
   margin: 5px;
 }
 
+h1 {
+  font-family: 'Damion', cursive;
+
+  text-shadow: 0px 0px 60px 0px rgba(0,0,0,0.30);
+}
 
+h2 {
+
+}
 
 .swipe {
   position: absolute;
@@ -49,13 +57,12 @@
   width: 90vw;
   max-width: 260px;
   height: 300px;
-  margin-top: 20px;
 }
 
 .card {
   position: relative;
   background-color: #fff;
-  width: 100vw;
+  width: 80vw;
   max-width: 260px;
   height: 300px;
   border-radius: 20px;
@@ -104,10 +111,12 @@
   border-radius: 5px;
   border: none;
   font-size: 18px;
+  background-color: #9198e5;
   transition: 200ms;
   margin: 10px;
   font-weight: bolder;
   width: 160px;
+  box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.10);
 }
 
 .buttons button:hover {

diff --git a/src/ExoplanetCard.jsx b/src/ExoplanetCard.jsx
@@ -10,53 +10,57 @@ function ExoplanetCard ({planets}) {
   const [noPlanets, setNoPlanets] = useState([])
   const [yesPlanets, setYesPlanets] = useState([])
 
+  const [reason, setReason] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
   const currentIndexRef = useRef(currentIndex)
 
   const childRefs = useMemo(
     () =>
       Array(planets.length)
         .fill(0)
         .map(() => React.createRef()),
-    [planets.length]
+    []
   )
 
   const updateCurrentIndex = (val) => {
     setCurrentIndex(val)
     currentIndexRef.current = val
   }
 
-  const canGoBack = currentIndex < planets.length - 1
-
   const canSwipe = currentIndex >= 0
 
   const swiped = (direction, planet, index) => {
+    console.log("Swiped")
     setLastDirection(direction)
     updateCurrentIndex(index - 1)
+
+
+    const swipedData = {planet, reason}
+
     if (direction === 'left') {
-      setNoPlanets((prev) => [...prev, planet])
+      setNoPlanets((prev) => [...prev, swipedData])
     } else if (direction == 'right') {
-      setYesPlanets((prev) => [...prev, planet])
+      setYesPlanets((prev) => [...prev, swipedData])
     }
-  }
 
-  const outOfFrame = (name, idx) => {
-    console.log(`${name} (${idx}) left the screen!`, currentIndexRef.current)
-    currentIndexRef.current >= idx && childRefs[idx].current.restoreCard()
+    setReason('')
   }
 
   const swipe = async (dir) => {
+    console.log(swipe)
+    if (!reason.trim()) {
+      setErrorMessage('Please enter a reason before swiping!')
+      return
+    }
+
+    setErrorMessage('')
+
     if (canSwipe && currentIndex < planets.length) {
       await childRefs[currentIndex].current.swipe(dir)
+      swiped(dir, planets[currentIndex], currentIndex)
     }
   }
 
-  const goBack = async () => {
-    if (!canGoBack) return
-    const newIndex = currentIndex + 1
-    updateCurrentIndex(newIndex)
-    await childRefs[newIndex].current.restoreCard()
-  }
-
   const restart = async () => {
     for (let i = 0; i < planets.length; i++) {
       if (childRefs[i].current) {
@@ -68,6 +72,8 @@ function ExoplanetCard ({planets}) {
     setNoPlanets([])
     setYesPlanets([])
     setLastDirection(null)
+    setReason('')
+    setErrorMessage('')
   }
 
   const downloadPlanetLists = () => {
@@ -77,17 +83,17 @@ function ExoplanetCard ({planets}) {
     if (noPlanets.length > 0) {
       doc.setFontSize(14)
       doc.text('No Exoplanets:', 14, 22);
-      noPlanets.forEach((planet, index) => {
-        doc.text(`${planet.name}`, 14, 30 + index * 10)
+      noPlanets.forEach((entry, index) => {
+        doc.text(`${entry.planet.name} = Reason: ${entry.reason || 'No reason provided'}`, 14, 30 + index * 10)
       })
     }
 
     if (yesPlanets.length > 0) {
       doc.addPage()
       doc.setFontSize(14)
       doc.text('Yes Exoplanets:', 14, 22)
-      yesPlanets.forEach((planet, index) => {
-        doc.text(`${planet.name}`, 14, 30 + index * 10)
+      yesPlanets.forEach((entry, index) => {
+        doc.text(`${entry.planet.name} - Reason: ${entry.reason || 'No reason provided'}`, 14, 30 + index * 10)
       })
     }
 
@@ -104,9 +110,9 @@ function ExoplanetCard ({planets}) {
           ref={childRefs[index]}
           className='swipe'
           key={planet.id}
-          onSwipe={(dir) => swiped(dir, planet, index)}
-          onCardLeftScreen={() => outOfFrame(planet.id, index)}
-          onCardRightScreen={() => outOfFrame(planet.id, index)}
+          onCardLeftScreen={() => {}}
+          preventSwipe={['up', 'down', 'left', 'right']}
+
         >
           <div
             className='card'
@@ -125,17 +131,26 @@ function ExoplanetCard ({planets}) {
       )}
 
 {currentIndex >= 0 ? (
+  <div>
+        <div>
+        {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+                    <input
+            type="text"
+            value={reason}
+            placeholder='Enter Reason for swipe'
+            onChange={(e) => setReason(e.target.value)}
+          />
+
+        </div>
         <div className='buttons'>
           <button style={{ backgroundColor: !canSwipe && '#c3c4d3' }} onClick={() => swipe('left')}>
             Swipe left!
           </button>
-          <button style={{ backgroundColor: !canGoBack && '#c3c4d3' }} onClick={() => goBack()}>
-            Undo swipe!
-          </button>
           <button style={{ backgroundColor: !canSwipe && '#c3c4d3' }} onClick={() => swipe('right')}>
             Swipe right!
           </button>
         </div>
+        </div>
       ) : <div className='buttons'>
           <button onClick={() => restart()}>Reset</button>
           <button onClick={() => downloadPlanetLists()}>Download List</button>
@@ -154,19 +169,19 @@ function ExoplanetCard ({planets}) {
       <div>
       <h2>No Planets</h2>
       <ul>
-        {noPlanets.map((planet, idx) => (
+        {noPlanets.map((entry, idx) => (
           <li key={idx}>
-            {planet.name}
+            {entry.planet.name}
           </li>
         ))}
       </ul>
     </div>
     <div>
       <h2>Yes Planets</h2>
       <ul>
-        {yesPlanets.map((planet, idx) => (
+        {yesPlanets.map((entry, idx) => (
           <li key={idx}>
-          {planet.name}</li>
+          {entry.planet.name}</li>
         ))}
       </ul>
     </div>