fetch records from Beneath

beneath-hq · Jul 31, 2021 · c0bd32d · c0bd32d
1 parent 83ffff1
commit c0bd32d
Show file tree

Hide file tree

Showing 3 changed files with 249 additions and 184 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "10.x",
+    "beneath-react": "^1.2.0",
+    "next": "^11.0.1",
     "react": "17.x",
     "react-dom": "17.x"
   }

diff --git a/pages/index.js b/pages/index.js
@@ -1,65 +1,44 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import { useRecords } from "beneath-react";
 
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
+const makeFilter = (input) => {
+  return '{ "symbol": "' + input + '"}'
+}
 
-          <a
-            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
+export default function Home() {
+  // TODO: get symbol input from the user
+  const filter = makeFilter("AAPL")
+
+  // TODO: fetch an aggregated table, not a long one
+  const { records, loading, error } = useRecords({
+    table: "examples/wallstreetbets-analytics/r-wallstreetbets-comments-stock-mentions",
+    query: { type: "index", filter },
+    subscribe: true,
+    pageSize: 25
+  })
+
+  if (loading) {
+    return (
+      <p>Loading...</p>
+    );
+  } else if (error) {
+    return <p>Error: {error}</p>;
+  }
 
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
-        </a>
-      </footer>
+  return (
+    <div>
+      <h1>r-wallstreetbets-comments-stock-mentions</h1>
+      <ul>
+        {records.map((record) => {
+          const d = new Date(record["timestamp"])
+          return (
+            <li key={record["@meta"].key}>
+              {record["symbol"]}
+              {d.toUTCString()}
+            </li>
+          )
+        }
+        )}
+      </ul>
     </div>
-  )
+  );
 }