No freaking way - after hours of work, the infinite carousel finally works.

It's probably a skill issue on my part, but I felt this was wayy more difficult than it appears.

Author: AlexanderNeo427

package-lock.json

@@ -17,8 +17,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-intersection-observer": "^9.13.1",
-        "react-router-dom": "^6.27.0",
-        "react-select": "^5.8.2"
+        "react-router-dom": "^6.27.0"
     },
     "devDependencies": {
         "@eslint/js": "^9.13.0",

package.json

@@ -6,14 +6,18 @@ import AdoptionGalleryPage from './pages/AdoptionGalleryPage'
 import PetDetailPage from './pages/PetDetailPage'
 import CheckoutPage from './pages/CheckoutPage'
 import ReceiptPage from './pages/ReceiptPage'
+import MyAccountPage from './pages/MyAccountPage'
+import PetReleasePage from './pages/PetReleasePage'
 
 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.CHECKOUT, element: <CheckoutPage /> },
-   { path: ROUTE_URL.RECEIPT, element: <ReceiptPage /> }
+   { path: ROUTE_URL.RECEIPT, element: <ReceiptPage /> },
+   { path: ROUTE_URL.MY_ACCOUNT, element: <MyAccountPage /> },
+   { path: ROUTE_URL.PET_RELEASE, element: <PetReleasePage/> }
 ])
 
 const App: React.FC = () => {

src/App.tsx

@@ -0,0 +1,75 @@
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { AuthContext } from '../common/AuthContext'
+
+import account_svg from '../assets/SVG/account_circle.svg'
+import logout_svg from '../assets/SVG/logout.svg'
+import arrow_right_svg from '../assets/SVG/arrow_right.svg'
+import { firebaseAuth } from '../others/FirebaseConfig'
+import { signOut } from 'firebase/auth'
+import { useNavigate } from 'react-router-dom'
+import { ROUTE_URL } from '../others/Globals'
+
+const AccountDropdown: React.FC = () => {
+   const [m_isOpen, setIsOpen] = useState<boolean>(false)
+   const m_dropdownRef = useRef<HTMLDivElement>(null)
+   const m_authCtx = useContext(AuthContext)
+   const m_navTo = useNavigate()
+
+   const windowClickListener = (evt: MouseEvent): void => {
+      if (!m_isOpen || !m_dropdownRef.current ||
+         m_dropdownRef.current.contains(evt.target as Node)
+      ) { return }
+      setIsOpen(false)
+   }
+
+   useEffect(() => {
+      document.addEventListener('mousedown', windowClickListener)
+      return () => document.removeEventListener('mousedown', windowClickListener)
+   }, [m_isOpen])
+
+   const logoutClickHandler = async (): Promise<void> => {
+      await signOut(firebaseAuth)
+   }
+
+   return (
+      <div ref={m_dropdownRef} className='relative cursor-pointer'>
+
+         {/* --- HEADER BUTTON --- */}
+         <div onClick={() => setIsOpen(isOpen => !isOpen)} className='flex justify-start items-center'>
+            <img className='w-8 h-8 mr-margin-xs' src={account_svg} alt="" />
+            <button className='mr-text flex'>
+               <span className='mr-text-xxs text-xl'>{
+                  m_authCtx?.firebaseUser?.displayName ?
+                     "Hi, " + m_authCtx.firebaseUser.displayName : "User"
+               }</span>
+            </button>
+            <img className='rotate-90 w-7 h-7' src={arrow_right_svg} alt="" />
+         </div>
+
+         {/* --- ABSOLUTELY POSITIONED DROPDOWN ---- */}
+         <div
+            style={{ display: m_isOpen ? "block" : "none" }}
+            className='
+               absolute z-10 bg-accent-700 rounded-md shadow-xl right-0 mt-margin-m
+               flex flex-col justify-start items-center w-52
+            '>
+            <button onClick={() => m_navTo(ROUTE_URL.MY_ACCOUNT)} className='
+               w-full flex justify-start pl-margin-l items-center py-2 
+               hover:bg-accent-400 transition-colors duration-75
+            '>
+               <img className='w-6 h-6 mr-margin-xs' src={account_svg} alt="" />
+               <span>My account</span>
+            </button>
+            <button onClick={logoutClickHandler} className='
+               w-full flex justify-start pl-margin-l items-center py-2 
+               hover:bg-accent-400 transition-colors duration-75
+            '>
+               <img className='w-6 h-6 mr-margin-xs' src={logout_svg} alt="" />
+               <span>Logout</span>
+            </button>
+         </div>
+      </div>
+   )
+}
+
+export default AccountDropdown

src/assets/SVG/account_circle.svg

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useState } from 'react'
+import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
 
 export interface DropdownOption {
    optionName: string
@@ -14,6 +14,19 @@ interface DropdownProps {
 
 const Dropdown: React.FC<DropdownProps> = props => {
    const [m_isOpen, setIsOpen] = useState<boolean>(false)
+   const dropdownRef = useRef<HTMLDivElement>(null)
+
+   const windowClickListener = (evt: MouseEvent): void => {
+      if (!m_isOpen || !dropdownRef.current ||
+         dropdownRef.current.contains(evt.target as Node)
+      ) { return }
+      setIsOpen(false)
+   }
+
+   useEffect(() => {
+      document.addEventListener('mousedown', windowClickListener)
+      return () => document.removeEventListener('mousedown', windowClickListener)
+   }, [m_isOpen])
 
    const onChangeHandler = (evt: React.ChangeEvent<HTMLInputElement>, optionName: string): void => {
       props.setOptions(oldOptions => {
@@ -25,7 +38,7 @@ const Dropdown: React.FC<DropdownProps> = props => {
    }
 
    return (
-      <div className='relative'>
+      <div ref={dropdownRef} className='relative'>
          <button
             onClick={() => setIsOpen(isOpen => !isOpen)}
             className='

src/assets/SVG/arrow_right.svg

@@ -1,7 +1,9 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import { Link } from 'react-router-dom'
 import { ROUTE_URL } from '../others/Globals'
 import company_logo from '../assets/images/company_logo.png'
+import { AuthContext } from '../common/AuthContext'
+import AccountDropdown from './AccountDropdown'
 
 interface NavbarProps {
    useSticky?: boolean
@@ -10,6 +12,7 @@ interface NavbarProps {
 
 const Navbar: React.FC<NavbarProps> = props => {
    const headerRef = useRef<HTMLElement>(null)
+   const authCtx = useContext(AuthContext)
 
    useEffect(() => {
       const HEADER_RGB = '81, 22, 96'
@@ -59,15 +62,18 @@ const Navbar: React.FC<NavbarProps> = props => {
             hidden md:flex justify-center items-center 
             gap-11 lg:gap-20
          '>
-            <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.HOME}>Home</Link>
+            <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.GALLERY}>Adoption</Link>
             <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.ABOUT}>About</Link>
             <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.CONTACT_US}>Contact Us</Link>
-            <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.GALLERY}>Adoption</Link>
          </nav>
-         <Link className='
-            hidden justify-center items-center bg-primary-500 px-7 h-10 rounded-lg
-            md:flex hover:bg-primary-600 transition-colors
-         ' to={ROUTE_URL.AUTH}>Login</Link>
+         {
+            (authCtx && authCtx.firebaseUser) ?
+               <AccountDropdown /> :
+               <Link className='
+               hidden justify-center items-center bg-primary-500 px-7 h-10 rounded-lg
+               md:flex hover:bg-primary-600 transition-colors' to={ROUTE_URL.AUTH}
+               >Login</Link>
+         }
       </header>
    )
 }

src/assets/SVG/logout.svg

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const PetReleaseSection: React.FC = () => {
+   return (
+      <div>PetReleaseSection</div>
+   )
+}
+
+export default PetReleaseSection

src/assets/images/testimonials/cat_01.jpg

@@ -1,9 +1,165 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import rabbit_1 from '../../assets/images/testimonials/rabbit_01.jpg'
+import rabbit_2 from '../../assets/images/testimonials/rabbit_02.jpg'
+import cat_1 from '../../assets/images/testimonials/cat_01.jpg'
+import cat_2 from '../../assets/images/testimonials/cat_02.jpg'
+import cat_3 from '../../assets/images/testimonials/cat_03.jpg'
+import cat_4 from '../../assets/images/testimonials/cat_04.jpg'
+import dog_1 from '../../assets/images/testimonials/dog_01.jpg'
+import dog_2 from '../../assets/images/testimonials/dog_02.jpg'
+import dog_3 from '../../assets/images/testimonials/dog_03.jpg'
+import dog_4 from '../../assets/images/testimonials/dog_04.jpg'
+import dog_5 from '../../assets/images/testimonials/dog_05.jpg'
+import dog_6 from '../../assets/images/testimonials/dog_07.jpg'
+import dog_7 from '../../assets/images/testimonials/dog_08.jpg'
+import { keyframes } from 'framer-motion'
+
+interface TestimonialData {
+   imgURL: string
+   reviewer?: string
+   content?: string
+}
+
+interface TestimonialCarouselProps {
+   reverseScrollDir?: boolean
+   testimonialData: TestimonialData[]
+}
+
+const testimonialDataTop: TestimonialData[] = [
+   { imgURL: cat_1 },
+   { imgURL: dog_1 },
+   { imgURL: dog_2 },
+   // { imgURL: dog_3 },
+   // { imgURL: cat_2 },
+   // { imgURL: rabbit_1 },
+]
+
+const testimonialDataBottom: TestimonialData[] = [
+   { imgURL: dog_4 },
+   // { imgURL: cat_3 },
+   // { imgURL: dog_5 },
+   // { imgURL: dog_6 },
+   // { imgURL: cat_4 },
+   // { imgURL: rabbit_2 },
+   // { imgURL: dog_7 },
+]
+
+interface CarouselItemProps {
+   widthRem: number
+   heightRem: number
+   offset: number
+   testimonialData: TestimonialData
+}
+
+const CarouselItem: React.FC<CarouselItemProps> = props => {
+   return (
+      <div
+         style={{ 
+            width: props.widthRem + "rem", 
+            height: props.heightRem + "rem", 
+            transform: `translateX(${props.offset}rem)`
+         }}
+         className='absolute rounded-xl outline outline-2 outline-red-400'
+      >
+         <div
+            style={{ backgroundImage: `url(${props.testimonialData.imgURL})` }}
+            className='w-full h-full bg-cover rounded-xl'
+         ></div>
+      </div>
+   )
+}
+
+const TestimonialCarousel: React.FC<TestimonialCarouselProps> = props => {
+   const WIDTH_REM = 18
+   const HEIGHT_REM = 13
+
+   const [m_carouselOffsets, setCarouselOffets] = useState<number[]>([])
+   const [m_parentWidthRem, setParentWidthRem] = useState<number>(0)
+   const m_animHandle = useRef<number>(-1)
+   const m_divRef = useRef<HTMLDivElement>(null)
+
+   // Listen for changes to the "testimonial data" passed via props
+   // The nth carousel item can find out it's corresponding translateX via m_carouselOffset[n]
+   //
+   // Value of m_carouseOffset will be updated via the requestAnimationFrame in a useEffect below
+   useEffect(() => {
+      setCarouselOffets(
+         props.testimonialData.map((_, idx) => {
+            return WIDTH_REM * idx
+         })
+      )
+      if (m_animHandle.current) {
+         cancelAnimationFrame(m_animHandle.current)
+      }
+   }, [props.testimonialData])
+
+   // Save the with of the parent container containing the carousel
+   // So we know the threshold before having to wrap an element
+   useEffect(() => {
+      if (m_divRef.current) {
+         const remSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+         setParentWidthRem(m_divRef.current.offsetWidth / remSize)
+      }
+   }, [m_divRef.current])
+
+   useEffect(() => {
+      const SCROLL_SPEED = 5
+
+      let prevTime = 0
+      const onTick = (timeElapsed: number): void => {
+         const deltaTime = (timeElapsed - prevTime) / 1000;
+         prevTime = timeElapsed;
+
+         setCarouselOffets(prevOffsets => {
+            return prevOffsets.map(offset => {
+               const newOffset = offset +
+                  (props.reverseScrollDir ?
+                     SCROLL_SPEED * deltaTime : -SCROLL_SPEED * deltaTime)
+               if (props.reverseScrollDir) {
+                  if (newOffset > m_parentWidthRem) {
+                     return newOffset - m_parentWidthRem - WIDTH_REM
+                  }
+               }
+               else {
+                  if (newOffset < -WIDTH_REM) {
+                     return newOffset + m_parentWidthRem + WIDTH_REM
+                  }
+               }
+               return newOffset
+            })
+         })
+         m_animHandle.current = window.requestAnimationFrame(onTick)
+      }
+      m_animHandle.current = window.requestAnimationFrame(onTick)
+      return () => { 
+         if (m_animHandle.current) {
+            cancelAnimationFrame(m_animHandle.current) 
+         }
+      }
+   }, [props.testimonialData.length, m_parentWidthRem])
+
+   return (
+      <div
+         style={{ width: "96%", height: HEIGHT_REM + "rem" }}
+         ref={m_divRef} className='relative overflow-hidden outline outline-2 outline-red-700'>
+         {props.testimonialData.map((data, idx) => {
+            return (
+               <CarouselItem
+                  key={idx} offset={m_carouselOffsets[idx]}
+                  widthRem={WIDTH_REM} heightRem={HEIGHT_REM}
+                  testimonialData={data}
+               />
+            )
+         })}
+      </div>
+   )
+}
 
 const TestimonialsSection: React.FC = () => {
    return (
-      <section className='min-h-96 bg-gray-600'>
-         Testimonials
+      <section className='min-h-96 bg-gray-600 py-margin-xl flex flex-col items-center gap-6'>
+         <TestimonialCarousel testimonialData={testimonialDataTop} />
+         <TestimonialCarousel reverseScrollDir testimonialData={testimonialDataBottom} />
       </section>
    )
 }

src/assets/images/testimonials/cat_02.jpg

@@ -86,6 +86,8 @@
 
 html {
    scroll-behavior: smooth;
+   
+   ---testimonial-card-width: 20rem;
 }
 
 html,
@@ -107,4 +109,13 @@ textarea {
 img {
    display: block;
    width: 100%;
+}
+
+@keyframes scroll_anim {
+   0% {
+      left: 100%;
+   } 
+   100% {
+      left: calc(var(---testimonial-card-width) * -1);
+   }
 }