From 3b9cf547479f7315b837c8f313077fa8a75d5f09 Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Sat, 25 Jan 2025 12:27:05 +0100
Subject: [PATCH] feat: post request to submit and add dev URL

---
 .env              |  1 +
 .env.development  |  1 +
 src/App.tsx       | 41 +++++++++++++++++++++++++++++++----------
 tsconfig.app.json |  4 ++--
 4 files changed, 35 insertions(+), 12 deletions(-)
 create mode 100644 .env
 create mode 100644 .env.development

diff --git a/.env b/.env
new file mode 100644
index 0000000..585477b
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_BASE_URL=
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..7392fc5
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_BASE_URL=http://localhost:8000/
diff --git a/src/App.tsx b/src/App.tsx
index f0fd30c..444d2a0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import "./App.css";
 
 import { useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
+const baseUrl = import.meta.env.VITE_BASE_URL as string;
 
 interface Player {
   id: number;
@@ -42,6 +43,22 @@ function PlayerList(props: PlayerListProps) {
     </ReactSortable>
   );
 }
+async function api(path: string, data: any): Promise<any> {
+  const request = new Request(`${baseUrl}${path}/`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+  let response: Response;
+  try {
+    response = await fetch(request);
+  } catch (e) {
+    throw new Error(`request failed: ${e}`);
+  }
+  return response;
+}
 
 function App() {
   const players = loadPlayers();
@@ -52,17 +69,21 @@ function App() {
 
   const [dialog, setDialog] = useState("dialog");
 
-  function handleSubmit() {
+  async function handleSubmit() {
     const dialog = document.querySelector("dialog");
+    dialog?.showModal();
     if (user.length < 1) {
       setDialog("who are you?");
     } else {
-      for (const u of user) {
-        setDialog("sending...");
-        console.log(u.name);
-      }
+      setDialog("sending...");
+      let _user = user.map(({ name }) => name)[0];
+      let left = playersLeft.map(({ name }) => name);
+      let middle = playersMiddle.map(({ name }) => name);
+      let right = playersRight.map(({ name }) => name);
+      const data = { user: _user, hate: left, undecided: middle, love: right };
+      const response = await api("chemistry", data);
+      response.ok ? setDialog("success!") : setDialog("try sending again");
     }
-    dialog?.showModal();
   }
 
   return (
@@ -88,8 +109,8 @@ function App() {
         <div className="box">
           <h2>😬</h2>
           <PlayerList
-            list={playersRight}
-            setList={setPlayersRight}
+            list={playersLeft}
+            setList={setPlayersLeft}
             group={"shared"}
             className="dragbox"
             orderedList
@@ -107,8 +128,8 @@ function App() {
         <div className="box">
           <h2>😍</h2>
           <PlayerList
-            list={playersLeft}
-            setList={setPlayersLeft}
+            list={playersRight}
+            setList={setPlayersRight}
             group={"shared"}
             className="dragbox"
             orderedList
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 358ca9b..a67d962 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -17,8 +17,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },