It’s a simple screen where user can enter a Github username and some info associated with it will be shown.
It works fine witth MockData (offline array)
So you type in SearchBar -> Updates Home’s State -> Home Passes updated “profiles” to CardList -> Passes to Card.
I can see in devtools the console log works. I’ve also implemented this on plain react and it works. I wonder what I am missing here?
import React, { useState, useEffect } from "react";
import axios from "axios";
import {
IonContent,
IonHeader,
IonList,
IonPage,
IonTitle,
IonToolbar,
useIonViewWillEnter,
IonSearchbar,
IonListHeader,
IonItem,
IonAvatar,
IonLabel,
} from "@ionic/react";
import "./Home.css";
const mockData = [
{
id: "1",
name: "Sans Mansion",
company: "WOL",
avatar_url: "https://placehold.it/100",
},
{
id: "2",
name: "John Doe",
comapny: "Deere Farms",
avatar_url: "https://placehold.it/100",
},
];
interface Profile {
id: string;
name: string;
company: string;
avatar_url: string;
}
interface CardListProps {
profiles: Profile[];
}
interface CardProps {
id: string;
name: string;
company: string;
avatar_url: string;
}
interface SearchBarInterface {
updateProfiles: Function
}
const Card: React.FC<CardProps> = (props) => {
return (
<IonItem>
<IonAvatar slot="start">
<img src={props.avatar_url}></img>
</IonAvatar>
<IonLabel>
<h2>{props.name}</h2>
<p>{props.company}</p>
</IonLabel>
</IonItem>
);
};
const CardList: React.FC<CardListProps> = (props) => {
return (
<IonList>
{props.profiles.map((profile) => (
<Card
key={profile.id}
id={profile.id}
name={profile.name}
company={profile.company}
avatar_url={profile.avatar_url}
/>
))}
</IonList>
);
};
const SearchBar: React.FC<SearchBarInterface> = (props) => {
const [searchText, setSearchText] = React.useState("");
const handleSearch = async (e: CustomEvent) => {
const response = await axios.get(`https://api.github.com/users/${searchText}`)
props.updateProfiles(response.data)
};
const handleInput = (e: CustomEvent) => {
setSearchText((e.target as HTMLInputElement).value);
};
return (
<IonSearchbar
value={searchText}
onIonChange={handleSearch}
onIonInput={handleInput}
animated
debounce={1000}
/>
);
};
const Home: React.FC = (props) => {
const [profiles, setProfiles] = useState<Profile[]>([]);
useIonViewWillEnter(() => {
console.log('will enter')
});
const updateProfiles = (profile: Profile) => {
let newProfiles = profiles
newProfiles.push(profile)
setProfiles(newProfiles)
console.log(profiles)
}
return (
<IonPage id="home-page">
<IonHeader>
<IonToolbar>
<IonTitle>GitHub Cards App</IonTitle>
</IonToolbar>
<IonToolbar>
<SearchBar updateProfiles={updateProfiles}/>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonListHeader>Search Results</IonListHeader>
<CardList profiles={profiles} />
</IonContent>
</IonPage>
);
};
export default Home;