100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
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
|
|
|
|
export default function QuoteList() {
|
|
|
|
// const { quotes, loading, error } = getAllQuotes(collection)
|
|
const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase
|
|
|
|
const [quotes, setQuotes] = useState<Quote[] | null>(null)
|
|
const [filteredQuotes, setFilteredQuotes] = useState<Quote[] | null>(null)
|
|
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 handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
const searchTerm = e.target.value;
|
|
setSearchItem(searchTerm)
|
|
|
|
const filteredItems = quotes?.filter((quote) => quote.quote.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
setFilteredQuotes(filteredItems!)
|
|
}
|
|
|
|
useEffect(() => {
|
|
pb.realtime.subscribe(`${collection}`, function (e) {
|
|
console.log("realtime", e.record);
|
|
let x = quotes!.filter((quote) => quote.id !== e.record.id);
|
|
setQuotes([e.record, ...x])
|
|
setFilteredQuotes([e.record, ...x])
|
|
});
|
|
return () => {
|
|
pb.realtime.unsubscribe();
|
|
}
|
|
})
|
|
const getQuotes = async () => {
|
|
try {
|
|
const records = await pb.collection(`${collection}`).getFullList<Quote>({ sort: "-created", requestKey: null });
|
|
setQuotes(records);
|
|
setFilteredQuotes(records);
|
|
} catch (err: any) {
|
|
setError(err)
|
|
console.error("Error:", error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
getQuotes()
|
|
}, [collection])
|
|
|
|
return (
|
|
//TODO: Add Quote source selection
|
|
<div className='p-3 pt-0'>
|
|
<div className='border-2 bg-slate-800 ml-2 mb-5 p-2 border-lime-500 shadow-(--box) flex flex-row'>
|
|
<select
|
|
title='Select quote collection'
|
|
className='pr-10 bg-slate-700'
|
|
value={collection as string}
|
|
onChange={e => setCollection(e.target.value as Collections)}>
|
|
<option value="qt_bit">Arcus Notsus</option>
|
|
<option value="qt_kfk">Kaffeeklatsch</option>
|
|
<option value="qt_theshegays">TheSheGays</option>
|
|
</select>
|
|
<p className='text-lime-500'>|</p>
|
|
<div className='pl-2 flex flex-row'>
|
|
<input
|
|
title='Search for quote'
|
|
placeholder='Search...'
|
|
value={searchItem as string}
|
|
onChange={e => handleInputChange(e)}
|
|
className='placeholder:text-slate-400 bg-slate-700' />
|
|
<button type="button" className='cursor-pointer' title='Filter search'>
|
|
<FilterIcon className="w-5 mx-1 active:text-lime-500" />
|
|
</button>
|
|
</div>
|
|
<p className='text-lime-500'>|</p>
|
|
<button type='button' className='cursor-pointer ml-auto' title='Add new quote'>
|
|
<AddIcon className="w-5 mx-1 active:text-lime-500" />
|
|
</button>
|
|
<p className='text-lime-500'>|</p>
|
|
</div>
|
|
{loading ? (<p> Loading...</p >) : (
|
|
//TODO: Replace div with styled QuoteInfo component
|
|
<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>)}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|