feat: change how the data is sent from the CLI to the console

514-labs · Jan 19, 2024 · 5411f7e · 5411f7e
1 parent b841198
commit 5411f7e
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 92 deletions.
diff --git a/.gitignore b/.gitignore
@@ -51,4 +51,6 @@ Cargo.lock
 # MSVC Windows builds of rustc generate these, which store debugging information
 *.pdb
 
-.igloo/
+.igloo/
+
+console.db
diff --git a/apps/moose-console/package.json b/apps/moose-console/package.json
@@ -27,6 +27,7 @@
  "clsx": "^2.1.0",
  "cmdk": "^0.2.0",
  "gsap": "file:gsap-bonus.tgz",
+ "lowdb": "^7.0.1",
  "lucide-react": "^0.312.0",
  "next": "^14.0.4",
  "next-themes": "^0.2.1",

diff --git a/apps/moose-console/src/app/api/console/route.ts b/apps/moose-console/src/app/api/console/route.ts
@@ -0,0 +1,7 @@
+import { putCliData } from "../../db";
+
+export async function POST(request: Request) {
+ const json = await request.json();
+ await putCliData(json);
+ return new Response("OK");
+}
diff --git a/apps/moose-console/src/app/constants.ts b/apps/moose-console/src/app/constants.ts
diff --git a/apps/moose-console/src/app/db.ts b/apps/moose-console/src/app/db.ts
@@ -0,0 +1,56 @@
+import { JSONFilePreset } from "lowdb/node";
+
+// We added a DB here because we don't know how next will handle
+// the request. We have found a hack where we could use modules to
+// have a singleton and handle shared state but we are not guaranteed
+// that it would work: https://stackoverflow.com/questions/13179109/singleton-pattern-in-nodejs-is-it-needed
+// In terms of Local db implementation, we looked at: Level, PouchDB, sqlite3, lowdb
+
+const DB_FILE = "./console.db";
+const CLI_DATA_ID = "cliData";
+
+const defaultData: {
+ [CLI_DATA_ID]: CliData;
+} = {
+ [CLI_DATA_ID]: {
+ routes: [],
+ tables: [],
+ topics: [],
+ },
+};
+
+const dbPromise = JSONFilePreset(DB_FILE, defaultData);
+
+export interface Route {
+ file_path: string;
+ route_path: string;
+ table_name: string;
+ view_name: string;
+}
+
+export interface Table {
+ database: string;
+ dependencies_table: string[];
+ engine: string;
+ name: string;
+ uuid: string;
+}
+
+export interface CliData {
+ routes: Route[];
+ tables: Table[];
+ topics: string[];
+}
+
+export async function putCliData(data: CliData): Promise<void> {
+ const db = await dbPromise;
+ return await db.update((dbData) => {
+ dbData[CLI_DATA_ID] = data;
+ });
+}
+
+export async function getCliData(): Promise<CliData> {
+ const db = await dbPromise;
+ await db.read();
+ return db.data[CLI_DATA_ID];
+}
diff --git a/apps/moose-console/src/app/layout.tsx b/apps/moose-console/src/app/layout.tsx
@@ -1,14 +1,13 @@
-import "styles/globals.css"
-import { ThemeProvider } from "components/theme-provider"
-import { cn } from "lib/utils"
-
+import "styles/globals.css";
+import { ThemeProvider } from "../components/theme-provider";
+import { cn } from "../lib/utils";
 
 import localFont from "next/font/local";
 
 import { Analytics } from "@vercel/analytics/react";
 import { ReactNode } from "react";
-import { ThemeToggle } from "components/ui/theme-toggle";
-import { LeftNav } from "components/left-nav";
+import { ThemeToggle } from "../components/ui/theme-toggle";
+import { LeftNav } from "../components/left-nav";
 
 // Font files can be colocated inside of `app`
 const monoFont = localFont({
@@ -29,10 +28,12 @@ export default function RootLayout({
  children: React.ReactNode;
 }): ReactNode {
  return (
- <html lang="en" suppressHydrationWarning className={cn(sansFont.variable, monoFont.variable)}>
- <body className={cn(
- "min-h-screen font-sans antialiased"
- )}>
+ <html
+ lang="en"
+ suppressHydrationWarning
+ className={cn(sansFont.variable, monoFont.variable)}
+ >
+ <body className={cn("min-h-screen font-sans antialiased")}>
  <ThemeProvider
  attribute="class"
  defaultTheme="system"
@@ -42,17 +43,16 @@ export default function RootLayout({
  <header className="flex text-lg px-3">
  <span className="py-4">moosejs</span>
  <span className="flex-grow" />
- <span className="py-3"><ThemeToggle /></span>
+ <span className="py-3">
+ <ThemeToggle />
+ </span>
  </header>
  <div className="flex">
  <nav>
  <LeftNav />
  </nav>
- <section>
- {children}
- </section>
+ <section>{children}</section>
  </div>
-
  </ThemeProvider>
  <Analytics />
  </body>

diff --git a/apps/moose-console/src/app/page.tsx b/apps/moose-console/src/app/page.tsx
@@ -1,4 +1,7 @@
 import Metadata from "next";
+import { gsap } from "gsap";
+import { unstable_noStore as noStore } from "next/cache";
+import { getCliData, Route, Table } from "./db";
 
 export const metadata: Metadata = {
  title: "MooseJS | Build for the modern data stack",
@@ -7,27 +10,6 @@ export const metadata: Metadata = {
  },
 };
 
-interface Route {
- file_path: string;
- route_path: string;
- table_name: string;
- view_name: string;
-}
-
-interface Table {
- database: string;
- dependencies_table: string[];
- engine: string;
- name: string;
- uuid: string;
-}
-
-interface ConsoleResponse {
- routes: Route[];
- tables: Table[];
- topics: string[];
-}
-
 interface RoutesListProps {
  routes: Route[];
 }
@@ -40,21 +22,6 @@ interface TopicsListProps {
  topics: string[];
 }
 
-async function getData(): Promise<ConsoleResponse> {
- const res = await fetch("http://localhost:4000/console", {
- cache: "no-store",
- });
- // The return value is *not* serialized
- // You can return Date, Map, Set, etc.
-
- if (!res.ok) {
- // This will activate the closest `error.js` Error Boundary
- throw new Error("Failed to fetch data");
- }
-
- return res.json();
-}
-
 const RoutesList = ({ routes }: RoutesListProps) => (
  <ul>
  {routes.map((route, index) => (
@@ -87,7 +54,10 @@ const TopicsList = ({ topics }) => (
 );
 
 export default async function Home(): Promise<JSX.Element> {
- const data = await getData();
+ // This is to make sure the environment variables are read at runtime
+ // and not during build time
+ noStore();
+ const data = await getCliData();
 
  return (
  <>

diff --git a/apps/moose-console/tsconfig.json b/apps/moose-console/tsconfig.json
@@ -2,7 +2,8 @@
  "extends": "tsconfig/nextjs.json",
  "compilerOptions": {
  "baseUrl": "src/",
- "plugins": [{ "name": "next" }]
+ "plugins": [{ "name": "next" }],
+ "allowSyntheticDefaultImports": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]