diff --git a/src/components/combobox/combobox.jsx b/src/components/combobox/combobox.jsx
index a8c3045..d625065 100644
--- a/src/components/combobox/combobox.jsx
+++ b/src/components/combobox/combobox.jsx
@@ -7,7 +7,7 @@ import { AnimalService } from '../../services/animalService';
export const CustomCombobox = () => {
const [animalState, dispatch] = useContext(AnimalContext);
- const [selected, setSelected] = useState({});
+ const [selected, setSelected] = useState(animalState?.selected);
const [query, setQuery] = useState('')
const service = new AnimalService();
const { animal } = useParams();
@@ -23,16 +23,16 @@ export const CustomCombobox = () => {
.includes(query.toLowerCase().replace(/\s+/g, ''))
)
- const load = async (page, id) => {
+ const load = async (id) => {
+ const { page, limit } = animalState;
try {
- const response = await service.getImages(animal, page, id);
- const { data, status, text } = response
+ const response = await service.getImages(animal, page, limit, id);
+ const { data, status, statusText } = response
dispatch('LOAD_IMAGES', {
data,
id,
- page,
status,
- message: text,
+ message: statusText,
});
} catch (error) {
dispatch('ERROR', { error: error });
@@ -43,11 +43,8 @@ export const CustomCombobox = () => {
const breed = animalState.breeds.find(x => x.name === breedDetails.name);
setSelected(breed);
if (breed?.id !== selected.id) {
- load(1, breed?.id);
+ load(breed?.id);
}
- // const currentPath = window.location.pathname;
- // const newPath = `${currentPath}/${breed?.name.replace(/\s+/g, '-').toLowerCase()}`;
- // navigate(newPath);
};
return (
diff --git a/src/contexts/animalContext.jsx b/src/contexts/animalContext.jsx
index 81f437d..6b73a4a 100644
--- a/src/contexts/animalContext.jsx
+++ b/src/contexts/animalContext.jsx
@@ -7,8 +7,9 @@ export const AnimalProvider = ({ children }) => {
const initialState = {
breeds: [],
list: [],
- selected: [],
- page: 1,
+ selected: {},
+ page: 0,
+ limit: 15,
overflow: false,
statusCode: null,
statusText: null,
@@ -25,24 +26,25 @@ export const AnimalProvider = ({ children }) => {
break;
case 'INITIALIZE_BREEDS':
setTimeout(() => {
- setAnimalState({
- ...animalState,
- breeds: payload.data,
- statusCode: payload.status,
- statusText: payload.message,
- selected: [],
- list: [],
- });
+ const { data, status, message, list, selected } = payload || {};
+ setAnimalState(prevState => ({
+ ...prevState,
+ breeds: data || [],
+ statusCode: status,
+ statusText: message,
+ list: list || [],
+ selected: selected || {}
+ }));
}, 1000);
break;
case 'LOAD_IMAGES':
+ const { data: imageData, status: imageStatus, message: imageMessage } = payload || {};
setAnimalState({
...animalState,
- page: payload.page,
- list: [payload.data],
- overflow: payload.data.length === 0,
- statusCode: payload.status,
- statusText: payload.message,
+ list: imageData || [],
+ overflow: !imageData || imageData.length === 0,
+ statusCode: imageStatus,
+ statusText: imageMessage,
});
break;
case 'LOAD_IMAGE':
diff --git a/src/pages/animal/animal.jsx b/src/pages/animal/animal.jsx
index 8c5933e..45ba786 100644
--- a/src/pages/animal/animal.jsx
+++ b/src/pages/animal/animal.jsx
@@ -11,8 +11,6 @@ const AnimalView = () => {
const service = new AnimalService();
const { animal, id } = useParams();
- console.log(animalState)
-
useEffect(() => {
service
.getItemImage(animal, id)
diff --git a/src/pages/animalList/animalList.jsx b/src/pages/animalList/animalList.jsx
index b84bf36..6eebe3f 100644
--- a/src/pages/animalList/animalList.jsx
+++ b/src/pages/animalList/animalList.jsx
@@ -23,28 +23,39 @@ const AnimalList = () => {
}, []);
useEffect(() => {
- service
- .getList(animal)
- .then(res => {
+ const fetchData = async () => {
+ try {
+ const { page, limit } = animalState
+ const response = await service.getList(animal);
+ const { data, status, text } = response;
+ const randomIndex = Math.floor(Math.random() * data?.length);
+ const randomBreed = data[randomIndex];
+ const response2 = await service.getImages(animal, page, limit, randomBreed?.id)
dispatch('INITIALIZE_BREEDS', {
- data: res.data,
+ data: data,
animal: animal,
- status: res.status,
- message: res.text,
+ status: status,
+ message: text,
+ list: response2?.data,
+ selected: response2,
});
- })
- .catch(error => {
+ } catch (error) {
dispatch('ERROR', { error: error });
- });
+ }
+ }
+
+ fetchData();
}, []);
useEffect(() => {
AOS.init({
- duration: 1000, // Set the duration of the animation
- easing: 'ease-in-out', // Set the easing for the animation
+ duration: 1000,
+ easing: 'ease-in-out',
});
}, []);
+ console.log(animalState.list)
+
const renderAnimalList = () => {
AOS.init();
switch (animalState.statusCode) {
@@ -57,7 +68,7 @@ const AnimalList = () => {