From 1065b0cdeb4989158b1154cc4ca20225d72abc32 Mon Sep 17 00:00:00 2001 From: julius Date: Sat, 25 Jan 2025 13:19:38 +0100 Subject: [PATCH] feat: migrate `Chemistry` and `api` out of App.tsx --- src/App.css | 1 - src/App.tsx | 150 +--------------------------------------------- src/Chemistry.tsx | 148 +++++++++++++++++++++++++++++++++++++++++++++ src/api.ts | 17 ++++++ 4 files changed, 167 insertions(+), 149 deletions(-) create mode 100644 src/Chemistry.tsx create mode 100644 src/api.ts diff --git a/src/App.css b/src/App.css index 40d45f0..67f8394 100644 --- a/src/App.css +++ b/src/App.css @@ -19,7 +19,6 @@ h1, h2 { margin-top: 0px; margin-bottom: 0px; - background-color: ghostwhite; } .container { diff --git a/src/App.tsx b/src/App.tsx index 444d2a0..e6987d6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,157 +1,11 @@ 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; - name: string; -} - -function loadPlayers() { - const players = [ - "August", - "Beate", - "Ceasar", - "Daedalus", - "Elli", - "Ford P.", - "Gabriel", - "Hugo", - "Ivar Johansson", - "Jürgen Gordon Malinauskas", - "Karsten Uwe Kalinowski", - ].map((v, i) => { - return { id: i, name: v } as Player; - }); - return players; -} - -type PlayerListProps = Partial> & { - orderedList?: boolean; -}; - -function PlayerList(props: PlayerListProps) { - return ( - - {props.list?.map((item, index) => ( -
- {props.orderedList ? index + 1 + ". " + item.name : item.name} -
- ))} - - ); -} -async function api(path: string, data: any): Promise { - 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; -} +import Chemistry from "./Chemistry"; function App() { - const players = loadPlayers(); - const [user, setUser] = useState([]); - const [playersLeft, setPlayersLeft] = useState([]); - const [playersMiddle, setPlayersMiddle] = useState(players); - const [playersRight, setPlayersRight] = useState([]); - - const [dialog, setDialog] = useState("dialog"); - - async function handleSubmit() { - const dialog = document.querySelector("dialog"); - dialog?.showModal(); - if (user.length < 1) { - setDialog("who are you?"); - } else { - 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"); - } - } - return ( <> - logo -

cutt

- cool ultimate team tool -
-

who are you?

- -
-
-
-

😬

- -
-
-

🤷

- -
-
-

😍

- -
-
- - - { - event.currentTarget.close(); - }} - > - {dialog} - -
-

- something not working? message me. -

-
+ ); } - export default App; diff --git a/src/Chemistry.tsx b/src/Chemistry.tsx new file mode 100644 index 0000000..0fba18a --- /dev/null +++ b/src/Chemistry.tsx @@ -0,0 +1,148 @@ +import { useState } from "react"; +import { ReactSortable, ReactSortableProps } from "react-sortablejs"; +import api from "./api"; + +interface Player { + id: number; + name: string; +} + +function loadPlayers() { + const players = [ + "August", + "Beate", + "Ceasar", + "Daedalus", + "Elli", + "Ford P.", + "Gabriel", + "Hugo", + "Ivar Johansson", + "Jürgen Gordon Malinauskas", + "Karsten Uwe Kalinowski", + ].map((v, i) => { + return { id: i, name: v } as Player; + }); + return players; +} + +type PlayerListProps = Partial> & { + orderedList?: boolean; +}; + +function PlayerList(props: PlayerListProps) { + return ( + + {props.list?.map((item, index) => ( +
+ {props.orderedList ? index + 1 + ". " + item.name : item.name} +
+ ))} + + ); +} + +export default function Chemistry() { + const players = loadPlayers(); + const [user, setUser] = useState([]); + const [playersLeft, setPlayersLeft] = useState([]); + const [playersMiddle, setPlayersMiddle] = useState(players); + const [playersRight, setPlayersRight] = useState([]); + + const [dialog, setDialog] = useState("dialog"); + + async function handleSubmit() { + const dialog = document.querySelector("dialog"); + dialog?.showModal(); + if (user.length < 1) { + setDialog("who are you?"); + } else { + 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"); + } + } + + return ( + <> + logo +

cutt

+ cool ultimate team tool +
+

your name?

+ {user.length < 1 && drag your name here:} + +
+
+
+

😬

+ {playersLeft.length < 1 && ( + + drag people here that you'd rather not play with + + )} + +
+
+

🤷

+ +
+
+

😍

+ {playersRight.length < 1 && ( + + drag people here that you love playing with + + )} + +
+
+ + + { + event.currentTarget.close(); + }} + > + {dialog} + +
+

+ something not working? message me. +

+
+ + ); +} diff --git a/src/api.ts b/src/api.ts new file mode 100644 index 0000000..d615cd8 --- /dev/null +++ b/src/api.ts @@ -0,0 +1,17 @@ +const baseUrl = import.meta.env.VITE_BASE_URL as string; +export default async function api(path: string, data: any): Promise { + 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; +}