react test

src/App.jsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import PocketBase from 'pocketbase';
+import { useParams, BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+
+const pb = new PocketBase('https://db.out.jafre.li');
+
+const Home = () => {
+    const [message, setMessage] = useState('');
+    const [submitted, setSubmitted] = useState(false);
+    const [error, setError] = useState(null);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const data = { message };
+            const record = await pb.collection('jbin').create(data);
+            setSubmitted(record.id);
+        } catch (err) {
+            setError('Fehler beim Erstellen der Nachricht');
+        }
+    };
+
+    return (
+        <div className="flex flex-col items-center p-4">
+            <h1 className="text-2xl font-bold mb-4">Nachricht erstellen</h1>
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full max-w-md">
+                <textarea
+                    className="p-2 border rounded-xl w-full"
+                    placeholder="Nachricht hier eingeben..."
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    required
+                ></textarea>
+                <button type="submit" className="bg-blue-500 text-white py-2 rounded-xl hover:bg-blue-600">
+                    Nachricht posten
+                </button>
+            </form>
+            {submitted && (
+                <p className="mt-4 text-green-500">
+                    Nachricht erstellt! Schaue sie dir hier an: <Link to={`/${submitted}`} className="text-blue-500 underline">/{submitted}</Link>
+                </p>
+            )}
+            {error && <p className="mt-4 text-red-500">{error}</p>}
+        </div>
+    );
+};
+
+const Message = () => {
+    const { id } = useParams();
+    const [message, setMessage] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchMessage = async () => {
+            try {
+                const record = await pb.collection('jbin').getOne(id);
+                setMessage(record.message);
+            } catch (err) {
+                setError('Nachricht nicht gefunden');
+            }
+        };
+
+        fetchMessage();
+    }, [id]);
+
+    return (
+        <div className="flex flex-col items-center p-4">
+            {error ? (
+                <h1 className="text-xl font-bold text-red-500">{error}</h1>
+            ) : message ? (
+                <>
+                    <h1 className="text-2xl font-bold mb-4">Nachricht</h1>
+                    <p className="p-4 border rounded-xl bg-gray-100 w-full max-w-md">{message}</p>
+                </>
+            ) : (
+                <p className="text-gray-500">Lädt...</p>
+            )}
+        </div>
+    );
+};
+
+const App = () => {
+    return (
+        <Router>
+            <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path=":id" element={<Message />} />
+            </Routes>
+        </Router>
+    );
+};
+
+export default App;

src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+//import './index.css'; // Falls du globale Styles hast
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);