quote

Author: StackOverflowIsBetterThanAnyAI

src/api/fetchQuote.ts

@@ -0,0 +1,36 @@
+import { Dispatch, SetStateAction } from 'react'
+import { QuoteType } from '@/types/types'
+import { setItemInSessionStorage } from '@/utils/setItemInSessionStorage'
+
+const fetchQuote = async (
+    setQuote: Dispatch<SetStateAction<QuoteType | null>>
+) => {
+    try {
+        const response = await fetch(
+            'https://jsonplaceholder.typicode.com/posts/1',
+            {
+                method: 'GET',
+            }
+        )
+
+        if (!response.ok) {
+            console.error('An error occurred while fetching the quote.')
+            throw new Error('Network response was not ok')
+        }
+
+        const data = await response.json()
+        if (!data) {
+            console.error('An error occurred while fetching the quote.')
+            throw new Error('Received data was not ok')
+        }
+
+        setQuote(() => {
+            setItemInSessionStorage('quote', data)
+            return data
+        })
+    } catch (error: unknown) {
+        console.error('An error occurred while fetching the quote.', error)
+    }
+}
+
+export default fetchQuote

src/app/page.tsx

@@ -5,13 +5,16 @@ import Feed from '@/components/feed/Feed'
 import Footer from '@/components/footer/Footer'
 import Hero from '@/components/hero/Hero'
 import Navigation from '@/components/navigation/Navigation'
+import Quote from '@/components/quote/Quote'
 import Users from '@/components/users/Users'
