fix react errors for btmbuch

frontend/src/components/apotheke/ApothekeBtmList.js

@@ -8,8 +8,8 @@ function ApothekeBtmList(props) {
   const [btms, setBtms] = useState([]);
   const [input, setInput] = useState("");
 
-  const getBtms = async () => {
-    const response = await fetch(
+  const getBtms = () => {
+    fetch(
       `http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btmbuchung`,
       {
         method: "GET",
@@ -18,26 +18,26 @@ function ApothekeBtmList(props) {
             "Bearer " + window.sessionStorage.getItem("edbapo-jwt"),
         },
       }
-    ).catch((err) => {
-      //SHOW ERROR
-      return;
-    });
-
+    ).then(response => {
       if (response.status === 200) {
-      setBtms(await response.json());
+        return response.json()
       } else if (response.status === 403) {
         props.history.push("/forbidden");
       } else if (response.status === 400) {
         props.history.push("/badrequest");
       }
+    }).then(data => setBtms(data)).catch((err) => {
+      //SHOW ERROR
+      return;
+    });
+
+    
   };
 
   //wird aufgerufen von NeuesBtmModal wenn ein neues BTM hinzugefügt wurde
   props.apothekeRefFunctions.updateBtmList = getBtms;
 
-  useEffect(() => {
-    getBtms();
-  }, []);
+  useEffect(getBtms, [apoId, props.history]);
 
   return (
     <div className="btm-buchung-wrapper">
@@ -57,9 +57,10 @@ function ApothekeBtmList(props) {
           } else if (val.btm.name.toLowerCase().includes(input.toLowerCase())){
               return val;
           }
+          return null;
         })
-        .map((btm, key) => (
-          <BuchungTabelle {...props} btm={btm} />
+        .map((btm) => (
+          <BuchungTabelle {...props} key={btm.id} btm={btm} />
         ))}
     </div>
   );

frontend/src/components/btmbuch/BTMBuch.js

@@ -15,33 +15,33 @@ function BTMBuch (props) {
   const [isLoggedIn, setLoggedIn] = useState(false);
   const [aktiveRolle, setAktiveRolle] = useState('');
 
-  const getUserDetails = async event => {
-      const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/benutzer/me`, {
+  const getUserDetails = event => {
+    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/benutzer/me`, {
       method: 'GET',
       headers: {
         'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
       }
-      }).catch((err) => {
-          //SHOW ERROR
-          return;
-      });
-
+    }).then(response => {
       if (response.status === 200) {
-          let u = await response.json();
-          console.log(JSON.stringify(u))
-          setUser(u);
-          setAktiveRolle(u.rolle);
-          setLoggedIn(true);
+        return response.json();
       } else if (response.status === 403) {
         props.history.push('/forbidden');
       } else if (response.status === 400) {
         props.history.push('/badrequest');
       }
+    }).then(data => {
+      setUser(data);
+      setAktiveRolle(data.rolle);
+      setLoggedIn(true);
+    }).catch((err) => {
+      //SHOW ERROR
+      return;
+    });
+
+
   }
 
-  useEffect(() => {
-      getUserDetails();
-  }, [])
+  useEffect(getUserDetails, [apoId, props.history])
 
   //this obj is passed to each child, each child can add functions to this object and call functions from this object
   let apothekeRefFunctions = {}