From f28d23eae7422e95078f3cf1f40c271674c47dd0 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 3 Aug 2023 21:56:12 +0800
Subject: [PATCH] feat: add analytic to shortcut detail

---
 web/src/components/AnalyticsDialog.tsx | 107 +--------------------
 web/src/components/AnalyticsView.tsx   | 127 +++++++++++++++++++++++++
 web/src/pages/ShortcutDetail.tsx       |  30 +++---
 3 files changed, 142 insertions(+), 122 deletions(-)
 create mode 100644 web/src/components/AnalyticsView.tsx

diff --git a/web/src/components/AnalyticsDialog.tsx b/web/src/components/AnalyticsDialog.tsx
index c0fca2b0..300a9645 100644
--- a/web/src/components/AnalyticsDialog.tsx
+++ b/web/src/components/AnalyticsDialog.tsx
@@ -1,6 +1,5 @@
 import { Button, Modal, ModalDialog } from "@mui/joy";
-import { useEffect, useState } from "react";
-import * as api from "../helpers/api";
+import AnalyticsView from "./AnalyticsView";
 import Icon from "./Icon";
 
 interface Props {
@@ -10,14 +9,6 @@ interface Props {
 
 const AnalyticsDialog: React.FC<Props> = (props: Props) => {
   const { shortcutId, onClose } = props;
-  const [analytics, setAnalytics] = useState<AnalysisData | null>(null);
-  const [selectedDeviceTab, setSelectedDeviceTab] = useState<"os" | "browser">("browser");
-
-  useEffect(() => {
-    api.getShortcutAnalytics(shortcutId).then(({ data }) => {
-      setAnalytics(data);
-    });
-  }, []);
 
   return (
     <Modal open={true}>
@@ -29,101 +20,7 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
           </Button>
         </div>
         <div className="max-w-full w-80 sm:w-96">
-          {analytics ? (
-            <>
-              <p className="w-full py-1 px-2">Top Sources</p>
-              <div className="w-full mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
-                <div className="w-full divide-y divide-gray-300">
-                  <div className="w-full flex flex-row justify-between items-center">
-                    <span className="py-1 px-2 text-left font-semibold text-sm text-gray-500">Source</span>
-                    <span className="py-1 pr-2 text-right font-semibold text-sm text-gray-500">Visitors</span>
-                  </div>
-                  <div className="w-full divide-y divide-gray-200">
-                    {analytics.referenceData.map((reference) => (
-                      <div key={reference.name} className="w-full flex flex-row justify-between items-center">
-                        <span className="whitespace-nowrap py-2 px-2 text-sm truncate text-gray-900">
-                          {reference.name ? (
-                            <a className="hover:underline hover:text-blue-600" href={reference.name} target="_blank">
-                              {reference.name}
-                            </a>
-                          ) : (
-                            "Direct"
-                          )}
-                        </span>
-                        <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{reference.count}</span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </div>
-
-              <div className="w-full mt-4 py-1 px-2 flex flex-row justify-between items-center">
-                <span>Devices</span>
-                <div>
-                  <button
-                    className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
-                      selectedDeviceTab === "browser"
-                        ? "border-blue-600 text-blue-600"
-                        : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
-                    }`}
-                    onClick={() => setSelectedDeviceTab("browser")}
-                  >
-                    Browser
-                  </button>
-                  <span className="text-gray-200 font-mono mx-1">/</span>
-                  <button
-                    className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
-                      selectedDeviceTab === "os"
-                        ? "border-blue-600 text-blue-600"
-                        : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
-                    }`}
-                    onClick={() => setSelectedDeviceTab("os")}
-                  >
-                    OS
-                  </button>
-                </div>
-              </div>
-
-              <div className="w-full mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
-                {selectedDeviceTab === "browser" ? (
-                  <div className="w-full divide-y divide-gray-300">
-                    <div className="w-full flex flex-row justify-between items-center">
-                      <span className="py-2 px-2 text-left text-sm font-semibold text-gray-500">Browsers</span>
-                      <span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">Visitors</span>
-                    </div>
-                    <div className="w-full divide-y divide-gray-200">
-                      {analytics.browserData.map((reference) => (
-                        <div key={reference.name} className="w-full flex flex-row justify-between items-center">
-                          <span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate">{reference.name || "Unknown"}</span>
-                          <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{reference.count}</span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                ) : (
-                  <div className="w-full divide-y divide-gray-300">
-                    <div className="w-full flex flex-row justify-between items-center">
-                      <span className="py-2 px-2 text-left text-sm font-semibold text-gray-500">Operating system</span>
-                      <span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">Visitors</span>
-                    </div>
-                    <div className="w-full divide-y divide-gray-200">
-                      {analytics.deviceData.map((device) => (
-                        <div key={device.name} className="w-full flex flex-row justify-between items-center">
-                          <span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate">{device.name || "Unknown"}</span>
-                          <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{device.count}</span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </>
-          ) : (
-            <div className="py-12 w-full flex flex-row justify-center items-center opacity-80">
-              <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
-              loading
-            </div>
-          )}
+          <AnalyticsView className="grid grid-cols-1 gap-2" shortcutId={shortcutId} />
         </div>
       </ModalDialog>
     </Modal>
diff --git a/web/src/components/AnalyticsView.tsx b/web/src/components/AnalyticsView.tsx
new file mode 100644
index 00000000..cf4968d2
--- /dev/null
+++ b/web/src/components/AnalyticsView.tsx
@@ -0,0 +1,127 @@
+import classNames from "classnames";
+import { useEffect, useState } from "react";
+import * as api from "../helpers/api";
+import Icon from "./Icon";
+
+interface Props {
+  shortcutId: ShortcutId;
+  className?: string;
+}
+
+const AnalyticsView: React.FC<Props> = (props: Props) => {
+  const { shortcutId, className } = props;
+  const [analytics, setAnalytics] = useState<AnalysisData | null>(null);
+  const [selectedDeviceTab, setSelectedDeviceTab] = useState<"os" | "browser">("browser");
+
+  useEffect(() => {
+    api.getShortcutAnalytics(shortcutId).then(({ data }) => {
+      setAnalytics(data);
+    });
+  }, []);
+
+  return (
+    <div className={classNames("w-full", className)}>
+      {analytics ? (
+        <>
+          <div className="w-full">
+            <p className="w-full h-8 px-2">Top Sources</p>
+            <div className="w-full mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
+              <div className="w-full divide-y divide-gray-300">
+                <div className="w-full flex flex-row justify-between items-center">
+                  <span className="py-2 px-2 text-left font-semibold text-sm text-gray-500">Source</span>
+                  <span className="py-2 pr-2 text-right font-semibold text-sm text-gray-500">Visitors</span>
+                </div>
+                <div className="w-full divide-y divide-gray-200">
+                  {analytics.referenceData.map((reference) => (
+                    <div key={reference.name} className="w-full flex flex-row justify-between items-center">
+                      <span className="whitespace-nowrap py-2 px-2 text-sm truncate text-gray-900">
+                        {reference.name ? (
+                          <a className="hover:underline hover:text-blue-600" href={reference.name} target="_blank">
+                            {reference.name}
+                          </a>
+                        ) : (
+                          "Direct"
+                        )}
+                      </span>
+                      <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{reference.count}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="w-full">
+            <div className="w-full h-8 px-2 flex flex-row justify-between items-center">
+              <span>Devices</span>
+              <div>
+                <button
+                  className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
+                    selectedDeviceTab === "browser"
+                      ? "border-blue-600 text-blue-600"
+                      : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                  }`}
+                  onClick={() => setSelectedDeviceTab("browser")}
+                >
+                  Browser
+                </button>
+                <span className="text-gray-200 font-mono mx-1">/</span>
+                <button
+                  className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
+                    selectedDeviceTab === "os"
+                      ? "border-blue-600 text-blue-600"
+                      : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                  }`}
+                  onClick={() => setSelectedDeviceTab("os")}
+                >
+                  OS
+                </button>
+              </div>
+            </div>
+
+            <div className="w-full mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
+              {selectedDeviceTab === "browser" ? (
+                <div className="w-full divide-y divide-gray-300">
+                  <div className="w-full flex flex-row justify-between items-center">
+                    <span className="py-2 px-2 text-left text-sm font-semibold text-gray-500">Browsers</span>
+                    <span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">Visitors</span>
+                  </div>
+                  <div className="w-full divide-y divide-gray-200">
+                    {analytics.browserData.map((reference) => (
+                      <div key={reference.name} className="w-full flex flex-row justify-between items-center">
+                        <span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate">{reference.name || "Unknown"}</span>
+                        <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{reference.count}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div className="w-full divide-y divide-gray-300">
+                  <div className="w-full flex flex-row justify-between items-center">
+                    <span className="py-2 px-2 text-left text-sm font-semibold text-gray-500">Operating system</span>
+                    <span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">Visitors</span>
+                  </div>
+                  <div className="w-full divide-y divide-gray-200">
+                    {analytics.deviceData.map((device) => (
+                      <div key={device.name} className="w-full flex flex-row justify-between items-center">
+                        <span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate">{device.name || "Unknown"}</span>
+                        <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{device.count}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="py-12 w-full flex flex-row justify-center items-center opacity-80">
+          <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
+          loading
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AnalyticsView;
diff --git a/web/src/pages/ShortcutDetail.tsx b/web/src/pages/ShortcutDetail.tsx
index ba1ed300..df0a2e50 100644
--- a/web/src/pages/ShortcutDetail.tsx
+++ b/web/src/pages/ShortcutDetail.tsx
@@ -5,7 +5,7 @@ import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useLoaderData, useNavigate } from "react-router-dom";
 import { showCommonDialog } from "../components/Alert";
-import AnalyticsDialog from "../components/AnalyticsDialog";
+import AnalyticsView from "../components/AnalyticsView";
 import Dropdown from "../components/common/Dropdown";
 import CreateShortcutDialog from "../components/CreateShortcutDialog";
 import GenerateQRCodeDialog from "../components/GenerateQRCodeDialog";
@@ -32,7 +32,6 @@ const ShortcutDetail = () => {
   });
   const [favicon, setFavicon] = useState<string | undefined>(undefined);
   const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
-  const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
   const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
   const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
 
@@ -70,7 +69,7 @@ const ShortcutDetail = () => {
           {favicon ? (
             <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
           ) : (
-            <Icon.CircleSlash className="w-6 h-auto text-gray-400" />
+            <Icon.CircleSlash className="w-full h-auto text-gray-400" />
           )}
         </div>
         <a
@@ -118,12 +117,6 @@ const ShortcutDetail = () => {
                   >
                     <Icon.Edit className="w-4 h-auto mr-2" /> Edit
                   </button>
-                  <button
-                    className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
-                    onClick={() => setShowAnalyticsDialog(true)}
-                  >
-                    <Icon.BarChart2 className="w-4 h-auto mr-2" /> Analytics
-                  </button>
                   <button
                     className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                     onClick={() => {
@@ -141,7 +134,7 @@ const ShortcutDetail = () => {
         <div className="mt-4 ml-1 flex flex-row justify-start items-start flex-wrap gap-2">
           {shortcut.tags.map((tag) => {
             return (
-              <span key={tag} className="max-w-[8rem] truncate text-gray-400 text font-mono leading-4 cursor-pointer hover:text-gray-600">
+              <span key={tag} className="max-w-[8rem] truncate text-gray-400 text font-mono leading-4">
                 #{tag}
               </span>
             );
@@ -156,21 +149,26 @@ const ShortcutDetail = () => {
             </div>
           </Tooltip>
           <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
-            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm">
+            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
               <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
               {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
             </div>
           </Tooltip>
           <Tooltip title="View count" variant="solid" placement="top" arrow>
-            <div
-              className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm"
-              onClick={() => setShowAnalyticsDialog(true)}
-            >
+            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
               <Icon.BarChart2 className="w-4 h-auto mr-1" />
               {shortcut.view} visits
             </div>
           </Tooltip>
         </div>
+
+        <div className="w-full flex flex-col mt-8">
+          <h3 className="pl-1 font-medium text-lg flex flex-row justify-start items-center">
+            <Icon.BarChart2 className="w-6 h-auto mr-1" />
+            Analytics
+          </h3>
+          <AnalyticsView className="mt-4 w-full grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4" shortcutId={shortcut.id} />
+        </div>
       </div>
 
       {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
@@ -186,8 +184,6 @@ const ShortcutDetail = () => {
           }
         />
       )}
-
-      {showAnalyticsDialog && <AnalyticsDialog shortcutId={shortcut.id} onClose={() => setShowAnalyticsDialog(false)} />}
     </>
   );
 };