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

frontend/search/components/QueryClientProvider.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}

frontend/search/components/ngo/HostOfferLookupTable.tsx

@@ -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'}}

frontend/search/components/ngo/HostOfferLookupWrapper.tsx

@@ -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…"
+  return <>{
-  } else if (data?.get_offers) {
+    (!isFetching && data?.get_offers) ? <HostOfferLookupTable data={data}/> : "loading…"
-    return (<HostOfferLookupTable data={data}/>)
+  }</>
-  }
 }
 
 export default HostOfferLookupWrapper