Merge remote-tracking branch 'origin/main'

mikepsinn · mikepsinn · commit 3a6c6e2405ad · 2024-10-02T22:32:27.000-05:00
diff --git a/app/researcher/articles/tags/[tagSlug]/page.tsx b/app/researcher/articles/tags/[tagSlug]/page.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import ArticleSearchAndGrid from "@/components/article/ArticleSearchAndGrid";
+
+type Params = {
+    tagSlug: string
+}
+
+export default function TagArticles() {
+    const params = useParams<Params>()
+    const tagSlug = params?.tagSlug ?? ''
+
+    return (
+        <div className="container mx-auto p-4">
+            <h1 className="text-3xl font-bold mb-6">Articles in {tagSlug}</h1>
+            <ArticleSearchAndGrid tagSlug={tagSlug} />
+        </div>
+    )
+}
diff --git a/app/researcher/researcherActions.ts b/app/researcher/researcherActions.ts
@@ -15,7 +15,7 @@ const openai = new OpenAI({
 })
 const prisma = new PrismaClient()
 
-export async function searchArticles(query: string, categorySlug?: string) {
+export async function searchArticles(query: string, categorySlug?: string, tagSlug?: string) {
   try {
     const whereClause: any = {
       OR: [
@@ -28,6 +28,13 @@ export async function searchArticles(query: string, categorySlug?: string) {
       whereClause.category = { slug: categorySlug };
     }
 
+    if (tagSlug) {
+      const tag = await prisma.articleTag.findUnique({ where: { slug: tagSlug } });
+      if (tag) {
+        whereClause.tags = { some: { id: tag.id } };
+      }
+    }
+
     return await prisma.article.findMany({
       where: whereClause,
       select: {
diff --git a/components/ArticleGrid.tsx b/components/ArticleGrid.tsx
@@ -43,7 +43,7 @@ export default function ArticleGrid({ articles }: ArticleGridProps) {
                     <CardFooter className="mt-auto pt-4 border-t">
                         <div className="flex flex-wrap gap-2">
                             {article.tags.map((tag) => (
-                                <Link key={tag.name} href={`/research/tags/${tag.name}`}>
+                                <Link key={tag.name} href={`/researcher/articles/tags/${tag.slug}`}>
                                     <Badge variant="outline" className="text-xs">{tag.name}</Badge>
                                 </Link>
                             ))}
diff --git a/components/ArticleRenderer.tsx b/components/ArticleRenderer.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react"
 import Image from "next/image"
-import { Check, Clock, Copy, Folder, Link2, Tag, Loader2 } from "lucide-react"
+import { Check, Clock, Copy, Folder, Tag, Loader2, Share2, Twitter, Facebook, Linkedin } from "lucide-react"
 
 import {ArticleWithRelations} from "@/lib/agents/researcher/researcher"
 import { Badge } from "@/components/ui/badge"
@@ -30,7 +30,7 @@ function GenerateImageButton({
   disabled: boolean
 }) {
   return (
-    <Button onClick={onClick} disabled={disabled}>
+    <Button onClick={onClick} disabled={disabled} variant="outline" >
       {disabled ? (
         <>
           <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -56,6 +56,7 @@ export default function ArticleRenderer({
   const [isGeneratingImage, setIsGeneratingImage] = useState(false)
   const [imageUrl, setImageUrl] = useState<string | null>(null)
   const [error, setError] = useState("")
+  const [isCopiedUrl, setIsCopiedUrl] = useState(false)
 
   const {
     title,
@@ -123,6 +124,47 @@ ${sources?.map((source) => `- [${source.title}](${source.url})`).join("\n")}
       })
   }
 
+  const copyUrlToClipboard = () => {
+    const url = window.location.href;
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        setIsCopiedUrl(true)
+        toast({
+          title: "Copied URL to clipboard",
+          description:
+            "The article URL has been copied to the clipboard.",
+        })
+        setTimeout(() => setIsCopiedUrl(false), 3000) // Reset after 3 seconds
+      })
+      .catch((err) => {
+        console.error("Failed to copy URL: ", err)
+        toast({
+          title: "Failed to copy URL",
+          description: "An error occurred while copying the URL.",
+          variant: "destructive",
+        })
+      })
+  }
+
+  const shareToTwitter = () => {
+    const url = window.location.href;
+    const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`;
+    window.open(twitterUrl, "_blank");
+  }
+
+  const shareToFacebook = () => {
+    const url = window.location.href;
+    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+    window.open(facebookUrl, "_blank");
+  }
+
+  const shareToLinkedIn = () => {
+    const url = window.location.href;
+    const linkedInUrl = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`;
+    window.open(linkedInUrl, "_blank");
+  }
+
   // Add this function to handle article deletion
   async function handleDeleteArticle() {
     if (!currentUserId) {
@@ -160,6 +202,17 @@ ${sources?.map((source) => `- [${source.title}](${source.url})`).join("\n")}
             <CardTitle>{title}</CardTitle>
             <CardDescription>{description}</CardDescription>
           </CardHeader>
+          {featuredImage && (
+            <div className="mx-auto my-4 w-[90%]">
+              <Image
+                src={featuredImage}
+                alt={`Featured image for ${title}`}
+                width={1024}
+                height={1024}
+                className="h-auto w-full rounded-lg"
+              />
+            </div>
+          )}
           <Separator className="mx-auto my-4 w-[90%]" />
           <CardContent>
             <CustomReactMarkdown>{content}</CustomReactMarkdown>
@@ -178,18 +231,6 @@ ${sources?.map((source) => `- [${source.title}](${source.url})`).join("\n")}
               <CardTitle>Article Info</CardTitle>
             </CardHeader>
             <CardContent className="space-y-2">
-              {featuredImage && (
-                <div className="mb-4">
-                  <Image
-                    src={featuredImage}
-                    alt={`Featured image for ${title}`}
-                    width={1024}
-                    height={1024}
-                    className="h-auto w-full rounded-lg"
-                  />
-                </div>
-              )}
-
               <div className="flex items-center space-x-2">
                 <Folder className="h-4 w-4"/>
                 <span>{category?.name}</span>
@@ -208,6 +249,7 @@ ${sources?.map((source) => `- [${source.title}](${source.url})`).join("\n")}
               </div>
               <div className="flex items-center space-x-2">
                 <Button
+                    variant="outline" 
                     onClick={copyToClipboard}
                     className="mt-2"
                     disabled={isCopied}
@@ -225,6 +267,37 @@ ${sources?.map((source) => `- [${source.title}](${source.url})`).join("\n")}
                   )}
                 </Button>
               </div>
+              <div className="flex items-center space-x-2">
+                <Button
+                    variant="outline" 
+                    onClick={copyUrlToClipboard}
+                    className="mt-2"
+                    disabled={isCopiedUrl}
+                >
+                  {isCopiedUrl ? (
+                      <>
+                        <Check className="mr-2 h-4 w-4"/>
+                        Copied URL!
+                      </>
+                  ) : (
+                      <>
+                        <Share2 className="mr-2 h-4 w-4"/>
+                        Copy Sharing URL
+                      </>
+                  )}
+                </Button>
+              </div>
+              <div className="flex space-x-4 mt-2">
+                <Button variant="outline" onClick={shareToTwitter}>
+                  <Twitter className="mr-2 h-4 w-4" />
+                </Button>
+                <Button variant="outline" onClick={shareToFacebook}>
+                  <Facebook className="mr-2 h-4 w-4" />  
+                </Button>
+                <Button variant="outline" onClick={shareToLinkedIn}>
+                  <Linkedin className="mr-2 h-4 w-4" />
+                </Button>
+              </div>
               <div className="flex flex-col space-y-2">
                 <GenerateImageButton
                     onClick={handleGenerateImage}
diff --git a/components/article/ArticleSearchAndGrid.tsx b/components/article/ArticleSearchAndGrid.tsx
@@ -7,9 +7,10 @@ import { searchArticles } from '@/app/researcher/researcherActions'
 
 type ArticleSearchAndGridProps = {
   categorySlug?: string
+  tagSlug?: string
 }
 
-export default function ArticleSearchAndGrid({ categorySlug = '' }: ArticleSearchAndGridProps) {
+export default function ArticleSearchAndGrid({ categorySlug = '', tagSlug = '' }: ArticleSearchAndGridProps) {
   const [articles, setArticles] = useState<ArticleWithRelations[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [searchQuery, setSearchQuery] = useState('')
@@ -18,7 +19,7 @@ export default function ArticleSearchAndGrid({ categorySlug = '' }: ArticleSearc
     const fetchArticles = async () => {
         setIsLoading(true)
         try {
-            const results = await searchArticles(searchQuery, categorySlug)
+            const results = await searchArticles(searchQuery, categorySlug, tagSlug)
             setArticles(results as ArticleWithRelations[])
         } catch (error) {
             console.error('Error fetching articles:', error)
@@ -27,7 +28,7 @@ export default function ArticleSearchAndGrid({ categorySlug = '' }: ArticleSearc
         }
     }
     fetchArticles()
-}, [categorySlug, searchQuery])
+}, [categorySlug, tagSlug, searchQuery])
 
   const handleSearch = (query: string) => {
     setSearchQuery(query)
diff --git a/tests/researcher.test.ts b/tests/researcher.test.ts
@@ -7,7 +7,7 @@ import { findOrCreateArticleByPromptedTopic } from '@/lib/agents/researcher/rese
 
 const prisma = new PrismaClient();
 
-describe("Database-seeder tests", () => {
+describe("Research Agent tests", () => {
   jest.setTimeout(6000000)
 
     it("Generates article by URL", async () => {
