I have a react native app. And I have a search function. The problem I am facing is that the search function only works when the whole word has been entered in the textfield.
So for example Edelhert works. But if a user types in: Ed – then nothing happens.
And if a user waits for a second in the search textfield. Then this error pops up:
VM270:1 Uncaught SyntaxError: Unexpected identifier 'Promise'
So the search api looks:
import { API_URL } from "@env";
import { retrieveToken } from "../../services/authentication/token";
export const fetchAnimalData = async (text) => {
const token = await retrieveToken();
try {
if (token) {
const response = await fetch(`${API_URL}/api/animals/?name=${text}`, {
method: "GET",
headers: {
Authorization: `Token ${token}`,
Accept: "application/json",
"Content-Type": "application/json",
},
});
return await response.json();
} else {
throw new Error(token);
}
} catch (error) {
console.error("There was a problem with the fetch operation:", error);
throw error;
}
};
and the search context:
/* eslint-disable prettier/prettier */
import React, { createContext, useEffect, useState } from "react";
import { fetchAnimalData } from "./animal/animal.service";
export const SearchAnimalContext = createContext();
export const SearchAnimalContextProvider = ({ children }) => {
const [searchAnimal, setSearchAnimal] = useState([]);
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [input, setInput] = useState("");
useEffect(() => {
fetchAnimalData();
}, [searchAnimal]);
const performSearch = async (text) => {
setLoading(true);
setError(null);
setTimeout(() => {
fetchAnimalData(text)
.then((response2) => {
setResults(response2);
setLoading(false);
})
.catch((err) => {
setLoading(false);
setError(err);
});
});
};
return (
<SearchAnimalContext.Provider
value={{
results,
setResults,
searchAnimal,
setSearchAnimal,
input,
setInput,
performSearch,
loading,
error,
}}>
{children}
</SearchAnimalContext.Provider>
);
};
And the component with the searchfield:
import React, { useContext, useState } from "react";
import { AccordionItemsContext } from "../../../services/accordion-items.context";
import { AnimalDetailToggle } from "../../../components/general/animal-detail-toggle-view";
import { CategoryContext } from "../../../services/category/category.context";
import { CategoryInfoCard } from "../components/category-info-card.component";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { SearchAnimalContext } from "../../../services/search-animal.context";
import { Searchbar } from "react-native-paper";
export const CategoryScreen = ({ navigation }) => {
useContext(AccordionItemsContext);
const { loading, categoryList } = useContext(CategoryContext);
const { performSearch, results, setInput, input } = useContext(SearchAnimalContext);
const [searchTimer, setSearchTimer] = useState(null);
return (
<SafeArea>
{loading && (
<LoadingContainer>
<ActivityIndicator animating={true} color={MD2Colors.blue500} />
</LoadingContainer>
)}
<Searchbar
placeholder="search animalll"
onChangeText={(text) => {
if (searchTimer) {
clearTimeout(searchTimer);
}
if (!text.length) {
setInput("");
return;
}
setInput(text.substring(0));
setSearchTimer(setTimeout(performSearch(text), 1000));
}}
value={input}
/>
</SafeArea>
);
};
What I already have done? Of course googled a lot. Watching youtube clips. For example this one:
https://www.youtube.com/watch?v=i1PN_c5DmaI
But I don’t see the mistake that prevents partly searching for a word.
Question: how to implement partly searching for a word?