feat:add search (#342)

Signed-off-by: laixingyou <[email protected]>
oss-compass · Apr 10, 2024 · 8beaa7f · 8beaa7f
1 parent 4e4ff34
commit 8beaa7f
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 11 deletions.
diff --git a/apps/web/i18n b/apps/web/i18n
diff --git a/apps/web/src/modules/collection/MainContent.tsx b/apps/web/src/modules/collection/MainContent.tsx
@@ -120,7 +120,16 @@ const MainContent = ({
   const [compareMode, setCompareMode] = useState(false);
   const [compareIds, setCompareIds] = useState<string[]>([]);
 
-  const params = { ident: slug, page: 1, per: 30 };
+  const [keyword, setKeyword] = useState('');
+  const [sort, setSort] = useState('');
+
+  const params = {
+    ident: slug,
+    page: 1,
+    per: 30,
+    keyword,
+    sortOpts: [{ type: 'activity_score', direction: 'asc' }],
+  };
   const {
     data,
     status,
@@ -150,7 +159,7 @@ const MainContent = ({
 
   const lastItem = last(data?.pages);
   const total = lastItem?.collectionList.count || 0;
-
+  console.log(data, lastItem, total, hasNextPage);
   return (
     <div className="flex-1 overflow-y-auto">
       <div className="w-full">
@@ -161,6 +170,11 @@ const MainContent = ({
           total={total}
           compareMode={compareMode}
           onCompareModeChange={(v) => setCompareMode(v)}
+          keyword={keyword}
+          setKeyword={(v) => {
+            console.log(v);
+            setKeyword(v);
+          }}
         />
 
         <MainMobileHeader

diff --git a/apps/web/src/modules/collection/MainHeader.tsx b/apps/web/src/modules/collection/MainHeader.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { Collection } from '@modules/explore/type';
 import jsonData from '@public/data/collections.json';
 import classnames from 'classnames';
 import { getShortCompareLink } from '@common/utils';
-
+import { AiOutlineSearch } from 'react-icons/ai';
+import { useHotkeys } from 'react-hotkeys-hook';
 import Compare from './assets/compare.svg';
 
 const collectionsMap = jsonData as unknown as Record<string, Collection>;
@@ -17,13 +18,17 @@ const MainHeader = ({
   compareIds,
   compareMode,
   onCompareModeChange,
+  keyword,
+  setKeyword,
 }: {
   slug: string;
   nameKey: 'name_cn' | 'name';
   total: number;
   compareIds: string[];
   compareMode: boolean;
   onCompareModeChange: (v: boolean) => void;
+  keyword: string;
+  setKeyword: (v: string) => void;
 }) => {
   const router = useRouter();
 
@@ -33,6 +38,20 @@ const MainHeader = ({
     return collectionsMap[ident].slug === `/${slug}`;
   });
   const collection = ident ? collectionsMap[ident] : null;
+  const [value, setValue] = useState(keyword);
+
+  useHotkeys(
+    'enter',
+    (e, he) => {
+      e.preventDefault();
+      const press = he.key;
+      if (press === 'enter') {
+        if (!value) return;
+        setKeyword?.(value);
+      }
+    },
+    { enableOnTags: ['INPUT'] }
+  );
 
   return (
     <div className="flex px-8 pt-4 pb-5 md:hidden">
@@ -80,7 +99,7 @@ const MainHeader = ({
             onClick={() => {
               onCompareModeChange(true);
             }}
-            className="h-8 w-36 flex-none cursor-pointer border border-gray-500 text-center text-xs font-semibold leading-8"
+            className="h-8 flex-none cursor-pointer border border-gray-500 px-2 text-center text-xs font-semibold leading-8"
           >
             <div className="mr-2 inline-block align-text-bottom">
               <Compare />
@@ -90,6 +109,32 @@ const MainHeader = ({
           </div>
         )}
       </div>
+      <div className="ml-4 pt-1">
+        <div className="flex items-center border border-gray-500 px-2 md:px-2">
+          <input
+            value={value}
+            type="text"
+            className={classnames(
+              'h-[30px] w-full appearance-none bg-transparent text-sm outline-0',
+              'md:h-[30px] md:text-sm'
+            )}
+            placeholder={t('collection:search_repository')}
+            onChange={(event) => {
+              const val = event.target.value;
+              setValue(val);
+            }}
+            alt={'Type the name to insight into your project'}
+          />
+          <div
+            onClick={() => {
+              setKeyword(value);
+            }}
+            className="h-6 w-8 cursor-pointer select-none pl-2"
+          >
+            <AiOutlineSearch className="h-full w-full" />
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/packages/graphql/src/generated.ts b/packages/graphql/src/generated.ts
@@ -1658,9 +1658,11 @@ export type QueryCollectionHottestArgs = {
 
 export type QueryCollectionListArgs = {
   ident: Scalars['String'];
+  keyword?: InputMaybe<Scalars['String']>;
   level?: InputMaybe<Scalars['String']>;
   page?: InputMaybe<Scalars['Int']>;
   per?: InputMaybe<Scalars['Int']>;
+  sortOpts?: InputMaybe<Array<SortOptionInput>>;
 };
 
 export type QueryCommunityOverviewArgs = {
@@ -4392,6 +4394,8 @@ export type CollectionListQueryVariables = Exact<{
   level?: InputMaybe<Scalars['String']>;
   page?: InputMaybe<Scalars['Int']>;
   per?: InputMaybe<Scalars['Int']>;
+  keyword?: InputMaybe<Scalars['String']>;
+  sortOpts?: InputMaybe<Array<SortOptionInput> | SortOptionInput>;
 }>;
 
 export type CollectionListQuery = {
@@ -7961,8 +7965,15 @@ useCollectionHottestQuery.fetcher = (
     headers
   );
 export const CollectionListDocument = /*#__PURE__*/ `
-    query collectionList($ident: String!, $level: String, $page: Int, $per: Int) {
-  collectionList(ident: $ident, level: $level, page: $page, per: $per) {
+    query collectionList($ident: String!, $level: String, $page: Int, $per: Int, $keyword: String, $sortOpts: [SortOptionInput!]) {
+  collectionList(
+    ident: $ident
+    level: $level
+    page: $page
+    per: $per
+    keyword: $keyword
+    sortOpts: $sortOpts
+  ) {
     page
     totalPage
     count

diff --git a/packages/graphql/src/gql/query.graphql b/packages/graphql/src/gql/query.graphql
@@ -481,9 +481,22 @@ query collectionHottest($ident: String!, $limit: Int) {
     updatedAt
   }
 }
-
-query collectionList($ident: String!, $level: String, $page: Int, $per: Int) {
-  collectionList(ident: $ident, level: $level, page: $page, per: $per) {
+query collectionList(
+  $ident: String!
+  $level: String
+  $page: Int
+  $per: Int
+  $keyword: String
+  $sortOpts: [SortOptionInput!]
+) {
+  collectionList(
+    ident: $ident
+    level: $level
+    page: $page
+    per: $per
+    keyword: $keyword
+    sortOpts: $sortOpts
+  ) {
     page
     totalPage
     count