feat: ai grant program finder

src/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Skeleton } from '@nextui-org/react';
+
+import { cn } from '@/shared/utils/cn';
+import { useIsMounted } from '@/shared/hooks/use-is-mounted';
+
+interface Props {
+  isDesktop?: boolean;
+}
+
+export const AiGrantProgramFinderSkeleton = ({ isDesktop }: Props) => {
+  const isMounted = useIsMounted();
+
+  return isMounted ? null : (
+    <div
+      className={cn('h-full', {
+        'lg:hidden': !isDesktop,
+        'hidden lg:block': isDesktop,
+      })}
+    >
+      <div className="mt-5 flex h-full flex-col gap-4 rounded-20 border border-white/10 p-4 md:mt-6 lg:mt-0">
+        <h2 className="text-xl font-semibold">AI Grant Program Finder</h2>
+        <span className="text-sm">
+          Our AI assistant will help you identify which grant program suits your
+          application best
+        </span>
+        <Skeleton className="min-h-[88px] grow rounded-lg" />
+        <Skeleton className="h-10 w-full rounded-lg" />
+      </div>
+    </div>
+  );
+};

src/grants/components/ai-grant-program-finder.tsx → src/grants/components/ai-grant-program-finder/ai-grant-program-finder.tsx

@@ -1,14 +1,20 @@
 'use client';
 