+import { ContextQuote } from '@/context/ContextQuote'
 import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
 import { ContextTopUsers } from '@/context/ContextTopUsers'
 import { useFocusTrap } from '@/hooks/useFocusTrap'
 import { useSetWindowScrollY } from '@/hooks/useSetWindowScrollY'
 
 export default function Home() {
+    const quoteRef = useRef<HTMLQuoteElement>(null)
     const topTenPostsRef = useRef<HTMLDivElement | null>(null)
     const topUsersRef = useRef<HTMLDivElement | null>(null)
 
@@ -20,15 +23,18 @@ export default function Home() {
 
     return (
         <div className="min-h-svh flex flex-col items-center justify-start bg-gradient-to-b from-stone-700 to-stone-800">
-            <ContextTopTenPosts.Provider value={topTenPostsRef}>
-                <ContextTopUsers.Provider value={topUsersRef}>
-                    <Navigation />
-                    <Hero />
-                    <Users />
-                    <Feed />
-                    <Footer />
-                </ContextTopUsers.Provider>
-            </ContextTopTenPosts.Provider>
+            <ContextQuote.Provider value={quoteRef}>
+                <ContextTopTenPosts.Provider value={topTenPostsRef}>
+                    <ContextTopUsers.Provider value={topUsersRef}>
+                        <Navigation />
+                        <Hero />
+                        <Users />
+                        <Quote />
+                        <Feed />
+                        <Footer />
+                    </ContextTopUsers.Provider>
+                </ContextTopTenPosts.Provider>
+            </ContextQuote.Provider>
         </div>
     )
 }

src/components/navigation/Navigation.tsx

@@ -2,12 +2,21 @@
 
 import { useContext, useRef, useState } from 'react'
 import NavigationLogo from './NavigationLogo'
+import { ContextQuote } from '@/context/ContextQuote'
 import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
 import { ContextTopUsers } from '@/context/ContextTopUsers'
 import { useNavigationOpacity } from '@/hooks/useNavigationOpacity'
 import NavigationButton from './NavigationButton'
 
 const Navigation = () => {
+    const contextQuote = useContext(ContextQuote)
+    if (!contextQuote) {
+        throw new Error(
+            'Navigation must be used within a ContextQuote.Provider'
+        )
+    }
+    const quoteRef = contextQuote
+
     const contextTopTenPosts = useContext(ContextTopTenPosts)
     if (!contextTopTenPosts) {
         throw new Error(
@@ -29,6 +38,18 @@ const Navigation = () => {
 
     useNavigationOpacity({ setNavOpacity, timerRef })
 
+    const handleScrollToQuote = () => {
+        if (quoteRef.current) {
+            const OFFSET = 96
+            const top =
+                quoteRef.current.getBoundingClientRect().top +
+                window.scrollY -
+                OFFSET
+
+            window.scrollTo({ top, behavior: 'smooth' })
+        }
+    }
+
     const handleScrollToTopUsers = () => {
         if (topUsersRef.current) {
             const OFFSET = 64
@@ -43,7 +64,7 @@ const Navigation = () => {
 
     const handleScrollToTopTenPosts = () => {
         if (topTenPostsRef.current) {
-            const OFFSET = 64
+            const OFFSET = 96
             const top =
                 topTenPostsRef.current.getBoundingClientRect().top +
                 window.scrollY -
@@ -66,6 +87,10 @@ const Navigation = () => {
                         handleScroll={handleScrollToTopUsers}
                         label="Most Active Users"
                     />
+                    <NavigationButton
+                        handleScroll={handleScrollToQuote}
+                        label="Quote of the Day"
+                    />
                     <NavigationButton
                         handleScroll={handleScrollToTopTenPosts}
                         label="Top 10 Posts"

src/components/quote/Quote.tsx

@@ -0,0 +1,59 @@
+import { useCallback, useContext, useEffect, useState } from 'react'
+import { ContextQuote } from '@/context/ContextQuote'
+import { QuoteType } from '@/types/types'
+import fetchQuote from '@/api/fetchQuote'
+import { Skeleton } from '@/components/ui/skeleton'
+import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
+
+const Quote = () => {
+    const contextQuote = useContext(ContextQuote)
+    if (!contextQuote) {
+        throw new Error('Users must be used within a ContextQuote.Provider')
+    }
+    const quoteRef = contextQuote
+
+    const [quote, setQuote] = useState<QuoteType | null>(null)
+    const [isLoading, setIsLoading] = useState(false)
+
+    const loadQuote = useCallback(async () => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+        await fetchQuote(setQuote)
+        setIsLoading(false)
+    }, [isLoading])
+
+    useEffect(() => {
+        const parsedStorageData = getItemFromSessionStorage()
+        setQuote(parsedStorageData?.quote || [])
+
+        if (!parsedStorageData?.quote?.length) {
+            loadQuote()
+        }
+    }, [loadQuote])
+
+    return (
+        <blockquote
+            className="flex flex-col gap-2 sm:gap-4 text-center w-full max-w-7xl bg-stone-100 text-stone-950 p-3 sm:p-4 lg:p-6 my-6 lg:my-8"
+            ref={quoteRef}
+        >
+            <h2 className="self-start text-very-large font-semibold underline">
+                Quote of the Day
+            </h2>
+            {quote ? (
+                <div className="flex flex-col">
+                    <i>"{quote.body}"</i>
+                    <p className="self-end px-4"> - unknown author</p>
+                </div>
+            ) : (
+                <div className="flex flex-col gap-2">
+                    <Skeleton className="h-[18px] w-full rounded-full" />
+                    <Skeleton className="self-end h-[18px] w-32 rounded-full" />
+                </div>
+            )}
+        </blockquote>
+    )
+}
+
+export default Quote

src/context/ContextQuote.ts

@@ -0,0 +1,5 @@
+import { createContext, RefObject } from 'react'
+
+export const ContextQuote = createContext<
+    RefObject<HTMLQuoteElement | null> | undefined
+>(undefined)

src/types/types.ts

@@ -6,6 +6,13 @@ export type FeedItemsType = {
     body: string
 }
 
+export type QuoteType = {
+    userId: number
+    id: number
+    title: string
+    body: string
+}
+
 export type UsersType = {
     id: number
     name: string