From 4d415193fb85a5bcbf3a8bb2c14d39434f36f172 Mon Sep 17 00:00:00 2001
From: elrrrrrrr <elrrrrrrr@gmail.com>
Date: Fri, 29 Mar 2024 11:49:14 +0800
Subject: [PATCH] feat: add vs query in trends (#78)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

> 在 trends 页面添加 vs 参数，保存当前比对信息用以分享
* 添加 vs 参数，以 `,` 进行分割
* 仅查看当前包时候不进行添加


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced the Trends page to manage query states, improving user
experience in filtering and viewing specific data sets based on query
parameters.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 src/slugs/trends/index.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/slugs/trends/index.tsx b/src/slugs/trends/index.tsx
index b9c8601..33c59c2 100644
--- a/src/slugs/trends/index.tsx
+++ b/src/slugs/trends/index.tsx
@@ -6,12 +6,15 @@ import { PageProps } from '@/pages/package/[...slug]';
 import { TotalDownloads } from '@/components/RecentDownloads';
 import { useCachedSearch } from '@/hooks/useSearch';
 import { DownOutlined } from '@ant-design/icons';
+import useQueryState from '@/hooks/useQueryState';
 
 const MAX_COUNT = 5;
 
-export default function Trends({ manifest: pkg, additionalInfo: needSync, version }: PageProps) {
+export default function Trends({ manifest: pkg }: PageProps) {
   const [search, setSearch] = useState('');
-  const [pkgs, setPkgs] = useState([pkg.name]);
+  const [vs, setVS] = useQueryState<string>('vs', '');
+  const [pkgs, setPkgs] = useState<string[]>(vs ? vs.split(',').slice(0, MAX_COUNT) : [pkg.name]);
+
   const { data: searchResult, isLoading } = useCachedSearch({
     keyword: search,
     page: 1,
@@ -37,8 +40,12 @@ export default function Trends({ manifest: pkg, additionalInfo: needSync, versio
           onSearch={setSearch}
           suffixIcon={suffix}
           placeholder="Please select"
-          defaultValue={pkgs}
-          onChange={setPkgs}
+          loading={isLoading}
+          defaultValue={[pkg.name]}
+          onChange={(v) => {
+            setPkgs(v);
+            setVS(v.join(','));
+          }}
           options={searchResult?.objects.map((object) => ({
             label: (
               <>