Merge pull request #5 from internet4refugees/feature/search-frontend

main
winzlieb 7 months ago committed by GitHub
commit 09259d997f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      frontend/search/components/QueryClientProvider.tsx
  2. 31
      frontend/search/components/ngo/HostOfferLookupTable.tsx
  3. 9
      frontend/search/components/ngo/HostOfferLookupWrapper.tsx

@ -4,7 +4,7 @@ import {ReactQueryDevtools} from 'react-query/devtools'
const queryClient = new QueryClient()
export default function MyQueryClientProvider({children}: {children: React.Component}) {
export default function MyQueryClientProvider({children}: {children: React.ReactChild}) {
return (
<QueryClientProvider client={queryClient}>
{children}

@ -1,4 +1,4 @@
import React from 'react'
import React, {ReactNode} from 'react'
import { CheckBoxOutlineBlank, CheckBox } from '@mui/icons-material';
@ -21,6 +21,16 @@ type HostOfferLookupTableProps = {
type ColumnRaw = { name: string; header: string; type: string }
/**
* you can generate an inital raw column json by running the following
* function
*/
const makeColumnDefinition = (data: any ) => Object.keys(data)
.map(k => ({
name: k,
header: k.replace(/_/g, ' '),
type: typeof data[k]}))
const columnsRaw: ColumnRaw[] = [
{
"name": "beds",
@ -117,14 +127,17 @@ const operatorsForType = {
boolean: 'eq'
}
const customRendererForType = [
type CustomRendererMatcher = {
match: { [key: string]: any }
render: (...args: any[]) => ReactNode
}
const customRendererForType: CustomRendererMatcher[] = [
{
id: 'bool2checkbox',
match: {type: 'boolean'},
render: ({ value }) => !!value ? <CheckBox /> : <CheckBoxOutlineBlank />
},
{
id: 'email',
match: {type: 'string', name: 'contact_email'},
render: ({ value }) => (<a href={`mailto:${value}`} >{value}</a>)
}
@ -135,14 +148,13 @@ const findMatchingRenderer = (c: ColumnRaw) => {
// @ts-ignore
return Object.keys(d.match).reduce((prev, cur) => prev && c[cur] === d.match[cur] , true )
})
console.log(customRenderer)
return customRenderer?.render
}
const columns: TypeColumn[] = columnsRaw
.map(c => ({
...c,
render: findMatchingRenderer(c) || null,
render: findMatchingRenderer(c) || undefined,
filterEditor: filterMappings[c.type as 'string' | 'number' | 'boolean' | 'date']
}))
@ -157,12 +169,6 @@ const defaultFilterValue: TypeFilterValue = columns
} as unknown as TypeSingleFilterValue
} )
const makeColumnDefinition = (data: any ) => Object.keys(data)
.map(k => ({
name: k,
header: k.replace(/_/g, ' '),
type: typeof data[k]}))
const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => {
const dataSource = data.get_offers || []
return <>
@ -174,6 +180,7 @@ const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => {
defaultFilterValue={defaultFilterValue}
rowIndexColumn
enableSelection
enableColumnAutosize={false}
columns={columns}
dataSource={dataSource}
style={{minHeight: '1000px'}}

@ -7,11 +7,10 @@ type HostLookupWrapperProps = Record<string, never>
const HostOfferLookupWrapper = ({}: HostLookupWrapperProps) => {
const {data, isFetching} = useGetOffersQuery({auth: testAuth as Auth}, {staleTime: 60 * 1000})
if (isFetching) {
return "loading…"
} else if (data?.get_offers) {
return (<HostOfferLookupTable data={data}/>)
}
return <>{
(!isFetching && data?.get_offers) ? <HostOfferLookupTable data={data}/> : "loading…"
}</>
}
export default HostOfferLookupWrapper

Loading…
Cancel
Save