animallist page update (#7)

erujs · Mar 19, 2024 · 9d70727 · 9d70727
1 parent f50db12
commit 9d70727
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 = () => {
               <CustomCombobox />
               <div className="flex flex-col flex-wrap lg:flex-row justify-center">
                 {animalState.list.length
-                  ? animalState.list[0].map(({ id, url }, i) => (
+                  ? animalState.list.map(({ id, url }, i) => (
                     <div key={id} data-aos="fade-up">
                       <Link to={`/${animal}/${id}`} className="image-link">
                         <img
@@ -66,7 +77,6 @@ const AnimalList = () => {
                           src={url}
                         />
                       </Link>
-                      {/* <div data-aos="fade-up" /> */}
                     </div>
                   ))
                   : // animalState.overflow ? null : <LoadMore />

diff --git a/src/services/animalService.jsx b/src/services/animalService.jsx
@@ -16,13 +16,13 @@ export class AnimalService {
     }
   }
 
-  async getImages(animal, page, breed){
+  async getImages(animal, page, limit, breed){
     if(animal === 'dog'){
-      const res = await dogInstance.get(`/images/search?page=${page}&limit=10&breed_id=${breed}`)
+      const res = await dogInstance.get(`/images/search?page=${page}&limit=${limit}&breed_id=${breed}`)
       .catch(error => {throw error.response})
       return await res;
     }else {
-      const res = await catInstance.get(`/images/search?page=${page}&limit=10&breed_id=${breed}`)
+      const res = await catInstance.get(`/images/search?page=${page}&limit=${limit}&breed_id=${breed}`)
       .catch(error => {throw error.response})
       return await res;
     }