Implement filter/search combined logic in SearchModal

components/SearchModal/index.scss

@@ -3,16 +3,29 @@
     flex-direction: column;
     min-height: 431px;
     width: 600px;
+    height: 480px;
     gap: 0;
     padding: 0;
 
     #Header {
+        border-bottom: 1px solid transparent;
+        display: flex;
+        flex-direction: column;
+        gap: $unit;
+        padding-bottom: $unit * 2;
+
+        &.scrolled {
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
+        }
+
+        #Bar {
             border-top-left-radius: $unit;
             border-top-right-radius: $unit;
             display: flex;
             gap: $unit * 2.5;
             margin: 0;
-        padding: ($unit * 3) ($unit * 3) ($unit) ($unit * 3);
+            padding: ($unit * 3) ($unit * 3) 0 ($unit * 3);
             position: sticky;
             top: 0;
 
@@ -38,6 +51,7 @@
                 }
             }
         }
+    }
 
     #Results {
         margin: 0;
@@ -45,6 +59,23 @@
         padding: 0 ($unit * 1.5);
         overflow-y: scroll;
 
+        h5.total {
+            font-size: $font-regular;
+            font-weight: $normal;
+            color: $grey-40;
+            padding: calc($unit / 2) ($unit * 1.5);
+        }
+
+        .footer {
+            align-items: center;
+            display: flex;
+            color: $grey-60;
+            font-size: $font-regular;
+            font-weight: $normal;
+            height: $unit * 10;
+            justify-content: center;
+        }
+
         .WeaponResult:last-child {
             margin-bottom: $unit * 1.5;
         }

components/SearchModal/index.tsx

@@ -1,12 +1,18 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useSnapshot } from 'valtio'
+import { useTranslation } from 'react-i18next'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { appState } from '~utils/appState'
 import api from '~utils/api'
 
 import * as Dialog from '@radix-ui/react-dialog'
 
+import CharacterSearchFilterBar from '~components/CharacterSearchFilterBar'
+import WeaponSearchFilterBar from '~components/WeaponSearchFilterBar'
+import SummonSearchFilterBar from '~components/SummonSearchFilterBar'
+
 import CharacterResult from '~components/CharacterResult'
 import WeaponResult from '~components/WeaponResult'
 import SummonResult from '~components/SummonResult'
