diff --git a/src/QuoteDetail.tsx b/src/QuoteDetail.tsx index 5d93359..6d849f5 100644 --- a/src/QuoteDetail.tsx +++ b/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

{params.quoteId}

+ const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase + + const [quote, setQuote] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + + useEffect(() => { + const getQuote = async () => { + try { + const record = await pb.collection(params.collection as string).getOne(params.quoteId as string, { requestKey: null }); + setQuote(record); + } catch (err: any) { + setError(err) + console.error("Error:", err) + } finally { + setLoading(false) + } + } + getQuote() + }, []) + // return

Loading...

+ if (loading) { + return

Loading...

+ } + if (error) { + return

Error: {error.message}

+ } + return quote ?
:

No quote found.

} diff --git a/src/QuoteInfo.tsx b/src/QuoteInfo.tsx index ef79145..84562ae 100644 --- a/src/QuoteInfo.tsx +++ b/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; } @@ -7,8 +10,17 @@ export default function QuoteInfo({ quote }: QuoteInfoProps) { return ( //TODO: Bettes Colors -
-

{quote.quote}

+
+
+

{quote.quote}

+ {/*TODO: Let items grow vertically */} +
+

{ navigator.clipboard.writeText(quote.quote) }}>

+ +

+
+
+
{quote.context &&

{quote.context}

}

Author:

diff --git a/src/QuoteList.tsx b/src/QuoteList.tsx index 9b3a985..fe01413 100644 --- a/src/QuoteList.tsx +++ b/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(true) const [error, setError] = useState(null) const [collection, setCollection] = useState(Collections.QtBit) - const [searchItem, setSearchItem] = useState(null) + const [searchItem, setSearchItem] = useState("") const [searchFilter, setSearchFilter] = useState("quote") const handleInputChange = (e: ChangeEvent) => { @@ -73,7 +72,7 @@ export default function QuoteList() {