Task: Enhance Search Result Cards with Add-to-List and Create-Post Features

[Anon-is-Anon]

Description

Enhance the search result cards displayed on the frontend by adding two buttons for each card:

1. Add to List: Allows the user to add the media item to their respective list (anime, movie, or game).
2. Create Post: Allows the user to create a post about the selected media item.

Both actions will open a popup/modal where users can input the required fields.

---

Steps to Implement

1. Frontend Design

a. Search Result Card

• Add two buttons to each search result card:
  • "Add to List": Opens a modal for adding the item to the user's list.
  • "Create Post": Opens a modal for creating a post about the media item.

---

2. Add-to-List Functionality

a. Button

• Label: Add to List
• On click: Open a modal to collect user input.

b. Modal Design

The modal should include:

1. Dropdown for Status:
   • Options:
     • Watching/Playing (for anime/games)
     • Completed
     • Dropped
     • Plan to Watch/Play
   • Use an enum from the backend API if possible.
2. Rating Field:
   • Input type: Number (1--10).
   • Validate to ensure the rating is between 1 and 10.
3. Hidden Field for publicDbId:
   • Automatically populate using the publicDbId of the selected card.

c. API Integration

• Endpoint: /api/v1/list/add (or the corresponding backend endpoint).
• HTTP Method: POST.
• Payload:

{
      "status": "<selected_status>",
      "rating": <user_rating>,
      "publicDbId": "<publicDbId>"
    }

d. Error Handling

• Display appropriate error messages if:
  • Required fields are empty.
  • The backend returns an error.
• Show a success message on successful addition.

---

3. Create-Post Functionality

a. Button

• Label: Create Post.
• On click: Open a modal to collect user input.

b. Modal Design

The modal should include:

1. Text Field:
   • Input type: Textarea.
   • Placeholder: "What's on your mind about this?"
2. Hidden Fields:
   • publicDbId: Auto-populate using the publicDbId of the selected card.
   • type: Auto-detect (anime, movie, or game) based on the search result category.
   • imageUrl: Auto-populate using the imageUrl of the selected card.

c. API Integration

• Endpoint: /api/v1/post/create (or the corresponding backend endpoint).
• HTTP Method: POST.
• Payload:

{
     "publicDbId": "<publicDbId>",
     "type": "<media_type>",
     "text": "<user_text>",
     "imageUrl": "<imageUrl>"
   }

d. Error Handling

• Display an error message if:
  • The text field is empty.
  • The backend returns an error.
• Show a success message when the post is created successfully.

---

4. Testing

a. Add-to-List Button

• Ensure the modal opens on button click.
• Test with various combinations of status and ratings.
• Verify the API request payload and response handling.

b. Create-Post Button

• Ensure the modal opens on button click.
• Test with various inputs in the text field.
• Validate API request payload and response.

---

5. Instructions for PR

• Include screenshots of the modals for:
  • Add-to-List.
  • Create-Post.
• Test both buttons thoroughly and attach the testing video.
• Ensure the modals are responsive and styled consistently with the application's theme.

---

6. Expected User Flow

a. Add-to-List

1. The user clicks the Add to List button on a search result card.
2. A modal pops up with fields for status, rating, and publicDbId (hidden).
3. The user selects the desired status and rating and clicks Submit.
4. The API adds the item to the user's list, and a success message is displayed.

b. Create-Post

1. The user clicks the Create Post button on a search result card.
2. A modal pops up with a text field to write the post.
3. The user writes their post and clicks Submit.
4. The API creates the post, and a success message is displayed.

[Snehalgupta-07]

Claim

[Anon-is-Anon]

/info

[Opencodeiiita-Bot]

User	Repo
Snehalgupta-07	FandomFusion-Backend (1)
Anon-is-Anon	0