Binder View

[JonoSommers]

Description:
The Binder View displays the name of the binder at the top along with a search bar and a home button. It shows all the cards that are saved to the binder. Additionally, the view includes buttons at the bottom to switch between the first and second binder.

Details:

• The top of the page displays the binder name, a Search Bar, and a Home button.
• All the cards saved to the binder are displayed in this view, shown as "posters" with their name and image.
• At the bottom of the page, there are buttons to switch between the first and second binder.
• If the user has more than one binder, the option to view the second binder is provided.
• Users can go back to the Home page or search for cards using the search bar.

Examples:

• Response Body for Binder View (Using a Joins Table - binderCards):

{
  "binder": {
    "id": 101,
    "name": "My Pokemon Binder"
  },
  "binder_cards": [
    {
      "binder_id": 101,
      "card_id": 1,
      "card": {
        "id": 1,
        "name": "Pikachu",
        "type": "Pokemon",
        "image": "https://example.com/images/pikachu.png"
      }
    },
    {
      "binder_id": 101,
      "card_id": 2,
      "card": {
        "id": 2,
        "name": "Charmander",
        "type": "Pokemon",
        "image": "https://example.com/images/charmander.png"
      }
    }
  ],
  "binders": [
    {"id": 101, "name": "Pokemon Binder"},
    {"id": 102, "name": "MTG Binder"}
  ]
}

• Response for Switching Between Binders (Example for Second Binder):

{
  "binder": {
    "id": 102,
    "name": "My MTG Binder"
  },
  "binder_cards": [
    {
      "binder_id": 102,
      "card_id": 101,
      "card": {
        "id": 101,
        "name": "Black Lotus",
        "type": "MTG",
        "image": "https://example.com/images/black-lotus.png"
      }
    },
    {
      "binder_id": 102,
      "card_id": 102,
      "card": {
        "id": 102,
        "name": "Shivan Dragon",
        "type": "MTG",
        "image": "https://example.com/images/shivan-dragon.png"
      }
    }
  ],
  "binders": [
    {"id": 101, "name": "Pokemon Binder"},
    {"id": 102, "name": "MTG Binder"}
  ]
}

Acceptance Criteria:

• The binder name is displayed correctly at the top of the Binder View.
• The correct cards associated with the selected binder are displayed below the binder name (fetched through the binderCards join table).
• Each card shows its correct information (e.g., name, type, image).
• The user can switch between binders, and the cards associated with the selected binder are displayed correctly.
• The list of binders (Pokemon and MTG binders) is available and selectable.
• The Binder View loads without errors and displays the expected data for the selected binder.