@@ -28,15 +34,21 @@ const SearchModal = (props: Props) => {
     const router = useRouter()
     const locale = router.locale
 
+    const { t } = useTranslation('common')
+
     let searchInput = React.createRef<HTMLInputElement>()
+    let scrollContainer = React.createRef<HTMLDivElement>()
 
     const [objects, setObjects] = useState<{[id: number]: GridCharacter | GridWeapon | GridSummon}>()
+    const [filters, setFilters] = useState<{ [key: string]: number[] }>()
     const [open, setOpen] = useState(false)
     const [query, setQuery] = useState('')
-    const [results, setResults] = useState({})
+    const [results, setResults] = useState<(Weapon | Summon | Character)[]>([])
-    const [loading, setLoading] = useState(false)
+
-    const [message, setMessage] = useState('')
+    // Pagination states
-    const [totalResults, setTotalResults] = useState(0)
+    const [recordCount, setRecordCount] = useState(0)
+    const [currentPage, setCurrentPage] = useState(1)
+    const [totalPages, setTotalPages] = useState(1)
 
     useEffect(() => {
         setObjects(grid[props.object])
@@ -47,50 +59,46 @@ const SearchModal = (props: Props) => {
             searchInput.current.focus()
     }, [searchInput])
 
-    useEffect(() => {
-        if (query.length > 1) 
-            fetchResults()
-    }, [query])
-
     function inputChanged(event: React.ChangeEvent<HTMLInputElement>) {
         const text = event.target.value
         if (text.length) {
             setQuery(text)
-            setLoading(true)
-            setMessage('')
         } else {
             setQuery('')
-            setResults({})
-            setMessage('')
         }
     }
     
-    function fetchResults() {
+    function fetchResults({ replace = false }: { replace?: boolean }) {
-        // Exclude objects in grid from search results
+        api.search({
-        // unless the object is in the position that the user clicked
+            object: props.object, 
-        // so that users can replace object versions with 
+            query: query, 
-        // compatible other objects.
+            filters: filters, 
-        const excludes = (objects) ? Object.values(objects)
+            locale: locale, 
-            .filter(filterExclusions)
+            page: currentPage
-            .map((o) => { return (o.object) ? o.object.name.en : undefined }).join(',') : ''
+        }).then(response => {
+            setTotalPages(response.data.total_pages)
+            setRecordCount(response.data.count)
 
-        api.search(props.object, query, excludes, locale)
+            if (replace) {
-            .then(response => {
+                replaceResults(response.data.count, response.data.results)
-                setResults(response.data)
+            } else {
-                setTotalResults(response.data.length)
+                appendResults(response.data.results)
-                setLoading(false)
+            }
-            })
+        }).catch(error => {
-            .catch(error => {
+            console.error(error)
-                setMessage(error)
-                setLoading(false)
         }) 
     }
 
-    function filterExclusions(gridObject: GridCharacter | GridWeapon | GridSummon) {
+    function replaceResults(count: number, list: Weapon[] | Summon[] | Character[]) {
-        if (objects && gridObject.object && 
+        if (count > 0) {
-            gridObject.object.granblue_id === objects[props.fromPosition]?.object.granblue_id)
+            setResults(list)
-                return null
+        } else {
-        else return gridObject
+            setResults([])
+        }
+    }
+
+    function appendResults(list: Weapon[] | Summon[] | Character[]) {
+        setResults([...results, ...list])
     }
 
     function sendData(result: Character | Weapon | Summon) {
@@ -98,88 +106,134 @@ const SearchModal = (props: Props) => {
         setOpen(false)
     }
 
-    function renderResults() {
+    function receiveFilters(filters: { [key: string]: number[] }) {
-        switch(props.object) {
+        setCurrentPage(1)
-            case 'weapons':
+        setResults([])
-                return renderWeaponSearchResults(results)
+        setFilters(filters)
-                break
-            case 'summons':
-                return renderSummonSearchResults(results)
-                break
-            case 'characters':
-                return renderCharacterSearchResults(results) 
-                break
-        }
     }
 
-    function renderWeaponSearchResults(results: { [key: string]: any }) {
+    useEffect(() => {
-        const elements = results.map((result: Weapon) => {
+        // Current page changed
+        if (open && currentPage > 1) {
+            fetchResults({ replace: false })
+        } else if (open && currentPage == 1) {
+            fetchResults({ replace: true })
+        }
+    }, [currentPage])
+
+    useEffect(() => {
+        // Filters changed
+        if (open) {
+            setCurrentPage(1)
+            fetchResults({ replace: true })
+        }
+    }, [filters])
+
+    useEffect(() => {
+        // Query changed
+        if (open && query.length != 1) {
+            setCurrentPage(1)
+            fetchResults({ replace: true })
+        }
+    }, [query])
+
+    function renderResults() {
+        let jsx
+
+        switch(props.object) {
+            case 'weapons':
+                jsx = renderWeaponSearchResults()
+                break
+            case 'summons':
+                jsx = renderSummonSearchResults(results)
+                break
+            case 'characters':
+                jsx = renderCharacterSearchResults(results) 
+                break
+        }
+
+        return (
+            <InfiniteScroll
+                dataLength={ (results && results.length > 0) ? results.length : 0}
+                next={ () => setCurrentPage(currentPage + 1) }
+                hasMore={totalPages > currentPage}
+                scrollableTarget="Results"
+                loader={<div className="footer">Loading...</div>}>
+                    {jsx}
+            </InfiniteScroll>
+        )
+    }
+
+    function renderWeaponSearchResults() {
+        let jsx: React.ReactNode
+        
+        const castResults: Weapon[] = results as Weapon[]
+        if (castResults && Object.keys(castResults).length > 0) {
+            jsx = castResults.map((result: Weapon) => {
                 return <WeaponResult 
                     key={result.id} 
                     data={result} 
                     onClick={() => { sendData(result) }} 
                 />
             })
+        }
 
-        return (<ul id="Results">{elements}</ul>)
+        return jsx
     }
 
     function renderSummonSearchResults(results: { [key: string]: any }) {
-        const elements = results.map((result: Summon) => {
+        let jsx: React.ReactNode
+        
+        const castResults: Summon[] = results as Summon[]
+        if (castResults && Object.keys(castResults).length > 0) {
+            jsx = castResults.map((result: Summon) => {
                 return <SummonResult 
                     key={result.id} 
                     data={result} 
                     onClick={() => { sendData(result) }} 
                 />
             })
+        }
 
-        return (<ul id="Results">{elements}</ul>)
+        return jsx
     }
 
     function renderCharacterSearchResults(results: { [key: string]: any }) {
-        const elements = results.map((result: Character) => {
+        let jsx: React.ReactNode
+        
+        const castResults: Character[] = results as Character[]
+        if (castResults && Object.keys(castResults).length > 0) {
+            jsx = castResults.map((result: Character) => {
                 return <CharacterResult 
                     key={result.id} 
                     data={result} 
                     onClick={() => { sendData(result) }} 
                 />
             })
-
-        return (<ul id="Results">{elements}</ul>)
         }
 
-    function renderEmptyState() {
+        return jsx
-        let string = ''
-
-        if (query === '') {
-            string = `No ${props.object}`
-        } else if (query.length < 2) {
-            string = `Type at least 2 characters`
-        } else {
-            string = `No results found for '${query}'`
     }
     
-        return (
+    function openChange() {
-            <div id="NoResults">
+        if (open) {
-                <h2>{string}</h2>
-            </div>
-        )
-    }
-    
-    function resetAndClose() {
             setQuery('')
-        setResults({})
+            setResults([])
+            setOpen(false)
+        } else {
             setOpen(true)
         }
+    }
 
     return (
-        <Dialog.Root open={open} onOpenChange={setOpen}>
+        <Dialog.Root open={open} onOpenChange={openChange}>
             <Dialog.Trigger asChild>
                 {props.children}
             </Dialog.Trigger>
             <Dialog.Portal>
                 <Dialog.Content className="Search Dialog">
                     <div id="Header">
+                        <div id="Bar">
                             <label className="search_label" htmlFor="search_input">
                                 <input 
                                     autoComplete="off"
@@ -193,11 +247,19 @@ const SearchModal = (props: Props) => {
                                     onChange={inputChanged}
                                 />
                             </label> 
-                        <Dialog.Close className="DialogClose" onClick={resetAndClose}>
+                            <Dialog.Close className="DialogClose" onClick={openChange}>
                                 <CrossIcon />
                             </Dialog.Close>
                         </div>
-                    { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) }
+                        { (props.object === 'characters') ? <CharacterSearchFilterBar sendFilters={receiveFilters} /> : '' }
+                        { (props.object === 'weapons') ? <WeaponSearchFilterBar sendFilters={receiveFilters} /> : '' }
+                        { (props.object === 'summons') ? <SummonSearchFilterBar sendFilters={receiveFilters} /> : '' }
+                    </div>
+
+                    <div id="Results" ref={scrollContainer}>
+                        <h5 className="total">{t('search.result_count', { "record_count": recordCount })}</h5>
+                        { (open) ? renderResults() : ''}
+                    </div>
                 </Dialog.Content>
                 <Dialog.Overlay className="Overlay" />
             </Dialog.Portal>