CommentLib

A comprehensive Angular comment library with real-time features, voting, replies, and event emitters. Built with Angular 17+ and Ionic components.

Features

• 🎯 Real-time Comments - Live comment updates using Socket.IO
• 👍 Voting System - Upvote/downvote comments with real-time updates
• 💬 Nested Replies - Support for comment replies and threading
• ⭐ Featured Comments - Mark important comments as featured
• 🚨 Reporting System - Report inappropriate comments
• 📱 Ionic Integration - Built with Ionic components for mobile-first design
• 🎨 Customizable Styling - SCSS-based styling with Tailwind CSS support
• 📡 Event Emitters - Comprehensive event system for all comment actions
• 🔍 Search & Filter - Built-in search and sorting capabilities
• 🌐 Internationalization - Multi-language support with ngx-translate

Installation

npm install @your-username/comment-lib

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @angular/common@^17.0.0 @angular/core@^17.0.0 @angular/forms@^17.0.0 @angular/router@^17.0.0 @ionic/angular@^8.0.0 @ngx-translate/core@^15.0.0 @naniteninja/ionic-lib@^1.0.0 rxjs@^7.0.0 socket.io-client@^4.0.0

Quick Start

1. Import the Module

import { CommentModule } from '@your-username/comment-lib';

@NgModule({
  imports: [
    CommentModule
  ]
})
export class AppModule { }

2. Use the Component

<lib-comment-lib 
  [inputValue]="inputValue"
  (commentCreated)="onCommentCreated($event)"
  (commentUpdated)="onCommentUpdated($event)"
  (commentDeleted)="onCommentDeleted($event)"
  (commentVoted)="onCommentVoted($event)"
  (commentUnvoted)="onCommentUnvoted($event)"
  (commentFeatured)="onCommentFeatured($event)"
  (commentUnfeatured)="onCommentUnfeatured($event)"
  (commentReported)="onCommentReported($event)">
</lib-comment-lib>

3. Handle Events

import { IComment } from '@your-username/comment-lib';

export class AppComponent {
  inputValue = {
    modelId: 'your-model-id',
    senderId: 'your-user-id'
  };

  onCommentCreated(comment: IComment): void {
    console.log('Comment created:', comment);
  }

  onCommentUpdated(comment: IComment): void {
    console.log('Comment updated:', comment);
  }

  onCommentDeleted(comment: IComment): void {
    console.log('Comment deleted:', comment);
  }

  onCommentVoted(comment: IComment): void {
    console.log('Comment voted:', comment);
  }

  onCommentUnvoted(comment: IComment): void {
    console.log('Comment unvoted:', comment);
  }

  onCommentFeatured(comment: IComment): void {
    console.log('Comment featured:', comment);
  }

  onCommentUnfeatured(comment: IComment): void {
    console.log('Comment unfeatured:', comment);
  }

  onCommentReported(comment: IComment): void {
    console.log('Comment reported:', comment);
  }
}

API Reference

InputValue Interface

interface InputValue {
  modelId: string;    // ID of the content being commented on
  senderId: string;   // ID of the current user
}

IComment Interface

interface IComment {
  _id: string;
  comment: string;
  user: IUser;
  isFeatured: boolean;
  votes: IVote[];
  images: IImage[];
  createdAt: Date;
  updatedAt: Date;
  parentComment?: string;  // For replies
}

Event Emitters

| Event | Description | Payload | |-------|-------------|---------| | commentCreated | Fired when a new comment is created | IComment | | commentUpdated | Fired when a comment is updated | IComment | | commentDeleted | Fired when a comment is deleted | IComment | | commentVoted | Fired when a comment is voted on | IComment | | commentUnvoted | Fired when a vote is removed | IComment | | commentFeatured | Fired when a comment is featured | IComment | | commentUnfeatured | Fired when a comment is unfeatured | IComment | | commentReported | Fired when a comment is reported | IComment |

Styling

The library uses SCSS for styling and includes Tailwind CSS support. You can customize the appearance by overriding the CSS variables or importing your own styles.

Backend Integration

This library expects a backend service that implements the following endpoints:

• GET /comments/:modelId - Get comments for a model
• POST /comments - Create a new comment
• PUT /comments/:id - Update a comment
• DELETE /comments/:id - Delete a comment
• POST /votes - Vote on a comment
• DELETE /votes/:id - Remove a vote
• PUT /comments/:id/feature - Toggle featured status

Socket.IO Events

The library listens for the following Socket.IO events:

• commentAdded - New comment added
• commentUpdated - Comment updated
• commentDeleted - Comment deleted
• voteChanged - Vote added/removed
• commentFeatureToggled - Featured status changed

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you have any questions or need help, please:

1. Check the Issues page
2. Create a new issue if your problem isn't already reported
3. Contact the maintainers

Changelog

1.0.0

• Initial release
• Real-time comment system
• Voting functionality
• Reply system
• Event emitters
• Ionic integration