From 0e9e6c58733127563af2491c2d1d386d17cd7cd5 Mon Sep 17 00:00:00 2001
From: laixingyou <laixy7@gmail.com>
Date: Mon, 26 Feb 2024 19:25:43 +0800
Subject: [PATCH] fix:delete unnecessary url query

Signed-off-by: laixingyou <laixy7@gmail.com>
---
 .../ContributorTable/index.tsx                |   8 +-
 .../DataView/MetricDetail/MetricDashboard.tsx | 119 +++++++++++-------
 .../analyze/hooks/useHandleQueryParams.ts     |   8 ++
 3 files changed, 84 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/index.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/index.tsx
index 192e6403..c1779462 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/index.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/index.tsx
@@ -157,7 +157,7 @@ const MetricTable: React.FC<{
       }
     }
     if (filterOpts.find((i) => i.type === 'contribution_type')) {
-      sortOpts = sorter.field && {
+      sortOpts = sorter.order && {
         type:
           sorter.field === 'contribution'
             ? 'contribution_filterd'
@@ -165,14 +165,14 @@ const MetricTable: React.FC<{
         direction: sorter.order === 'ascend' ? 'asc' : 'desc',
       };
     } else {
-      sortOpts = sorter.field && {
+      sortOpts = sorter.order && {
         type: sorter.field,
         direction: sorter.order === 'ascend' ? 'asc' : 'desc',
       };
     }
     handleQueryParams({
-      filterOpts: JSON.stringify(filterOpts),
-      sortOpts: JSON.stringify(sortOpts),
+      filterOpts: filterOpts.length > 0 ? JSON.stringify(filterOpts) : null,
+      sortOpts: sortOpts && JSON.stringify(sortOpts),
     });
     setFilterOpts(filterOpts);
     setTableParams({
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricDashboard.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricDashboard.tsx
index dfb275ae..e877f7e8 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricDashboard.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricDashboard.tsx
@@ -120,15 +120,10 @@ const MetricBoxContributors: React.FC<{
         </div>
         <div>
           <div className="flex text-xl font-medium">
-            <div className="mt-1 mr-2 text-[#ccc]">
-              {getUserIcons(
-                data.highestContributionContributor.origin,
-                data.highestContributionContributor.name
-              )}
-            </div>
-            <div className="line-clamp-1">
-              {data.highestContributionContributor.name || '/'}
-            </div>
+            {getTopUser(
+              data.highestContributionContributor.origin,
+              data.highestContributionContributor.name
+            )}
           </div>
           <div className="line-clamp-1 pl-7 text-sm text-[#585858]">
             {t('analyze:metric_detail:top_contributor')}
@@ -328,44 +323,74 @@ const getIcons = (type: string) => {
       return <IoPeopleCircle />;
   }
 };
-const getUserIcons = (type, name) => {
-  switch (type) {
-    case 'github':
-      return (
-        <div className="relative h-[22px] w-[22px] overflow-hidden rounded-full border border-gray-100 p-0">
-          <Image
-            src={'https://github.com/' + name + '.png'}
-            onError={(e) => (e.currentTarget.src = '/images/github.png')}
-            unoptimized
-            fill={true}
-            style={{
-              objectFit: 'cover',
-            }}
-            alt="icon"
-            placeholder="blur"
-            blurDataURL="/images/github.png"
-          />
-        </div>
-      );
-    case 'gitee':
-      return (
-        <div className="relative h-[22px] w-[22px] overflow-hidden rounded-full border border-gray-100">
-          <Image
-            src={'https://gitee.com/' + name + '.png'}
-            onError={(e) =>
-              (e.currentTarget.src = '/images/logos/gitee-red.svg')
-            }
-            unoptimized
-            fill={true}
-            alt="icon"
-            placeholder="blur"
-            blurDataURL="/images/logos/gitee-red.svg"
-          />
-        </div>
-      );
-    // return <SiGitee color="#c71c27" className="mr-0" />;
-    default:
-      return <IoPersonCircle />;
+const getTopUser = (type, name) => {
+  let url = null;
+  let userIcon = null;
+  if (!name) {
+    userIcon = <IoPersonCircle />;
+  } else {
+    switch (type) {
+      case 'github':
+        url = 'https://github.com/' + name;
+        userIcon = (
+          <div className="relative h-[22px] w-[22px] overflow-hidden rounded-full border border-gray-100 p-0">
+            <Image
+              src={'https://github.com/' + name + '.png'}
+              onError={(e) => (e.currentTarget.src = '/images/github.png')}
+              unoptimized
+              fill={true}
+              style={{
+                objectFit: 'cover',
+              }}
+              alt="icon"
+              placeholder="blur"
+              blurDataURL="/images/github.png"
+            />
+          </div>
+        );
+        break;
+      case 'gitee':
+        url = 'https://gitee.com/' + name;
+        userIcon = (
+          <div className="relative h-[22px] w-[22px] overflow-hidden rounded-full border border-gray-100">
+            <Image
+              src={'https://gitee.com/' + name + '.png'}
+              onError={(e) =>
+                (e.currentTarget.src = '/images/logos/gitee-red.svg')
+              }
+              unoptimized
+              fill={true}
+              alt="icon"
+              placeholder="blur"
+              blurDataURL="/images/logos/gitee-red.svg"
+            />
+          </div>
+        );
+        break;
+      default:
+        userIcon = <IoPersonCircle />;
+        break;
+    }
   }
+
+  return (
+    <>
+      <div className="mt-1 mr-2 text-[#ccc]">{userIcon}</div>
+      <div className="line-clamp-1">
+        {url ? (
+          <a
+            className="whitespace-nowrap hover:text-[black] hover:underline"
+            href={url}
+            target="_blank"
+            rel={'noreferrer'}
+          >
+            {name}
+          </a>
+        ) : (
+          name || '/'
+        )}
+      </div>
+    </>
+  );
 };
 export default MetricDashboard;
diff --git a/apps/web/src/modules/analyze/hooks/useHandleQueryParams.ts b/apps/web/src/modules/analyze/hooks/useHandleQueryParams.ts
index 537bc0e5..bab4560d 100644
--- a/apps/web/src/modules/analyze/hooks/useHandleQueryParams.ts
+++ b/apps/web/src/modules/analyze/hooks/useHandleQueryParams.ts
@@ -1,11 +1,19 @@
 import { useRouter } from 'next/router';
 
 // 修改或新增查询参数
+const clearEmptyProperties = (obj) => {
+  Object.keys(obj).forEach(function (key) {
+    if (obj[key] === null || obj[key] === undefined || obj[key] === '') {
+      delete obj[key];
+    }
+  });
+};
 export const useHandleQueryParams = () => {
   const router = useRouter();
   const handleQueryParams = (newParams) => {
     const { pathname, query } = router;
     const newQueryParams = { ...query, ...newParams };
+    clearEmptyProperties(newQueryParams);
     router.push({
       pathname,
       query: newQueryParams,