tests erster React Oberflächen Technik 2

buildtime/client/logical-editor/src/App.css

@@ -52,12 +52,20 @@
   }
 }
 
-.sidebar h2 {
+.treeElement p {
+  font-size: 12px;
+  margin: 8px 16px 0 0;
+}
+
+.treeElement {
+  background: whitesmoke;
+  border-inline: 1px solid var(--border);
+  box-sizing: border-box;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);  
+}
+
+.treeElement h2 {
   font-size: 14px;
   letter-spacing: -1px;
-  margin: 8px 16px 0 0;
+  margin: 4px 16px 0 0;
-  @media (max-width: 1024px) {
-    font-size: 14px;
-    margin: 20px 0;
-  }
 }

buildtime/client/logical-editor/src/components/Language.jsx

@@ -1,11 +1,16 @@
 import { useState } from 'react'
-//import UseFetch from './tools/UseFetch';
+import UseFetch from './tools/UseFetch';
 
 const Language = ({ languageid }) => {
+    const { data: lang, isLoading, error } = UseFetch(`http://localhost:8088/language/${languageid}`)  
+    
+    if (isLoading) return <p>Loading profile...</p>  
+    if (error) return <p>Error: {error}</p>
     
     return (
         <div className="treeElement">
-            <h2>Language ${languageid}</h2>
+            <h2>Language: {lang.language}</h2>
+            <p>Locale: {lang.locale}</p>
         </div>
     );
 }   

buildtime/client/logical-editor/src/components/tools/UseFetch.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 
-function UseFetch(url, options) {  
+function UseFetch(url, options = {method: 'GET'}) {  
     const [data, setData] = useState(null)  
     const [isLoading, setIsLoading] = useState(true)  
     const [error, setError] = useState(null)  
@@ -20,7 +20,8 @@ function UseFetch(url, options) {
             .then((json) => setData(json))      
             .catch((err) => setError(err.message))      
             .finally(() => setIsLoading(false))  
-        })  
+    },[])
+
     return { data, isLoading, error }
 }