feat: fix build errors and add deploy workflow

cmgriffing · Jan 17, 2024 · 09f62ce · 09f62ce
1 parent d40fc68
commit 09f62ce
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 46 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,22 @@
+name: GitHub Actions Demo
+run-name: ${{ github.actor }} is testing out GitHub Actions 🚀
+on: [push]
+jobs:
+  Explore-GitHub-Actions:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build Application
+        run: pnpm build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/src/App.tsx b/src/App.tsx
@@ -23,7 +23,7 @@ import {
   IconSettings,
 } from "@tabler/icons-react";
 import { NodeApi, Tree } from "react-arborist";
-import { ChaptersCRUD } from "./data/repositories/chapters";
+import { ChapterModel, ChaptersCRUD } from "./data/repositories/chapters";
 import { CreateOrUpdateModal } from "./components/CreateOrUpdateModal";
 import { SettingsModal } from "./components/SettingsModal";
 import { currentBooks, currentModel, fetchTimestamp } from "./state/main";
@@ -137,8 +137,12 @@ export function App() {
                   2;
               }
 
+              const nodeData = e.dragNodes[0].data as unknown as {
+                chapter: ChapterModel;
+              };
+
               // this is wrong. Updating every node would be easy enough. Might be better to manage a prev/next field
-              await ChaptersCRUD.update(e.dragNodes[0].data.chapter.id, {
+              await ChaptersCRUD.update(nodeData.chapter.id, {
                 sortOrder: newSortOrder,
               });
 
@@ -155,8 +159,12 @@ export function App() {
             }))}
             childrenAccessor={"chapters"}
           >
