From d77a2c51ab819ee92d32bab5d3146ed92afa455c Mon Sep 17 00:00:00 2001
From: gerbie_goober <wymatthewwu@gmail.com>
Date: Mon, 5 Aug 2024 15:57:31 -0400
Subject: [PATCH] feat: add animation to swiping

---
 backend/.gitignore                 |  2 +-
 frontend/src/pages/LandingPage.css | 54 ++++++++++++++++++++++++++++
 frontend/src/pages/LandingPage.js  | 58 ++++++++++++++++++------------
 3 files changed, 91 insertions(+), 23 deletions(-)

diff --git a/backend/.gitignore b/backend/.gitignore
index 7f5ad97..1ef7c91 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -8,4 +8,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# dotenv environment variable files
+coverage/
diff --git a/frontend/src/pages/LandingPage.css b/frontend/src/pages/LandingPage.css
index 6ef34fd..5487278 100644
--- a/frontend/src/pages/LandingPage.css
+++ b/frontend/src/pages/LandingPage.css
@@ -37,8 +37,62 @@ p {
     align-items: center;
     justify-content: center;
     cursor: pointer; /* Indicate that it's clickable */
+    transition: none;
   }
 
+@keyframes swipe-left {
+  0% {
+      transform: translateX(0) translateY(0) rotate(0deg);
+      opacity: 1;
+  }
+  20% {
+      transform: translateX(-150%) translateY(65%) rotate(-80deg); 
+      opacity: 1;
+  }
+  40% {
+      transform: translateX(-200%) translateY(70%) rotate(-90deg); 
+      opacity: 0.7;
+  }
+  85% {
+    transform: translateY(50%) ;
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes swipe-right {
+  0% {
+    transform: translateX(0) translateY(0) rotate(0deg);
+    opacity: 1;
+  }
+  20% {
+      transform: translateX(150%) translateY(65%) rotate(80deg); 
+      opacity: 1;
+  }
+  40% {
+      transform: translateX(300%) translateY(70%) rotate(90deg); 
+      opacity: 0.7;
+  }
+  85% {
+    transform: translateY(50%);
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.swipe-left {
+  animation: swipe-left 2s; 
+}
+
+.swipe-right {
+  animation: swipe-right 2s; 
+}
+
+
 .swiping-pdf-item embed {
   width: 100%;
   height: 100%;
diff --git a/frontend/src/pages/LandingPage.js b/frontend/src/pages/LandingPage.js
index 7d59233..80dad20 100644
--- a/frontend/src/pages/LandingPage.js
+++ b/frontend/src/pages/LandingPage.js
@@ -23,6 +23,8 @@ const LandingPage = () => {
 
     const [swipingResumes, setSwipingResumes] = useState([]);
     const [currentIndex, setCurrentIndex] = useState(0);
+    const [swipeDirection, setSwipeDirection] = useState(null); // 'left' or 'right'
+    const [isSwiping, setIsSwiping] = useState(false);
 
     const [openZoomModal, ZoomModal] = useZoomModal();
 
@@ -59,30 +61,40 @@ const LandingPage = () => {
         
         console.log('Current Resume:', JSON.stringify(currentResume, null, 2)); // Log current resume
     
-    if (!currentResume || !currentResume._id || !currentResume.uploader_id) {
-        console.error('Invalid current resume structure:', currentResume);
-        return;
-    }
+        if (!currentResume || !currentResume._id || !currentResume.uploader_id) {
+            console.error('Invalid current resume structure:', currentResume);
+            return;
+        }
+
+        setSwipeDirection(accept ? 'right' : 'left');
+        setIsSwiping(true);
         
-        try {
-            let axiosConfig = {
-                headers: {
-                    'Content-Type': 'application/json'
-                }
-            };
+        setTimeout( async () => {
+            try {
+                let axiosConfig = {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                };
 
-            await axios.post(`http://localhost:3001/api/swipes/${userId}`, {
-                user_id: userId,
-                resume_id: currentResume._id,
-                uploader_id: currentResume.uploader_id,
-                accept: accept
-            }, axiosConfig);
+                await axios.post(`http://localhost:3001/api/swipes/${userId}`, {
+                    user_id: userId,
+                    resume_id: currentResume._id,
+                    uploader_id: currentResume.uploader_id,
+                    accept: accept
+                }, axiosConfig);
+
+                setCurrentIndex(prevIndex => prevIndex + 1);
+                await checkMatches(userId, currentResume.uploader_id._id, currentResume._id);
+            } catch (error) {
+                console.error('Failed to swipe resume', error);
+            } finally {
+                // Reset the animation state to prepare for the next swipe
+                setIsSwiping(false);
+                setSwipeDirection(null);
+            }
+        }, 400);
 
-            setCurrentIndex(prevIndex => prevIndex + 1);
-            await checkMatches(userId, currentResume.uploader_id._id, currentResume._id);
-        } catch (error) {
-            console.error('Failed to swipe resume', error);
-        }
     };
 
     const checkMatches = async (currentUserId, swipedResumeUploaderId, swipedResumeId) => {
@@ -142,7 +154,9 @@ const LandingPage = () => {
                         </button>
                     </div>
                 </div>
-                <div className="swiping-pdf-item" onClick={() => openZoomModal(currentResume)}>
+                <div className={`swiping-pdf-item ${isSwiping ? `swipe-${swipeDirection}` : ''}`}
+                    onClick={() => openZoomModal(currentResume)}
+                >
                     <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.worker.min.js">
                         <Viewer
                             fileUrl={`http://localhost:3001/bucket/files/${currentResume.file_path}`}