23 | {
26 | e.preventDefault()
27 | onBack()
28 | }}
29 | className="mb-4 inline-block rounded text-sm text-indigo-400 hover:underline focus:ring-2 focus:ring-indigo-400 focus:outline-none"
30 | >
31 | ← Back to search
32 |
33 |
96 | )
97 | }
98 |
--------------------------------------------------------------------------------
/src/books/book-search-item.tsx:
--------------------------------------------------------------------------------
1 | import { CoverImage } from '@/books/cover-image'
2 | import type { BookSearchItem } from '@/api/openlibrary'
3 |
4 | type Props = BookSearchItem &
5 | Omit
34 |
73 |
74 | {links && links.length > 0 && (
75 | {title}
35 | 36 |37 | {author?.link ? ( 38 | 44 | {authorName} 45 | 46 | ) : ( 47 | authorName 48 | )} 49 |
50 | 51 | {covers.length > 0 && ( 52 |
53 | {covers.slice(0, 5).map((cover) => (
54 |
57 | )}
58 |
59 | {description ? (
60 |
61 |
62 | {description}
63 |
64 |
65 | ) : (
66 |
67 |
68 |
69 |
70 |
71 | )}
72 |
76 |
94 | )}
95 | 77 | Related Links 78 |
79 |-
80 | {links.map((link) => (
81 |
- 82 | 88 | {link.title} 89 | 90 | 91 | ))} 92 |
30 |
41 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/src/books/cover-image.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | type Props = {
4 | id: number
5 | title: string
6 | size?: 'L' | 'M'
7 | }
8 |
9 | export function CoverImage({ id, title, size = 'M' }: Props) {
10 | const [isLoaded, setLoaded] = useState(false)
11 |
12 | return (
13 | <>
14 | {!isLoaded && (
15 |
16 | )}
17 |
32 |
40 | 33 | {title.length > 100 ? `${title.slice(0, 100)}...` : title} 34 |
35 |{authorName}
36 |37 | Published in {publishYear} 38 |
39 |
{
22 | setLoaded(true)
23 | }}
24 | />
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/books/header.tsx:
--------------------------------------------------------------------------------
1 | import { LibraryBig } from 'lucide-react'
2 |
3 | type Props = {
4 | children?: React.ReactNode
5 | }
6 |
7 | export function Header({ children }: Props) {
8 | return (
9 |
10 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/books/pagination.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronLeft, ChevronRight } from 'lucide-react'
2 |
3 | export function Pagination({
4 | page,
5 | setPage,
6 | maxPages,
7 | }: {
8 | page: number
9 | setPage: (page: number) => void
10 | maxPages: number
11 | }) {
12 | return (
13 |
11 |
18 |
19 | {children}
20 |
12 |
14 | 15 | OpenLibrary Explorer 16 |
17 |
14 | {page === 1 ? (
15 |
16 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/src/books/search-form.tsx:
--------------------------------------------------------------------------------
1 | import { Search } from 'lucide-react'
2 |
3 | type Props = {
4 | defaultValue: string | undefined
5 | onSearch: (query: string) => void
6 | }
7 |
8 | export function SearchForm({ defaultValue, onSearch }: Props) {
9 | return (
10 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/books/search-states.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Search,
3 | SearchCheck,
4 | FileWarning,
5 | Loader2,
6 | AlertTriangle,
7 | } from 'lucide-react'
8 |
9 | const SpotIcon = ({
10 | icon: Icon,
11 | label,
12 | }: {
13 | icon: typeof Search
14 | label: string
15 | }) => (
16 |
17 |
22 | )
23 |
24 | export function EmptyState() {
25 | return (
26 |
18 |
20 | {label}
21 |
45 |
47 | )
48 | }
49 |
50 | export function ErrorState({ error }: { error: Error }) {
51 | return (
52 |
53 |
56 | )
57 | }
58 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react'
2 | import { createRoot } from 'react-dom/client'
3 | import { RouterProvider, createRouter } from '@tanstack/react-router'
4 |
5 | // Import the generated route tree
6 | import { routeTree } from './routeTree.gen'
7 |
8 | import './styles.css'
9 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
10 |
11 | const queryClient = new QueryClient()
12 |
13 | // Create a new router instance
14 | const router = createRouter({
15 | routeTree,
16 | context: {
17 | queryClient,
18 | },
19 | defaultPreload: 'intent',
20 | scrollRestoration: true,
21 | defaultStructuralSharing: true,
22 | defaultPreloadStaleTime: 0,
23 | defaultGcTime: 0,
24 | defaultPendingMinMs: 0,
25 | defaultPendingMs: 100,
26 | })
27 |
28 | // Register the router instance for type safety
29 | declare module '@tanstack/react-router' {
30 | interface Register {
31 | router: typeof router
32 | }
33 | }
34 |
35 | // Render the app
36 | const rootElement = document.querySelector('#app')
37 | if (rootElement && !rootElement.innerHTML) {
38 | const root = createRoot(rootElement)
39 | await (await import('@/server/handlers')).worker.start()
40 | root.render(
41 | {error.message}
55 |
14 |
18 | )
19 | },
20 | })
21 |
--------------------------------------------------------------------------------
/src/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from '@tanstack/react-router'
2 | import { useState } from 'react'
3 | import { SearchForm } from '@/books/search-form'
4 | import { Header } from '@/books/header'
5 | import { BookSearchItem } from '@/books/book-search-item'
6 | import { BookDetailItem } from '@/books/book-detail-item'
7 | import { Pagination } from '@/books/pagination'
8 | import { limit } from '@/api/openlibrary'
9 |
10 | export const Route = createFileRoute('/')({
11 | component: App,
12 | })
13 |
14 | function App() {
15 | const [filter, setFilter] = useState('')
16 | const [page, setPage] = useState(1)
17 | const [id, setId] = useState
22 |
25 | )
26 | }
27 |
28 | return (
29 |
30 |
31 | {
33 | if (filter !== newFilter) {
34 | setFilter(newFilter)
35 | setPage(1)
36 | }
37 | }}
38 | defaultValue={filter}
39 | />
40 |
41 |
48 | )
49 | }
50 |
51 | function BookSearchOverview({
52 | page,
53 | setPage,
54 | setId,
55 | }: {
56 | filter: string
57 | setId: (id: string) => void
58 | page: number
59 | setPage: (page: number) => void
60 | }) {
61 | const query = {
62 | data: {
63 | numFound: 13_629,
64 | docs: [
65 | {
66 | id: '0',
67 | coverId: 240_727,
68 | authorName: 'J.K. Rowling',
69 | authorId: '/authors/OL73937A',
70 | title: "Harry Potter and the Philosopher's Stone",
71 | publishYear: 1997,
72 | },
73 | {
74 | id: '1',
75 | coverId: 8_226_196,
76 | authorName: 'J.R.R. Tolkien',
77 | authorId: '/authors/OL26284A',
78 | title: 'The Hobbit',
79 | publishYear: 1937,
80 | },
81 | {
82 | id: '2',
83 | coverId: 10_523_361,
84 | authorName: 'George Orwell',
85 | authorId: '/authors/OL26320A',
86 | title: '1984',
87 | publishYear: 1949,
88 | },
89 | {
90 | id: '3',
91 | coverId: 11_169_123,
92 | authorName: 'F. Scott Fitzgerald',
93 | authorId: '/authors/OL26283A',
94 | title: 'The Great Gatsby',
95 | publishYear: 1925,
96 | },
97 | {
98 | id: '4',
99 | coverId: 10_958_358,
100 | authorName: 'Mary Shelley',
101 | authorId: '/authors/OL26282A',
102 | title: 'Frankenstein',
103 | publishYear: 1818,
104 | },
105 | {
106 | id: '5',
107 | coverId: 10_909_258,
108 | authorName: 'Charlotte Brontë',
109 | authorId: '/authors/OL26281A',
110 | title: 'Jane Eyre',
111 | publishYear: 1847,
112 | },
113 | ],
114 | },
115 | }
116 |
117 | return (
118 |
119 |
135 | )
136 | }
137 |
138 | const mockDescription = `***A Game of Thrones*** is the inaugural novel in ***A Song of Ice and Fire***, an epic
139 | series of fantasy novels crafted by the American author **George R. R. Martin**. Published on August 1, 1996, this
140 | novel introduces readers to the richly detailed world of Westeros and Essos, where political intrigue, power
141 | struggles, and magical elements intertwine.`
142 |
143 | function BookDetail({
144 | setId,
145 | }: {
146 | id: string
147 | setId: (id: string | undefined) => void
148 | }) {
149 | return (
150 |
120 | {query.data.numFound} records found
121 |
122 |
123 |
124 | {query.data.docs.map((book) => (
125 |
128 |
129 |
151 | {
179 | setId(undefined)
180 | }}
181 | />
182 |
183 | )
184 | }
185 |
--------------------------------------------------------------------------------
/src/server/handlers.ts:
--------------------------------------------------------------------------------
1 | import { http, HttpResponse, bypass, delay } from 'msw'
2 | import type { JsonBodyType } from 'msw'
3 |
4 | import { get, set, createStore } from 'idb-keyval'
5 | import { setupWorker } from 'msw/browser'
6 |
7 | const openLibraryStore = createStore('open-library-store', 'open-library')
8 |
9 | const openLibraryCache = {
10 | async get(key: string) {
11 | return await get