Skip to content

Commit 216273c

Browse files
infinitel8pinfinitel8p
committed
chore: Refactor code to improve readability and maintainability
1 parent b87f437 commit 216273c

File tree

1 file changed

+76
-76
lines changed

1 file changed

+76
-76
lines changed

‎src/App.tsx‎

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -4,89 +4,89 @@ import "./App.css";
44
import CollapsibleSection from "./components/CollapsibleSection";
55

66
function App() {
7-
const [pokemonData, setPokemonData] = useState<any>(null);
8-
const [error, setError] = useState("");
9-
const [name, setName] = useState("");
7+
const [pokemonData, setPokemonData] = useState<any>(null);
8+
const [error, setError] = useState("");
9+
const [name, setName] = useState("");
1010

11-
async function searchPokemon() {
12-
try {
13-
const result = await invoke("search_pokemon", { name });
14-
const data = JSON.parse(result as string) as any;
15-
setPokemonData(data);
16-
setError("");
17-
} catch (err) {
18-
setError("Pokémon not found or an error occurred!");
19-
setPokemonData(null);
11+
async function searchPokemon() {
12+
try {
13+
const result = await invoke("search_pokemon", { name });
14+
const data = JSON.parse(result as string) as any;
15+
setPokemonData(data);
16+
setError("");
17+
} catch (err) {
18+
setError("Pokémon not found or an error occurred!");
19+
setPokemonData(null);
20+
}
2021
}
21-
}
2222

23-
function capitalize(word: string) {
24-
return word.charAt(0).toUpperCase() + word.slice(1);
25-
}
23+
function capitalize(word: string) {
24+
return word.charAt(0).toUpperCase() + word.slice(1);
25+
}
2626

27-
return (
28-
<div className="m-0 pt-[5vh] flex flex-col justify-between h-screen text-center">
29-
<div>
30-
{pokemonData ? (
31-
<div>
32-
<h1 className="text-3xl font-bold capitalize">{capitalize(pokemonData?.name)}</h1>
33-
<img
34-
src={pokemonData?.sprites?.other?.['official-artwork']?.front_default}
35-
alt={pokemonData?.name}
36-
className="h-64 mx-auto"
37-
/>
38-
<p className="mt-2">
39-
<strong>Type:</strong> {pokemonData?.types?.map((type: any) => capitalize(type.type.name)).join(", ")}
40-
</p>
41-
<div className="mt-10">
42-
{pokemonData?.weaknesses ? (
43-
['2x', '0.5x', '0x'].map((multiplier) => (
44-
<CollapsibleSection key={multiplier} title={`${multiplier} ${multiplier === '2x' ? 'Weaknesses' : multiplier === '0.5x' ? 'Resistances' : 'Immunities'}`}>
45-
{pokemonData.weaknesses[multiplier]?.map((entry: any) => (
46-
<div key={entry.type} className="inline-block m-2">
47-
<img src={entry.icon} alt={entry.type} className="h-6 inline-block" />
48-
</div>
49-
)) || "None"}
50-
</CollapsibleSection>
51-
))
52-
) : (
53-
"No weaknesses found"
54-
)}
27+
return (
28+
<div className="m-0 pt-[5vh] flex flex-col justify-between h-screen text-center">
29+
<div>
30+
{pokemonData ? (
31+
<div>
32+
<h1 className="text-3xl font-bold capitalize">{capitalize(pokemonData?.name)}</h1>
33+
<img
34+
src={pokemonData?.sprites?.other?.['official-artwork']?.front_default}
35+
alt={pokemonData?.name}
36+
className="h-64 mx-auto"
37+
/>
38+
<p className="mt-2">
39+
<strong>Type:</strong> {pokemonData?.types?.map((type: any) => capitalize(type.type.name)).join(", ")}
40+
</p>
41+
<div className="mt-10">
42+
{pokemonData?.weaknesses ? (
43+
['2x', '0.5x', '0x'].map((multiplier) => (
44+
<CollapsibleSection key={multiplier} title={`${multiplier} ${multiplier === '2x' ? 'Weaknesses' : multiplier === '0.5x' ? 'Resistances' : 'Immunities'}`}>
45+
{pokemonData.weaknesses[multiplier]?.map((entry: any) => (
46+
<div key={entry.type} className="inline-block m-2">
47+
<img src={entry.icon} alt={entry.type} className="h-6 inline-block" />
48+
</div>
49+
)) || "None"}
50+
</CollapsibleSection>
51+
))
52+
) : (
53+
"No weaknesses found"
54+
)}
55+
</div>
56+
</div>
57+
) : (
58+
<div>
59+
<h1 className="text-3xl font-bold capitalize">Welcome to PokeDex!</h1>
60+
<img
61+
src="/image.png"
62+
alt="Default Pokémon"
63+
className="h-64 mx-auto"
64+
/>
65+
</div>
66+
)}
5567
</div>
56-
</div>
57-
) : (
58-
<div>
59-
<h1 className="text-3xl font-bold capitalize">Welcome to PokeDex!</h1>
60-
<img
61-
src="/image.png"
62-
alt="Default Pokémon"
63-
className="h-64 mx-auto"
64-
/>
65-
</div>
66-
)}
67-
</div>
6868

69-
{error && <p className="text-red-500">{error}</p>}
69+
{error && <p className="text-red-500">{error}</p>}
7070

71-
<form
72-
className="flex flex-col justify-center gap-2 mt-2"
73-
onSubmit={(e) => {
74-
e.preventDefault();
75-
searchPokemon();
76-
}}
77-
>
78-
<div className="flex justify-center gap-2 mt-2">
79-
<input
80-
id="pokemon-input"
81-
onChange={(e) => setName(e.currentTarget.value.toLowerCase())}
82-
placeholder="Enter a Pokémon name..."
83-
/>
84-
<button type="submit" className="cursor-pointer">Find</button>
71+
<form
72+
className="flex flex-col justify-center gap-2 mt-2"
73+
onSubmit={(e) => {
74+
e.preventDefault();
75+
searchPokemon();
76+
}}
77+
>
78+
<div className="flex justify-center gap-2 mt-2">
79+
<input
80+
id="pokemon-input"
81+
onChange={(e) => setName(e.currentTarget.value.toLowerCase())}
82+
placeholder="Enter a Pokémon name..."
83+
/>
84+
<button type="submit" className="cursor-pointer">Find</button>
85+
</div>
86+
<p className="text-xs italic">Note: Type effectiveness multipliers may vary in other games outside the core series.</p>
87+
</form>
8588
</div>
86-
<p className="text-xs italic">Note: Type effectiveness multipliers may vary in other games outside the core series.</p>
87-
</form>
88-
</div>
89-
);
89+
);
9090
}
9191

92-
export default App;
92+
export default App;

0 commit comments

Comments
 (0)