granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix database pages and images

Browse source 
- Update DatabaseProvider to use SearchAdapter instead of direct fetch
- Fix RequestCache error by using cacheTTL instead of cache
- Update image cells to use shared image utilities with correct parameters
- Use only camelCase field names (granblueId) from transformed responses
This commit is contained in:
Justin Edmund 2025-09-20 02:46:13 -07:00
parent 100a04eda6
commit eaa9e1c847
5 changed files with 38 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/lib/api/adapters/search.adapter.ts
View file

@ -212,7 +212,7 @@ export class SearchAdapter extends BaseAdapter {
body: JSON.stringify(body),
credentials: 'omit',
// Cache search results for 5 minutes by default
cache: params.query ? 300000 : 0 // Don't cache empty searches
cacheTTL: params.query ? 300000 : 0 // Don't cache empty searches
})
}
@ -234,7 +234,7 @@ export class SearchAdapter extends BaseAdapter {
method: 'POST',
body: JSON.stringify(body),
credentials: 'omit',
cache: params.query ? 300000 : 0
cacheTTL: params.query ? 300000 : 0
})
}
@ -256,7 +256,7 @@ export class SearchAdapter extends BaseAdapter {
method: 'POST',
body: JSON.stringify(body),
credentials: 'omit',
cache: params.query ? 300000 : 0
cacheTTL: params.query ? 300000 : 0
})
}
@ -277,7 +277,7 @@ export class SearchAdapter extends BaseAdapter {
method: 'POST',
body: JSON.stringify(body),
credentials: 'omit',
cache: params.query ? 300000 : 0
cacheTTL: params.query ? 300000 : 0
})
}

4
src/lib/components/database/cells/CharacterImageCell.svelte
View file

@ -2,7 +2,7 @@
<script lang="ts">
import type { IRow } from 'wx-svelte-grid'
import { getCharacterImageUrl } from '$lib/utils/database'
import { getCharacterImage } from '$lib/features/database/detail/image'
interface Props {
row: IRow
@ -12,7 +12,7 @@
</script>
<div class="image-cell">
<img src={getCharacterImageUrl(row.granblue_id)} alt="" class="database-image" />
<img src={getCharacterImage(row.granblueId, '01', 'square')} alt="" class="database-image" />
</div>
<style lang="scss">

4
src/lib/components/database/cells/SummonImageCell.svelte
View file

@ -2,7 +2,7 @@
<script lang="ts">
import type { IRow } from 'wx-svelte-grid'
import { getSummonImageUrl } from '$lib/utils/database'
import { getSummonImage } from '$lib/features/database/detail/image'
interface Props {
row: IRow
@ -12,7 +12,7 @@
</script>
<div class="image-cell">
<img src={getSummonImageUrl(row.granblue_id)} alt="" class="database-image" />
<img src={getSummonImage(row.granblueId, 'square')} alt="" class="database-image" />
</div>
<style lang="scss">

4
src/lib/components/database/cells/WeaponImageCell.svelte
View file

@ -2,7 +2,7 @@
<script lang="ts">
import type { IRow } from 'wx-svelte-grid'
import { getWeaponImageUrl } from '$lib/utils/database'
import { getWeaponImage } from '$lib/features/database/detail/image'
interface Props {
row: IRow
@ -12,7 +12,7 @@
</script>
<div class="image-cell">
<img src={getWeaponImageUrl(row.granblue_id)} alt="" class="database-image" />
<img src={getWeaponImage(row.granblueId, 'square')} alt="" class="database-image" />
</div>
<style lang="scss">

59
src/lib/providers/DatabaseProvider.ts
View file

@ -1,7 +1,6 @@
import { RestDataProvider } from 'wx-grid-data-provider'
import { PUBLIC_SIERO_API_URL } from '$env/static/public'
const API_BASE = PUBLIC_SIERO_API_URL || 'http://localhost:3000'
import { searchAdapter } from '$lib/api/adapters/search.adapter'
import type { SearchParams } from '$lib/api/adapters/search.adapter'
interface DatabaseProviderOptions {
resource: 'weapons' | 'characters' | 'summons'
@ -19,18 +18,16 @@ interface APIResponse {
}
export class DatabaseProvider extends RestDataProvider {
private resource: string
private resource: 'weapons' | 'characters' | 'summons'
private pageSize: number
private currentPage: number = 1
private apiUrl: string
private totalCount: number = 0
private totalPages: number = 1
private searchQuery: string = ''
constructor(options: DatabaseProviderOptions) {
const apiUrl = `${API_BASE}/search/${options.resource}`
super(apiUrl, (item) => {
// Pass a dummy URL to parent since we'll override getData
super('dummy', (item) => {
// Normalize data if needed
if (item.name && typeof item.name === 'object') {
// Ensure name is accessible for display
@ -39,7 +36,6 @@ export class DatabaseProvider extends RestDataProvider {
return item
})
this.apiUrl = apiUrl
this.resource = options.resource
this.pageSize = options.pageSize || 20
}
@ -50,36 +46,37 @@ export class DatabaseProvider extends RestDataProvider {
const perPage = params?.per_page || this.pageSize
try {
const response = await fetch(this.apiUrl, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'X-Per-Page': perPage.toString()
},
body: JSON.stringify({
search: {
page: page,
per_page: perPage,
...(this.searchQuery && this.searchQuery.length >= 2 && { query: this.searchQuery })
}
})
})
if (!response.ok) {
throw new Error(`API request failed: ${response.statusText}`)
// Prepare search params
const searchParams: SearchParams = {
page: page,
per: perPage,
...(this.searchQuery && this.searchQuery.length >= 2 && { query: this.searchQuery })
}
const result = await response.json()
// Use the appropriate search method based on resource type
let result
switch (this.resource) {
case 'weapons':
result = await searchAdapter.searchWeapons(searchParams)
break
case 'characters':
result = await searchAdapter.searchCharacters(searchParams)
break
case 'summons':
result = await searchAdapter.searchSummons(searchParams)
break
default:
throw new Error(`Unknown resource type: ${this.resource}`)
}
// Store metadata for pagination
this.currentPage = page
if (result.meta) {
this.totalCount = result.meta.count || 0
this.totalPages = result.meta.total_pages || 1
this.totalPages = result.meta.totalPages || 1
// Update pageSize if it's different from the response
if (result.meta.per_page) {
this.pageSize = result.meta.per_page
if (result.meta.perPage) {
this.pageSize = result.meta.perPage
}
}