State Management

Components

Reuse the styles.css stylesheet from 2 Client Rendering and import (opens in a new tab) it in the root layout, app/layout.jsx, so its CSS classes are available globally across all components. Use the Lucide React (opens in a new tab) package to include the icons.

The root layout is always a server component (RSC). Mark your page, app/page.jsx, as a client component (RCC) and create the following four client components to render the collection:

• Collection renders the tags and decks.
• Deck renders the title, tags, a form to create a new slide, and slides.
• Slide renders the title, tags, a form to create a new card, and cards.
• Card renders the type-specific content and tags.

The tags will be dynamically generated and rendered in the Collection, Deck, and Slide components. You can either use state and effect hooks to generate and store them, or use a memoization (opens in a new tab) hook to compute them from the current state:

export default function Deck({ deck }) {
  const tags = useMemo(() => •••, [deck]);
}

Define a NEXT_PUBLIC_API_BASE environment (opens in a new tab) variable to store the base path of the external RESTful API that hosts the collection:

NEXT_PUBLIC_API_BASE=https://queue.qa/cmps350/assignments/03-restful-interfaces/api

Use process.env.NEXT_PUBLIC_API_BASE when specifying the URL for the Fetch API. You will have to update all your fetch() calls to include credentials, as the API uses cookies and tokens (JWT (opens in a new tab)) to support multiple users:

const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/•••`, {
  •••
  credentials: "include",
});

Synchronization

The collection will be fetched in page.jsx when it first mounts and passed to a child component to be rendered. The collection is then fetched, on demand, whenever an operation successfully mutates the server state, for example, creating a deck/slide or deleting a card.

Use state and effect hooks, based on 9 Synchronized State, to keep the client application state synchronized with the server state.

Actions

Create and use a server action to add or remove a card from a list of favorites. This list is independent of the external API, managed by your server, and stored as a local variable in the server actions module (it is not persistent).

Define a separate state variable in page.jsx to store the list of favorites, as was done previously for the collection of decks, and update it whenever necessary. This state must also be drilled down to the Card component so that favorited cards can be displayed differently using inline styles.