provide first query components

frontend/search/components/ngo/HostOfferLookupTable.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {GetOffersQuery} from "../../codegen/generates";
+
+type HostOfferLookupTableProps = {
+  data: GetOffersQuery
+}
+
+const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => {
+  return <>
+    { data.get_offers?.map(offer => (<div>{offer.contact_name_full}</div>)) }
+  </>
+}
+
+export default HostOfferLookupTable

frontend/search/components/ngo/HostOfferLookupWrapper.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import {Auth, useGetOffersQuery} from "../../codegen/generates";
+import testAuth from '../util/testAuth.json'
+import HostOfferLookupTable from "./HostOfferLookupTable";
+
+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}/>)
+  }
+}
+
+export default HostOfferLookupWrapper

frontend/search/components/util/testAuth.json

@@ -0,0 +1,4 @@
+{
+  "mail": "crewing@example-ngo.com",
+  "password": "Vr(+cFtUG=rsj2:/]*uR"
+}

frontend/search/pages/_app.tsx

@@ -1,8 +1,11 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import MyQueryClientProvider from "../components/QueryClientProvider";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <MyQueryClientProvider>
+    <Component {...pageProps} />
+  </MyQueryClientProvider>
 }
 
 export default MyApp

frontend/search/pages/index.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
+import HostOfferLookupWrapper from '../components/ngo/HostOfferLookupWrapper'
 import styles from '../styles/Home.module.css'
 
 const Home: NextPage = () => {
@@ -11,7 +12,7 @@ const Home: NextPage = () => {
       </Head>
 
       <main className={styles.main}>
-        Miau
+        <HostOfferLookupWrapper />
       </main>
 
     </div>