WIP making strongly-typed classes/interfaces for the data received from the Pet APIs

Author: AlexanderNeo427

CatApiData.png

@@ -9,20 +9,54 @@ export const ROUTE_URL = {
 
 export enum PET_API_TYPE { DOG, CAT }
 
-export interface PetApiData {
+export abstract class BreedData { }
+
+export class DogBreedData extends BreedData {
+    breed: string
+    // bredFor: string[]
+    heightRangeCM: number[]
+    lifespanRange: number[]
+    // temperament: string[]
+    // weightKG: number[]
+
+    constructor(breedsObj: any) {
+        super()
+        this.breed = breedsObj.breed
+        // this.bredFor = breedsObj.bred_for.split(",").map((s: string) => s.trim())
+        this.heightRangeCM = breedsObj.height.metric.split("-").map((h: string) => parseInt(h))
+        this.lifespanRange = breedsObj.life_span.split("-").map((ls: string) => parseInt(ls))
+    }
+}
+
+export class CatBreedData extends BreedData {
+    constructor(breedsObj: any) {
+        super()
+    }
+}
+
+export class PetApiData {
     id: number
     imgURL: string
-    breeds: any
-    // breeds: {
-    //     name: string
-    //     heightCM: number
-    //     temperament: string[]
-    //     weightKG: number
-    // }
-    
+    breedData: BreedData | null
     height: number
     width: number
     apiType: PET_API_TYPE
+
+    constructor(id: number, imgURL: string, breedData: any, height: number, width: number, apiType: PET_API_TYPE) {
+        this.id = id
+        this.imgURL = imgURL
+        this.breedData = null
+        this.height = height
+        this.width = width
+        this.apiType = apiType
+
+        if (apiType === PET_API_TYPE.CAT) {
+            this.breedData = new CatBreedData(breedData)
+        }
+        else if (apiType === PET_API_TYPE.DOG) {
+            this.breedData = new DogBreedData(breedData)
+        }
+    }
 }
 
 export const Utils = {
@@ -51,14 +85,13 @@ export const Utils = {
         return new Date(randomTimestamp);
     },
     convertToPetApiData(obj: any, apiType: PET_API_TYPE): PetApiData {
-        return {
-            id: obj.id,
-            imgURL: obj.url,
-            breeds: obj.breeds,
-            height: obj.height,
-            width: obj.width,
-            apiType: apiType
-        } as PetApiData
+        return new PetApiData(
+            obj.id, obj.url,
+            apiType === PET_API_TYPE.DOG ?
+                new DogBreedData(obj.breeds[0]) : 
+                new CatBreedData(obj.breeds[0]),
+            obj.height, obj.width, apiType
+        )
     },
     durstenfeldShuffle(arr: any[]): void {
         for (var i = arr.length - 1; i >= 0; i--) {

DogApiData.png

@@ -33,14 +33,14 @@ const AdoptionGalleryPage: React.FC = () => {
                            .filter((petData: PetApiData) => !petData.imgURL.endsWith('.gif'))
             ]
             Utils.durstenfeldShuffle(allPetData)
-            // console.log("AdoptionGalleryPage - All pet data: ", allPetData)
+            console.log("All pet data: ", allPetData)
             setPetData(allPetData)
          }
          catch (err: any) {
             console.error("Error fetching from TheCatAPI: ", err.message)
          }
       }
-      fetchPetApiData(15)
+      fetchPetApiData(6)
    }, [])
 
    return (
@@ -55,11 +55,11 @@ const AdoptionGalleryPage: React.FC = () => {
             <div className='text-center rounded-full px-6 py-3 bg-gray-300'>Le Option</div>
          </section>
          <section className='min-h-96 flex justify-center items-center'>
-            <div className='max-w-3xl columns-2 sm:columns-3 2xl:columns-4'>
-               {
-                  m_petData.map(data => <PetInfoCard key={data.id} petApiData={data} />)
-               }
-            </div>
+            <div className='max-w-3xl columns-2 sm:columns-3 2xl:columns-4'>{
+               m_petData.map(data => {
+                  return <PetInfoCard key={data.id} petApiData={data} />
+               })
+            }</div>
          </section>
          <FooterSection />
       </main>