Implement filter/search combined logic in SearchModal

components/SearchModal/index.scss

@@ -3,38 +3,52 @@
     flex-direction: column;
     min-height: 431px;
     width: 600px;
+    height: 480px;
     gap: 0;
     padding: 0;
 
     #Header {
-        border-top-left-radius: $unit;
+        border-bottom: 1px solid transparent;
-        border-top-right-radius: $unit;
         display: flex;
-        gap: $unit * 2.5;
+        flex-direction: column;
-        margin: 0;
+        gap: $unit;
-        padding: ($unit * 3) ($unit * 3) ($unit) ($unit * 3);
+        padding-bottom: $unit * 2;
-        position: sticky;
-        top: 0;
 
-        button {
+        &.scrolled {
-            background: transparent;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            border: none;
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
-            height: 42px;
-            padding: 0;
         }
 
-        label {
+        #Bar {
-            width: 100%;
+            border-top-left-radius: $unit;
+            border-top-right-radius: $unit;
+            display: flex;
+            gap: $unit * 2.5;
+            margin: 0;
+            padding: ($unit * 3) ($unit * 3) 0 ($unit * 3);
+            position: sticky;
+            top: 0;
 
-            .Input {
+            button {
-                background: $grey-90;
+                background: transparent;
                 border: none;
-                border-radius: calc($unit / 2);
+                height: 42px;
-                box-sizing: border-box;
+                padding: 0;
-                font-size: $font-regular;
+            }
-                padding: $unit * 1.5;
+
-                text-align: left;
+            label {
                 width: 100%;
+
+                .Input {
+                    background: $grey-90;
+                    border: none;
+                    border-radius: calc($unit / 2);
+                    box-sizing: border-box;
+                    font-size: $font-regular;
+                    padding: $unit * 1.5;
+                    text-align: left;
+                    width: 100%;
+                }
             }
         }
     }
@@ -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,106 +106,160 @@ const SearchModal = (props: Props) => {
         setOpen(false)
     }
 
+    function receiveFilters(filters: { [key: string]: number[] }) {
+        setCurrentPage(1)
+        setResults([])
+        setFilters(filters)
+    }
+
+    useEffect(() => {
+        // 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':
-                return renderWeaponSearchResults(results)
+                jsx = renderWeaponSearchResults()
                 break
             case 'summons':
-                return renderSummonSearchResults(results)
+                jsx = renderSummonSearchResults(results)
                 break
             case 'characters':
-                return renderCharacterSearchResults(results) 
+                jsx = renderCharacterSearchResults(results) 
                 break
         }
-    }
-
-    function renderWeaponSearchResults(results: { [key: string]: any }) {
-        const elements = results.map((result: Weapon) => {
-            return <WeaponResult 
-                key={result.id} 
-                data={result} 
-                onClick={() => { sendData(result) }} 
-            />
-        })
-
-        return (<ul id="Results">{elements}</ul>)
-    }
-
-    function renderSummonSearchResults(results: { [key: string]: any }) {
-        const elements = results.map((result: Summon) => {
-            return <SummonResult 
-                key={result.id} 
-                data={result} 
-                onClick={() => { sendData(result) }} 
-            />
-        })
-
-        return (<ul id="Results">{elements}</ul>)
-    }
-
-    function renderCharacterSearchResults(results: { [key: string]: any }) {
-        const elements = results.map((result: Character) => {
-            return <CharacterResult 
-                key={result.id} 
-                data={result} 
-                onClick={() => { sendData(result) }} 
-            />
-        })
-
-        return (<ul id="Results">{elements}</ul>)
-    }
-
-    function renderEmptyState() {
-        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 (
-            <div id="NoResults">
+            <InfiniteScroll
-                <h2>{string}</h2>
+                dataLength={ (results && results.length > 0) ? results.length : 0}
-            </div>
+                next={ () => setCurrentPage(currentPage + 1) }
+                hasMore={totalPages > currentPage}
+                scrollableTarget="Results"
+                loader={<div className="footer">Loading...</div>}>
+                    {jsx}
+            </InfiniteScroll>
         )
     }
 
-    function resetAndClose() {
+    function renderWeaponSearchResults() {
-        setQuery('')
+        let jsx: React.ReactNode
-        setResults({})
+        
-        setOpen(true)
+        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 jsx
+    }
+
+    function renderSummonSearchResults(results: { [key: string]: any }) {
+        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 jsx
+    }
+
+    function renderCharacterSearchResults(results: { [key: string]: any }) {
+        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 jsx
+    }
+    
+    function openChange() {
+        if (open) {
+            setQuery('')
+            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">
-                        <label className="search_label" htmlFor="search_input">
+                        <div id="Bar">
-                            <input 
+                            <label className="search_label" htmlFor="search_input">
-                                autoComplete="off"
+                                <input 
-                                type="text"
+                                    autoComplete="off"
-                                name="query" 
+                                    type="text"
-                                className="Input" 
+                                    name="query" 
-                                id="search_input"
+                                    className="Input" 
-                                ref={searchInput}
+                                    id="search_input"
-                                value={query}
+                                    ref={searchInput}
-                                placeholder={props.placeholderText}
+                                    value={query}
-                                onChange={inputChanged}
+                                    placeholder={props.placeholderText}
-                            />
+                                    onChange={inputChanged}
-                        </label> 
+                                />
-                        <Dialog.Close className="DialogClose" onClick={resetAndClose}>
+                            </label> 
-                            <CrossIcon />
+                            <Dialog.Close className="DialogClose" onClick={openChange}>
-                        </Dialog.Close>
+                                <CrossIcon />
+                            </Dialog.Close>
+                        </div>
+                        { (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>
-                    { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) }
                 </Dialog.Content>
                 <Dialog.Overlay className="Overlay" />
             </Dialog.Portal>