Noratrieb/mx-3
1
0
Fork 0
mirror of https://github.com/Noratrieb/mx-3.git synced 2026-01-16 00:05:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

srf

Browse source
This commit is contained in:
nora 2021-09-20 11:33:45 +02:00
parent 0cd2146f3d
commit 2e5473f2be
1 changed files with 17 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/App.tsx
View file

@ -1,18 +1,19 @@
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { Button, CardGroup, Container, FormControl, FormGroup, FormLabel, Row } from "react-bootstrap"; import { Button, Card, Container, FormControl, FormGroup, FormLabel, Row } from "react-bootstrap";
import client from "./ApiClient"; import client from "./ApiClient";
import { Band } from "./Types";
function App() { function App() {
const searchRef = useRef<HTMLInputElement>(null); const searchRef = useRef<HTMLInputElement>(null);
const [bands, setBands] = useState<any[]>([]); const [bands, setBands] = useState<Band[]>([]);
const search = () => { const search = () => {
const input = searchRef.current?.value; const input = searchRef.current?.value;
if (!input) { if (!input) {
return; return;
} }
client.searchBand(input).then((res) => setBands(res.bands)); client.searchBand(input).then((res) => setBands(res));
}; };
return ( return (
@ -25,10 +26,22 @@ function App() {
<Button onClick={search}>Search</Button> <Button onClick={search}>Search</Button>
</Row> </Row>
<Row> <Row>
<CardGroup>{bands && bands.map((band) => <div>{band}</div>)}</CardGroup> {bands &&
bands.map((band) => (
<Card style={{ width: "18rem" }} key={band.uid}>
<Card.Img variant="top" src={band.url_for_image_original} />
<Card.Title>{band.name}</Card.Title>
<Card.Body>{getBioText(band)}</Card.Body>
</Card>
))}
</Row> </Row>
</Container> </Container>
); );
} }
function getBioText(band: Band): string {
const bio = band.biographies.find((bio) => bio.lang === "de") || band.biographies[0];
return bio?.description || "Keine Biographie angegeben.";
}
export default App; export default App;