feat: add heat map tracking for prompt usage tracking

MBZJ · Apr 19, 2023 · a8f4deb · a8f4deb
1 parent 042aade
commit a8f4deb
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-shortcut",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -19,6 +19,7 @@
     "@docusaurus/preset-classic": "^2.4.0",
     "@mdx-js/react": "^1.6.22",
     "@popperjs/core": "^2.11.6",
+    "axios": "^1.3.5",
     "clsx": "^1.2.1",
     "lodash": "^4.0.0",
     "prism-react-renderer": "^1.3.5",

diff --git a/src/pages/_components/ShowcaseCard/index.tsx b/src/pages/_components/ShowcaseCard/index.tsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect,useCallback } from "react";
 import clsx from "clsx";
+import axios from 'axios';
 import Link from "@docusaurus/Link";
 import Translate from "@docusaurus/Translate";
 import copy from "copy-text-to-clipboard";
@@ -56,15 +57,6 @@ function ShowcaseCardTag({ tags }: { tags: TagType[] }) {
   );
 }
 
-/* function getCardImage(user: User): string {
-  return (
-    user.preview ??
-    `https://slorber-api-screenshot.netlify.app/${encodeURIComponent(
-      user.website,
-    )}/showcase`
-  );
-} */
-
 function ShowcaseCard({ user, isDescription }) {
   const [paragraphText, setParagraphText] = useState(
     isDescription ? user.description : user.desc_cn
@@ -90,13 +82,38 @@ function ShowcaseCard({ user, isDescription }) {
   //const image = getCardImage(user);
   // 复制
   const [copied, setShowCopied] = useState(false);
-  const handleCopyCode = () => {
-    if (user.description) {
-      copy(user.description);
+
+  const handleCopyClick = useCallback(async () => {
+    try {
+      // Update the copy count on the server
+      const response = await axios.post(`https://api-count.newzone.top/api/cards/${user.id}/copy`);
+      const updatedCount = response.data.copyCount;
+      if (user.description) {
+        copy(user.description);
+      }
+      setShowCopied(true);
+      setTimeout(() => setShowCopied(false), 2000);
+      // Update the copy count in the local state
+      setCopyCount(updatedCount);
+    } catch (error) {
+      console.error('Error updating copy count:', error);
     }
-    setShowCopied(true);
-    setTimeout(() => setShowCopied(false), 2000);
-  };
+  }, [user.id]);
+
+  const [copyCount, setCopyCount] = useState(0);
+
+  useEffect(() => {
+    const fetchCopyCount = async () => {
+      try {
+        const response = await axios.get(`https://api-count.newzone.top/api/cards/${user.id}/count`);
+        setCopyCount(response.data.count);
+      } catch (error) {
+        console.error('Error fetching copy count:', error);
+      }
+    };
+
+    fetchCopyCount();
+  }, [user.id]);
 
   return (
     <li key={userTitle} className="card shadow--md">
@@ -107,8 +124,11 @@ function ShowcaseCard({ user, isDescription }) {
         <div className={clsx(styles.showcaseCardHeader)}>
           <Heading as="h4" className={styles.showcaseCardTitle}>
             <Link href={user.website} className={styles.showcaseCardLink}>
-              {userTitle}
+              {userTitle} {' '}
             </Link>
+          <span className={styles.showcaseCardCopyCount}>
+            {copyCount > 0 && `🔥${copyCount}`}
+          </span>
           </Heading>
           {user.tags.includes("favorite") && (
             <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
@@ -129,7 +149,7 @@ function ShowcaseCard({ user, isDescription }) {
               styles.showcaseCardSrcBtn
             )}
             type="button"
-            onClick={handleCopyCode}
+            onClick={handleCopyClick}
           >
             {copied ? (
               <Translate>已复制</Translate>
@@ -139,9 +159,7 @@ function ShowcaseCard({ user, isDescription }) {
           </button>
         </div>
         <p className={styles.showcaseCardBody}>👉 {userRemark}</p>
-        {/* <p className={styles.showcaseCardBody}>{user.description}</p> */}
         <p onClick={handleParagraphClick} className={styles.showcaseCardBody}>{userDescription}</p>
-
       </div>
       <ul className={clsx("card__footer", styles.cardFooter)}>
         <ShowcaseCardTag tags={user.tags} />

diff --git a/src/pages/_components/ShowcaseCard/styles.module.css b/src/pages/_components/ShowcaseCard/styles.module.css
@@ -101,3 +101,6 @@
   margin-left: 6px;
   margin-right: 6px;
 }
+.showcaseCardCopyCount {
+  font-size: 14px;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2552,6 +2552,11 @@ asap@~2.0.3:
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 at-least-node@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
@@ -2576,6 +2581,15 @@ axios@^0.25.0:
   dependencies:
     follow-redirects "^1.14.7"
 
+axios@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.5.tgz#e07209b39a0d11848e3e341fa087acd71dadc542"
+  integrity sha512-glL/PvG/E+xCWwV8S6nCHcrfg1exGx7vxyUIivIA1iL7BIh6bePylCfVHwp6k13ao7SATxB6imau2kqY+I67kw==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-loader@^8.2.5:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.3.0.tgz#124936e841ba4fe8176786d6ff28add1f134d6a8"
@@ -3053,6 +3067,13 @@ combine-promises@^1.1.0:
   resolved "https://registry.yarnpkg.com/combine-promises/-/combine-promises-1.1.0.tgz#72db90743c0ca7aab7d0d8d2052fd7b0f674de71"
   integrity sha512-ZI9jvcLDxqwaXEixOhArm3r7ReIivsXkpbyEWyeOhzz1QS0iSgBPnWvEqvIQtYyamGCYA88gFhmUrs9hrrQ0pg==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 comma-separated-tokens@^1.0.0:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
@@ -3477,6 +3498,11 @@ del@^6.1.1:
     rimraf "^3.0.2"
     slash "^3.0.0"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -4012,7 +4038,7 @@ flux@^4.0.1:
     fbemitter "^3.0.0"
     fbjs "^3.0.1"
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.7:
+follow-redirects@^1.0.0, follow-redirects@^1.14.7, follow-redirects@^1.15.0:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -4036,6 +4062,15 @@ fork-ts-checker-webpack-plugin@^6.5.0:
     semver "^7.3.2"
     tapable "^1.0.0"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 [email protected]:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -5216,7 +5251,7 @@ [email protected]:
   dependencies:
     mime-db "~1.33.0"
 
-mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -6074,6 +6109,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 pump@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"