feat(examples): Linearlite multiple projects (#910)

To do:

- [x] UI for new projects (currently its using a Browser prompt input)
- [x] Show/hide the sync button when a project is synced (Requires sync
status api)
- [x] Unsync project button (Requires an unsung api)

---------

Co-authored-by: msfstef <[email protected]>

examples/linearlite/.env

@@ -1 +1 @@
-ELECTRIC_CLIENT_DB=wa-sqlite # wa-sqlite or pglite
+ELECTRIC_CLIENT_DB=wa-sqlite # wa-sqlite or pglite

examples/linearlite/.eslintrc.cjs

@@ -27,5 +27,11 @@ module.exports = {
       { allowConstantExport: true },
     ],
   },
-  ignorePatterns: ['**/*/mock.ts', 'dist', '.eslintrc.cjs', 'src/generated/*'],
+  ignorePatterns: [
+    '**/*/mock.ts',
+    'db/**/*',
+    'src/generated/**',
+    'dist',
+    '.eslintrc.cjs',
+  ],
 }

examples/linearlite/db/load_data.js

@@ -3,6 +3,13 @@ import fs from 'fs'
 import path from 'path'
 import * as url from 'url'
 import { getConfig } from 'electric-sql/cli'
+import { v4 as uuidv4 } from 'uuid'
+
+/*
+Call with:
+
+ISSUES_TO_LOAD=100 npm run reset
+*/
 
 const dirname = url.fileURLToPath(new URL('.', import.meta.url))
 const { DATABASE_URL: ELECTRIC_DATABASE_URL } = getConfig()
@@ -18,6 +25,10 @@ const issues = JSON.parse(
   fs.readFileSync(path.join(DATA_DIR, 'issues.json'), 'utf8')
 )
 
+const projects = JSON.parse(
+  fs.readFileSync(path.join(DATA_DIR, 'projects.json'), 'utf8')
+)
+
 async function makeInsertQuery(db, table, data) {
   const columns = Object.keys(data)
   const columnsNames = columns.join(', ')
@@ -28,6 +39,17 @@ async function makeInsertQuery(db, table, data) {
   `)
 }
 
+async function upsertProject(db, data) {
+  const columns = Object.keys(data)
+  const columnsNames = columns.join(', ')
+  const values = columns.map((column) => data[column])
+  return await db.query(sql`
+    INSERT INTO ${sql.ident('project')} (${sql(columnsNames)})
+    VALUES (${sql.join(values.map(sql.value), ', ')})
+    ON CONFLICT DO NOTHING
+  `)
+}
+
 async function importIssue(db, issue) {
   const { comments, ...rest } = issue
   return await makeInsertQuery(db, 'issue', rest)
@@ -37,6 +59,18 @@ async function importComment(db, comment) {
   return await makeInsertQuery(db, 'comment', comment)
 }
 
+function getRandomProjectId() {
+  return projects[Math.floor(Math.random() * projects.length)].id
+}
+
+// Create the project if it doesn't exist.
+await db.tx(async (db) => {
+  db.query(sql`SET CONSTRAINTS ALL DEFERRED;`) // disable FK checks
+  for (const project of projects) {
+    await upsertProject(db, project)
+  }
+})
+
 let commentCount = 0
 const issueToLoad = Math.min(ISSUES_TO_LOAD, issues.length)
 const batchSize = 100
@@ -46,10 +80,18 @@ for (let i = 0; i < issueToLoad; i += batchSize) {
     for (let j = i; j < i + batchSize && j < issueToLoad; j++) {
       process.stdout.write(`Loading issue ${j + 1} of ${issueToLoad}\r`)
       const issue = issues[j]
-      await importIssue(db, issue)
+      const id = uuidv4()
+      await importIssue(db, {
+        ...issue,
+        id: id,
+        project_id: getRandomProjectId(),
+      })
       for (const comment of issue.comments) {
         commentCount++
-        await importComment(db, comment)
+        await importComment(db, {
+          ...comment,
+          issue_id: id,
+        })
       }
     }
   })

examples/linearlite/db/migrations/01-create_tables.sql

@@ -1,6 +1,17 @@
 -- Create the tables for the linearlite example
+CREATE TABLE IF NOT EXISTS "project" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT NOT NULL,
+    "modified" TIMESTAMPTZ NOT NULL,
+    "created" TIMESTAMPTZ NOT NULL,
+    "kanbanorder" TEXT NOT NULL,
+    CONSTRAINT "project_pkey" PRIMARY KEY ("id")
+);
+
 CREATE TABLE IF NOT EXISTS "issue" (
     "id" UUID NOT NULL,
+    "project_id" TEXT NOT NULL,
     "title" TEXT NOT NULL,    
     "description" TEXT NOT NULL,
     "priority" TEXT NOT NULL,
@@ -9,15 +20,10 @@ CREATE TABLE IF NOT EXISTS "issue" (
     "created" TIMESTAMPTZ NOT NULL,
     "kanbanorder" TEXT NOT NULL,
     "username" TEXT NOT NULL,
-    CONSTRAINT "issue_pkey" PRIMARY KEY ("id")
+    CONSTRAINT "issue_pkey" PRIMARY KEY ("id"),
+    FOREIGN KEY (project_id) REFERENCES project(id) DEFERRABLE
 );
 
--- CREATE TABLE IF NOT EXISTS "user" (
---     "username" TEXT NOT NULL,
---     "avatar" TEXT,
---     CONSTRAINT "user_pkey" PRIMARY KEY ("username")
--- );
-
 CREATE TABLE  IF NOT EXISTS "comment" (
     "id" UUID NOT NULL,
     "body" TEXT NOT NULL,
@@ -31,6 +37,6 @@ CREATE TABLE  IF NOT EXISTS "comment" (
 
 -- ⚡
 -- Electrify the tables
+ALTER TABLE project ENABLE ELECTRIC;
 ALTER TABLE issue ENABLE ELECTRIC;
--- ALTER TABLE user ENABLE ELECTRIC;
 ALTER TABLE comment ENABLE ELECTRIC;