Art Museum Project

Art Museum, Phase 6: ArtDescription

Understand the Problem

You'll now build an ArtDescription component that displays detailed information about a selected piece of artwork. This component should appear on the nested route /galleries/:galleryId/art/:artId.

Devise a Plan

Create the ArtDescription component in its own folder
Set up nested routes inside galleries/:galleryId
Use useParams to access galleryId and artId
Find the correct gallery and artwork using props and ID match
Render all relevant artwork information and a Link to return to the gallery view
Add error handling using errorElement and a catchall route

Carry Out the Plan

Create ArtDescription.jsx

// src/components/ArtDescription/ArtDescription.jsx
import { useParams, Link } from 'react-router-dom';

function ArtDescription({ galleries }) {
  const { galleryId, artId } = useParams();
  const gallery = galleries.find(g => g.id === Number(galleryId));
  const art = gallery?.objects.find(obj => obj.id === Number(artId));

  if (!gallery || !art) throw new Error('Invalid ID');

  return (
    <div>
      <Link to="..">Back to Gallery</Link>
      <h2>
        <a href={art.url} target="_blank" rel="noreferrer">
          {art.title}
        </a>
      </h2>
      <p><strong>Description:</strong> {art.description}</p>
      <p><strong>Credit:</strong> {art.creditline}</p>
      <p><strong>Technique:</strong> {art.technique}</p>
      <div className="art-images">
        {art.images?.map(img => (
          <img key={img.imageid} src={img.baseimageurl} alt={art.title} />
        ))}
      </div>
    </div>
  );
}

export default ArtDescription;

Update Routing in App.jsx

import ArtDescription from './components/ArtDescription';

{
  path: 'galleries/:galleryId',
  errorElement: <PageMissing />,
  children: [
    {
      index: true,
      element: <GalleryView galleries={harvardArt.records} />
    },
    {
      path: 'art/:artId',
      element: <ArtDescription galleries={harvardArt.records} />
    },
    {
      path: '*',
      element: <PageMissing />
    }
  ]
}

Define PageMissing and useRouteError (Optional)

import { useRouteError, isRouteErrorResponse } from 'react-router-dom';

function PageMissing() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    console.log(`${error.status} ${error.statusText} ${error.data}`);
  }
  return <h2>Page Not Found</h2>;
}

Look Back and Refactor

Your ArtDescription route now allows a user to see an artwork's details, link to its official Harvard page, and return to the gallery. You've also created layered error handling to ensure broken paths and bad IDs don’t crash the app.

Real-World Analogy

This is like zooming in on a piece at a museum kiosk — all the artwork's history, credits, and details come alive, and there's always a way to step back to the main exhibit.