How ezykl/bookstore-admin works
Bookstore Admin is a small authenticated book-management UI. The user signs in, browses a paginated book list, may view cost prices when permitted, and can open a book to edit it. Authentication is restored from a persisted token; protected routes gate the book workflows. The sampled source confirms auth state, storage, and list/detail fetching. The README documents cost-price viewing and editing, but those page/component implementations were not sampled, so their internal wiring is shown only where the tree supports it.
Main entry points: books.ts Books API · App.tsx App composition · ProtectedLayout.tsx Protected layout · AuthContext.tsx Auth provider
Components 23
Application flow
- App composition
src/App.tsx - Route table
src/router/index.tsx - Session gate
src/components/common/AuthGate.tsx - Protected layout
src/layouts/ProtectedLayout.tsx
Authentication
- Login screen
src/pages/Login.tsx - Auth provider
src/context/AuthContext.tsx - Auth hook
src/hooks/useAuth.ts - Token storage
src/services/storage.ts - Permission checks
src/utils/permissions.ts
Book management
- Books screen
src/pages/Books.tsx - Books table
src/components/books/BookTable.tsx - Book row
src/components/books/BookRow.tsx - Pagination
src/components/books/Pagination.tsx - Cost price view
src/components/books/CostPriceModal.tsx - Edit book screen
src/pages/EditBook.tsx - Book edit form
src/components/books/EditBookForm.tsx
API and state
- Auth API
src/api/auth.ts - Book list state
src/hooks/useBooks.ts - Book detail state
src/hooks/useBook.ts - Books API
src/api/books.ts - HTTP client
src/api/axios.ts
Other components
- Admin user
- Bookstore API
Connections 30
- Admin user → App composition: uses
- App composition → Auth provider: provides auth
- App composition → Session gate: renders
- Session gate → Auth hook: reads state
- App composition → Route table: mounts routes
- Route table → Login screen: routes login
- Route table → Protected layout: routes protected
- Protected layout → Books screen: routes list
- Protected layout → Edit book screen: routes edit
- Login screen → Auth hook: uses auth
- Auth provider → Auth API: requests auth
- Auth provider → Token storage: reads/writes token
- Auth provider → Bookstore API: restores or changes session
- Auth API → HTTP client: sends requests
- HTTP client → Bookstore API: calls API
- Books screen → Book list state: loads page
- Book list state → Books API: fetches books
- Books screen → Books table: renders results
- Books table → Book row: renders rows
- Books table → Pagination: offers paging
- Book list state → Books API: requests pages
- Books API → HTTP client: sends requests
- Edit book screen → Book detail state: loads book
- Book detail state → Books API: fetches record
- Edit book screen → Book edit form: renders form
- Book edit form → Books API: updates book
- Books API → Bookstore API: reads/writes books
- Book row → Cost price view: opens cost view
- Cost price view → Permission checks: checks access
- Protected layout → Auth hook: checks session