->> Comments Component <<-

In a world where ideas flutter through the digital forest like leaves in the wind, our application stands as a beacon for tech-savvy explorers. Among its branches, the Comments component offers a nest where thoughts can be shared and nurtured. This document will guide you through implementing this feature, allowing your users to engage in meaningful discussions as they navigate through your digital ecosystem.

The Comments component is a key piece of our application's interactive layer, built using Preact and the htm syntax extension for a seamless and efficient user experience. Below, you'll find a detailed guide on how to integrate this component within your Preact application.

--> Importing and Setup

First, ensure that the Comments component is correctly imported and set up in your project:

import Comments from "../App/Comments.js";
import { Component, h, render } from '../../node_modules/preact/dist/preact.module.js';
import htm from '../../node_modules/htm/dist/htm.module.js';

const html = htm.bind(h);

export default class MyComponent extends Component {
    state = {
        apiData: {
            id: 1,
            comments: [...]
        }
    }

    render(props, state, context) {
        return html`
            <div class="my-container">
                <${Comments} class="App\\Models\\Rocket" 
                             entity=${this.state.apiData.id} 
                             comments=${this.state.apiData.comments} />
            </div>
        `
    }
}

In this setup, <comments> is nested within a Preact component, configured to the "Rocket" model. The class, entity, and comments props are essential for the component to save and display the relevant comments correctly.

--> PHP Model Configuration

The backend model must be configured to support the comment functionality. Below is a PHP example using our Charm framework that outlines how to attach and manage comments within your models:

namespace App\Models;

use App\Models\Mainframe\Comment;
use Charm\Vivid\Model;

class Rocket extends Model
{
    public function formatToArray(): array
    {
        $arr = $this->toArray();
        $arr['comments'] = Comment::getFor(self::class, $this->id);
        return $arr;
    }
}

Please note that this will add all available comments for the current entity, including the user data. If you don't need this data on your main overview (e.g. EntityGrid), it makes sense to define a details API and only return the full data there, using a switch like here:

namespace App\Models;

use App\Models\Mainframe\Comment;
use Charm\Vivid\Model;

class Rocket extends Model
{
    public function formatToArray(bool $full_data = false): array
    {
        $arr = $this->toArray();
        if($full_data) {
            $arr['comments'] = Comment::getFor(self::class, $this's id);
        }
        return $arr;
    }
}

This model method formatToArray fetches the associated comments when required, ensuring they are available when the component renders.

Interaction with the Comments component is powered by two primary API endpoints:

It's crucial to secure these interactions. Implement authentication and authorization checks to ensure that only eligible users can post and delete comments. Middleware can be utilized to verify user identity and permissions before processing requests.

Imagine your application as a dense forest where each model is a tree. Comments are the leaves that appear on these trees, where each leaf represents a thought or insight shared by the community. As users traverse the forest, they can leave their own leaves or gather insights from others, enriching everyone's journey through the interconnected canopy of discussions.

With the Comments component, your application not only fosters communication but also builds a thriving community of engaged users. By following the guidelines in this documentation, you can ensure that this component integrates smoothly into your application's ecosystem, allowing your users to share their voices and contribute to the collective wisdom of your digital landscape.