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() + }, []) + // returnLoading...
+ if (loading) { + returnLoading...
+ } + if (error) { + returnError: {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.context &&{quote.quote}
+ {/*TODO: Let items grow vertically */} +++{ navigator.clipboard.writeText(quote.quote) }}>
++ ++
{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() {