Noratrieb/mx-3
1
0
Fork 0
mirror of https://github.com/Noratrieb/mx-3.git synced 2026-01-14 15:25:09 +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 { 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 { Band } from "./Types";
function App() {
const searchRef = useRef<HTMLInputElement>(null);
const [bands, setBands] = useState<any[]>([]);
const [bands, setBands] = useState<Band[]>([]);
const search = () => {
const input = searchRef.current?.value;
if (!input) {
return;
}
client.searchBand(input).then((res) => setBands(res.bands));
client.searchBand(input).then((res) => setBands(res));
};
return (
@ -25,10 +26,22 @@ function App() {
<Button onClick={search}>Search</Button>
</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>
</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;