Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
58 changes: 58 additions & 0 deletions t29-project-1/src/docs/CAT_VIEW.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
# Cat View & Navigation

Documentation for the `CatCard` component, `useCatNavigation` hook, and local storage state persistence.

---

## 1. `CatCard` Component

`CatCard` is a semantic UI component that frames the cat image and embeds the interactive favorite action button.

### Component Props

| Prop | Type | Default | Description |
| :----------------- | :---------------- | :---------- | :------------------------------------------------------------------ |
| `cat` | `CatData \| null` | `null` | Active cat object containing `url`, `width`, and `height`. |
| `isFavorite` | `boolean` | `false` | Controls fill color and active state of the `<Favorites />` button. |
| `onToggleFavorite` | `() => void` | `undefined` | Callback fired when the favorite star button is clicked. |
| `isLoading` | `boolean` | `false` | Displays loading text inside the image viewport when `true`. |
| `error` | `Error \| null` | `null` | Renders error message text inside the image viewport when present. |

---

## 2. `useCatNavigation` Custom Hook

Encapsulates history stack traversal, next/previous mechanics, and automatic `localStorage` synchronization.

### Interface

| Return Value | Type | Description |
| :--------------- | :-------------------- | :------------------------------------------------------------ |
| `currentCat` | `CatData \| null` | Currently selected cat object from history array. |
| `isLoading` | `boolean` | Loading flag during dynamic cat fetches. |
| `error` | `Error \| null` | Error state object if a request fails. |
| `canGoPrevious` | `boolean` | Returns `true` if `currentIndex > 0`. |
| `handleNext` | `() => Promise<void>` | Advances `currentIndex` forward or fetches a new cat image. |
| `handlePrevious` | `() => void` | Decrements `currentIndex` to step back to the previous image. |

---

## 3. Local Storage Persistence

Application state is automatically hydrated on mount and synchronized on state updates across dedicated storage keys:

- **`cat_app_history`:** Stores the array of visited `CatData[]` objects.
- **`cat_app_index`:** Stores the active integer pointer (`currentIndex`).
- **`cat_app_favorites`:** Stores the array of favorited `CatData[]` objects.

```typescript
// Lazy initialization pattern used in hooks to prevent redundant storage reads
const [history, setHistory] = useState<CatData[]>(() => {
try {
const saved = localStorage.getItem('cat_app_history');
return saved ? JSON.parse(saved) : [];
} catch {
return [];
}
});
```