feat: post request to submit and add dev URL

.env

@@ -0,0 +1 @@
+VITE_BASE_URL=

.env.development

@@ -0,0 +1 @@
+VITE_BASE_URL=http://localhost:8000/

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

tsconfig.app.json

@@ -17,8 +17,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },