diff --git a/package.json b/package.json new file mode 100644 index 0000000..be43950 --- /dev/null +++ b/package.json @@ -0,0 +1,35 @@ +{ + "name": "nachrichten-app", + "version": "1.0.0", + "private": true, + "dependencies": { + "pocketbase": "^0.13.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.14.1" + }, + "devDependencies": { + "tailwindcss": "^3.3.2", + "autoprefixer": "^10.4.14", + "postcss": "^8.4.24" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } + } + \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..556b0a7 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..781ef56 --- /dev/null +++ b/public/index.html @@ -0,0 +1,17 @@ + + + + + + + Nachrichten App + + + + + + + +
+ + diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..b05b153 --- /dev/null +++ b/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 ( +
+

Nachricht erstellen

+
+ + +
+ {submitted && ( +

+ Nachricht erstellt! Schaue sie dir hier an: /{submitted} +

+ )} + {error &&

{error}

} +
+ ); +}; + +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 ( +
+ {error ? ( +

{error}

+ ) : message ? ( + <> +

Nachricht

+

{message}

+ + ) : ( +

Lädt...

+ )} +
+ ); +}; + +const App = () => { + return ( + + + } /> + } /> + + + ); +}; + +export default App; \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..a92d311 --- /dev/null +++ b/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( + + + +);