Add webflowOptions, add CollectionConst type

infinitered · Apr 21, 2023 · 1127ca1 · 1127ca1
1 parent 3f2a444
commit 1127ca1
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 85 deletions.
diff --git a/app/services/api/webflow-api.ts b/app/services/api/webflow-api.ts
@@ -13,6 +13,7 @@ import type {
   RawWorkshop,
 } from "./webflow-api.types"
 import {
+  CollectionConst,
   RECOMMENDATIONS,
   RECURRING_EVENTS,
   SCHEDULE,
@@ -38,105 +39,61 @@ const getCollectionById = async <T>(collectionId: string) => {
   return data.items
 }
 
-const useRecommendationsOptions = {
-  queryKey: [RECOMMENDATIONS.key, RECOMMENDATIONS.collectionId],
-  queryFn: async () => getCollectionById<RawRecommendations>(RECOMMENDATIONS.collectionId),
-} satisfies UseQueryOptions
+const webflowOptions = <Payload, Collection extends CollectionConst = CollectionConst>(
+  collection: Collection,
+) =>
+  ({
+    queryKey: [collection.key, collection.collectionId] as const,
+    queryFn: async () => getCollectionById<Payload>(collection.collectionId),
+  } satisfies UseQueryOptions)
 
-export const useRecommendations = () => {
-  return useQuery(useRecommendationsOptions)
-}
-
-const useRecurringEventsOptions = {
-  queryKey: [RECURRING_EVENTS.key, RECURRING_EVENTS.collectionId],
-  queryFn: async () => getCollectionById<RawRecurringEvents>(RECURRING_EVENTS.collectionId),
-} satisfies UseQueryOptions
-
-export const useRecurringEvents = () => {
-  return useQuery(useRecurringEventsOptions)
-}
+const recommendationsOptions = webflowOptions<RawRecommendations>(RECOMMENDATIONS)
+export const useRecommendations = () => useQuery(recommendationsOptions)
 
-const useSpeakersOptions = {
-  queryKey: [SPEAKERS.key, SPEAKERS.collectionId],
-  queryFn: async () => getCollectionById<RawSpeaker>(SPEAKERS.collectionId),
-} satisfies UseQueryOptions
+const recurringEventsOptions = webflowOptions<RawRecurringEvents>(RECURRING_EVENTS)
+export const useRecurringEvents = () => useQuery(recurringEventsOptions)
 
-export const useSpeakers = () => {
-  return useQuery(useSpeakersOptions)
-}
-
-const useSpeakerNamesOptions = {
-  queryKey: [SPEAKER_NAMES.key, SPEAKER_NAMES.collectionId],
-  queryFn: async () => getCollectionById<RawSpeakerName>(SPEAKER_NAMES.collectionId),
-} satisfies UseQueryOptions
-
-export const useSpeakerNames = () => {
-  return useQuery(useSpeakerNamesOptions)
-}
+const speakersOptions = webflowOptions<RawSpeaker>(SPEAKERS)
+export const useSpeakers = () => useQuery(speakersOptions)
 
-const useSponsorsOptions = {
-  queryKey: [SPONSORS.key, SPONSORS.collectionId],
-  queryFn: async () => getCollectionById<RawSponsor>(SPONSORS.collectionId),
-} satisfies UseQueryOptions
+const speakerNamesOptions = webflowOptions<RawSpeakerName>(SPEAKER_NAMES)
+export const useSpeakerNames = () => useQuery(speakerNamesOptions)
 
+const sponsorsOptions = webflowOptions<RawSponsor>(SPONSORS)
 export const useSponsors = () => {
-  const { data: sponsors, isLoading } = useQuery(useSponsorsOptions)
+  const { data: sponsors, ...rest } = useQuery(sponsorsOptions)
   const data = cleanedSponsors(sponsors)
 
-  return { isLoading, data }
+  return { data, ...rest }
 }
 
-const useTalksOptions = {
-  queryKey: [TALKS.key, TALKS.collectionId],
-  queryFn: async () => getCollectionById<RawTalk>(TALKS.collectionId),
-} satisfies UseQueryOptions
+const talksOptions = webflowOptions<RawTalk>(TALKS)
+export const useTalks = () => useQuery(talksOptions)
 
-export const useTalks = () => {
-  return useQuery(useTalksOptions)
-}
-
-const useVenuesOptions = {
-  queryKey: [VENUES.key, VENUES.collectionId],
-  queryFn: async () => getCollectionById<RawVenue>(VENUES.collectionId),
-} satisfies UseQueryOptions
-
-export const useVenues = () => {
-  return useQuery(useVenuesOptions)
-}
+const venuesOptions = webflowOptions<RawVenue>(VENUES)
+export const useVenues = () => useQuery(venuesOptions)
 
-const useWorkshopsOptions = {
-  queryKey: [WORKSHOPS.key, WORKSHOPS.collectionId],
-  queryFn: async () => getCollectionById<RawWorkshop>(WORKSHOPS.collectionId),
-} satisfies UseQueryOptions
+const workshopsOptions = webflowOptions<RawWorkshop>(WORKSHOPS)
+export const useWorkshops = () => useQuery(workshopsOptions)
 
-export const useWorkshops = () => {
-  return useQuery(useWorkshopsOptions)
-}
-
-const useScheduledEventsOptions = {
-  queryKey: [SCHEDULE.key, SCHEDULE.collectionId],
-  queryFn: async () => getCollectionById<RawScheduledEvent>(SCHEDULE.collectionId),
-} satisfies UseQueryOptions
-
-const useScheduledEventsQueries = [
-  useSpeakersOptions,
-  useWorkshopsOptions,
-  useRecurringEventsOptions,
-  useTalksOptions,
-  useScheduledEventsOptions,
+const scheduledEventsOptions = webflowOptions<RawScheduledEvent>(SCHEDULE)
+const scheduledEventsQueries = [
+  speakersOptions,
+  workshopsOptions,
+  recurringEventsOptions,
+  talksOptions,
+  scheduledEventsOptions,
 ] as const
-
 export const prefetchScheduledEvents = async () => {
   await Promise.all(
-    useScheduledEventsQueries.map(async (query) => {
+    scheduledEventsQueries.map(async (query) => {
       return queryClient.prefetchQuery(query)
     }),
   )
 }
-
 export const useScheduledEvents = () => {
   const queries = useQueries({
-    queries: useScheduledEventsQueries,
+    queries: scheduledEventsQueries,
   })
 
   const [speakers, workshops, recurringEvents, talks, scheduledEvents] = queries

diff --git a/app/services/api/webflow-consts.ts b/app/services/api/webflow-consts.ts
@@ -3,12 +3,12 @@ export const SITE_ID = "5ca38f35db5d2ea94aea469d"
 export const SPONSORS = {
   collectionId: "640a728fc24f8e73575fe189",
   key: "sponsors",
-}
+} as const
 
 export const SPEAKERS = {
   collectionId: "640a728fc24f8e94385fe188",
   key: "speakers",
-}
+} as const
 
 export const SPEAKER_NAMES = {
   collectionId: "640a728fc24f8e74d05fe18a",
@@ -23,32 +23,44 @@ export const WORKSHOPS = {
 export const SCHEDULE = {
   collectionId: "640a728fc24f8e63325fe185",
   key: "schedule",
-}
+} as const
 
 export const PAST_TALKS = {
   collectionId: "640a728fc24f8e76ef5fe186",
   key: "pastTalks",
-}
+} as const
 
 export const RECURRING_EVENTS = {
   collectionId: "640a728fc24f8e85a75fe18c",
   key: "recurringEvents",
-}
+} as const
 
 export const TALKS = {
   collectionId: "640a728fc24f8e31ee5fe18e",
   key: "talks",
-}
+} as const
 
 export const VENUES = {
   collectionId: "640a728fc24f8e553c5fe18d",
   key: "venues",
-}
+} as const
 
 export const RECOMMENDATIONS = {
   collectionId: "640a728fc24f8e083b5fe18f",
   key: "recommendations",
-}
+} as const
+
+export type CollectionConst =
+  | typeof SPONSORS
+  | typeof SPEAKERS
+  | typeof SPEAKER_NAMES
+  | typeof WORKSHOPS
+  | typeof SCHEDULE
+  | typeof PAST_TALKS
+  | typeof RECURRING_EVENTS
+  | typeof TALKS
+  | typeof VENUES
+  | typeof RECOMMENDATIONS
 
 // [NOTE] these keys probably have to change when webflow is updated
 // `/collections/${collectionId}` api will the keys