Add ArticleSearchAndGrid component and refactor article search and display

mikepsinn · mikepsinn · commit 13fcce5534df · 2024-09-20T19:36:40.000-05:00
Introduced the ArticleSearchAndGrid component to unify search and grid rendering logic. Integrated this new component into various pages and removed redundant search and grid code, enhancing code maintainability and readability. Also added enhancements to search results fetching based on URLs and domains.
diff --git a/app/dfda/dfdaActions.ts b/app/dfda/dfdaActions.ts
@@ -158,5 +158,5 @@ export async function getMetaAnalysis(treatmentName: string, conditionName: stri
     return article;
   }
 
-    return writeArticle(topic);
+    return writeArticle(topic, "test-user");
 }
diff --git a/app/researcher/articles/categories/[categorySlug]/page.tsx b/app/researcher/articles/categories/[categorySlug]/page.tsx
@@ -1,20 +1,7 @@
 'use client'
 
-import { useState, useEffect } from 'react'
 import { useParams } from 'next/navigation'
-import ArticleGrid from '@/components/ArticleGrid'
-import ArticleSearchBox from '@/components/ArticleSearchBox'
-import {searchArticles} from "@/app/researcher/researcherActions";
-
-type Article = {
-    id: string;
-    title: string;
-    slug: string;
-    description: string;
-    featuredImage: string | null;
-    category: { slug: string; name: string };
-    tags: { slug: string; name: string }[];
-};
+import ArticleSearchAndGrid from "@/components/article/ArticleSearchAndGrid";
 
 type Params = {
     categorySlug: string
@@ -23,36 +10,11 @@ type Params = {
 export default function CategoryArticles() {
     const params = useParams<Params>()
     const categorySlug = params?.categorySlug ?? ''
-    const [articles, setArticles] = useState<Article[]>([])
-    const [isLoading, setIsLoading] = useState(true)
-    const [searchQuery, setSearchQuery] = useState('')
-
-    useEffect(() => {
-        const fetchArticles = async () => {
-            setIsLoading(true)
-            const results = await searchArticles(searchQuery, categorySlug)
-            setArticles(results)
-            setIsLoading(false)
-        }
-        fetchArticles()
-    }, [categorySlug, searchQuery])
-
-    const handleSearch = (query: string) => {
-        setSearchQuery(query)
-    }
 
     return (
         <div className="container mx-auto p-4">
             <h1 className="text-3xl font-bold mb-6">Articles in {categorySlug}</h1>
-            <ArticleSearchBox
-                searchQuery={searchQuery} 
-                setSearchQuery={handleSearch}
-                isLoading={isLoading}
-            />
-            <ArticleGrid articles={articles} />
-            {articles.length === 0 && !isLoading && (
-                <p className="text-center text-muted-foreground mt-6">No articles found in this category.</p>
-            )}
+            <ArticleSearchAndGrid categorySlug={categorySlug} />
         </div>
     )
 }
diff --git a/app/researcher/articles/page.tsx b/app/researcher/articles/page.tsx
@@ -1,51 +1,12 @@
 'use client'
 
-import { useState, useEffect } from 'react'
-import { searchArticles } from '../researcherActions'
-import ArticleGrid from '@/components/ArticleGrid'
-import ArticleSearchBox from '@/components/ArticleSearchBox'
-
-interface Article {
-    id: string;
-    title: string;
-    slug: string;
-    description: string;
-    featuredImage: string | null;
-    category: { slug: string; name: string };
-    tags: { slug: string; name: string }[];
-}
+import ArticleSearchAndGrid from "@/components/article/ArticleSearchAndGrid";
 
 export default function ArticleList() {
-    const [articles, setArticles] = useState<Article[]>([])
-    const [isLoading, setIsLoading] = useState(true)
-    const [searchQuery, setSearchQuery] = useState('')
-
-    useEffect(() => {
-        const fetchArticles = async () => {
-            setIsLoading(true)
-            const results = await searchArticles(searchQuery)
-            setArticles(results)
-            setIsLoading(false)
-        }
-        fetchArticles()
-    }, [searchQuery])
-
-    const handleSearch = (query: string) => {
-        setSearchQuery(query)
-    }
-
     return (
         <div className="container mx-auto p-4">
             <h1 className="text-3xl font-bold mb-6">Articles</h1>
-            <ArticleSearchBox 
-                searchQuery={searchQuery} 
-                setSearchQuery={handleSearch}
-                isLoading={isLoading}
-            />
-            <ArticleGrid articles={articles} />
-            {articles.length === 0 && !isLoading && (
-                <p className="text-center text-muted-foreground mt-6">No articles found.</p>
-            )}
+            <ArticleSearchAndGrid />
         </div>
     )
 }
diff --git a/app/researcher/page.tsx b/app/researcher/page.tsx
@@ -12,6 +12,7 @@ import { ArticleWithRelations } from '@/lib/agents/researcher/researcher'
 import GlobalBrainNetwork from "@/components/landingPage/global-brain-network"
 import { findOrCreateArticleByTopic } from "@/app/researcher/researcherActions";
 import { UserAuthForm } from '@/components/user/user-auth-form'
+import ArticleSearchAndGrid from '@/components/article/ArticleSearchAndGrid';
 
 export default function ResearcherPage() {
     const { data: session, status } = useSession() 
@@ -88,7 +89,7 @@ export default function ResearcherPage() {
                             className="flex-grow" 
                         />
                         <Button type="submit" disabled={isGenerating}>
-                            {isGenerating ? 'Generating...' : 'Generate Article'}
+                            {isGenerating ? 'Researching...' : 'Start Researching'}
                         </Button>
                     </form>
                 </CardContent>
@@ -104,6 +105,7 @@ export default function ResearcherPage() {
                 </div>
             )}
             {!isGenerating && article && <ArticleRenderer article={article} currentUserId={session?.user?.id}  />}
+            <ArticleSearchAndGrid />
         </main>
     )
 }
diff --git a/components/ArticleGrid.tsx b/components/ArticleGrid.tsx
@@ -2,25 +2,10 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-
-type Article = {
-    id: string
-    title: string
-    slug: string
-    description: string
-    featuredImage: string | null
-    category: {
-        name: string
-        slug: string
-    }
-    tags: {
-        name: string
-        slug: string
-    }[]
-}
+import { ArticleWithRelations } from '@/lib/agents/researcher/researcher'
 
 type ArticleGridProps = {
-    articles: Article[]
+    articles: ArticleWithRelations[]
 }
 
 export default function ArticleGrid({ articles }: ArticleGridProps) {
diff --git a/components/article/ArticleSearchAndGrid.tsx b/components/article/ArticleSearchAndGrid.tsx
@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react'
+import ArticleGrid from '@/components/ArticleGrid'
+import ArticleSearchBox from '@/components/ArticleSearchBox'
+import { ArticleWithRelations } from '@/lib/agents/researcher/researcher'
+import { searchArticles } from '@/app/researcher/researcherActions'
+
+
+type ArticleSearchAndGridProps = {
+  categorySlug?: string
+}
+
+export default function ArticleSearchAndGrid({ categorySlug = '' }: ArticleSearchAndGridProps) {
+  const [articles, setArticles] = useState<ArticleWithRelations[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  useEffect(() => {
+    const fetchArticles = async () => {
+        setIsLoading(true)
+        try {
+            const results = await searchArticles(searchQuery, categorySlug)
+            setArticles(results as ArticleWithRelations[])
+        } catch (error) {
+            console.error('Error fetching articles:', error)
+        } finally {
+            setIsLoading(false)
+        }
+    }
+    fetchArticles()
+}, [categorySlug, searchQuery])
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query)
+  }
+
+  return (
+    <>
+      <ArticleSearchBox
+        searchQuery={searchQuery}
+        setSearchQuery={handleSearch}
+        isLoading={isLoading}
+      />
+      <ArticleGrid articles={articles} />
+      {articles.length === 0 && !isLoading && (
+        <p className="text-center text-muted-foreground mt-6">No articles found.</p>
+      )}
+    </>
+  )
+}
diff --git a/config/links.ts b/config/links.ts
@@ -77,7 +77,7 @@ export const githubLink: NavItem = {
 }
 
 export const researcherLink: NavItem = {
-  title: "Researcher",
+  title: "Research Agent",
   href: "/researcher",
   icon: "pencil",
   tooltip: "Your very own AI researcher",
diff --git a/lib/agents/researcher/getSearchResults.ts b/lib/agents/researcher/getSearchResults.ts
@@ -1,14 +1,38 @@
-import Exa, {SearchResult} from "exa-js";
+import Exa, {RegularSearchOptions, SearchResult} from "exa-js";
 const exa = new Exa(process.env.EXA_API_KEY);
 
-export async function getSearchResults(queries: string[], linksPerQuery: number = 5): Promise<SearchResult[]> {
+export async function getSearchResults(queries: string[], options?: RegularSearchOptions): Promise<SearchResult[]> {
     let results: SearchResult[] = [];
     for (const query of queries) {
         const searchResponse = await exa.searchAndContents(query, {
-            numResults: linksPerQuery,
-            useAutoprompt: false,
+            numResults: options?.numResults ?? 5,
+            useAutoprompt: options?.useAutoprompt ?? false,
+            ...options,
         });
         results.push(...searchResponse.results);
     }
     return results;
 }
+
+export async function getSearchResultsByDomain(domain: string, queries: string[], options?: RegularSearchOptions): Promise<SearchResult[]> {
+    let results: SearchResult[] = [];
+    for (const query of queries) {
+        const searchResponse = await exa.searchAndContents(query, {
+            numResults: options?.numResults ?? 5,
+            useAutoprompt: options?.useAutoprompt ?? false,
+            includeDomains: [domain],
+            ...options,
+        });
+        results.push(...searchResponse.results);
+    }
+    return results;
+}
+
+export async function getSearchResultsByUrl(url: string, linksPerQuery: number = 5): Promise<SearchResult[]> {
+    let results: SearchResult[] = [];
+    const searchResponse = await exa.findSimilarAndContents(url, {
+        numResults: linksPerQuery,
+    });
+    results.push(...searchResponse.results);
+    return results;
+}
diff --git a/lib/agents/researcher/researcher.ts b/lib/agents/researcher/researcher.ts
diff --git a/tests/fdai.test.ts b/tests/fdai.test.ts
diff --git a/tests/researcher.test.ts b/tests/researcher.test.ts

Original file line number	Diff line number	Diff line change
`@@ -158,5 +158,5 @@ export async function getMetaAnalysis(treatmentName: string, conditionName: stri`
`158`	`158`	`return article;`
`159`	`159`	`}`
`160`	`160`
`161`		`- return writeArticle(topic);`
	`161`	`+ return writeArticle(topic, "test-user");`
`162`	`162`	`}`
Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ export const githubLink: NavItem = {`
`77`	`77`	`}`
`78`	`78`
`79`	`79`	`export const researcherLink: NavItem = {`
`80`		`- title: "Researcher",`
	`80`	`+ title: "Research Agent",`
`81`	`81`	`href: "/researcher",`
`82`	`82`	`icon: "pencil",`
`83`	`83`	`tooltip: "Your very own AI researcher",`