Added search to websites dropdown.

src/components/common/Empty.module.css

@@ -8,4 +8,5 @@
   text-align: center;
   width: 100%;
   height: 100%;
+  min-height: 70px;
 }

src/components/input/WebsiteSelect.tsx

@@ -1,35 +1,61 @@
+import { useState, Key } from 'react';
 import { Dropdown, Item } from 'react-basics';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 import styles from './WebsiteSelect.module.css';
+import Empty from 'components/common/Empty';
 
 export function WebsiteSelect({
   websiteId,
   onSelect,
 }: {
-  websiteId: string;
+  websiteId?: string;
   onSelect?: (key: any) => void;
 }) {
-  const { formatMessage, labels } = useMessages();
+  const [query, setQuery] = useState('');
+  const [selectedId, setSelectedId] = useState<Key>(websiteId);
+  const { formatMessage, labels, messages } = useMessages();
   const { get, useQuery } = useApi();
-  const { data } = useQuery({
+  const { data: websites, isLoading } = useQuery({
-    queryKey: ['websites:me'],
+    queryKey: ['websites:me', { query }],
-    queryFn: () => get('/me/websites', { pageSize: 100 }),
+    queryFn: () => get('/me/websites', { query, pageSize: 5 }),
+  });
+  const { data: website } = useQuery({
+    queryKey: ['websites', { selectedId }],
+    queryFn: () => get(`/websites/${selectedId}`),
+    enabled: !!selectedId,
   });
 
-  const renderValue = value => {
+  const renderValue = () => {
-    return data?.data?.find(({ id }) => id === value)?.name;
+    return website?.name;
+  };
+
+  const renderEmpty = () => {
+    return <Empty message={formatMessage(messages.noResultsFound)} />;
+  };
+
+  const handleSelect = (value: any) => {
+    setSelectedId(value);
+    onSelect?.(value);
+  };
+
+  const handleSearch = (value: string) => {
+    setQuery(value);
   };
 
   return (
     <Dropdown
       menuProps={{ className: styles.dropdown }}
-      items={data?.data}
+      items={websites?.data}
-      value={websiteId}
+      value={selectedId as string}
       renderValue={renderValue}
-      onSelect={onSelect}
+      renderEmpty={renderEmpty}
+      onSelect={handleSelect}
       alignment="end"
       placeholder={formatMessage(labels.selectWebsite)}
+      allowSearch={true}
+      onSearch={handleSearch}
+      isLoading={isLoading}
     >
       {({ id, name }) => <Item key={id}>{name}</Item>}
     </Dropdown>

src/lib/types.ts

@@ -53,7 +53,7 @@ export interface SearchFilter {
 }
 
 export interface FilterResult<T> {
-  data: T[];
+  data: T;
   count: number;
   page: number;
   pageSize: number;

src/pages/api/websites/index.ts

@@ -45,10 +45,6 @@ export default async (
       req.query.id = userId;
     }
 
-    if (!req.query.pageSize) {
-      req.query.pageSize = 100;
-    }
-
     return userWebsites(req as any, res);
   }
 

src/queries/admin/website.ts

@@ -21,7 +21,7 @@ export async function getWebsiteByShareId(shareId: string) {
 export async function getWebsites(
   filters: WebsiteSearchFilter,
   options?: { include?: Prisma.WebsiteInclude },
-): Promise<FilterResult<Website>> {
+): Promise<FilterResult<Website[]>> {
   const { userId, teamId, includeTeams, onlyTeams, query } = filters;
   const mode = prisma.getSearchMode();
 
@@ -105,7 +105,7 @@ export async function getWebsites(
 export async function getWebsitesByUserId(
   userId: string,
   filters?: WebsiteSearchFilter,
-): Promise<FilterResult<Website>> {
+): Promise<FilterResult<Website[]>> {
   return getWebsites(
     { userId, ...filters },
     {
@@ -133,7 +133,7 @@ export async function getWebsitesByUserId(
 export async function getWebsitesByTeamId(
   teamId: string,
   filters?: WebsiteSearchFilter,
-): Promise<FilterResult<Website>> {
+): Promise<FilterResult<Website[]>> {
   return getWebsites(
     {
       teamId,