Add realtime quote fetching

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*
@@ -22,6 +23,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
 # Devenv
 .devenv*
 devenv.local.nix

package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.0.6",
+    "pocketbase": "^0.25.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",

src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -1,35 +1,5 @@
-import { useState } from 'react'
+import QuoteList from "./QuoteList";
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
 
-function App() {
+export default function App() {
-  const [count, setCount] = useState(0)
+  return <QuoteList></QuoteList>
-
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
 }
-
-export default App

src/QuoteInfo.tsx

@@ -0,0 +1,11 @@
+import { useState } from "react"
+
+
+
+export default function QuoteInfo() {
+
+  return (
+    <p>Hello World!</p>
+  )
+}
+

src/QuoteList.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import QuoteInfo from './QuoteInfo.tsx'
+import getAllQuotes from './quoteHook.tsx'
+import { Quote, Collections, TypedPocketBase } from './pocketbase-types.ts'
+import PocketBase from 'pocketbase'
+
+//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 [loading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+  const [collection, setCollection] = useState<Collections | null>(Collections.QtKfk)
+
+  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])
+    });
+    return () => {
+      pb.realtime.unsubscribe();
+    }
+  })
+  const getQuotes = async () => {
+    try {
+      const records = await pb.collection(`${collection}`).getFullList<Quote>({ requestKey: null });
+      setQuotes(records);
+    } catch (err: any) {
+      setError(err)
+      console.error("Error:", err)
+    } finally {
+      setLoading(false)
+    }
+  }
+  useEffect(() => {
+    getQuotes()
+  }, [])
+
+  return (
+    //TODO: Add Quote source selection
+    <div>
+
+      {loading ? (<p> Loading...</p >) : (
+        //TODO: Replace div with styled QuoteInfo component
+        <div>
+
+          {quotes != null ? (quotes.map((quote) => (<div key={quote.id}>{quote.quote}</div>))) : (<p>No Quotes</p>)}
+        </div>
+      )
+      }
+    </div>
+
+  )
+}
+

src/index.css

@@ -1,68 +1 @@
-:root {
+@import "tailwindcss"
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/pocketbase-types.ts

@@ -0,0 +1,71 @@
+/**
+* This file was @generated using pocketbase-typegen
+*/
+
+import type PocketBase from 'pocketbase'
+import type { RecordService } from 'pocketbase'
+
+export enum Collections {
+  QtBit = "qt_bit",
+  QtKfk = "qt_kfk",
+  QtTheshegays = "qt_theshegays",
+}
+
+// Alias types for improved usability
+export type IsoDateString = string
+export type RecordIdString = string
+export type HTMLString = string
+
+// System fields
+export type BaseSystemFields<T = never> = {
+  id: RecordIdString
+  collectionId: string
+  collectionName: Collections
+  expand?: T
+}
+
+export type AuthSystemFields<T = never> = {
+  email: string
+  emailVisibility: boolean
+  username: string
+  verified: boolean
+} & BaseSystemFields<T>
+
+// Record types for each collection
+
+export type Quote = {
+  author: string
+  context?: string
+  created?: IsoDateString
+  id: string
+  quote: string
+  updated?: IsoDateString
+}
+
+// Response types include system fields and match responses from the PocketBase API
+export type QtBitResponse<Texpand = unknown> = Required<Quote> & BaseSystemFields<Texpand>
+export type QtKfkResponse<Texpand = unknown> = Required<Quote> & BaseSystemFields<Texpand>
+export type QtTheshegaysResponse<Texpand = unknown> = Required<Quote> & BaseSystemFields<Texpand>
+
+// Types containing all Records and Responses, useful for creating typing helper functions
+
+export type CollectionRecords = {
+  qt_bit: Quote
+  qt_kfk: Quote
+  qt_theshegays: Quote
+}
+
+export type CollectionResponses = {
+  qt_bit: QtBitResponse
+  qt_kfk: QtKfkResponse
+  qt_theshegays: QtTheshegaysResponse
+}
+
+// Type for usage with type asserted PocketBase instance
+// https://github.com/pocketbase/js-sdk#specify-typescript-definitions
+
+export type TypedPocketBase = PocketBase & {
+  collection(idOrName: 'qt_bit'): RecordService<QtBitResponse>
+  collection(idOrName: 'qt_kfk'): RecordService<QtKfkResponse>
+  collection(idOrName: 'qt_theshegays'): RecordService<QtTheshegaysResponse>
+}

src/quoteHook.tsx

@@ -0,0 +1,29 @@
+import PocketBase from 'pocketbase'
+import { Quote, Collections, TypedPocketBase } from './pocketbase-types'
+import { useCallback, useEffect, useState } from 'react'
+
+const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase
+
+//TODO: See if logic can be moved here from QuoteList.tsx, otherwise delete this file as it is no longer needed.
+function getAllQuotes(collectionName: Collections) {
+  const [quotes, setQuotes] = useState<Quote[] | null>(null)
+  const [loading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    async function fetchQuotes() {
+      try {
+        const result: Quote[] = await pb.collection(collectionName).getFullList();
+        setQuotes(result)
+      } catch (err: any) {
+        setError(err)
+        console.error("Couldn't fetch data", err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchQuotes();
+  }, [collectionName]) //Re-fetch on collection change
+  return { quotes, loading, error }
+}
+export default getAllQuotes;

vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })