refactor: tinder and taslist pages swapped

frontend/src/app/page.js

@@ -2,51 +2,16 @@
 
 import { useState, useEffect } from "react";
 import styles from "./page.module.css";
-import TaskRow from "./components/TaskRow/TaskRow";
+import TinderSwiper from "@/app/components/TinderSwiper/TinderSwiper";
+
 import defaultTasks from "./testdata/tasks.js";
-import Popover from "./components/Popover/Popover";
-import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded';
-import AddTask from "./components/Tasks/AddTask";
 
 export default function Home() {
   const [tasks, setTasks] = useState(defaultTasks);
 
-  /*
-  const fetchTaskList = async () => {
-    try {
-      const response = await fetch(`http://localhost:5000/getTasks`);
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-      const data = await response.json();
-      console.log(data);
-      setTasks(data);
-    } catch (error) {
-      console.error("Error fetching user data:", error);
-    }
-  };
-
-  useEffect(() => {
-    fetchTaskList();
-  }, []);
-  */
-
   return (
     <>
-      <Popover
-        trigger={
-          <div className={styles.addTaskIcon}>
-            <AddCircleRoundedIcon
-              className={styles.icon__add}
-            />
-          </div>
-        }
-      >
-        <AddTask />
-      </Popover>
-      {tasks.map(({ name, id }) => {
-        return <TaskRow key={id} taskName={name} />;
-      })}
+      <TinderSwiper tasks={tasks} />
     </>
   );
 }

frontend/src/app/page.module.css

@@ -115,36 +115,6 @@
   position: relative;
 }
 
-.addTaskIcon:before {
-  content: "";
-  position: absolute;
-  top: 25%;
-  left: 25%;
-  width: 50%;
-  height: 50%;
-  border-radius: 50%;
-  background: var(--color_white);
-}
-
-.addTaskIcon {
-  position: absolute;
-  color: var(--color_purple);
-  width: 4.5rem;
-  height: 4.5rem;
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.icon__add {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  color: var(--color_purple);
-  z-index: 5;
-}
-
 /* Enable hover only on non-touch devices */
 @media (hover: hover) and (pointer: fine) {
   .card:hover {

frontend/src/app/tasklist/page.js

@@ -0,0 +1,51 @@
+"use client";
+
+import Image from "next/image";
+import styles from "./page.module.css";
+import TaskRow from "@/app/components/TaskRow/TaskRow";
+import Popover from "@/app/components/Popover/Popover";
+import AddTask from "@/app/components/Tasks/AddTask";
+import AddCircleRoundedIcon from "@mui/icons-material/AddCircleRounded";
+import defaultTask from "@/app/testdata/tasks";
+import React, { useState, useEffect } from "react";
+
+export default function Tinder() {
+  const [tasks, setTasks] = useState(defaultTask);
+
+  /*
+  const fetchTaskList = async () => {
+    try {
+      const response = await fetch(`http://localhost:5000/getTasks`);
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const data = await response.json();
+      console.log(data);
+      setTasks(data);
+    } catch (error) {
+      console.error("Error fetching user data:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchTaskList();
+  }, []);
+  */
+
+  return (
+    <>
+      <Popover
+        trigger={
+          <div className={styles.addTaskIcon}>
+            <AddCircleRoundedIcon className={styles.icon__add} />
+          </div>
+        }
+      >
+        <AddTask />
+      </Popover>
+      {tasks.map(({ name, id }) => {
+        return <TaskRow key={id} taskName={name} />;
+      })}
+    </>
+  );
+}

frontend/src/app/tasklist/page.module.css

@@ -0,0 +1,29 @@
+.addTaskIcon:before {
+  content: "";
+  position: absolute;
+  top: 25%;
+  left: 25%;
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  background: var(--color_white);
+}
+
+.addTaskIcon {
+  position: absolute;
+  color: var(--color_purple);
+  width: 4.5rem;
+  height: 4.5rem;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.icon__add {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: var(--color_purple);
+  z-index: 5;
+}