make thwClient generic

src/components/block-content-ui/cmsClient.ts

@@ -7,10 +7,11 @@ import {
   SanityRef, SanityTransformHwHomePage
 } from '../../common/sanityIo/Types'
 
-import {WhySwitchSectionType} from "../BlockContentTypes";
+import {ThwServiceItemType, WhySwitchSectionType} from "../BlockContentTypes";
 import GroqQueries from "../../utils/groqQueries";
 import groqQueries from "../../utils/groqQueries";
 import {SanityHomePage} from "./static-pages/cmsStaticPagesClient";
+import {useQuery} from "react-query";
 
 const fetchLandingPage = (slug: string): Promise<SanityLandingPage> => {
   return sanityClient
@@ -292,6 +293,167 @@ const fetchRefs = async (sanityRefs: SanityRef[]): Promise<any> => {
   return Promise.all([...services, otherRefs])
 }
 
+const useFetchPageBySlugQuery = (slug: string) => {
+  console.log("slug", slug)
+  return useQuery(
+      ['fetchPageBySlug', slug],
+      async ({queryKey}) => {
+        const [_, pageSlug] = queryKey
+
+        console.log(" Lookin for page with slug", pageSlug, queryKey)
+        if (pageSlug) {
+          return sanityClient
+              .fetch(
+                  `*[slug.current == $pageSlug && _type == "homePage"]{
+          ${groqQueries.HOMEPAGE}
+        }`, {pageSlug})
+              .then((result) => {
+                if (result.length === 0) {
+                  return Promise.reject(Error("No results returned"))
+                }
+                return result[0]
+              }).catch(() => {
+                return Promise.reject(Error("Sanity Error getting pageSlug " + pageSlug))
+              })
+        } else {
+          return Promise.reject(Error("No page slug passed"))
+        }
+      },
+      {}
+  );
+}
+const useFetchMenuBySlugQuery = (menuSlug: string) => {
+  console.log("fetching menu with slug", menuSlug)
+  return useQuery(
+      menuSlug,
+      () => {
+        return sanityClient
+            .fetch(
+                `*[slug.current == $menuSlug]{
+          ${GroqQueries.MENUGROUPCONTAINER}
+       }`, {menuSlug: menuSlug ?? 'header-menu'}
+            )
+            .then((data: SanityMenuContainer[]) => {
+              return data[0]
+            })
+      },
+      {
+        staleTime: Infinity,
+        refetchInterval: false,
+        refetchOnWindowFocus: false
+      }
+  );
+}
+
+const useFetchMenuByRefQuery = (headerMenuRef?: SanityRef) => {
+  console.log("fetching menu with ref", headerMenuRef)
+
+  const menuId = headerMenuRef?._ref ?? "no-id"
+
+  return useQuery(
+      menuId,
+      () => {
+        return sanityClient
+            .fetch(
+                `*[_id == $menuId && _type == "menuContainer"]{
+          ${groqQueries.MENUGROUPCONTAINER}
+        }`, {menuId})
+            .then((result) => {
+              if (result.length === 0) {
+
+                return Promise.reject(Error("No results returned"))
+              }
+              return result[0]
+            }).catch(() => {
+              return Promise.reject(Error("Sanity Error getting pageSlug " + menuId))
+            })
+      },
+      {
+        staleTime: Infinity,
+        refetchInterval: false,
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+      }
+  );
+
+}
+
+//
+// const fetchLandingPageFooterMenu = (footerSlug?: string): Promise<SanityMenuContainer> => {
+//     const slug = footerSlug ?? 'footer-menu'
+//
+//     return sanityClient
+//         .fetch(
+//             `*[_type=="menuContainer" && slug.current == $slug]{
+//           ${GroqQueries.MENUGROUPCONTAINER}
+//        }`, {slug}
+//         )
+//         .then((data: SanityMenuContainer[]) => {
+//             return data[0]
+//         })
+// }
+
+const useFetchRefsQuery = (refs: SanityRef[]) => {
+  return useQuery(
+      ['fetchRefs'],
+      async () => {
+        return fetchRefs(refs)
+            .then((results: any[]) => {
+              if (results.length === 0) {
+                console.log("whew! after fetching a bunch of refs ", results)
+              }
+              return results
+            }).catch((e: any) => {
+              console.log("error getting services", e)
+              return []
+            })
+      },
+      {
+        staleTime: Infinity,
+        refetchInterval: false,
+        refetchOnWindowFocus: false
+      }
+  );
+}
+
+
+const useFetchServicesQuery = (pageSlug?: string) => {
+  return useQuery(
+      'fetchServices',
+      async () => {
+        console.log("fetchings services", pageSlug)
+        const serviceSlug = pageSlug
+
+        let serviceSlugClause: string = ''
+        if (serviceSlug) {
+          serviceSlugClause = " && slug.current != $serviceSlug"
+        }
+
+        const query = `*[_type == "transformServiceItem"${serviceSlugClause}]{
+             ${groqQueries.SERVICE}
+            }`
+
+        const params = serviceSlug ? {serviceSlug: serviceSlug} : {}
+
+        return sanityClient
+            .fetch(query, params)
+            .then((results: ThwServiceItemType[]) => {
+              if (results.length === 0) {
+                console.log("No Services present")
+              }
+              return results
+            }).catch((e: any) => {
+              console.log("error getting services", e)
+              return []
+            })
+      }
+      , {
+        staleTime: Infinity,
+        refetchInterval: false,
+        refetchOnWindowFocus: false
+      });
+}
+
 export default {
   fetchRef,
   fetchRefs,
@@ -305,5 +467,10 @@ export default {
   fetchLandingPageFooterMenu,
   fetchBlogCategories,
   fetchBlogGroup,
-  fetchWhySwitch
+  fetchWhySwitch,
+  useFetchPageBySlugQuery,
+  useFetchMenuBySlugQuery,
+  useFetchServicesQuery,
+  useFetchRefsQuery,
+  useFetchMenuByRefQuery
 }

src/components/page-context/PageProvider.tsx

@@ -1,10 +1,10 @@
 import React, {FunctionComponent, PropsWithChildren, useContext, useMemo, useReducer,} from 'react';
 import {SanityMenuContainer, SanityTransformHwHomePage} from "../../common/sanityIo/Types";
-import thwClient from "../transform-hw/thwClient";
 import {ThwServiceItemNoRefType} from "../BlockContentTypes";
 import PageContext from './PageContext';
 import SnackbarContext from "../modal-context/SnackbarContext";
 import {v4 as uuidv4} from 'uuid'
+import cmsClient from "../block-content-ui/cmsClient";
 type IProps = {};
 
 type PageProviderState = {
@@ -82,7 +82,7 @@ const PageProvider: FunctionComponent<IProps & PropsWithChildren> = (
     const [state, dispatch] = useReducer(reducer, initialState)
 
 
-    const loadedPageQuery = thwClient.useFetchPageBySlugQuery(state.pageSlug)
+    const loadedPageQuery = cmsClient.useFetchPageBySlugQuery(state.pageSlug)
 
     React.useEffect(() => {
         if (state.analyticsId) {