Draft: Add posthog event capturing for quickconnect demo

docker-compose.yml

@@ -1,30 +1,6 @@
 version: "3.7"
 
 services:
-  aspnet-core:
-    build:
-      context: .
-      dockerfile: mx-platform-aspnet-core/Dockerfile
-    entrypoint: sh -c "dotnet mx-platform-aspnet-core.dll"
-    environment:
-      - ASPNETCORE_ENVIRONMENT=development
-    image: mx-quickstart-aspnet
-    ports:
-      - 8000:80
-  node:
-    image: mx-quickstart-node
-    build:
-      context: .
-      dockerfile: ./mx-platform-node/Dockerfile
-    ports:
-      - 8000:8000
-  python:
-    image: mx-quickstart-python
-    build:
-      context: .
-      dockerfile: ./python/Dockerfile
-    ports:
-      - 8000:8000
   ruby:
     image: mx-quickstart-ruby
     build:

frontend/package.json

@@ -2,8 +2,8 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
-  "engines" : { 
-    "node" : "^16.0.0"
+  "engines": {
+    "node": "^16.0.0"
   },
   "dependencies": {
     "@kyper/button": "^3.1.0",
@@ -16,6 +16,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "posthog-js": "^1.33.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-scripts": "5.0.0",

frontend/src/App.js

@@ -1,19 +1,23 @@
-import { useState } from 'react';
-
 import LaunchButton from "./components/LaunchButton";
 import UserEndpoints from "./components/UserEndpoints";
+import posthog from 'posthog-js';
 
+import { useEffect, useState } from 'react';
 
 function App() {
   const [userGuid, setUserGuid] = useState(null);
   const [memberGuid, setMemberGuid] = useState(null);
 
+  useEffect(() => {
+    posthog.init(process.env.REACT_APP_POST_HOG_API_KEY, { api_host: 'https://app.posthog.com', autocapture: true })
+  }, [])
+
 
   return (
     <div className="App">
       <div className="body">
         {userGuid === null && memberGuid === null ? (
-          <LaunchButton setUserGuid={setUserGuid} setMemberGuid={setMemberGuid} />
+          <LaunchButton setUserGuid={setUserGuid} setMemberGuid={setMemberGuid} posthog={posthog} />
         ) :
           (
             <UserEndpoints userGuid={userGuid} memberGuid={memberGuid} />

frontend/src/components/LaunchButton.js

@@ -9,7 +9,7 @@ import { Dots } from '@kyper/progressindicators';
 import { Text } from '@kyper/text'
 import { Trash } from '@kyper/icon/Trash'
 
-function LaunchButton({ setUserGuid, setMemberGuid }) {
+function LaunchButton({ setUserGuid, setMemberGuid, posthog }) {
   const [connectWidgetUrl, setConnectWidgetUrl] = useState("");
   const [errorMessage, setErrorMessage] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -21,7 +21,7 @@ function LaunchButton({ setUserGuid, setMemberGuid }) {
         method: 'GET',
         headers: { 'Content-Type': 'application/json' },
       };
-      await fetch(`/api/users`, requestOptions)
+      await fetch('https://api-59jd.onrender.com'+`/api/users`, requestOptions)
         .then(res => {
           if (res.ok) {
             return res.json();
@@ -46,7 +46,7 @@ function LaunchButton({ setUserGuid, setMemberGuid }) {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
     };
-    await fetch(`/api/user/${userGuid}`, requestOptions)
+    await fetch('https://api-59jd.onrender.com'+`/api/user/${userGuid}`, requestOptions)
       .then(res => {
         if (res.ok) {
           return res.json();
@@ -76,7 +76,7 @@ function LaunchButton({ setUserGuid, setMemberGuid }) {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body)
     };
-    await fetch(`/api/get_mxconnect_widget_url`, requestOptions)
+    await fetch('https://api-59jd.onrender.com'+`/api/get_mxconnect_widget_url`, requestOptions)
       .then(res => {
         if (res.ok) {
           return res.json();
@@ -218,6 +218,14 @@ function LaunchButton({ setUserGuid, setMemberGuid }) {
             widgetUrl={connectWidgetUrl}
             onEvent={(event) => {
               console.log('MX PostMessage: ', event)
+              const user_guid = event.metadata.user_guid;
+              if (user_guid) {
+                console.log('identifying user on posthog');
+                posthog.identify(user_guid);
+              }
+
+              posthog.capture(`Widget Event: ${event.type}`);
+
               if (event.type === 'mx/connect/memberConnected') {
                 setUserGuid(event.metadata.user_guid)
                 setMemberGuid(event.metadata.member_guid)

frontend/src/components/RunJobAndPoll.js

@@ -25,7 +25,7 @@ function RunJobAndPoll({
   const [connectWidgetUrl, setConnectWidgetUrl] = useState("");
 
   const pollMemberStatus = async () => {
-    await fetch(`/users/${userGuid}/members/${memberGuid}/status`, { signal })
+    await fetch('https://api-59jd.onrender.com'+`/users/${userGuid}/members/${memberGuid}/status`, { signal })
       .then(response => response.json())
       .then((response) => {
         console.log('poll member status', response);
@@ -51,7 +51,7 @@ function RunJobAndPoll({
   useEffect(() => {
     async function initiatePremiumJob() {
       console.log(`post request to ${jobType}`)
-      await fetch(endpoint, { 
+      await fetch('https://api-59jd.onrender.com'+endpoint, { 
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ 
@@ -99,7 +99,7 @@ function RunJobAndPoll({
       };
       console.log('open challenged widget')
       async function getWidgetUrl() {
-        await fetch(`/api/get_mxconnect_widget_url`, requestOptions)
+        await fetch('https://api-59jd.onrender.com'+`/api/get_mxconnect_widget_url`, requestOptions)
           .then(res => res.json())
           .then((res) => {
             setConnectWidgetUrl(res?.widget_url?.url)
@@ -113,7 +113,7 @@ function RunJobAndPoll({
   }, [isChallenged, userGuid, memberGuid])
 
   const getFinalData = async () => {
-    await fetch(endpoint)
+    await fetch('https://api-59jd.onrender.com'+endpoint)
       .then(response => response.json())
       .then((response) => {
         console.log('response in final', response);

frontend/src/components/Transactions.js

@@ -10,7 +10,7 @@ function Transactions({userGuid, memberGuid}) {
 
   const loadTransactions = async () => {
     setIsLoading(true);
-    await fetch(`/users/${userGuid}/members/${memberGuid}/transactions`)
+    await fetch('https://api-59jd.onrender.com'+`/users/${userGuid}/members/${memberGuid}/transactions`)
       .then(res => {
         if (res.ok) {
           return res.json();

frontend/src/components/Verification.js

@@ -10,7 +10,7 @@ function Verification({userGuid, memberGuid}) {
 
   const loadAccountNumbers = async () => {
     setIsLoading(true);
-    await fetch(`/users/${userGuid}/members/${memberGuid}/verify`)
+    await fetch('https://api-59jd.onrender.com'+`/users/${userGuid}/members/${memberGuid}/verify`)
       .then(res => {
         if (res.ok) {
           return res.json();

render.yaml

@@ -0,0 +1,38 @@
+services:
+  - type: web
+    plan: free
+    name: api
+    env: ruby
+    repo: https://github.com/mxenabled/mx-quickconnect
+    branch: posthog
+    rootDir: ruby
+    scaling:
+      minInstances: 1
+      maxInstances: 3
+      targetMemoryPercent: 60 # optional if targetCPUPercent is set
+      targetCPUPercent: 60 # optional if targetMemory is set
+    buildCommand: bundle install
+    startCommand: bundle exec ruby app.rb
+    domains:
+      - test0.render.com
+    envVars:
+      - key: STRIPE_API_KEY
+        value: dummy
+  - type: web
+    name: frontend
+    rootDir: frontend
+    repo: https://github.com/mxenabled/mx-quickconnect
+    branch: posthog
+    env: static
+    buildCommand: yarn build
+    staticPublishPath: ./build
+    pullRequestPreviewsEnabled: true # optional
+    buildFilter:
+      paths:
+      - src/**/*.js
+      ignoredPaths:
+      - src/**/*.test.js
+    headers:
+      - path: /*
+        name: X-Frame-Options
+        value: sameorigin

ruby/Gemfile

@@ -9,6 +9,8 @@ gem 'dotenv', '~> 2.7'
 
 gem 'mx-platform-ruby'
 
+gem 'posthog-ruby'
+
 group :test do
   # Test it with RSpec (BDD for Ruby)
   gem 'rspec-core'

ruby/Gemfile.lock

@@ -2,6 +2,7 @@ GEM
   remote: https://rubygems.org/
   specs:
     colorize (0.8.1)
+    concurrent-ruby (1.1.9)
     dotenv (2.7.6)
     faraday (1.10.0)
       faraday-em_http (~> 1.0)
@@ -38,6 +39,8 @@ GEM
       ruby2_keywords (~> 0.0.1)
     mx-platform-ruby (0.13.1)
       faraday (~> 1.0, >= 1.0.1)
+    posthog-ruby (2.0.0)
+      concurrent-ruby (~> 1, < 1.1.10)
     rack (2.2.3.1)
     rack-protection (2.2.0)
       rack
@@ -56,12 +59,14 @@ GEM
 PLATFORMS
   x86_64-darwin-19
   x86_64-darwin-20
+  x86_64-linux
 
 DEPENDENCIES
   colorize (~> 0.8.1)
   dotenv (~> 2.7)
   httparty (~> 0.20.0)
   mx-platform-ruby
+  posthog-ruby
   rack (>= 2.2.3.1)
   rspec-core
   sinatra