feat: add animation to swiping (#40)

backend/.gitignore

@@ -9,4 +9,4 @@ yarn-debug.log*
 yarn-error.log*
 
 # coverage testing
-/coverage
+coverage/

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%;

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/[email protected]/build/pdf.worker.min.js">
                         <Viewer
                             fileUrl={`http://localhost:3001/bucket/files/${currentResume.file_path}`}