Refactor and improve mixpanel (#10)

* Improve code and mixpanel

* Fix

* data preload

package.json

@@ -43,7 +43,7 @@
 		"@supabase/ssr": "^0.5.0",
 		"@supabase/supabase-js": "^2.44.3",
 		"dayjs": "^1.11.11",
-		"mixpanel-browser": "^2.53.0",
+		"mixpanel-browser": "^2.55.1",
 		"svelte-persisted-store": "^0.11.0",
 		"svelte-sonner": "^0.3.27",
 		"tippy.js": "^6.3.7"

src/lib/elements/Footer.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition'
+	import Icon from '@iconify/svelte'
+	import { page } from '$app/stores'
+	import { enhance } from '$app/forms'
+	import mixpanel from '$lib/utils/mixpanel'
+
+	export let showSettings = false
+	export let showAbout = false
+	export let loading = false
+
+	const navItems = [
+		{ href: '/', label: 'Home', icon: 'clarity:home-line' },
+		{ href: '/history', label: 'Cost History', icon: 'ph:read-cv-logo-light', preload: true }
+	]
+
+	function toggleSettings() {
+		showSettings = !showSettings
+	}
+</script>
+
+<footer
+	class="relative max-w-6xl mx-auto w-full px-5 bg-slate-50 border-t border-teal-500 rounded-t-lg"
+>
+	<nav class="flex flex-row h-11 items-center justify-between">
+		{#each navItems as { href, label, icon, preload }}
+			<a
+				{href}
+				class="flex flex-row items-center gap-1"
+				class:text-orange-500={$page.url.pathname === href}
+				data-sveltekit-preload-data={preload ? 'tap' : null}
+			>
+				<Icon {icon} />
+				{label}
+			</a>
+		{/each}
+		<button on:click={toggleSettings} class="flex flex-row gap-1 items-center">
+			<Icon icon="solar:settings-linear" /> Settings
+		</button>
+	</nav>
+
+	{#if showSettings}
+		<div
+			transition:slide={{ axis: 'y', duration: 200 }}
+			class="absolute w-20 right-3 bottom-11 flex flex-col items-start divide-y divide-orange-400 gap-1 bg-slate-50 p-2 rounded"
+		>
+			<button
+				on:click={() => {
+					showAbout = true
+					toggleSettings()
+				}}>About</button
+			>
+			<form
+				method="post"
+				action="/?/logout"
+				use:enhance={() => {
+					loading = true
+					return async ({ update }) => {
+						await update()
+						loading = false
+						mixpanel.reset()
+						mixpanel.track('logout')
+					}
+				}}
+			>
+				<button type="submit">Logout</button>
+			</form>
+		</div>
+	{/if}
+</footer>

src/lib/utils/mixpanel.ts

@@ -0,0 +1,10 @@
+import { browser, dev } from '$app/environment'
+import mixpanel from 'mixpanel-browser'
+
+mixpanel.init('4f9140ba92bf9817723887501ce35853', {
+	track_pageview: true,
+	persistence: 'localStorage'
+})
+if (dev) mixpanel.disable()
+
+export default mixpanel

src/routes/(app)/+layout.svelte

@@ -1,36 +1,28 @@
 <script lang="ts">
-	import { page } from '$app/stores'
-	import { PUBLIC_MIX_TOKEN } from '$env/static/public'
 	import '$lib/app.css'
 	import '@fontsource/jost'
 	import { navigating } from '$app/stores'
 	import Loader from '$lib/elements/Loader.svelte'
-	import mixpanel from 'mixpanel-browser'
-	import { slide } from 'svelte/transition'
+	import mixpanel from '$lib/utils/mixpanel'
 	import { Toaster } from 'svelte-sonner'
-	import Icon from '@iconify/svelte'
 	import Modal from '$lib/elements/Modal.svelte'
 	import BrandTitle from '$lib/elements/BrandTitle.svelte'
 	import About from '$lib/elements/About.svelte'
-	import { enhance } from '$app/forms'
 	import FullPageLoader from '$lib/elements/FullPageLoader.svelte'
-
+	import Footer from '$lib/elements/Footer.svelte'
+	import { onMount } from 'svelte'
 	export let data
 
-	//Import Mixpanel SDK
-	mixpanel.init(PUBLIC_MIX_TOKEN, {
-		debug: false,
-		track_pageview: true,
-		persistence: 'localStorage'
-	})
-
-	if (PUBLIC_MIX_TOKEN == 'dev') mixpanel.disable()
-
 	let showSettings = false
 	let showAbout = false
 	let loading = false
 
-	const hideSettings = () => (showSettings = false)
+	onMount(() => {
+		mixpanel.identify(data.user?.id)
+		mixpanel.people.set({
+			email: data.user?.email
+		})
+	})
 </script>
 
 <main class="h-[100svh] flex flex-col justify-between">
@@ -54,68 +46,14 @@
 
 	<Toaster
 		closeButton
-		duration={2000}
+		duration={3000}
 		richColors
+		position="bottom-center"
 		toastOptions={{
 			class: 'py-2 mb-8'
 		}}
 	/>
 
 	<!-- Footer menu section -->
-	<div
-		class="relative max-w-6xl mx-auto w-full flex flex-row h-11 px-5 bg-slate-50 border-t border-teal-500 items-center justify-between rounded-t-lg"
-	>
-		<a
-			href="/"
-			class="flex flex-row items-center gap-1"
-			class:text-orange-500={$page.url.pathname == '/'}
-		>
-			<Icon icon="clarity:home-line" /> Home
-		</a>
-		<a
-			data-sveltekit-preload-data="tap"
-			href="/history"
-			class="flex flex-row items-center gap-1"
-			class:text-orange-500={$page.url.pathname == '/history'}
-		>
-			<Icon icon="ph:read-cv-logo-light" /> Cost History
-		</a>
-		<button
-			on:click={() => (showSettings = !showSettings)}
-			class="flex flex-row gap-1 items-center"
-		>
-			<Icon icon="solar:settings-linear" /> Settings
-		</button>
-		{#if showSettings}
-			<div
-				transition:slide={{ axis: 'y', duration: 200 }}
-				class="absolute w-20 right-3 bottom-11 flex flex-col items-start divide-y divide-orange-400 gap-1 bg-slate-50 p-2 rounded"
-			>
-				<button
-					on:click={() => {
-						hideSettings()
-						showAbout = true
-					}}>About</button
-				>
-				<form
-					method="post"
-					action="/?/logout"
-					use:enhance={() => {
-						loading = true
-						return async ({ update }) => {
-							await update()
-							loading = false
-						}
-					}}
-				>
-					<button
-						type="submit"
-						on:click={() => {
-							hideSettings()
-						}}>Logout</button
-					>
-				</form>
-			</div>
-		{/if}
-	</div>
+	<Footer bind:showAbout bind:showSettings bind:loading />
 </main>

src/routes/(app)/+page.svelte

@@ -6,7 +6,7 @@
 	import { MAX_HISTORY, MAX_PAPER, paperFields } from '$lib/utils/constants'
 	import { addHistory, calculateCost, getTotalHistory, type Paper } from '$lib/utils/services'
 	import { makeid } from '$lib/utils/tools'
-	import mixpanel from 'mixpanel-browser'
+	import mixpanel from '$lib/utils/mixpanel'
 	import { onMount, tick } from 'svelte'
 	import { toast } from 'svelte-sonner'
 
@@ -18,7 +18,7 @@
 	let inputs: NodeListOf<HTMLInputElement> | null
 	let inputGroupRef: HTMLDivElement
 	let focusedIndex = 0
-	let customer_name = ''
+	let product_name = ''
 	let isSavingHistory = false
 
 	const addPaper = async () => {
@@ -61,10 +61,14 @@
 	}
 
 	const saveHistory = async () => {
+		if (!product_name) {
+			toast.warning('Product name is required!')
+			return
+		}
 		if ($totalHistoryStore < MAX_HISTORY) {
 			isSavingHistory = true
 			const response = await addHistory({
-				name: customer_name,
+				name: product_name,
 				final_price: finalPrice,
 				papers: paperCount,
 				user: data.user.id
@@ -85,7 +89,7 @@
 		paperCount = [{ ...paperFields, id: makeid(5) }]
 		finalPrice = 0
 		focusedIndex = 0
-		customer_name = ''
+		product_name = ''
 		perPaperResult.clear()
 		getAllInputs()
 		setFocus()
@@ -118,7 +122,7 @@
 			.findIndex((id) => focusedInputID == id)
 	}
 
-	function handleKeyDown(event: KeyboardEvent) {
+	const handleKeyDown = (event: KeyboardEvent) => {
 		if (event.key === 'Enter' && inputs) {
 			event.preventDefault()
 			focusedIndex++
@@ -158,7 +162,7 @@
 		<div class="flex w-full gap-1 items-start">
 			<input
 				data-testid="product_name"
-				bind:value={customer_name}
+				bind:value={product_name}
 				type="text"
 				placeholder="Product name"
 				class="border-b py-[2px] border-dashed w-full h-full px-2 focus:outline-none focus:border-teal-500"

src/routes/(app)/history/+page.svelte

@@ -5,7 +5,7 @@
 	import { softDeleteHistory } from '$lib/utils/services.js'
 	import { sortedByCreatedAt } from '$lib/utils/tools.js'
 	import Icon from '@iconify/svelte'
-	import mixpanel from 'mixpanel-browser'
+	import mixpanel from '$lib/utils/mixpanel'
 	import { toast } from 'svelte-sonner'
 
 	export let data
@@ -50,6 +50,7 @@
 				{/if}
 
 				<a
+					data-sveltekit-preload-data="tap"
 					href="/history/trash"
 					class="py-1 flex items-center justify-center gap-1 w-full text-center border rounded text-gray-600"
 				>

src/routes/(app)/history/trash/+page.svelte

@@ -5,7 +5,7 @@
 	import { deleteHistory, emptyTrashData, restoreHistory } from '$lib/utils/services.js'
 	import { sortedByCreatedAt } from '$lib/utils/tools.js'
 	import Icon from '@iconify/svelte'
-	import mixpanel from 'mixpanel-browser'
+	import mixpanel from '$lib/utils/mixpanel'
 	import { toast } from 'svelte-sonner'
 
 	export let data

src/routes/auth/+layout.svelte

@@ -1,17 +1,7 @@
 <script lang="ts">
-	import { page } from '$app/stores'
-	import { PUBLIC_MIX_TOKEN } from '$env/static/public'
 	import '$lib/app.css'
 	import BrandTitle from '$lib/elements/BrandTitle.svelte'
 	import '@fontsource/jost'
-
-	//Import Mixpanel SDK
-	import mixpanel from 'mixpanel-browser'
-	mixpanel.init(PUBLIC_MIX_TOKEN, {
-		debug: false,
-		track_pageview: true,
-		persistence: 'localStorage'
-	})
 </script>
 
 <main class="h-[100svh] flex flex-col">