Nedávno jsem dostal za úkol kódovací výzvu využít Stawars API k zobrazení seznamu znaků z API a také informací poskytovaných pro každý znak. kód byl poskytnut možným zaměstnavatelem superradové společnosti, u které doufám, že získám juniorskou roli. Zpočátku jsem byl trochu podrážděný, protože jsem kdy předpokládal, že bych v něm pracoval, ale po rozhovoru s hlavním inženýrem jsem měl pocit, že jsme se do toho opravdu trefili a jak popsal způsob, jakým postavili své týmy a jak nadále nabízejí stipendium na učení a rozvoj bylo velkým lákadlem!
k této výzvě, ačkoli první část byla docela jednoduchá, poskytli nějaký kód, který udělal požadavek na načtení do API v pohodě. Pamatuji si, že jsem dělal požadavek na načtení API, i když už to byla nějaká doba, co jsem z větší části stavěl vlastní API. ale počkat... co to je?
React.useEffect(() => {
fetchJson<{ results: PersonType[] }>
("people").then((peopleResponse) =>
setPeople(peopleResponse.results)
);
}, []);
useEffect dobře, že znám funkci šipky fetchJSON ok, to je nějaký typ metody wait PersonType... uhh. Věděl jsem, že to přijde, protože GitHub zveřejnil své statistiky TypeScript je jedním z nejplodnějších jazyků, které se dosud používají, a to díky svým statickým typům a schopnosti ladění po nastavení. Stejně jako je mnohem jednodušší na rampování, pokud jste uživatelem JavaScriptu. od posledních let 2020 GitHub ve stavu oktoverse to bylo číslo 4
Všiml jsem si také trendu na více a více místech, kde aplikuji, že ochota učit se TS je pro mnoho společností bonusem.
no dobře, nikdy jsem TS nepoužil ani jsem se do něj nezabýval jinak než krátkým přehledem s přítelem, který je s ním plodný. Měl jsem nějaký čas na to, abych se do projektu zapojil, ale s dalšími aplikacemi a pohovory to nebylo tolik, jak bych si přál.
takže za méně než 2 dny jsem byl schopen udělat dostatek výzkumu, abych dokončil asi 80 % požadovaných úkolů. prvním úkolem bylo zobrazit další informace pro načtené znaky. s tím jsem prohledával všechny poskytnuté soubory a našel jsem ve složce src na nejvyšší úrovni type.ts soubor
export interface PersonType {
name: string
}
měl deklaraci pro PersonType jméno, které bylo řetězcem. ok z nějaké dedukce, měl bych být schopen přidat další věci, takže jsem to aktualizoval, když jsem se podíval na data JSON prostřednictvím protokolu konzoly o tom, jaká data jsou poskytnuta z API, a změnil jsem soubor, aby tak vypadal.
export interface PersonType {
name: string
height: string
mass: string
hair_color: string
skin_color: string
eye_color: string
birth_year: string
gender: string
homeworld: string
films: string
species: string
vehicles: string
starships: string
}
Myslel jsem, že vše je prozatím řetězec a v případě potřeby bych to mohl později aktualizovat. Udělal jsem nějaké úpravy JSX/TSX pro zobrazenou osobu a wooh hooh, všechna data byla prezentována. hmm, ale filmy, startovní lodě a vozidla se zobrazují na jednom řádku. ok, umožňuje mapu vytvořit seznam. huh nemůžu upravit řetězec typu s mapou. dobrý čas na výzkum. Strávil jsem nějaký čas zjišťováním, proč jsem nemohl zmapovat každý řetězec, který jsem konzolou zaprotokoloval. je to v poli, ale říká, že je to řetězec?!?!
po dalším zkoumání jsem zjistil, že musím upravit své typy, protože TS je striktní jazyk podobný Javě nebo C++, potřeboval jsem se ujistit, že mé tpes jsou správné.
Potřeboval jsem přidat prázdné [] ke každému typu, který byl polem, abych věděl, že tyto řetězce jsou pole. jednoduchá chyba, ale bum nějaká aktualizace na tohle.
export interface PersonType {
name: string
height: string
mass: string
hair_color: string
skin_color: string
eye_color: string
birth_year: string
gender: string
homeworld: string
films: string[]
species: string
vehicles: string[]
starships: string[]
}
a voila, teď jsem mohl zmapovat každý z nich. Hurá!
dalším krokem bylo přidání funkce pro uživatele pro vyhledávání v seznamu zadáním názvu znaků. Potřeboval jsem najít perfektní místo, kde to postavit, a mně to dávalo smysl v People.tsx soubor, protože tam byla každá osoba uvedena do stavu. Použil jsem funkci filtru s useState() dělat můj konst [query, setQuery]
function People() {
const [people, setPeople] = React.useState<PersonType[]>([]);
const [query, setQuery] = useState("");
React.useEffect(() => {
fetchJson<{ results: PersonType[] }>("people").then((peopleResponse) =>
setPeople(peopleResponse.results)
);
}, []);
return (
<div>
<div className="searchContainer">
<input
className="searchInput"
placeholder="Search By Name"
onChange={(event) => setQuery(event.target.value)}
/>
</div>
{people
.filter((person) => {
if (query === "") {
return person;
} else if (person.name.toLowerCase().includes(query.toLowerCase())) {
return person;
}
})
.map((person) => (
<Person person={person} />
))}
</div>
);
}
export default People;
Vytvořil jsem kontejner a vstup, který mi umožní přidat CSS později. pak filtrování přes můj seznam lidí, pokud by vyhledávací pole bylo prázdné, vrátilo by se seznam, pokud by se do něj začal psát, vše by se převedlo na malá písmena, aby se usnadnilo jak zadávané informace, tak jména v seznamu než na obrazovce. aktualizovat, aby se vrátil odpovídající dotaz. Není třeba stisknout odeslat Chtěl jsem, aby to ležel filtr, aby méně práce na uživatele a aby chladněji vypadající funkční vyhledávací panel. Poté jsem za filtr přidal funkci mapy, abych se ujistil, že stále zobrazuje na seznamu všechny osoby.
Poté přidejte nějaké CSS a <fieldset> tagy a podobně Udělal jsem to všechno lesklé a pěkné. dává tomu skutečnou atmosféru Starwars
Poslední věc, kterou jsem kvůli času nestihl. Bylo to získat sekundární informace jako ve filmech, hvězdných lodích a vozidlech. přes API byly propojeny jako URL s jiným zdrojem s vlastními atributy, jak můžete vidět na obrázku výše.
Mám nastavený čas na párové kódování a doufejme, že to zvládneme, protože jsem to tento týden nemohl prozkoumat ve svém aktuálním rozvrhu hledání práce.
Tuto funkci aktualizuji buď s jejich pomocí, nebo až budu mít čas na průzkum později příští týden!