From d3b9cadb5424624c0ad2f0356a2c17f9b7c289c8 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Sun, 24 Dec 2023 11:43:41 -0500
Subject: [PATCH] refactor: create proper article links

---
 app/components/Feed.tsx | 4 ++--
 app/routes/search.tsx   | 5 ++++-
 app/types.d.ts          | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/Feed.tsx b/app/components/Feed.tsx
index 1b1a463..387d68f 100644
--- a/app/components/Feed.tsx
+++ b/app/components/Feed.tsx
@@ -4,7 +4,7 @@ import { formatDate } from "@/utils";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useEffect, useState } from "react";
 import { Article } from "@/lib/prisma";
-import { useFetcher } from "@remix-run/react";
+import { Link, useFetcher } from "@remix-run/react";
 
 const Feed = ({
   className,
@@ -112,7 +112,7 @@ const Feed = ({
                     {formatDate(item.createdAt)}
                   </span>
                   <p className="inline-block text-white w-[25ch] flex-auto">
-                    {item.title}
+                    <Link to={`/article/${item.cid}`}>{item.title}</Link>
                   </p>
                 </article>
               );
diff --git a/app/routes/search.tsx b/app/routes/search.tsx
index eac504c..25f3117 100644
--- a/app/routes/search.tsx
+++ b/app/routes/search.tsx
@@ -55,7 +55,10 @@ const Page = () => {
               <span className="text-sm text-gray-400">
                 {formatDate(item.timestamp)}
               </span>
-              <h3 className="text-md font-semibold text-white">{item.title}</h3>
+              <h3 className="text-md font-semibold text-white">
+                {" "}
+                <Link to={`/article/${item.cid}`}>{item.title}</Link>
+              </h3>
             </Link>
           ))}
           <Link to={`/search?q=${encodeURIComponent(query)}`}>
diff --git a/app/types.d.ts b/app/types.d.ts
index 65a819d..1c83814 100644
--- a/app/types.d.ts
+++ b/app/types.d.ts
@@ -4,6 +4,7 @@ export type SearchResult = {
   title: string;
   description: string;
   slug: string;
+  cid: string;
 };
 
 export type SelectOptions = {