adding capture function for tacking events in posthog

web/components/issues/modal.tsx

@@ -34,7 +34,6 @@ import {
 } from "constants/fetch-keys";
 // constants
 import { INBOX_ISSUE_SOURCE } from "constants/inbox";
-import { usePostHog } from "posthog-js/react";
 import { ISSUE_CREATE } from "constants/posthog-events";
 
 export interface IssuesModalProps {
@@ -69,7 +68,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   fieldsToShow = ["all"],
   onSubmit,
 }) => {
-  const posthog = usePostHog();
   // states
   const [createMore, setCreateMore] = useState(false);
   const [activeProject, setActiveProject] = useState<string | null>(null);
@@ -241,7 +239,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       await issuesService
         .createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
         .then(async (res) => {
-          posthog?.capture(ISSUE_CREATE);
           mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
           if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
           if (payload.module && payload.module !== "")

web/components/issues/peek-overview/layout.tsx

@@ -26,8 +26,9 @@ type Props = {
 
 export type TPeekOverviewModes = "side" | "modal" | "full";
 
-export const IssuePeekOverview: React.FC<Props> = observer(
+export const IssuePeekOverview: React.FC<Props> = observer((props) => {
-  ({ handleMutation, projectId, readOnly, workspaceSlug }) => {
+  const { handleMutation, projectId, readOnly, workspaceSlug } = props;
+  // states
   const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
   const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
   const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
@@ -63,10 +64,8 @@ export const IssuePeekOverview: React.FC<Props> = observer(
 
   const handleDeleteIssue = async () => {
     if (!issue || !user) return;
-
     await deleteIssue(workspaceSlug, projectId, issue.id, user);
     handleMutation();
-
     handleClose();
   };
 
@@ -189,5 +188,4 @@ export const IssuePeekOverview: React.FC<Props> = observer(
       </Transition.Root>
     </>
   );
-  }
+});
-);

web/hooks/use-user.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from "react";
 import { useRouter } from "next/router";
-import { usePostHog } from "posthog-js/react";
 import useSWR from "swr";
 // services
 import userService from "services/user.service";
@@ -11,7 +10,6 @@ import type { ICurrentUserResponse } from "types";
 
 export default function useUser({ redirectTo = "", redirectIfFound = false, options = {} } = {}) {
   const router = useRouter();
-  const posthog = usePostHog();
   // API to fetch user information
   const { data, isLoading, error, mutate } = useSWR<ICurrentUserResponse>(
     CURRENT_USER,

web/services/issues.service.ts

@@ -11,6 +11,10 @@ import type {
   ISubIssueResponse,
 } from "types";
 import { API_BASE_URL } from "helpers/common.helper";
+import PosthogService from "./posthog.service";
+import { ISSUE_CREATE } from "constants/posthog-events";
+
+const posthogService = new PosthogService();
 
 class ProjectIssuesServices extends APIService {
   constructor() {
@@ -26,6 +30,7 @@ class ProjectIssuesServices extends APIService {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, data)
       .then((response) => {
         trackEventServices.trackIssueEvent(response.data, "ISSUE_CREATE", user);
+        posthogService.capture(ISSUE_CREATE, response.data, user);
         return response?.data;
       })
       .catch((error) => {

web/services/posthog.service.ts

@@ -0,0 +1,27 @@
+import APIService from "./api.service";
+
+class PosthogService extends APIService {
+  constructor() {
+    super("");
+  }
+  capture(event: string, data: any = {}, user: any = {}) {
+    this.request({
+      method: "post",
+      url: `${process.env.NEXT_PUBLIC_POSTHOG_HOST || ""}/capture/`,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: {
+        api_key: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+        properties: {
+          user,
+          ...data,
+        },
+        distinct_id: user?.email,
+        event,
+      },
+    });
+  }
+}
+
+export default PosthogService;

web/store/issues.ts

@@ -1,7 +1,4 @@
-// mobx
-import { ISSUE_CREATE } from "constants/posthog-events";
 import { action, observable, runInAction, makeAutoObservable } from "mobx";
-import { usePostHog } from "posthog-js/react";
 // services
 import issueService from "services/issues.service";
 // types