From daef9ff08471f3de5a7cf975265d7fae3b28062e Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 3 Mar 2024 18:51:10 +0800
Subject: [PATCH] feat: add usage button for telemetry

---
 README.md                                     |  1 +
 src/client/components/PageHeader.tsx          |  1 -
 .../components/telemetry/TelemetryList.tsx    | 84 +++++++++++++++++--
 src/server/model/telemetry.ts                 |  8 +-
 4 files changed, 81 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index fda6b03..626ef70 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ It's good to specialize in one thing, if we are experts in related abilities we
 - [ ] utm track
 - [ ] waitlist
 - [ ] survey
+- [ ] lighthouse report
 
 ## Preview
 
diff --git a/src/client/components/PageHeader.tsx b/src/client/components/PageHeader.tsx
index 52dbd89..253eb3b 100644
--- a/src/client/components/PageHeader.tsx
+++ b/src/client/components/PageHeader.tsx
@@ -18,7 +18,6 @@ export const PageHeader: React.FC<{
         )}
       </div>
 
-      <div className="text-2xl flex-1">{props.title}</div>
       {props.action}
     </div>
   );
diff --git a/src/client/components/telemetry/TelemetryList.tsx b/src/client/components/telemetry/TelemetryList.tsx
index 138157c..632d02d 100644
--- a/src/client/components/telemetry/TelemetryList.tsx
+++ b/src/client/components/telemetry/TelemetryList.tsx
@@ -1,11 +1,12 @@
 import { Trans, t } from '@i18next-toolkit/react';
-import { Button, Form, Input, Modal, Table } from 'antd';
+import { Button, Collapse, Form, Input, Modal, Table, Typography } from 'antd';
 import React, { useMemo, useState } from 'react';
 import { AppRouterOutput, trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { type ColumnsType } from 'antd/es/table/interface';
 import {
   BarChartOutlined,
+  CodeOutlined,
   EditOutlined,
   PlusOutlined,
 } from '@ant-design/icons';
@@ -18,10 +19,11 @@ type TelemetryInfo = AppRouterOutput['telemetry']['all'][number];
 
 export const TelemetryList: React.FC = React.memo(() => {
   const workspaceId = useCurrentWorkspaceId();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [form] = Form.useForm<{ id?: string; name: string }>();
   const upsertTelemetryMutation = trpc.telemetry.upsert.useMutation();
   const utils = trpc.useUtils();
+  const [modal, contextHolder] = Modal.useModal();
 
   const handleAddTelemetry = useEvent(async () => {
     await form.validateFields();
@@ -35,13 +37,67 @@ export const TelemetryList: React.FC = React.memo(() => {
 
     utils.telemetry.all.refetch();
 
-    setIsModalOpen(false);
+    setIsEditModalOpen(false);
 
     form.resetFields();
   });
 
+  const handleShowUsage = useEvent((info: TelemetryInfo) => {
+    const blankGif = `${window.location.origin}/telemetry/${workspaceId}/${info.id}.gif`;
+    const countBadgeUrl = `${window.location.origin}/telemetry/${workspaceId}/${info.id}/badge.svg`;
+    modal.info({
+      maskClosable: true,
+      title: 'How to Use Telemetry',
+      content: (
+        <div>
+          <p>Here is some way to use telemetry:</p>
+          <h2>Insert to article:</h2>
+          <p>
+            if your article support raw html, you can direct insert it{' '}
+            <Typography.Text code={true} copyable={{ text: blankGif }}>
+              {blankGif}
+            </Typography.Text>
+          </p>
+          <Collapse
+            ghost
+            items={[
+              {
+                label: 'Advanced',
+                children: (
+                  <div>
+                    <p>
+                      Some website will not allow send `referer` field. so its
+                      maybe can not track source. so you can mark it by
+                      yourself. for example:
+                    </p>
+                    <p>
+                      <Typography.Text code={true}>
+                        {blankGif}?url=https://xxxxxxxx
+                      </Typography.Text>
+                    </p>
+                  </div>
+                ),
+              },
+            ]}
+          />
+
+          <h2>Count your website visitor:</h2>
+          <p>
+            if your article support raw html, you can direct insert it{' '}
+            <Typography.Text code={true} copyable={{ text: blankGif }}>
+              {countBadgeUrl}
+            </Typography.Text>
+          </p>
+          <p>
+            Like this: <img src={countBadgeUrl} />
+          </p>
+        </div>
+      ),
+    });
+  });
+
   const handleEditTelemetry = useEvent(async (info: TelemetryInfo) => {
-    setIsModalOpen(true);
+    setIsEditModalOpen(true);
     form.setFieldsValue({
       id: info.id,
       name: info.name,
@@ -87,7 +143,7 @@ export const TelemetryList: React.FC = React.memo(() => {
               type="primary"
               icon={<PlusOutlined />}
               size="large"
-              onClick={() => setIsModalOpen(true)}
+              onClick={() => setIsEditModalOpen(true)}
             >
               {t('Add Telemetry')}
             </Button>
@@ -95,16 +151,19 @@ export const TelemetryList: React.FC = React.memo(() => {
         }
       />
 
-      <TelemetryListTable onEdit={handleEditTelemetry} />
+      <TelemetryListTable
+        onShowUsage={handleShowUsage}
+        onEdit={handleEditTelemetry}
+      />
 
       <Modal
         title={t('Add Telemetry')}
-        open={isModalOpen}
+        open={isEditModalOpen}
         okButtonProps={{
           loading: upsertTelemetryMutation.isLoading,
         }}
         onOk={() => handleAddTelemetry()}
-        onCancel={() => setIsModalOpen(false)}
+        onCancel={() => setIsEditModalOpen(false)}
       >
         <Form layout="vertical" form={form}>
           <Form.Item name="id" hidden={true} />
@@ -118,6 +177,8 @@ export const TelemetryList: React.FC = React.memo(() => {
           </Form.Item>
         </Form>
       </Modal>
+
+      {contextHolder}
     </div>
   );
 });
@@ -125,6 +186,7 @@ TelemetryList.displayName = 'TelemetryList';
 
 const TelemetryListTable: React.FC<{
   onEdit: (info: TelemetryInfo) => void;
+  onShowUsage: (info: TelemetryInfo) => void;
 }> = React.memo((props) => {
   const workspaceId = useCurrentWorkspaceId();
   const { data = [], isLoading } = trpc.telemetry.all.useQuery({
@@ -155,6 +217,12 @@ const TelemetryListTable: React.FC<{
         render: (_, record) => {
           return (
             <div className="flex gap-2 justify-end">
+              <Button
+                icon={<CodeOutlined />}
+                onClick={() => props.onShowUsage(record)}
+              >
+                {t('Usage')}
+              </Button>
               <Button
                 icon={<EditOutlined />}
                 onClick={() => props.onEdit(record)}
diff --git a/src/server/model/telemetry.ts b/src/server/model/telemetry.ts
index df1c1bc..ba82917 100644
--- a/src/server/model/telemetry.ts
+++ b/src/server/model/telemetry.ts
@@ -19,13 +19,13 @@ export async function recordTelemetryEvent(req: Request) {
   }
   const eventName = name ? String(name) : undefined;
 
-  const session = await findSession(req, url);
-  if (!session) {
+  const workspaceId = req.params.workspaceId;
+  if (!workspaceId) {
     return;
   }
 
-  const workspaceId = req.params.workspaceId;
-  if (!workspaceId) {
+  const session = await findSession(req, url);
+  if (!session) {
     return;
   }