chore: remove analytics dialog

web/src/components/AnalyticsDialog.tsx

@@ -1,32 +0,0 @@
-import { Button, Modal, ModalDialog } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import AnalyticsView from "./AnalyticsView";
-import Icon from "./Icon";
-
-interface Props {
-  shortcutId: ShortcutId;
-  onClose: () => void;
-}
-
-const AnalyticsDialog: React.FC<Props> = (props: Props) => {
-  const { shortcutId, onClose } = props;
-  const { t } = useTranslation();
-
-  return (
-    <Modal open={true}>
-      <ModalDialog>
-        <div className="w-full flex flex-row justify-between items-center">
-          <span className="text-lg font-medium">{t("analytics.self")}</span>
-          <Button variant="plain" onClick={onClose}>
-            <Icon.X className="w-5 h-auto text-gray-600" />
-          </Button>
-        </div>
-        <div className="max-w-full w-80 sm:w-96">
-          <AnalyticsView className="grid grid-cols-1 gap-2" shortcutId={shortcutId} />
-        </div>
-      </ModalDialog>
-    </Modal>
-  );
-};
-
-export default AnalyticsDialog;

web/src/components/ShortcutActionsDropdown.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 import { shortcutService } from "../services";
 import useUserStore from "../stores/v1/user";
 import { showCommonDialog } from "./Alert";
-import AnalyticsDialog from "./AnalyticsDialog";
 import CreateShortcutDialog from "./CreateShortcutDialog";
 import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
 import Icon from "./Icon";
@@ -16,10 +16,10 @@ interface Props {
 const ShortcutActionsDropdown = (props: Props) => {
   const { shortcut } = props;
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const currentUser = useUserStore().getCurrentUser();
   const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
   const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
-  const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
   const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
 
   const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
@@ -33,6 +33,10 @@ const ShortcutActionsDropdown = (props: Props) => {
     });
   };
 
+  const gotoAnalytics = () => {
+    navigate(`/shortcut/${shortcut.id}#analytics`);
+  };
+
   return (
     <>
       <Dropdown
@@ -55,7 +59,7 @@ const ShortcutActionsDropdown = (props: Props) => {
             </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)}
+              onClick={gotoAnalytics}
             >
               <Icon.BarChart2 className="w-4 h-auto mr-2" /> {t("analytics.self")}
             </button>
@@ -82,8 +86,6 @@ const ShortcutActionsDropdown = (props: Props) => {
       )}
 
       {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
-
-      {showAnalyticsDialog && <AnalyticsDialog shortcutId={shortcut.id} onClose={() => setShowAnalyticsDialog(false)} />}
     </>
   );
 };

web/src/components/ShortcutCard.tsx

@@ -8,7 +8,6 @@ import { Link } from "react-router-dom";
 import { absolutifyLink } from "../helpers/utils";
 import useFaviconStore from "../stores/v1/favicon";
 import useViewStore from "../stores/v1/view";
-import AnalyticsDialog from "./AnalyticsDialog";
 import Icon from "./Icon";
 import ShortcutActionsDropdown from "./ShortcutActionsDropdown";
 import VisibilityIcon from "./VisibilityIcon";
@@ -23,7 +22,6 @@ const ShortcutView = (props: Props) => {
   const viewStore = useViewStore();
   const faviconStore = useFaviconStore();
   const [favicon, setFavicon] = useState<string | undefined>(undefined);
-  const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
   const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
 
   useEffect(() => {
@@ -124,18 +122,16 @@ const ShortcutView = (props: Props) => {
             </div>
           </Tooltip>
           <Tooltip title="View count" variant="solid" placement="top" arrow>
-            <div
+            <Link
+              to={`/shortcut/${shortcut.id}#analytics`}
               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)}
             >
               <Icon.BarChart2 className="w-4 h-auto mr-1" />
               {shortcut.view} visits
-            </div>
+            </Link>
           </Tooltip>
         </div>
       </div>
-
-      {showAnalyticsDialog && <AnalyticsDialog shortcutId={shortcut.id} onClose={() => setShowAnalyticsDialog(false)} />}
     </>
   );
 };

web/src/pages/ShortcutDetail.tsx

@@ -175,7 +175,7 @@ const ShortcutDetail = () => {
         </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">
+          <h3 id="analytics" 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>