Skip to content

Commit

Permalink
Memo-Beispiel
Browse files Browse the repository at this point in the history
  • Loading branch information
nilshartmann committed Feb 19, 2024
1 parent 9f3bc35 commit 13edc4e
Showing 1 changed file with 84 additions and 0 deletions.
84 changes: 84 additions & 0 deletions context-example/context-workspace/src/MemoApp.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { useEffect, useState } from "react";
import Container from "./Container";

export default function MemoApp() {
const [name, setName] = useState("");
const [plz, setPlz] = useState("");
const [city, setCity] = useState("");

// PROBLEME:
// - wir wollten nicht, dass die Suche ausgeführt wird, wenn sich der Name
// geändert hat
// - das Erzeugen von 'citySearchConf' könnte sehr teuer und aufwändig sein

const citySearchConf = {
city,
plz
};

return (
<Container title="Root">
<h1>Person</h1>

<label>
Name:
<input type="text" value={name} onChange={e => setName(e.target.value)} />
</label>

<label>
PLZ
<input type="text" value={plz} onChange={e => setPlz(e.target.value)} />
</label>

<label>
City
<input type="text" value={city} onChange={e => setCity(e.target.value)} />
</label>

<CitySearch conf={citySearchConf} />
</Container>
);
}

type CitySearchConf = {
city: string;
plz: string;
};

type SearchProps = {
conf: CitySearchConf;
};
function CitySearch({ conf }: SearchProps) {
console.log("CitySearch - searchString", conf);

const [result, setResult] = useState<string[]>([]);

useEffect(() => {
console.log("useEffect - searchString", conf);
// in einer richtigen Anwendung würde hier ein richtiger
// API-Call ausgelöst...

const searchResult = doSearch(conf.plz + conf.city);

setResult(searchResult);
}, [conf]);

return (
<Container title="Search Result">
<ul>
{result.map(r => (
<li key={r}>{r}</li>
))}
</ul>
</Container>
);
}

// "Simulation" eines echten Api Calls
function doSearch(searchString: string): string[] {
return [
"found-01-for-" + searchString,
"found-02-for-" + searchString,
"found-03-for-" + searchString
];
}

0 comments on commit 13edc4e

Please sign in to comment.