bugfix: update stack of left items

silvankammermann · Oct 28, 2023 · eac579e · eac579e
1 parent 45555a2
commit eac579e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 25 deletions.
diff --git a/frontend/src/app/components/TinderSwiper/TinderSwiper.js b/frontend/src/app/components/TinderSwiper/TinderSwiper.js
@@ -2,30 +2,45 @@
 
 import styles from "./TinderSwiper.module.css";
 import TinderCard from "react-tinder-card";
-import React, { useMemo, useRef } from "react";
+import React, { useState, useMemo, useRef } from "react";
 
 const TinderSwiper = ({ tasks }) => {
+  // Initial state for remaining tasks.
+  const [remainingTasks, setRemainingTasks] = useState(tasks);
+
   const cardRefs = useMemo(
     () =>
-      Array(tasks.length)
+      Array(remainingTasks.length)
         .fill(0)
         .map((i) => React.createRef()),
-    [tasks]
+    [remainingTasks]
   );
 
   const swipe = (direction) => {
-    // swipe the topmost card.
-    const lastCardIndex = tasks.length - 1;
+    // Swipe the topmost card.
+    const lastCardIndex = remainingTasks.length - 1;
     if (cardRefs[lastCardIndex].current) {
       cardRefs[lastCardIndex].current.swipe(direction);
     }
   };
 
+  // Callback for outOfFrame.
+  const handleOutOfFrame = (name) => {
+    setRemainingTasks((prevTasks) =>
+      prevTasks.filter((task) => task.name !== name)
+    );
+  };
+
   return (
     <>
       <div className={styles.cardStack}>
         {tasks.map(({ id, name }, index) => (
-          <TinderCard key={id} className={styles.card} ref={cardRefs[index]}>
+          <TinderCard
+            key={id}
+            className={styles.card}
+            ref={cardRefs[index]}
+            onCardLeftScreen={() => handleOutOfFrame(name)}
+          >
             <div className={styles.container}>
               <span className="h1">{name}</span>
             </div>
@@ -34,15 +49,15 @@ const TinderSwiper = ({ tasks }) => {
       </div>
       <div className={styles.decissionTriggers}>
         <button
-          className="h2 circle bgRed colorWhite"
+          className="h2 button circle bgRed colorWhite"
           onClick={() => {
             swipe("left");
           }}
         >
           Later
         </button>
         <button
-          className="h2 circle bgGreen colorWhite"
+          className="h2 button circle bgGreen colorWhite"
           onClick={() => {
             swipe("right");
           }}

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -5,22 +5,26 @@
     "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
     "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
-  --gradient_up: linear-gradient(360deg,
-      #1d002f 17.82%,
-      rgba(29, 0, 47, 0.726869) 52.51%,
-      rgba(29, 0, 47, 0) 100%);
-  --gradient_down: linear-gradient(180deg,
-      #1d002f 17.82%,
-      rgba(29, 0, 47, 0.726869) 52.51%,
-      rgba(29, 0, 47, 0) 100%);
+  --gradient_up: linear-gradient(
+    360deg,
+    #1d002f 17.82%,
+    rgba(29, 0, 47, 0.726869) 52.51%,
+    rgba(29, 0, 47, 0) 100%
+  );
+  --gradient_down: linear-gradient(
+    180deg,
+    #1d002f 17.82%,
+    rgba(29, 0, 47, 0.726869) 52.51%,
+    rgba(29, 0, 47, 0) 100%
+  );
 
   --color_darkPurple: #1a002e;
   --color_lightPurple: #edd6ff;
   --color_purple: #3b006a;
   --color_yellow: #ffc470;
   --color_lightYellow: #ffc977;
-  --color_green: #4DC68C;
-  --color_red: #F56B6B;
+  --color_green: #4dc68c;
+  --color_red: #f56b6b;
   --color_white: #fff;
 }
 
@@ -36,10 +40,10 @@ body {
   overflow-x: hidden;
 }
 
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 
 body {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-weight: 400;
   margin: 0;
   -webkit-font-feature-settings: "kern" 1;
@@ -52,9 +56,12 @@ body {
   -ms-font-smoothing: antialiased;
   -o-font-smoothing: antialiased;
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(to bottom,
+  background: linear-gradient(
+      to bottom,
       transparent,
-      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
 }
 
 h1,
@@ -109,7 +116,7 @@ li,
 p a,
 .p,
 .p a {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 1.2rem;
   line-height: 1.4em;
@@ -124,7 +131,7 @@ p a,
 
 strong,
 b {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-weight: 700;
   color: var(--color_purple);
   -webkit-hyphens: none;
@@ -137,4 +144,8 @@ b {
 a {
   color: inherit;
   text-decoration: none;
-}
+}
+
+button {
+  cursor: pointer;
+}