More work (again) on the pet detail page - linked to the "checkout" page

Author: AlexanderNeo427

package-lock.json

@@ -13,6 +13,7 @@
         "axios": "^1.7.7",
         "firebase": "^11.0.1",
         "framer-motion": "^11.11.11",
+        "lorem-ipsum": "^2.0.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-intersection-observer": "^9.13.1",

package.json

@@ -4,12 +4,14 @@ import AuthPage from './pages/AuthPage'
 import { ROUTE_URL } from './others/Globals'
 import AdoptionGalleryPage from './pages/AdoptionGalleryPage'
 import PetDetailPage from './pages/PetDetailPage'
+import CheckoutPage from './pages/CheckoutPage'
 
 const browserRouter = createBrowserRouter([
    { path: ROUTE_URL.HOME, element: <HomePage /> },
    { path: ROUTE_URL.AUTH, element: <AuthPage /> },
    { path: ROUTE_URL.GALLERY, element: <AdoptionGalleryPage /> },
-   { path: ROUTE_URL.PET_DETAIL, element: <PetDetailPage /> }
+   { path: ROUTE_URL.PET_DETAIL, element: <PetDetailPage /> },
+   { path: ROUTE_URL.CHECKOUT, element: <CheckoutPage /> }
 ])
 
 const App: React.FC = () => {

src/App.tsx

@@ -14,7 +14,7 @@ const AuthContextProvider: React.FC<{ children: ReactNode }> = props => {
    useEffect(() => {
       const unsubscribe = onAuthStateChanged(firebaseAuth, newFirebaserUser => {
          setAuthState({ firebaseUser: newFirebaserUser })
-         console.log("AuthContextProvider - firebaserUser: ", newFirebaserUser)
+         // console.log("AuthContextProvider - firebaserUser: ", newFirebaserUser)
       })
       return () => unsubscribe()
    }, [])

src/assets/SVG/child_friendly.svg

@@ -0,0 +1,22 @@
+import React from 'react'
+
+interface AdditionalDetailCardProps {
+   imgURL: string
+   attribute: string
+   detail: string
+}
+
+const AdditionalDetailCard: React.FC<AdditionalDetailCardProps> = props => {
+   return (
+      <div className='
+         flex flex-col justify-start items-start outline outline-1 outline-gray-200
+         w-full min-h-44 bg-white rounded-lg shadow-lg pl-8 pt-8
+      '>
+         <img className='w-9 mb-margin-l' src={props.imgURL} alt="" />
+         <span className='font-semibold text-text-50 text-lg'><strong>{props.attribute}</strong></span>
+         <span className='font-medium text-text-100 text-base'>{props.detail}</span>
+      </div>
+   )
+}
+
+export default AdditionalDetailCard

src/common/AuthContext.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const LoadingScreen: React.FC = () => {
+   return (
+      <div className='
+         fixed top-0 left-0 right-0 bottom-0 bg-purple-500 
+         flex justify-center items-center
+      '>
+         <span>Loading screen.....</span>
+      </div>
+   )
+}
+
+export default LoadingScreen

src/components/AdditionalDetailCard.tsx

@@ -2,6 +2,7 @@ export const ROUTE_URL = {
     HOME: "/",
     GALLERY: "/adoption_gallery",
     PET_DETAIL: "/pet_detail",
+    CHECKOUT: "/checkout",
     ABOUT: "/about",
     CONTACT_US: "/contact_us",
     AUTH: "/auth",
@@ -10,7 +11,7 @@ export const ROUTE_URL = {
 
 export enum PET_API_TYPE { DOG, CAT }
 
-export class BreedData { 
+export class BreedData {
     breed_id: string
     breed: string
     lifespan: string
@@ -107,9 +108,9 @@ export const Utils = {
         )
     },
     durstenfeldShuffle(arr: any[]): void {
-        for (var i = arr.length - 1; i >= 0; i--) {
-            var j = Math.floor(Math.random() * (i + 1));
-            var temp = arr[i];
+        for (let i = arr.length - 1; i >= 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            const temp = arr[i];
             arr[i] = arr[j];
             arr[j] = temp;
         }

src/components/LoadingScreen.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Navbar from '../components/Navbar'
+import FooterSection from '../components/sections/FooterSection'
+
+const CheckoutPage: React.FC = () => {
+   return (
+      <main>
+         <Navbar />
+         <div>Check-out Page</div>
+         <FooterSection />
+      </main>
+   )
+}
+
+export default CheckoutPage

src/others/Globals.ts

@@ -1,17 +1,22 @@
 import React, { useEffect, useState } from 'react'
 import Navbar from '../components/Navbar'
 import FooterSection from '../components/sections/FooterSection'
-import { CatBreedData, DogBreedData, PET_API_TYPE, PetApiData } from '../others/Globals'
-import { useSearchParams } from 'react-router-dom'
+import { CatBreedData, DogBreedData, PET_API_TYPE, PetApiData, ROUTE_URL, Utils } from '../others/Globals'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import calendar_svg from '../assets/SVG/calendar.svg'
 import ruler_svg from '../assets/SVG/ruler.svg'
 import weighing_scale_svg from '../assets/SVG/weighing_scale.svg'
 import paw_svg from '../assets/SVG/paw.svg'
 import axios from 'axios'
+import LoadingScreen from '../components/LoadingScreen'
+import AdditionalDetailCard from '../components/AdditionalDetailCard'
+import { LoremIpsum } from 'lorem-ipsum'
 
 const PetDetailPage: React.FC = () => {
+   const [m_isLoading, setIsLoading] = useState<boolean>(true)
    const [m_petApiData, setPetApiData] = useState<PetApiData>()
    const m_searchParams = useSearchParams()[0]
+   const m_navTo = useNavigate()
 
    useEffect(() => {
       const pet_type = m_searchParams.get('pet_type')
@@ -50,6 +55,7 @@ const PetDetailPage: React.FC = () => {
                pet_type === "dog" ? PET_API_TYPE.DOG : PET_API_TYPE.CAT
             )
             setPetApiData(petApiData)
+            setIsLoading(false)
          }
          catch (err: any) {
             console.log("Error fetching from Pet API: ", err.message)
@@ -64,31 +70,50 @@ const PetDetailPage: React.FC = () => {
       info: string
    }
 
+   // const formatTemperaments = (temperaments: string[]): string => {
+   //    const MAX_LENGTH = 30
+   //    let displayStr = ""
+   //
+   //    for (let i = 0; i < temperaments.length; i++) {
+   //       const newStr = displayStr + temperaments[i]
+   //       if (newStr.length > MAX_LENGTH) {
+   //          displayStr.padEnd(MAX_LENGTH, ".")
+   //          console.log(displayStr)
+   //          return displayStr
+   //       }
+   //       displayStr = newStr
+   //       if (i < temperaments.length - 1) {
+   //          displayStr += ", "
+   //       }
+   //    }
+   //    console.log(displayStr)
+   //    return displayStr
+   // }
+
    const getAdditionalInfo = (petApiData: PetApiData): PetAttribute[] => {
+
       switch (petApiData.apiType) {
          case PET_API_TYPE.DOG:
             const dogBreedData = petApiData.breedData as DogBreedData
             return [
+               { attribute: "Pet Type", imgURL: paw_svg, info: "Dog" },
                { attribute: "Lifespan", imgURL: calendar_svg, info: dogBreedData.lifespan },
                { attribute: "Height", imgURL: ruler_svg, info: dogBreedData.height + " cm" },
-               { attribute: "Temperament(s)", imgURL: paw_svg, info: dogBreedData.temperaments.toString() },
                { attribute: "Weight", imgURL: weighing_scale_svg, info: dogBreedData.weight + " kg" },
             ]
          case PET_API_TYPE.CAT:
             const catBreedData = petApiData.breedData as CatBreedData
             return [
+               { attribute: "Pet Type", imgURL: paw_svg, info: "Cat" },
                { attribute: "Lifespan", imgURL: calendar_svg, info: catBreedData.lifespan + " years" },
-               { attribute: "Temperament(s)", imgURL: paw_svg, info: catBreedData.temperaments.toString() },
                { attribute: "Weight", imgURL: weighing_scale_svg, info: catBreedData.weight + " kg" }
             ]
          default:
             return []
       }
    }
 
-   useEffect(() => {
-      console.log("Pet api data change: ", m_petApiData)
-   }, [m_petApiData])
+   if (m_isLoading) { return <LoadingScreen /> }
 
    return (
       <main>
@@ -104,12 +129,13 @@ const PetDetailPage: React.FC = () => {
                }} className='w-full h-96 mb-margin-xl'></div>
 
                {/* --- BODY (constrained width) --- */}
-               <div className='max-w-6xl mx-margin-l'>
+               <div className='max-w-7xl mx-margin-l'>
 
                   {/* --- BODY (Description + Adoption Fee Box) ---- */}
                   <div className='flex flex-col md:flex-row'>
+
                      {/* --- DESCRIPTION CONTAINER --- */}
-                     <div className='text-center flex-col items-start min-w-96 mb-margin-xl mr-margin-xl'>
+                     <div className='text-center flex-col items-start min-w-96 mb-margin-xl mr-margin-l'>
 
                         {/* ---- DESC HEADER ---- */}
                         <h1 className='font-bold text-3xl text-left mb-margin-xxs'>{m_petApiData.breedData?.breed.toUpperCase()}</h1>
@@ -121,14 +147,35 @@ const PetDetailPage: React.FC = () => {
                               `${(m_petApiData.breedData as CatBreedData).description}`
                         }</p>
 
+                        {
+                           (() => {
+                              const numParagraphs = Utils.randInt(1, 4)
+                              for (let i = 0; i < numParagraphs; i++) {
+                                 return (
+                                    <p className='text-left mb-margin-l text-lg'>{
+                                       new LoremIpsum().generateParagraphs(Utils.randInt(1, 3))
+                                    }</p>
+                                 )
+                              }
+                              return <></>
+                           })() 
+                        }
+                        <p className='text-left mb-margin-l text-lg'>{
+                           new LoremIpsum({
+                              sentencesPerParagraph: { min: 2, max: 5 },
+                              wordsPerSentence: { min: 4, max: 16 }
+                           }).generateParagraphs(Utils.randInt(1, 3))
+                        }</p>
+
                         {/* ---- PET ATTRIBUTES/INFO ----- */}
                         <div className=''>{
-                           getAdditionalInfo(m_petApiData).map(iconInfoPair => {
+                           getAdditionalInfo(m_petApiData).map((petAttrib, idx) => {
                               return (
-                                 <div className='flex justify-start items-center mb-margin-m'>
-                                    <img className='w-7 mr-margin-s' src={iconInfoPair.imgURL} alt="" />
-                                    <span className='mr-text-xxs'><strong>{iconInfoPair.attribute}</strong></span>
-                                    <span className='text-left'>{iconInfoPair.info}</span>
+                                 <div key={idx} className='flex justify-start items-center mb-margin-m'>
+                                    <img className='w-7 mr-margin-s' src={petAttrib.imgURL} alt="" />
+                                    <span className='mr-text-xxs'><strong>{petAttrib.attribute}</strong></span>
+                                    <span className='mr-margin-xs'><strong>•</strong></span>
+                                    <span className='text-left font-medium text-text-200'>{petAttrib.info}</span>
                                  </div>
                               )
                            })
@@ -143,26 +190,28 @@ const PetDetailPage: React.FC = () => {
                         {/* ---- ADDITIONAL DETAILS ----- */}
                         <div>
                            <h2 className='text-left text-2xl font-medium mb-text-xs'>Additional Details</h2>
-                           <div className='grid grid-cols-3 gap-4'>
-                              <div className='w-full h-32 bg-white rounded-lg shadow-lg'></div>
-                              <div className='w-full h-32 bg-white rounded-lg shadow-lg'></div>
-                              <div className='w-full h-32 bg-white rounded-lg shadow-lg'></div>
-                              <div className='w-full h-32 bg-white rounded-lg shadow-lg'></div>
-                              <div className='w-full h-32 bg-white rounded-lg shadow-lg'></div>
-                              <div className='w-full h-32 bg-white rounded-lg shadow-lg'></div>
-                           </div>
+                           <div className='grid grid-cols-2 lg:grid-cols-2 gap-4'>{
+                              getAdditionalInfo(m_petApiData).map((petAttrib, idx) => {
+                                 return (
+                                    <AdditionalDetailCard
+                                       key={idx} imgURL={petAttrib.imgURL}
+                                       attribute={petAttrib.attribute} detail={petAttrib.info}
+                                    />
+                                 )
+                              })
+                           }</div>
                         </div>
                      </div>
 
                      {/* ----- ADOPTION FEE BOX ----- */}
                      <div className='
                      flex flex-col justify-center items-center rounded-xl shadow-lg
-                     h-60 max-w-96 text-center text-text-50 bg-white px-8
+                     h-60 w-full md:max-w-96 text-center text-text-50 bg-white px-8 mb-margin-l
                   '>
                         <span className='text-xl font-medium mb-margin-m'>Adoption Fee</span>
                         <span className='text-3xl font-semibold mb-margin-xs'>$150.0</span>
                         <span className='text-sm font-light mb-margin-m'>Give a pet a home</span>
-                        <button className='
+                        <button onClick={() => { m_navTo(ROUTE_URL.CHECKOUT) }} className='
                         text-text-950 font-semibold bg-accent-500 text-lg
                         hover:bg-accent-600 min-w-64 py-3 rounded-xl transition-colors duration-200
                      '>ADOPT ME</button>