diff --git a/frontend/src/components/apotheke/ApothekeBtmList.js b/frontend/src/components/apotheke/ApothekeBtmList.js index e4629b5a42b4ca613a22c5c2cfcf04b9b7f20cdd..f21694475c9b653e88f7dbabfaa0db158eb96dd3 100644 --- a/frontend/src/components/apotheke/ApothekeBtmList.js +++ b/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) => { + ).then(response => { + if (response.status === 200) { + 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; }); - if (response.status === 200) { - setBtms(await response.json()); - } else if (response.status === 403) { - props.history.push("/forbidden"); - } else if (response.status === 400) { - props.history.push("/badrequest"); - } + }; //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> ); diff --git a/frontend/src/components/btmbuch/BTMBuch.js b/frontend/src/components/btmbuch/BTMBuch.js index dc09a5579a2eb996158c1ba0a450320120fd2406..c8fd34c175897a18fe919ebd95727e60e915412c 100644 --- a/frontend/src/components/btmbuch/BTMBuch.js +++ b/frontend/src/components/btmbuch/BTMBuch.js @@ -5,57 +5,57 @@ import StatusHeader from '../headers/StatusHeader' import ApothekenDetails from '../apotheke/ApothekenDetails'; import UserDetails from '../../user/UserDetails'; import ApothekeBtmList from '../apotheke/ApothekeBtmList'; -import {Row, Col} from 'react-bootstrap'; +import { Row, Col } from 'react-bootstrap'; import './BTMBuch.scss' - -function BTMBuch (props) { + +function BTMBuch(props) { const { apoId } = useParams(); const [user, setUser] = useState({}); 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`, { - method: 'GET', - headers: { - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - } - }).catch((err) => { - //SHOW ERROR - return; - }); - - if(response.status === 200) { - let u = await response.json(); - console.log(JSON.stringify(u)) - setUser(u); - setAktiveRolle(u.rolle); - setLoggedIn(true); - }else if(response.status === 403) { - props.history.push('/forbidden'); - }else if(response.status === 400){ - props.history.push('/badrequest'); + const getUserDetails = event => { + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/benutzer/me`, { + method: 'GET', + headers: { + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + } + }).then(response => { + if (response.status === 200) { + 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 = {} - - return( - <React.Fragment> - {aktiveRolle.toLowerCase() !== 'benutzer' ?<StatusHeader aktiveRolle={aktiveRolle}/> : null} - <Header /> - <Row className="details-list"> - <Col><ApothekenDetails {...props} apothekeRefFunctions={apothekeRefFunctions} apothekeId={apoId}/></Col> - <Col>{isLoggedIn ? <UserDetails {...props} user={user} setUser={setUser} aktiveRolle={aktiveRolle} setAktiveRolle={setAktiveRolle}/> : null }</Col> - </Row> - <ApothekeBtmList apothekeId={apoId} user={user} apothekeRefFunctions={apothekeRefFunctions} {...props} aktiveRolle={aktiveRolle}/> - </React.Fragment> + + return ( + <React.Fragment> + {aktiveRolle.toLowerCase() !== 'benutzer' ? <StatusHeader aktiveRolle={aktiveRolle} /> : null} + <Header /> + <Row className="details-list"> + <Col><ApothekenDetails {...props} apothekeRefFunctions={apothekeRefFunctions} apothekeId={apoId} /></Col> + <Col>{isLoggedIn ? <UserDetails {...props} user={user} setUser={setUser} aktiveRolle={aktiveRolle} setAktiveRolle={setAktiveRolle} /> : null}</Col> + </Row> + <ApothekeBtmList apothekeId={apoId} user={user} apothekeRefFunctions={apothekeRefFunctions} {...props} aktiveRolle={aktiveRolle} /> + </React.Fragment> ) }