Senior Frontend Developer

I'll write the code for a Pokemon listing app using the specified stack, merged into a single `index.js` file. ```ja vascript import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import { configureStore, createSlice, createAsyncThunk } from '@reduxjs/toolkit'; import { Provider, useSelector, useDispatch } from 'react-redux'; import axios from 'axios'; import { List, Card, A vatar, Row, Col, Input, Spin, Alert } from 'antd'; import { SearchOutlined } from '@ant-design/icons'; const { Search } = Input; // API configuration const POKEAPI_BASE = 'https://pokeapi.co/api/v2'; const POKEMON_LIMIT = 50; // Redux slice for pokemons const pokemonSlice = createSlice({ name: 'pokemons', initialState: { items: [], filteredItems: [], loading: false, error: null, searchQuery: '' }, reducers: { setSearchQuery: (state, action) => { state.searchQuery = action.payload; if (action.payload.trim() === '') { state.filteredItems = state.items; } else { const query = action.payload.toLowerCase(); state.filteredItems = state.items.filter(pokemon => pokemon.name.toLowerCase().includes(query) ); } } }, extraReducers: (builder) => { builder .addCase(fetchPokemons.pending, (state) => { state.loading = true; state.error = null; }) .addCase(fetchPokemons.fulfilled, (state, action) => { state.loading = false; state.items = action.payload; state.filteredItems = action.payload; }) .addCase(fetchPokemons.rejected, (state, action) => { state.loading = false; state.error = action.error.message; }); } }); // Thunk for fetching pokemons const fetchPokemons = createAsyncThunk( 'pokemons/fetchPokemons', async () => { const response = await axios.get(`${POKEAPI_BASE}/pokemon?limit=${POKEMON_LIMIT}`); const pokemons = await Promise.all( response.data.results.map(async (pokemon, index) => { try { const details = await axios.get(pokemon.url); return { id: details.data.id, name: details.data.name, image: details.data.sprites.front_default, types: details.data.types.map(t => t.type.name) }; } catch (error) { return { id: index + 1, name: pokemon.name, image: null, types: [] }; } }) ); return pokemons; } ); const { setSearchQuery } = pokemonSlice.actions; // Store configuration const store = configureStore({ reducer: { pokemons: pokemonSlice.reducer } }); // Main App Component const PokemonApp = () => { const dispatch = useDispatch(); const { items, filteredItems, loading, error, searchQuery } = useSelector(state => state.pokemons); useEffect(() => { dispatch(fetchPokemons()); }, [dispatch]); const handleSearch = (value) => { dispatch(setSearchQuery(value)); }; if (error) { return ( ); } return ( ) : (

No Image

) } > {pokemon.name} } description={

ID: #{pokemon.id.toString().padStart(3, '0')}

{pokemon.types.length > 0 && (

Type: {pokemon.types.map(type => ( {type} ))}

)}

} /> )} locale={{ emptyText: searchQuery ? 'No matching Pokémon found' : 'No Pokémon a vailable' }} /> )}