fix: search school

web/app/components/base/portal-to-follow-elem/index.tsx

@@ -6,6 +6,7 @@ import {
   flip,
   offset,
   shift,
+  size,
   useDismiss,
   useFloating,
   useFocus,
@@ -27,6 +28,7 @@ export type PortalToFollowElemOptions = {
   open?: boolean
   offset?: number | OffsetOptions
   onOpenChange?: (open: boolean) => void
+  triggerPopupSameWidth?: boolean
 }
 
 export function usePortalToFollowElem({
@@ -34,6 +36,7 @@ export function usePortalToFollowElem({
   open,
   offset: offsetValue = 0,
   onOpenChange: setControlledOpen,
+  triggerPopupSameWidth,
 }: PortalToFollowElemOptions = {}) {
   const setOpen = setControlledOpen
 
@@ -50,6 +53,12 @@ export function usePortalToFollowElem({
         padding: 5,
       }),
       shift({ padding: 5 }),
+      size({
+        apply({ rects, elements }) {
+          if (triggerPopupSameWidth)
+            elements.floating.style.width = `${rects.reference.width}px`
+        },
+      }),
     ],
   })
 

web/app/education-apply/components/hooks.ts

@@ -10,15 +10,16 @@ export const useEducation = () => {
   const {
     mutateAsync,
     isPending,
+    data,
   } = useEducationAutocomplete()
 
   const [prevSchools, setPrevSchools] = useState<string[]>([])
   const handleUpdateSchools = useCallback((searchParams: SearchParams) => {
     if (searchParams.keywords) {
       mutateAsync(searchParams).then((res) => {
-        const currentPage = searchParams.page || 1
+        const currentPage = searchParams.page || 0
         const resSchools = res.data
-        if (currentPage > 1)
+        if (currentPage > 0)
           setPrevSchools(prevSchools => [...(prevSchools || []), ...resSchools])
         else
           setPrevSchools(resSchools)
@@ -29,12 +30,15 @@ export const useEducation = () => {
   const { run: querySchoolsWithDebounced } = useDebounceFn((searchParams: SearchParams) => {
     handleUpdateSchools(searchParams)
   }, {
-    wait: 1000,
+    wait: 300,
   })
 
   return {
     schools: prevSchools,
+    setSchools: setPrevSchools,
     querySchoolsWithDebounced,
+    handleUpdateSchools,
     isLoading: isPending,
+    hasNext: data?.has_next,
   }
 }

web/app/education-apply/components/search-input.tsx

@@ -1,10 +1,9 @@
 import {
   useCallback,
-  useEffect,
+  useRef,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useDebounceFn } from 'ahooks'
 import { useEducation } from './hooks'
 import Input from '@/app/components/base/input'
 import {
@@ -25,29 +24,53 @@ const SearchInput = ({
   const [open, setOpen] = useState(false)
   const {
     schools,
-    isLoading,
+    setSchools,
     querySchoolsWithDebounced,
+    handleUpdateSchools,
+    hasNext,
   } = useEducation()
+  const pageRef = useRef(0)
+  const valueRef = useRef(value)
 
-  const {
+  const handleSearch = useCallback((debounced?: boolean) => {
-    run: handleSearch,
+    const keywords = valueRef.current
-  } = useDebounceFn(() => {
+    const page = pageRef.current
+    if (debounced) {
       querySchoolsWithDebounced({
-      keywords: value,
+        keywords,
-      page: 1,
+        page,
       })
-  }, {
+      return
-    wait: 300,
+    }
-  })
-  const handleValueChange = useCallback((e: { target: { value: string } }) => {
-    onChange(e.target.value)
-    handleSearch()
-  }, [handleSearch, onChange])
 
-  useEffect(() => {
+    handleUpdateSchools({
-    if (!isLoading && !open && schools.length)
+      keywords,
+      page,
+    })
+  }, [querySchoolsWithDebounced, handleUpdateSchools])
+
+  const handleValueChange = useCallback((e: any) => {
     setOpen(true)
-  }, [isLoading, open, schools])
+    setSchools([])
+    pageRef.current = 0
+    const inputValue = e.target.value
+    valueRef.current = inputValue
+    onChange(inputValue)
+    handleSearch(true)
+  }, [onChange, handleSearch, setSchools])
+
+  const handleScroll = useCallback((e: Event) => {
+    const target = e.target as HTMLDivElement
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+    } = target
+    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0 && hasNext) {
+      pageRef.current += 1
+      handleSearch()
+    }
+  }, [handleSearch, hasNext])
 
   return (
     <PortalToFollowElem
@@ -55,6 +78,7 @@ const SearchInput = ({
       onOpenChange={setOpen}
       placement='bottom'
       offset={4}
+      triggerPopupSameWidth
     >
       <PortalToFollowElemTrigger className='block w-full'>
         <Input
@@ -64,20 +88,31 @@ const SearchInput = ({
           onChange={handleValueChange}
         />
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
+      <PortalToFollowElemContent className='z-10'>
-        <div className='p-1 border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl'>
+        {
+          !!schools.length && value && (
+            <div
+              className='p-1 max-h-[330px] overflow-y-auto border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl'
+              onScroll={handleScroll as any}
+            >
               {
                 schools.map((school, index) => (
                   <div
                     key={index}
-                className='flex items-center px-2 py-1.5 h-8 system-md-regular text-text-secondary truncate'
+                    className='flex items-center px-2 py-1.5 h-8 system-md-regular text-text-secondary truncate cursor-pointer hover:bg-state-base-hover rounded-lg'
                     title={school}
+                    onClick={() => {
+                      onChange(school)
+                      setOpen(false)
+                    }}
                   >
                     {school}
                   </div>
                 ))
               }
             </div>
+          )
+        }
       </PortalToFollowElemContent>
     </PortalToFollowElem>
   )

web/service/use-education.ts

@@ -44,8 +44,8 @@ export const useEducationAutocomplete = () => {
     mutationFn: (searchParams: SearchParams) => {
       const {
         keywords = '',
-        page = 1,
+        page = 0,
-        limit = 20,
+        limit = 40,
       } = searchParams
       return get<{ data: string[]; has_next: boolean; curr_page: number }>(`/account/education/autocomplete?keywords=${keywords}&page=${page}&limit=${limit}`)
     },