Allow direct linking of quotes

Closes #4

src/QuoteDetail.tsx

@@ -1,6 +1,39 @@
 import { useParams } from "react-router"
+import PocketBase from 'pocketbase'
+import { TypedPocketBase } from "./pocketbase-types"
+import { Quote } from "./pocketbase-types"
+import QuoteInfo from "./QuoteInfo"
+import { useState, useEffect } from "react"
+
 
 export default function QuoteDetail() {
   let params = useParams()
-  return <p>{params.quoteId}</p>
+  const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase
+
+  const [quote, setQuote] = useState<Quote | null>(null)
+  const [loading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    const getQuote = async () => {
+      try {
+        const record = await pb.collection(params.collection as string).getOne<Quote>(params.quoteId as string, { requestKey: null });
+        setQuote(record);
+      } catch (err: any) {
+        setError(err)
+        console.error("Error:", err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    getQuote()
+  }, [])
+  // return <p>Loading...</p>
+  if (loading) {
+    return <p>Loading...</p>
+  }
+  if (error) {
+    return <p>Error: {error.message}</p>
+  }
+  return quote ? <div className="flex flex-col items-center grow"><QuoteInfo quote={quote} /></div> : <p>No quote found.</p>
 }

src/QuoteInfo.tsx

@@ -1,5 +1,8 @@
+import { NavLink } from "react-router";
 import { Quote } from "./pocketbase-types"
 
+import ClipboardIcon from "pixelarticons/svg/clipboard.svg?react"
+import LinkIcon from "pixelarticons/svg/link.svg?react"
 interface QuoteInfoProps {
   quote: Quote;
 }
@@ -8,7 +11,16 @@ export default function QuoteInfo({ quote }: QuoteInfoProps) {
   return (
     //TODO: Bettes Colors
     <div className="dark:bg-slate-800 shadow-(--box) m-1 p-2 cursor-pointer" >
-      <p className="border-4 border-black bg-slate-300 text-black p-1 my-1 cursor-text">{quote.quote}</p>
+      <div className="flex-row flex">
+        <p className="grow border-4 border-black bg-slate-300 text-black p-1 my-1 cursor-text">{quote.quote}</p>
+        {/*TODO: Let items grow vertically  */}
+        <div className="ml-auto flex-row flex items-center">
+          <p className="border-4 border-black border-x-2 bg-slate-300 text-black p-1 my-1 cursor-pointer active:text-lime-500" title="Copy quote" onClick={() => { navigator.clipboard.writeText(quote.quote) }}><ClipboardIcon className="w-5" /></p>
+          <NavLink className=" border-4 border-l-2 border-black bg-slate-300 text-black p-1 my-1 cursor-pointer active:text-lime-500" to={`/${quote.collectionName}/${quote.id}`}>
+            <p className=""><LinkIcon className="w-5" /></p>
+          </NavLink>
+        </div>
+      </div>
       {quote.context && <p className="border-4 border-black bg-slate-300 text-slate-600 p-1 my-1 cursor-text">{quote.context}</p>}
       <div className="flex flex-row">
         <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20 cursor-text">Author:</p>

src/QuoteList.tsx

@@ -2,7 +2,6 @@ import PocketBase from 'pocketbase'
 import { ChangeEvent, useEffect, useState } from 'react'
 import QuoteInfo from './QuoteInfo.tsx'
 import { Collections, Quote, TypedPocketBase } from './pocketbase-types.ts'
-import FilterIcon from "pixelarticons/svg/sliders-2.svg?react"
 import AddIcon from "pixelarticons/svg/note-plus.svg?react"
 //TODO: Add Comments
 
@@ -16,7 +15,7 @@ export default function QuoteList() {
   const [loading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error | null>(null)
   const [collection, setCollection] = useState<Collections | null>(Collections.QtBit)
-  const [searchItem, setSearchItem] = useState<string | null>(null)
+  const [searchItem, setSearchItem] = useState<string>("")
   const [searchFilter, setSearchFilter] = useState<string | null>("quote")
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -73,7 +72,7 @@ export default function QuoteList() {
         <select
           title='Select quote collection'
           className='pr-10 bg-slate-700'
-          value={collection as string}
+          value={collection != null ? collection as string : Collections.QtBit}
           onChange={e => setCollection(e.target.value as Collections)}>
           <option value="qt_bit">Arcus Notsus</option>
           <option value="qt_kfk">Kaffeeklatsch</option>
@@ -109,7 +108,8 @@ export default function QuoteList() {
         <div className="grid grid-cols-4 gap-4">
           {/* {filteredQuotes.map(quote => <QuoteInfo key={quote.id} quote={quote}/>)} */}
           {/* {quotes != null ? (quotes.map((quote) => (<div key={quote.id}>{quote.quote}</div>))) : (<p>No Quotes</p>)} */}
-          {filteredQuotes != null ? (filteredQuotes.map((quote) => (<QuoteInfo key={quote.id} quote={quote} />))) : (<p>No Quotes</p>)}
+          {filteredQuotes != null ? (filteredQuotes.map((quote) => (
+            <QuoteInfo key={quote.id} quote={quote} />))) : (<p>No Quotes</p>)}
         </div>
       )
       }

src/main.tsx

@@ -11,7 +11,7 @@ createRoot(document.getElementById('root')!).render(
     <BrowserRouter>
       <Routes>
         <Route path='/' element={<App />} />
-        <Route path='quote/:quoteId' element={<QuoteDetail />} />
+        <Route path=':collection/:quoteId' element={<QuoteDetail />} />
         <Route path='add' element={<QuoteAdd />} />
       </Routes>
     </BrowserRouter>

src/pocketbase-types.ts

@@ -36,6 +36,7 @@ export type AuthSystemFields<T = never> = {
 export type Quote = {
   author: string
   context?: string
+  collectionName: string
   created?: IsoDateString
   date: IsoDateString
   id: string