Refactor code structure for improved readability and maintainability
This commit is contained in:
+100
-112
@@ -1,122 +1,110 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import './App.css'
|
||||
import { useEffect, useState } from "react";
|
||||
import { fitnessApi, type Workout } from "./api/client";
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
const [workouts, setWorkouts] = useState<Workout[]>([]);
|
||||
const [form, setForm] = useState<Workout>({
|
||||
name: "",
|
||||
date: new Date().toISOString().slice(0, 10),
|
||||
durationMinutes: 30,
|
||||
notes: "",
|
||||
});
|
||||
|
||||
// Workouts laden
|
||||
const loadWorkouts = async () => {
|
||||
const data = await fitnessApi.getWorkouts();
|
||||
setWorkouts(data);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadWorkouts();
|
||||
}, []);
|
||||
|
||||
// Formular absenden
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
await fitnessApi.createWorkout({
|
||||
...form,
|
||||
date: new Date(form.date).toISOString(),
|
||||
});
|
||||
setForm({ name: "", date: new Date().toISOString().slice(0, 10), durationMinutes: 30, notes: "" });
|
||||
loadWorkouts();
|
||||
};
|
||||
|
||||
// Workout löschen
|
||||
const handleDelete = async (id: string) => {
|
||||
await fitnessApi.deleteWorkout(id);
|
||||
loadWorkouts();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="center">
|
||||
<div className="hero">
|
||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
||||
<img src={reactLogo} className="framework" alt="React logo" />
|
||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gray-950 text-white p-4 max-w-md mx-auto">
|
||||
<h1 className="text-2xl font-bold mb-4">🏋️ Fitness Tracker</h1>
|
||||
|
||||
{/* FORMULAR */}
|
||||
<form onSubmit={handleSubmit} className="bg-gray-900 p-4 rounded-lg mb-6 space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Workout Name"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
className="w-full p-2 rounded bg-gray-800 border border-gray-700"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
value={form.date}
|
||||
onChange={(e) => setForm({ ...form, date: e.target.value })}
|
||||
className="w-full p-2 rounded bg-gray-800 border border-gray-700"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Dauer (Minuten)"
|
||||
value={form.durationMinutes}
|
||||
onChange={(e) => setForm({ ...form, durationMinutes: +e.target.value })}
|
||||
className="w-full p-2 rounded bg-gray-800 border border-gray-700"
|
||||
min="1"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Notizen (optional)"
|
||||
value={form.notes}
|
||||
onChange={(e) => setForm({ ...form, notes: e.target.value })}
|
||||
className="w-full p-2 rounded bg-gray-800 border border-gray-700"
|
||||
rows={2}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="counter"
|
||||
onClick={() => setCount((count) => count + 1)}
|
||||
type="submit"
|
||||
className="w-full bg-green-600 hover:bg-green-500 p-2 rounded font-bold transition"
|
||||
>
|
||||
Count is {count}
|
||||
💪 Workout speichern
|
||||
</button>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<div className="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</>
|
||||
)
|
||||
{/* LISTE */}
|
||||
<div className="space-y-3">
|
||||
{workouts.length === 0 && (
|
||||
<p className="text-gray-500 text-center">Noch keine Workouts. Leg los! 🏃</p>
|
||||
)}
|
||||
{workouts.map((w) => (
|
||||
<div key={w.id} className="bg-gray-900 p-4 rounded-lg flex justify-between items-start">
|
||||
<div>
|
||||
<h3 className="font-bold">{w.name}</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
{new Date(w.date).toLocaleDateString("de-DE")} • {w.durationMinutes} Min
|
||||
</p>
|
||||
{w.notes && <p className="text-sm text-gray-500 mt-1">{w.notes}</p>}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => w.id && handleDelete(w.id)}
|
||||
className="text-red-500 hover:text-red-400 text-sm ml-2 shrink-0"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
@@ -0,0 +1,54 @@
|
||||
// apps/web/src/api/client.ts
|
||||
|
||||
// const API_BASE = "http://localhost:5107";
|
||||
const API_BASE = "http://192.168.178.189:5107";
|
||||
|
||||
export interface Workout {
|
||||
id?: string;
|
||||
name: string;
|
||||
date: string;
|
||||
durationMinutes: number;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
export const fitnessApi = {
|
||||
// Alle Workouts abrufen
|
||||
async getWorkouts(): Promise<Workout[]> {
|
||||
const res = await fetch(`${API_BASE}/api/workouts`);
|
||||
return res.json();
|
||||
},
|
||||
|
||||
// Einzelnes Workout abrufen
|
||||
async getWorkout(id: string): Promise<Workout> {
|
||||
const res = await fetch(`${API_BASE}/api/workouts/${id}`);
|
||||
if (!res.ok) throw new Error("Not found");
|
||||
return res.json();
|
||||
},
|
||||
|
||||
// Neues Workout erstellen
|
||||
async createWorkout(workout: Workout): Promise<Workout> {
|
||||
const res = await fetch(`${API_BASE}/api/workouts`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(workout),
|
||||
});
|
||||
return res.json();
|
||||
},
|
||||
|
||||
// Workout aktualisieren
|
||||
async updateWorkout(id: string, workout: Workout): Promise<Workout> {
|
||||
const res = await fetch(`${API_BASE}/api/workouts/${id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(workout),
|
||||
});
|
||||
return res.json();
|
||||
},
|
||||
|
||||
// Workout löschen
|
||||
async deleteWorkout(id: string): Promise<void> {
|
||||
await fetch(`${API_BASE}/api/workouts/${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user