From fbf79c71ac7a0b7de50eef8dda6c0144e7f1fcc8 Mon Sep 17 00:00:00 2001 From: jafreli Date: Sun, 26 Jan 2025 00:08:35 +0100 Subject: [PATCH] react test --- package.json | 35 +++++++++++++++++ public/favicon.ico | Bin 0 -> 15406 bytes public/index.html | 17 +++++++++ src/App.jsx | 93 +++++++++++++++++++++++++++++++++++++++++++++ src/index.js | 11 ++++++ 5 files changed, 156 insertions(+) create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 src/App.jsx create mode 100644 src/index.js 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 0000000000000000000000000000000000000000..556b0a7fb5afe2be9cf4616fd55fd88f5bb0e4ef GIT binary patch literal 15406 zcmeHN&2JRR74IgwAO*=m>>=Qpt~P;P0Y-aa?J;3@1%mJq<$#ocH8bqu;Sd(IkXSO>sjf`jZ_o}GS1?`hfx zpaBaw+;U`zo}q20b~;9Gni9PyVfJ`uIm=ZjLB?!c84f$mh+gu_oXV)K5f09>S0xWO za+XLQ4yp^|XYCGS8Gf~}_p3uT%RU5cvGvy77E1I^WzOjXhj@`)b&BNurDxkmLpzO( zGYkF-YquYsy?ZvrI3Gi*cxi0=pPZE4&mQuAR&n}`*`dF06F#lsCH@RAf@Z96yRca0 zzswg=K8A9ttEe)dcUtHLuhGt}TYqhBku*Yv%S&=At-rd}!UqgX)&s|M6hA+GV6m|0 zE7BdxABLZJWjlB>0`Zd+f9^0FuaTqnWzf$ z?6n&Go^B~57(@1&tWTKhn5%m+x4l4miFB=3>)l|Rxihwr8$>_v9%=sF#SFc=wokmMHrdG-qQmi@Yw?=t(+x@AS2Y?7$ZqGk)yK_sl!CLBvcFzbn|~ zJ<&A9-MeT9p6)yxC*J*-{of?RN@b70hBbRiX6}95kxclpEdM({K{D6M0Gy$o2iCc0 zyjj{0PI{?&w-mxNM>5wCe~%NnUj=rYWm?VIR&I9grFY;CwSi;-f6toXH**&;pU#K) zlKSQ(VXt7lKuOr(wngAsImvR2{Drl`Piqq!89^6}Jg>eO~W7Am7Uq`GzxveKQj zK3et1++TVhXMyLDdT`!wF}*b+X>$6 zcnPw=p!2@;ZfC%_U=Oe!oB^IM^_wf{(|Wp%AI5pv1kxPKIAx@Hma(509S-zWbSHIs zD>w27xtYz;IF7UO%@i*!!^8Wqf4GeOL!U@^r!uM=X)bIgT9+q(kYrGKsc4+QdBzi` zpUpc1tjq`49L^#qtiBYDtx4Cdy3xTiIA5yXmHW;T|6?5Z_b*f@v-|g(u;2=gx~pk~vNX)}!h@y$^fE%;!( ztn$3VpU)93@koAtWBWngZ!QGkr!x9)z$zMX)=L6A@Xq)#`@hXLo+JIxyZ7Afu17I& z*VtiR;*TIh*uZa?xiIY2@&Pu}zy>d7mj18sV^+RjQ+(YovL@iaM>@{^t7~B=ABws| zaq$oF3a~GbEVCVL_UZj5iVw(`uVVH7`S5>JJA}j%{9Z!LgvPsi4!+3R`2*a2Y_^L= z7CNY(Rfewb5O*+nK|L96}#{=(ftDy~`E1~DS zQgGJGc6~P4oFVL$>O6wErY{UXm5W$HpB8;}Dc(cm+kFy$rGj}FW180vk$nO9U&X{f z<&Jgn@$YFPejW*k#v`zkcZ8^ZxY%^;I=y{MhBUXG8t^ zp~zl0iuZ{1!;%f{)-m|H;ase)-}tFd9!Y$0^RCuECtknFIah)W$?4wxSd#TKH_z;XJKbB5tm5QEnoUOQjJczwW4tWN5-J7X=xFx#}|At-0 zzPyhTy;B+05e?DeE*+26B^kIOi&ig9BIPdEI9Wix5?%$14=>*o9 z4iq3--7_3gLYQ8$Scw8wdp`tG|>yF-C2vjTU)7w~U2`P+|Qeou-0E#gJQ zjAgZY*kyff4q1q&i_3(Qm<=(|1N=dLl(-fVK>J4N2O8 z{O)0YSAO@~9XpnknDNVa*WWr~=qSe4@K~a{Qb|2Kd)Ju#`du41&co`*n`i4ByR=28 c^%3I4!r1c4OBR)ZV7^CX;Q#;t literal 0 HcmV?d00001 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( + + + +);