quickest-silver•3w ago

Tracking down events at every stage and persisting it.

Hello, I building a Leads management system and need to track down all the events at all stages and have the events persisted the backend is ready and was wondering how I can implement this.

5 Replies

kapa.ai•3w ago

Hi @muthaiga. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To track down events at every stage and persist them in your Leads management system, you can follow a similar approach to the one used in the CRM example provided in the knowledge sources. Here’s a step-by-step guide on how you can implement this: 1. Set Up Event Subscribers: Use event subscribers to listen to changes in your entities. This will allow you to track events such as creation, updates, and deletions. 2. Persist Events: Save the tracked events to your database for persistence. 3. Publish Events: Optionally, you can publish these events to a real-time system if needed. Here’s an example of how you can implement an event subscriber in TypeScript using TypeORM and NestJS:

import { EntitySubscriberInterface, EventSubscriber, InsertEvent, UpdateEvent } from 'typeorm';
import { InjectRepository } from '@nestjs/typeorm';
import { AuditEntity } from '../entities/audit.entity';
import { AuditAction } from '../enums';
import { PubSub } from 'graphql-subscriptions';
import { InjectPubSub } from '@ptc-org/nestjs-query-graphql';
import { ContactEntity } from '../entities/contact.entity';

@EventSubscriber()
export class ContactSubscriber implements EntitySubscriberInterface<ContactEntity> {
  constructor(
    dataSource: DataSource,
    @InjectRepository(AuditEntity) private auditRepo: Repository<AuditEntity>,
    @InjectPubSub() readonly pubSub?: PubSub,
  ) {
    if (pubSub) {
      dataSource.subscribers.push(this);
    }
  }

  listenTo() {
    return ContactEntity;
  }
async afterInsert(event: InsertEvent<ContactEntity>): Promise<void> {
    const changes = Object.keys(event.entity)
      .filter((k) => !['createdAt', 'updatedAt'].includes(k))
      .map((key) => {
        if (typeof event.entity[key] === 'object') {
          return {
            field: key,
            from: null,
            to: event.entity[key]?.id,
          };
        }
        return { field: key, from: null, to: event.entity[key] };
      });

    const record = await this.auditRepo.save({
      action: AuditAction.CREATE,
      targetEntity: ContactEntity.name.replace('Entity', ''),
      targetId: event.entity.id,
      changes,
      user: event.entity.createdBy,
    });

    await this.pubSub?.publish('createdAudit-{}', { createdAudit: record });
  }

  async afterUpdate(event: UpdateEvent<ContactEntity>): Promise<any> {
    if (!event?.entity?.id) return;

    const changes = event.updatedColumns.map((column) => ({
      field: column.propertyName,
      from: event.databaseEntity[column.propertyName],
      to: event.entity[column.propertyName],
    }));

    const record = await this.auditRepo.save({
      action: AuditAction.UPDATE,
      targetEntity: ContactEntity.name.replace('Entity', ''),
      targetId: event.entity.id,
      changes,
      user: event.entity.updatedBy,
    });

    await this.pubSub?.publish('updatedAudit-{}', { updatedAudit: record });
  }
}

import { EntitySubscriberInterface, EventSubscriber, InsertEvent, UpdateEvent } from 'typeorm';
import { InjectRepository } from '@nestjs/typeorm';
import { AuditEntity } from '../entities/audit.entity';
import { AuditAction } from '../enums';
import { PubSub } from 'graphql-subscriptions';
import { InjectPubSub } from '@ptc-org/nestjs-query-graphql';
import { ContactEntity } from '../entities/contact.entity';

@EventSubscriber()
export class ContactSubscriber implements EntitySubscriberInterface<ContactEntity> {
  constructor(
    dataSource: DataSource,
    @InjectRepository(AuditEntity) private auditRepo: Repository<AuditEntity>,
    @InjectPubSub() readonly pubSub?: PubSub,
  ) {
    if (pubSub) {
      dataSource.subscribers.push(this);
    }
  }

  listenTo() {
    return ContactEntity;
  }
async afterInsert(event: InsertEvent<ContactEntity>): Promise<void> {
    const changes = Object.keys(event.entity)
      .filter((k) => !['createdAt', 'updatedAt'].includes(k))
      .map((key) => {
        if (typeof event.entity[key] === 'object') {
          return {
            field: key,
            from: null,
            to: event.entity[key]?.id,
          };
        }
        return { field: key, from: null, to: event.entity[key] };
      });

    const record = await this.auditRepo.save({
      action: AuditAction.CREATE,
      targetEntity: ContactEntity.name.replace('Entity', ''),
      targetId: event.entity.id,
      changes,
      user: event.entity.createdBy,
    });

    await this.pubSub?.publish('createdAudit-{}', { createdAudit: record });
  }

  async afterUpdate(event: UpdateEvent<ContactEntity>): Promise<any> {
    if (!event?.entity?.id) return;

    const changes = event.updatedColumns.map((column) => ({
      field: column.propertyName,
      from: event.databaseEntity[column.propertyName],
      to: event.entity[column.propertyName],
    }));

    const record = await this.auditRepo.save({
      action: AuditAction.UPDATE,
      targetEntity: ContactEntity.name.replace('Entity', ''),
      targetId: event.entity.id,
      changes,
      user: event.entity.updatedBy,
    });

    await this.pubSub?.publish('updatedAudit-{}', { updatedAudit: record });
  }
}

This code sets up an event subscriber that listens to insert and update events on the ContactEntity. It then saves the changes to an AuditEntity and optionally publishes the events using PubSub. For more details on how to handle real-time events, you can refer to the Refine documentation on Live Provider (https://refine.dev/docs/realtime/live-provider/#publishing-events-from-the-client-side). If you need further customization or have specific requirements, you can adapt the above code to fit your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1062148619622424576> kapa.ai is still learning and improving, please let us know how it did by reacting below

quickest-silver•3w ago

@kapa.ai Is there a tutorial or an guided project where I can learn how to implement this?

kapa.ai•3w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, there are several tutorials and guided projects available that can help you learn how to implement event tracking and persistence in a React application using Refine. Here are some relevant resources: 1. React Admin Panel Tutorial with Chakra UI and Strapi: - This tutorial covers implementing CRUD operations, mutation modes, and filters on a React admin panel. It provides a comprehensive guide on how to manage data and track changes. - Read the tutorial (https://refine.dev/blog/react-admin-tutorial/#implementing-crud-operations-on-react-admin-panel) 2. JWT Authentication in Express: - This guide explains how to use JWTs for user authorization in an Express server. It can be useful if you need to implement secure authentication and authorization in your backend. - Read the tutorial (https://refine.dev/blog/jwt-authentication/#how-to-use-jwt-for-user-authorization-in-express) 3. How to Fetch Data in React with useSWR: - This tutorial demonstrates how to set up an example app with SWR for data fetching in React. It can help you understand how to manage data fetching and state in your application. - Read the tutorial (https://refine.dev/blog/data-fetching-next-js-useswr/#setting-up-an-example-app-with-swr) 4. React Memo Guide with Examples: - This guide shows how memoization contributes to performance optimization in a React app. It includes examples of using React.memo, useMemo(), and useCallback. - Read the tutorial (https://refine.dev/blog/react-memo-guide/#project-overview) For a more specific implementation of event tracking and persistence, you can refer to the example code provided in the previous answer and adapt it to your needs. If you need further customization or have specific requirements, you can explore the Refine documentation and other tutorials available on the Refine website. If you have any more questions or need further assistance, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1062148619622424576> kapa.ai is still learning and improving, please let us know how it did by reacting below