From eac579e60c16dac67bc84d3e657ff18181c6ee63 Mon Sep 17 00:00:00 2001
From: hazzeldorn <jonas@ohodesign.ch>
Date: Sun, 29 Oct 2023 01:42:41 +0200
Subject: [PATCH] bugfix: update stack of left items

---
 .../components/TinderSwiper/TinderSwiper.js   | 31 +++++++++----
 frontend/src/app/globals.css                  | 45 ++++++++++++-------
 2 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/components/TinderSwiper/TinderSwiper.js b/frontend/src/app/components/TinderSwiper/TinderSwiper.js
index 9aafff5..473a68b 100644
--- 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,7 +49,7 @@ const TinderSwiper = ({ tasks }) => {
       </div>
       <div className={styles.decissionTriggers}>
         <button
-          className="h2 circle bgRed colorWhite"
+          className="h2 button circle bgRed colorWhite"
           onClick={() => {
             swipe("left");
           }}
@@ -42,7 +57,7 @@ const TinderSwiper = ({ tasks }) => {
           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
index 817c000..47c6406 100644
--- 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;
-}
\ No newline at end of file
+}
+
+button {
+  cursor: pointer;
+}