Text Editing API

[MdAsifSid]

Text Editing API and How to Use It

Objective

Develop an API to manage dynamic text content for components, supporting flexible updates and multi-paragraph handling.

---

Key Features

1. Text Management Endpoints

• Retrieve Text Content

  • Fetch content for a specific component.
  • Support component-based filtering via query parameters.
  • Return associated paragraphs and content.
  • Handle missing components gracefully with error messages.

• Update Text Content

  • Update or create text content for a component.
  • Accept both single content and multiple paragraphs updates.
  • Validate at least one field (content or paragraphs).
  • Prevent empty arrays for paragraphs.

• Delete Text Content

  • Remove content for a specific component.
  • Validate component existence before deletion.
  • Respond with appropriate success or error messages.

---

2. Text Management Requirements

• Support dynamic updates for multiple components.
• Allow multi-paragraph storage for enhanced flexibility.
• Use unique identifiers (component) for efficient storage and retrieval.

---

3. Error Handling

• Provide comprehensive error responses for all operations.
• Include meaningful validation messages for missing or invalid inputs.
• Implement server-side logging for debugging purposes.

---

4. Security Considerations

• Implement token-based authentication for all operations.
• Enforce role-based access control for admin-only operations.
• Configure CORS to control resource access.

---

5. Performance Optimization

• Ensure efficient database queries for CRUD operations.
• Add indexing on the component field for faster retrieval.

---

Technical Specifications

• Endpoint Base Path: /api/text
• Response Format: JSON
• Authentication: Bearer Token
• Database: MongoDB

---

Acceptance Criteria

• Provide functional endpoints for retrieve, update, and delete operations.
• Implement proper error handling for validation and server errors.
• Ensure secure operations with authentication and role checks.
• Maintain consistent response structure with meaningful messages.

---

Testing Requirements

• Develop unit tests for each endpoint.
• Implement integration tests for all API flows.
• Conduct security testing to ensure no unauthorized access.

---

Dependencies

• Existing authentication system.
• MongoDB for data persistence.

---

💡 Using the Text Editing API in HeroAbout

The HeroAbout component integrates with a text editing API to dynamically fetch, update, and manage text content. Here's a guide on how to use the API effectively:

---

1. Fetching Content

• API Endpoint: GET /api/text
• Purpose: Retrieve the title and paragraph content for the "HeroAbout" component.
• Implementation:
  • On component mount, a GET request fetches the content using the component query parameter.
  • Example Request:

    axios.get("http://localhost:3000/api/text", {
    params: { component: "HeroAbout" },
    });

  • The response populates the title and paragraph state.
  • If paragraphs is returned as an array, it is converted to a single string.

---

2. Editing Content

• Condition: Editing is enabled only for admins.
• Steps:
  1. Admins click the pencil icon (FaPencilAlt) to enter edit mode.
  2. In edit mode:
     • title and paragraph fields are displayed as editable text areas.
     • Changes are stored in local state.

---

3. Saving Content

• API Endpoint: PUT /api/text
• Purpose: Update or create text content for the "HeroAbout" component.
• Implementation:
  • Admin clicks the "Save" button after editing.
  • A PUT request sends the updated title and paragraph to the server.
  • Example Request Payload:

    {
    "component": "HeroAbout",
    "content": "Updated Hero Title",
    "paragraphs": ["Updated paragraph content here."]
    }

  • The server normalizes the paragraphs field to an array before saving.

---

4. Error Handling

• Purpose: Gracefully handle issues like network errors or invalid responses.
• Implementation:
  • If fetching or saving fails, an error message is displayed using the error state.
  • Example:

    setError("Error saving content. Please try again later.");

---

Admin Functionality

• Admin Check: The useNavigation context provides the isAdmin flag to check if the user is an admin.
• Admin-Only Features:
  • Pencil icon for enabling edit mode.
  • Text areas and "Save" button for content updates.

---

PR Link

[MdAsifSid]

• Successfully applied the text editing API across all components on the AboutUs page.
• Encountered an issue with the Meet Our Team component, where the integration isn't working as expected.
• Plan to resolve this issue and ensure full functionality by tomorrow.

[MdAsifSid]

• Progress Update:

  • Successfully implemented the text editing API across all components on the AboutUs page.
  • Encountered an issue while pushing the code, likely due to conflicts between my personal and company GitHub accounts.

• Next Steps:

  • Resolve the GitHub account conflict and ensure proper code deployment by today.