+import { useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { Button, Textarea } from '@nextui-org/react';
+import { useAtom, useAtomValue } from 'jotai';
 
 import { useIsMounted } from '@/shared/hooks/use-is-mounted';
 import { useIsDesktop } from '@/shared/hooks/use-media-query';
 import { AiIcon } from '@/shared/components/icons/ai-icon';
 
 import { GRANTS_PORTAL_IDS } from '@/grants/core/constants';
+import {
+  aiGrantFinderPending,
+  aiGrantFinderQueryAtom,
+} from '@/grants/core/atoms';
 
 export const AiGrantProgramFinder = () => {
   const isMounted = useIsMounted();
@@ -21,6 +27,26 @@ export const AiGrantProgramFinder = () => {
   const portal =
     typeof window === 'undefined' ? null : document.getElementById(portalId);
 
+  const isPending = useAtomValue(aiGrantFinderPending);
+  const [aiQuery, setAiQuery] = useAtom(aiGrantFinderQueryAtom);
+
+  const [aiQueryInput, setAiQueryInput] = useState('');
+  const onChangeAiQuery: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setAiQueryInput(e.target.value);
+  };
+
+  const onFind = () => {
+    setAiQuery(aiQueryInput);
+  };
+
+  const onClear = () => {
+    setAiQuery('');
+    setAiQueryInput('');
+  };
+
+  const buttonText = !!aiQuery && !isPending ? 'Reset' : 'Find';
+  const onClick = aiQuery ? onClear : onFind;
+
   if (!isMounted || !portal) return null;
 
   return createPortal(
@@ -31,16 +57,24 @@ export const AiGrantProgramFinder = () => {
         application best
       </span>
       <Textarea
+        isDisabled={isPending}
+        value={aiQuery || aiQueryInput}
+        onChange={onChangeAiQuery}
         classNames={{
           base: 'grow',
           inputWrapper: 'h-full bg-white/5 grow rounded-lg',
           input: 'placeholder:text-cool-gray placeholder:text-sm text-base',
         }}
         placeholder="Describe your project here"
       />
-      <Button className="is-active mx-auto w-full rounded-lg text-sm font-semibold text-black">
+      <Button
+        isLoading={isPending}
+        isDisabled={!aiQueryInput && !aiQuery}
+        className="is-active mx-auto w-full rounded-lg text-sm font-semibold text-black"
+        onClick={onClick}
+      >
         <AiIcon />
-        <span className='-ml-1'>Find</span>
+        <span className="-ml-1">{buttonText}</span>
       </Button>
     </div>,
     portal,

src/grants/components/ai-grant-program-finder/index.ts

@@ -0,0 +1 @@
+export * from './ai-grant-program-finder';

src/grants/components/grant-list/ai-grant-list.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+import { Spinner } from '@nextui-org/react';
+
+import { VirtualWrapper } from '@/shared/components/virtual-wrapper';
+
+import { GrantListItem } from '@/grants/components/grant-list/grant-list-item';
+import { useAiGrantList } from '@/grants/components/grant-list/use-ai-grant-list';
+
+export const AiGrantList = () => {
+  const { grants, error, inViewRef, hasNextPage, isPending } = useAiGrantList();
+
+  const lastItem = useMemo(() => {
+    if (error) return <p>Error: {error.message}</p>;
+
+    if (!hasNextPage) return <p>No more grants available.</p>;
+
+    return (
+      <div ref={inViewRef} className="flex w-full justify-center">
+        <Spinner color="white" />
+      </div>
+    );
+  }, [error, hasNextPage, inViewRef]);
+
+  if (isPending) return <p>Loading Grants ...</p>;
+
+  if (!grants.length) {
+    return error ? <p>Error: {error.message}</p> : <p>No grants found.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <VirtualWrapper count={grants.length}>
+        {(index) => (
+          <div className="pt-6 lg:pt-8">
+            <GrantListItem grant={grants[index]} />
+          </div>
+        )}
+      </VirtualWrapper>
+
+      {lastItem}
+    </div>
+  );
+};

src/grants/components/grant-list/grant-list-items.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+
+import { Spinner } from '@nextui-org/react';
+
+import { VirtualWrapper } from '@/shared/components/virtual-wrapper';
+
+import { Grant } from '@/grants/core/schemas';
+import { GrantListItem } from '@/grants/components/grant-list/grant-list-item';
+
+interface Props {
+  grants: Grant[];
+  error: Error | null;
+  inViewRef: (node?: Element | null) => void;
+  hasNextPage: boolean;
+  isPending: boolean;
+}
+
+export const GrantListItems = (props: Props) => {
+  const { grants, error, inViewRef, hasNextPage, isPending } = props;
+
+  const lastItem = useMemo(() => {
+    if (error) return <p>Error: {error.message}</p>;
+
+    if (!hasNextPage) return <p>No more grants to display.</p>;
+
+    return (
+      <div ref={inViewRef} className="flex w-full justify-center">
+        <Spinner color="white" />
+      </div>
+    );
+  }, [error, hasNextPage, inViewRef]);
+
+  if (isPending) return <p>Loading Grants ...</p>;
+
+  if (!grants.length) {
+    return error ? <p>Error: {error.message}</p> : <p>No grants found.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <VirtualWrapper count={grants.length}>
+        {(index) => (
+          <div className="pt-6 lg:pt-8">
+            <GrantListItem grant={grants[index]} />
+          </div>
+        )}
+      </VirtualWrapper>
+
+      {lastItem}
+    </div>
+  );
+};

src/grants/components/grant-list/grant-list.tsx

@@ -1,48 +1,38 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useEffect } from 'react';
 
-import { Spinner } from '@nextui-org/react';
+import { useAtom, useAtomValue } from 'jotai';
 
-import { VirtualWrapper } from '@/shared/components/virtual-wrapper';
+import {
+  aiGrantFinderPending,
+  aiGrantFinderQueryAtom,
+} from '@/grants/core/atoms';
+import { GrantListItems } from '@/grants/components/grant-list/grant-list-items';
+import { useAiGrantList } from '@/grants/components/grant-list/use-ai-grant-list';
 
-import { GrantListItem } from './grant-list-item';
 import { useGrantList } from './use-grant-list';
 
-export const GrantList = () => {
-  // TODO: JOB-682
-
-  const { grants, error, inViewRef, hasNextPage, isPending } = useGrantList();
-
-  const lastItem = useMemo(() => {
-    if (error) return <p>Error: {error.message}</p>;
-
-    if (!hasNextPage) return <p>No more grants available.</p>;
-
-    return (
-      <div ref={inViewRef} className="flex w-full justify-center">
-        <Spinner color="white" />
-      </div>
-    );
-  }, [error, hasNextPage, inViewRef]);
+export const FetchedGrantList = () => {
+  const props = useGrantList();
+  return <GrantListItems {...props} />;
+};
 
-  if (isPending) return <p>Loading Grants ...</p>;
+export const AiGrantList = () => {
+  const props = useAiGrantList();
+  const [isPending, setIsPending] = useAtom(aiGrantFinderPending);
 
-  if (!grants.length) {
-    return error ? <p>Error: {error.message}</p> : <p>No grants found.</p>;
-  }
+  // Sync pending
+  useEffect(() => {
+    if (isPending !== props.isPending) {
+      setIsPending(props.isPending);
+    }
+  }, [isPending, props.isPending, setIsPending]);
 
-  return (
-    <div className="flex flex-col gap-4">
-      <VirtualWrapper count={grants.length}>
-        {(index) => (
-          <div className="pt-6 lg:pt-8">
-            <GrantListItem grant={grants[index]} />
-          </div>
-        )}
-      </VirtualWrapper>
+  return <GrantListItems {...props} />;
+};
 
-      {lastItem}
-    </div>
-  );
+export const GrantList = () => {
+  const aiQuery = useAtomValue(aiGrantFinderQueryAtom);
+  return aiQuery ? <AiGrantList /> : <FetchedGrantList />;
 };

src/grants/components/grant-list/use-ai-grant-list.ts

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import { useAtomValue } from 'jotai';
+
+import { getQueryClient } from '@/shared/utils/get-query-client';
+
+import { grantQueryKeys } from '@/grants/core/query-keys';
+import { aiGrantFinderQueryAtom } from '@/grants/core/atoms';
+import { getGrantDetails } from '@/grants/data/get-grant-details';
+import { useAiGrantFinderQuery } from '@/grants/hooks/use-ai-grant-finder-query';
+
+export const useAiGrantList = () => {
+  const queryClient = getQueryClient();
+  const aiQuery = useAtomValue(aiGrantFinderQueryAtom);
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isPending,
+    isFetching,
+    isSuccess,
+  } = useAiGrantFinderQuery(aiQuery);
+
+  // Next page fetch on scroll
+  const { ref: inViewRef } = useInView({
+    threshold: 1,
+    onChange: (inView) => {
+      if (inView && !error && !isFetching) fetchNextPage();
+    },
+  });
+
+  // Prefetch grant details
+  useEffect(() => {
+    if (isSuccess && data) {
+      const items = data.pages.flatMap((d) => d.data);
+      for (const item of items) {
+        const { slug } = item;
+        queryClient.prefetchQuery({
+          queryKey: grantQueryKeys.grant(slug),
+          queryFn: () => getGrantDetails(slug),
+        });
+      }
+    }
+  });
+
+  return {
+    grants: data?.pages.flatMap((d) => d.data) ?? [],
+    error,
+    inViewRef,
+    hasNextPage,
+    isPending,
+  };
+};

src/grants/core/atoms.ts

@@ -0,0 +1,4 @@
+import { atom } from 'jotai';
+
+export const aiGrantFinderQueryAtom = atom<string>('');
+export const aiGrantFinderPending = atom<boolean>(false);

src/grants/core/query-keys.ts

@@ -1,5 +1,7 @@
 export const grantQueryKeys = {
   all: ['grants'] as const,
+  aiGrantFinder: (query: string) =>
+    [...grantQueryKeys.all, 'ai-find', query] as const,
   list: (params: string | Record<string, string>) => {
     const searchParams =
       typeof params === 'string'