CLASSROOMIO-T-216: Capture posthog events

src/lib/components/Buttons/Logout/index.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import posthog from 'posthog-js';
+  import { goto } from '$app/navigation';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { capturePosthogEvent } from '$lib/utils/services/posthog';
+
+  async function logout() {
+    const { error } = await supabase.auth.signOut();
+    console.error('Error logging out: ', error);
+
+    capturePosthogEvent('user_logged_out');
+    posthog.reset();
+    goto('/login');
+  }
+</script>
+
+<PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />

src/lib/components/Courses/components/NewCourseModal/index.svelte

@@ -11,6 +11,7 @@
   import { profile } from '$lib/utils/store/user';
   import { currentOrg } from '$lib/utils/store/org';
   import { goto } from '$app/navigation';
+  import { capturePosthogEvent } from '$lib/utils/services/posthog';
 
   let isLoading = false;
   let errors = {
@@ -31,7 +32,7 @@
     }));
   }
 
-  async function createCourse(e) {
+  async function createCourse() {
     isLoading = true;
     const { hasError, fieldErrors } = validateForm($createCourseModal);
 
@@ -46,6 +47,9 @@
       .select();
 
     console.log(`newGroup`, newGroup);
+
+    if (!newGroup) return;
+
     const { id: group_id } = newGroup[0];
 
     // Set userPrompt to the description
@@ -62,11 +66,21 @@
       .select();
     console.log(`newCourse`, newCourse);
 
+    if (!newCourse) return;
+
     courses.update((_courses) => [..._courses, newCourse[0]]);
 
-    // 3. Add group members
+    capturePosthogEvent('course_created', {
+      course_id: newCourse[0]?.id,
+      course_title: newCourse[0]?.title,
+      course_description: newCourse[0]?.description,
+      organization_id: $currentOrg.id,
+      organization_name: $currentOrg.name,
+      user_id: $profile.id,
+      user_email: $profile.email
+    });
 
-    // Get profile of author and add as member
+    // 3. Add group members
     await addGroupMember({
       profile_id: $profile.id,
       email: $profile.email,
@@ -105,8 +119,7 @@
     <TextArea
       label="Short description"
       bind:value={$createCourseModal.description}
-      rows="4"
-      maxRows="4"
+      rows={4}
       placeholder="A little description about this course"
       className="mb-4"
       isRequired={true}

src/lib/components/LMS/components/Profile.svelte

@@ -1,22 +1,16 @@
 <script>
-  import { goto } from '$app/navigation';
   import { Grid, Row, Column } from 'carbon-components-svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import UploadImage from '$lib/components/UploadImage/index.svelte';
   import { supabase } from '$lib/utils/functions/supabase';
   import { profile } from '$lib/utils/store/user';
   import { snackbar } from '$lib/components/Snackbar/store';
+  import LogoutButton from '$lib/components/Buttons/Logout/index.svelte';
 
-  let avatar;
+  let avatar = '';
   let loading = false;
 
-  async function logout() {
-    const { error } = await supabase.auth.signOut();
-    goto('/login');
-  }
-
   async function handleUpdate() {
     try {
       loading = true;
@@ -92,6 +86,6 @@
       isDisabled={loading}
       onClick={handleUpdate}
     />
-    <PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
+    <LogoutButton />
   </Row>
 </Grid>

src/lib/components/Org/Settings/Profile.svelte

@@ -1,24 +1,17 @@
 <script>
-  import { goto } from '$app/navigation';
   import { Grid, Row, Column } from 'carbon-components-svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import SectionTitle from '../SectionTitle.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import UploadImage from '$lib/components/UploadImage/index.svelte';
   import { supabase } from '$lib/utils/functions/supabase';
   import { profile } from '$lib/utils/store/user';
   import { snackbar } from '$lib/components/Snackbar/store';
+  import LogoutButton from '$lib/components/Buttons/Logout/index.svelte';
 
-  let avatar;
+  let avatar = '';
   let loading = false;
 
-  async function logout() {
-    const { error } = await supabase.auth.signOut();
-    console.log('error logout', error);
-    goto('/login');
-  }
-
   async function handleUpdate() {
     try {
       loading = true;
@@ -94,6 +87,6 @@
       isDisabled={loading}
       onClick={handleUpdate}
     />
-    <PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
+    <LogoutButton />
   </Row>
 </Grid>

src/lib/components/PrimaryButton/index.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   // import { Moon } from 'svelte-loading-spinners';
   import { VARIANTS, VARIANTS_CLASS } from './constants';
   import { Loading } from 'carbon-components-svelte';
@@ -7,7 +7,7 @@
   export let className = '';
   export let onClick = () => {};
   export let name = '';
-  export let type = 'button';
+  export let type: 'button' | 'submit' | 'reset' | null | undefined = 'button';
   export let variant = VARIANTS.CONTAINED;
   export let disablePadding = false;
   export let isDisabled = false;

src/lib/utils/services/posthog/index.ts

@@ -0,0 +1,22 @@
+import { dev } from '$app/environment';
+import posthog from 'posthog-js';
+
+export const capturePosthogEvent = (event: string, properties?: Record<string, any>): void => {
+  if (dev) return;
+
+  posthog.capture(event, properties);
+};
+
+export const identifyPosthogUser = (id: string, properties?: Record<string, any>): void => {
+  if (dev) return;
+
+  posthog.identify(id, properties);
+};
+
+export const initPosthog = (): void => {
+  if (dev) return;
+
+  posthog.init('phc_JfdHOZ6v0cVlGELBYx1Tmoen2nxNOrAzvgvrPA6Ksov', {
+    api_host: 'https://eu.posthog.com'
+  });
+};

src/lib/utils/services/sentry/index.ts

@@ -0,0 +1,26 @@
+import { dev } from '$app/environment';
+import * as Sentry from '@sentry/browser';
+import { CaptureConsole } from '@sentry/integrations';
+
+export const initSentry = (): void => {
+  if (dev) return;
+
+  Sentry.init({
+    dsn: 'https://[email protected]/5999999',
+    integrations: [
+      new CaptureConsole({
+        levels: ['error']
+      }),
+      new Sentry.Replay()
+    ],
+    environment: 'production',
+    replaysSessionSampleRate: 0.5,
+    replaysOnErrorSampleRate: 1.0
+  });
+};
+
+export const setSentryUser = (user: Record<string, any>): void => {
+  if (dev) return;
+
+  Sentry.setUser(user);
+};