-            {({ node, style, dragHandle }) =>
-              !node.isLeaf ? (
+            {({ node, style, dragHandle }) => {
+              const nodeData = node.data as unknown as {
+                chapter: ChapterModel;
+              };
+
+              return !node.isLeaf ? (
                 <Flex
                   style={style}
                   justify={"space-between"}
@@ -217,15 +225,16 @@ export function App() {
                   </Menu>
                 </Flex>
               ) : (
-                <Link
-                  ref={dragHandle}
-                  to={`/books/${node.data.chapter.bookId}/chapters/${node.data.chapter.id}`}
-                  style={style}
-                >
-                  {node.data.chapter.label}
-                </Link>
-              )
-            }
+                <div ref={dragHandle}>
+                  <Link
+                    to={`/books/${nodeData.chapter.bookId}/chapters/${nodeData.chapter.id}`}
+                    style={style}
+                  >
+                    {nodeData.chapter.label}
+                  </Link>
+                </div>
+              );
+            }}
           </Tree>
         </AppShell.Navbar>
         <AppShell.Main w={"100dvw"} display={"flex"}>
@@ -322,6 +331,7 @@ export function App() {
   );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function FolderArrow({ node }: { node: NodeApi<any> }) {
   if (node.isLeaf) return <span></span>;
   return <span>{node.isOpen ? <IconCaretDown /> : <IconCaretRight />}</span>;

diff --git a/src/components/CreateOrUpdateModal.tsx b/src/components/CreateOrUpdateModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Modal, TextInput, Group, Button } from "@mantine/core";
 
 interface CreateOrUpdateModalProps {

diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useAtom } from "jotai";
 import {
   Modal,

diff --git a/src/data/db.ts b/src/data/db.ts
@@ -4,7 +4,6 @@ import { drizzle } from "drizzle-orm/sqlite-proxy";
 import * as bookSchema from "./models/books";
 import * as chapterSchema from "./models/chapters";
 import * as snippetSchema from "./models/snippets";
-import { USER_ID } from "../constants";
 
 const { driver, sql } = new SQLocalDrizzle("database.sqlite3");
 export const db = drizzle(driver, {
@@ -15,23 +14,26 @@ export const db = drizzle(driver, {
   },
 });
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 (window as any).resetDB = async function () {
   await sql`DROP TABLE IF EXISTS books`;
   await sql`DROP TABLE IF EXISTS chapters`;
   await sql`DROP TABLE IF EXISTS snippets`;
   await sql`DROP TABLE IF EXISTS settings`;
 };
 
-await sql`PRAGMA foreign_keys = ON;`;
+// IIFE to make sure that the schema is created before the app starts
+(async () => {
+  await sql`PRAGMA foreign_keys = ON;`;
 
-await sql`CREATE TABLE IF NOT EXISTS books (
+  await sql`CREATE TABLE IF NOT EXISTS books (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
   title TEXT NOT NULL,
   created_at INTEGER NOT NULL,
   modified_at INTEGER NOT NULL
 )`;
 
-await sql`CREATE TABLE IF NOT EXISTS chapters (
+  await sql`CREATE TABLE IF NOT EXISTS chapters (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
   label TEXT NOT NULL,
   sort_order REAL NOT NULL,
@@ -41,7 +43,7 @@ await sql`CREATE TABLE IF NOT EXISTS chapters (
   FOREIGN KEY(book_id) REFERENCES books(id) ON DELETE CASCADE
 )`;
 
-await sql`CREATE TABLE IF NOT EXISTS snippets (
+  await sql`CREATE TABLE IF NOT EXISTS snippets (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
   label TEXT NOT NULL,
   content TEXT NOT NULL DEFAULT "",
@@ -56,7 +58,7 @@ await sql`CREATE TABLE IF NOT EXISTS snippets (
   FOREIGN KEY(chapter_id) REFERENCES chapters(id) ON DELETE CASCADE
 )`;
 
-await sql`CREATE TABLE IF NOT EXISTS settings (
+  await sql`CREATE TABLE IF NOT EXISTS settings (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
   user_id INTEGER NOT NULL UNIQUE,
   threads INTEGER NOT NULL DEFAULT 2,
@@ -65,5 +67,6 @@ await sql`CREATE TABLE IF NOT EXISTS settings (
   modified_at INTEGER NOT NULL
 )`;
 
-await sql`INSERT OR IGNORE INTO settings(id,user_id,threads,selected_model,created_at,modified_at)
+  await sql`INSERT OR IGNORE INTO settings(id,user_id,threads,selected_model,created_at,modified_at)
 VALUES (0,1,2,'',0,0)`;
+})();
diff --git a/src/routes/Chapter.tsx b/src/routes/Chapter.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Link, Outlet, useNavigate, useParams } from "react-router-dom";
 import { ActionIcon, Box, Flex, Menu, Text } from "@mantine/core";
 import { Tree } from "react-arborist";
@@ -13,7 +13,6 @@ import {
   IconCircle,
   IconCircleDashed,
   IconCircleCheck,
-  IconCactusFilled,
   IconCircleFilled,
   IconHelpCircle,
 } from "@tabler/icons-react";
@@ -132,19 +131,20 @@ export function Chapter() {
             data={snippets}
           >
             {({ node, style, dragHandle }) => (
-              <Link
-                ref={dragHandle}
-                to={`/books/${bookId}/chapters/${node.data.chapterId}/snippets/${node.data?.id}`}
-                style={style}
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-              >
-                <Flex>
-                  <SnippetIcon snippet={node.data} />
-                  {node.data.label}
-                </Flex>
-              </Link>
+              <div ref={dragHandle}>
+                <Link
+                  to={`/books/${bookId}/chapters/${node.data.chapterId}/snippets/${node.data?.id}`}
+                  style={style}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  <Flex>
+                    <SnippetIcon snippet={node.data} />
+                    {node.data.label}
+                  </Flex>
+                </Link>
+              </div>
             )}
           </Tree>
         )}

diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export function Home() {
   return (
     <>

diff --git a/src/routes/Snippet.tsx b/src/routes/Snippet.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 import {
   TextInput,
@@ -54,7 +54,7 @@ export function Snippet() {
   const [whisper] = useAtom(whisperInstance);
   const [audio, setAudio] = useState<Float32Array>(new Float32Array());
   const [audioBlob, setAudioBlob] = useState<Blob>();
-  const [audioString, setAudioString] = useState("");
+  const [, setAudioString] = useState("");
   const audioRef = useRef<HTMLAudioElement>(null);
 
   const [{ start: startRecording, stop: stopRecording }, setMicrophone] =
@@ -102,15 +102,16 @@ export function Snippet() {
   }, [audio, audioBlob]);
 
   useEffect(() => {
-    async function listener(e: any) {
-      console.log("resultEvent", e, e.detail);
+    async function listener(e: Event) {
+      const event = e as CustomEvent;
+      console.log("resultEvent", event, event.detail);
 
       if (contentRef.current) {
-        contentRef.current.value = e.detail;
+        contentRef.current.value = event.detail;
       }
 
       await SnippetsCRUD.update(snippetId, {
-        content: e.detail,
+        content: event.detail,
       });
       setFetchTimestamp(Date.now());
     }

diff --git a/src/utils/model-data.ts b/src/utils/model-data.ts
@@ -3,6 +3,11 @@ import { whisperModelSizes } from "../whisper-utils";
 const dbVersion = 1;
 const dbName = "whisperModels";
 
+// local
+// const modelBaseUrl = "/models";
+// remote
+const modelBaseUrl = "https://f002.backblazeb2.com/file/orderly-models";
+
 export function loadOrGetModel(
   selectedModel: keyof typeof whisperModelSizes | "" | undefined,
   progressCallback: (progress: number) => void
@@ -75,7 +80,7 @@ export function loadOrGetModel(
             return;
           }
 
-          const url = `/models/${selectedModel}.bin`;
+          const url = `${modelBaseUrl}/${selectedModel}.bin`;
 
           fetchRemote(url, (progress) => {
             progressCallback(progress);