import React, { useEffect, useState } from "react"; import Head from "next/head"; import Editor from "react-simple-code-editor"; import { highlight, languages } from "prismjs/components/prism-core"; import "prismjs/components/prism-json"; import JSONTree from "react-json-tree"; import faker from "faker"; import { shuffle } from "lodash"; import Table from "rc-table"; import { AnalyticsSettings, AnalyticsBrowser, Analytics, Context, } from "../../"; import { CONFIG_BROWSER } from "../config"; const jsontheme = { scheme: "tomorrow", author: "chris kempson (http://chriskempson.com)", base00: "#1d1f21", base01: "#282a2e", base02: "#373b41", base03: "#969896", base04: "#b4b7b4", base05: "#c5c8c6", base06: "#e0e0e0", base07: "#ffffff", base08: "#cc6666", base09: "#9580FF", base0A: "#f0c674", base0B: "#8AFF80", base0C: "#8abeb7", base0D: "#FF80BF", base0E: "#b294bb", base0F: "#a3685a", }; export default function Home(): React.ReactElement { const [analytics, setAnalytics] = useState(undefined); const [settings, setSettings] = useState( undefined ); const [analyticsReady, setAnalyticsReady] = useState(false); const [writeKey, setWriteKey] = useState(""); const newEvent = () => { const fakerFns = [ ...Object.entries(faker.name), ...Object.entries(faker.commerce), ...Object.entries(faker.internet), ...Object.entries(faker.company), ]; const randomStuff = shuffle(fakerFns).slice( 0, Math.round(Math.random() * 10) + 3 ); const event = randomStuff.reduce((ev, [name, fn]) => { return { [name]: fn(), ...ev, }; }, {}); return JSON.stringify(event, null, " "); }; const [event, setEvent] = React.useState(""); const [ctx, setCtx] = React.useState(); async function fetchAnalytics() { const [response, ctx] = await AnalyticsBrowser.load({ ...settings, writeKey, ...CONFIG_BROWSER, }); if (response) { setCtx(ctx); setAnalytics(response); setAnalyticsReady(true); setEvent(newEvent()); // @ts-ignore window.analytics = response; } } const track = async (e) => { e.preventDefault(); if (!analyticsReady) { console.log("not ready yet"); } const evt = JSON.parse(event); const ctx = await analytics.track(evt?.event ?? "Track Event", evt); setCtx(ctx); ctx.flush(); }; const identify = async (e) => { e.preventDefault(); if (!analyticsReady) { console.log("not ready yet"); } const evt = JSON.parse(event); const { userId = "Test User", ...traits } = evt; const ctx = await analytics.identify(userId, traits); setCtx(ctx); ctx.flush(); }; const group = async (e) => { e.preventDefault(); if (!analyticsReady) { console.log("not ready yet"); } const evt = JSON.parse(event); const ctx = await analytics.group("UNIVAC Working Group", { principles: ["Eckert", "Mauchly"], site: "Eckert–Mauchly Computer Corporation", statedGoals: "Develop the first commercial computer", industry: "Technology", }); setCtx(ctx); ctx.flush(); }; const nodeTest = async (e) => { e.preventDefault(); if (!analyticsReady) { console.log("not ready yet"); } const ctx = await fetch(`/api/test-node?writeKey=${writeKey}`); console.table(ctx); alert(JSON.stringify(ctx.json())); }; const testPage = async (e) => { e.preventDefault(); if (!analyticsReady) { console.log("not ready yet"); } const ctx = await analytics.page("Pricing", { title: "Astrolabe Pricing", url: "https://astrolabe.so/pricing", path: "/pricing", }); setCtx(ctx); ctx.flush(); }; return (
Tester App

Astrolabe SDK Tester

{ e.preventDefault(); setSettings({ writeKey: writeKey }); fetchAnalytics(); }} >

Event

setEvent(event)} highlight={(code) => highlight(code, languages.json)} padding={10} style={{ fontFamily: '"Fira code", "Fira Mono", monospace', fontSize: 12, }} />

Result

{ctx && ( )}

Logs

level > 0} theme={jsontheme} data={json} invertTheme={false} /> ); }, }, ]} data={ctx?.logs() ?? []} />

Stats

); }