REST API in Typescript, moved to neon db, driver.js tutorials

.gitignore

@@ -91,3 +91,4 @@ sw.*
 
 # Vercel cli
 .vercel
+.vercel_cache

api/createLink.ts

@@ -0,0 +1,31 @@
+import { Request, Response } from 'express'
+import { getPool } from './db/index.js'
+import { insertRecord } from './db/insertRecord.js'
+import { DBInsertRecord } from './types.js'
+export const config = { runtime: 'nodejs' }
+
+export default async function handler(req: Request<{}, {}, DBInsertRecord>, res: Response) {
+  const body = req.body
+  try {
+    const result = await insertRecord({
+      data: body.data,
+      id: body.id,
+    })
+    if (result) {
+      res.status(200).json({
+        success: true,
+      })
+    } else {
+      throw new Error('Failed to insert record')
+    }
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      console.error(error)
+      res.status(500).json({ message: error.message || 'Internal server error' })
+    }
+  }
+}
+
+process.on('SIGTERM', () => {
+  getPool().end()
+})

api/db/getRecordById.js → api/db/getRecordById.ts

@@ -1,7 +1,7 @@
 import { DB_SCHEMA } from './dbConstants.js'
 import { getPool } from './index.js'
 
-export async function getRecordById(id) {
+export async function getRecordById(id: string) {
   const client = await getPool().connect()
   try {
     const res = await client.query(

api/db/index.js → api/db/index.ts

@@ -1,18 +1,21 @@
 import { Pool } from 'pg'
 
-let pool = null
+let pool: Pool | null = null
 
 export function getPool() {
-  if (!pool || !pool.connected) {
+  if (!process.env.DB_USER || !process.env.DB_HOST || !process.env.DB_NAME || !process.env.DB_PASSWORD || !process.env.DB_PORT) {
+    throw new Error('Missing database environment variables')
+  }
+  if (!pool) {
     pool = new Pool({
       user: process.env.DB_USER,
       host: process.env.DB_HOST,
       database: process.env.DB_NAME,
       password: process.env.DB_PASSWORD,
-      port: process.env.DB_PORT,
       max: 5, // Maximum number of connections in the pool
       idleTimeoutMillis: 30000, // Close idle connections after 30 seconds
       connectionTimeoutMillis: 2000, // How long to wait for a connection from the pool
+      ssl: true,
     })
   }
   return pool

api/db/insertRecord.js → api/db/insertRecord.ts

@@ -1,6 +1,8 @@
+import { DBInsertRecord } from '../types.js'
 import { DB_SCHEMA } from './dbConstants.js'
 import { getPool } from './index.js'
-export async function insertRecord({ data, id }) {
+
+export async function insertRecord({ data, id }: DBInsertRecord) {
   const client = await getPool().connect()
   try {
     await client.query(

api/getLink.ts

@@ -0,0 +1,22 @@
+import { Request, Response } from 'express'
+import { getRecordById } from './db/getRecordById.js'
+import { getPool } from './db/index.js'
+import { DBRecord } from './types.js'
+
+export const config = { runtime: 'nodejs' }
+
+export default async function handler(req: Request<{}, {}, {}, Pick<DBRecord, 'id'>>, res: Response) {
+  try {
+    const records = await getRecordById(req.query.id)
+    res.json(records)
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      console.error(error)
+      res.status(500).json({ message: error.message || 'Internal server error' })
+    }
+  }
+}
+
+process.on('SIGTERM', () => {
+  getPool().end()
+})

api/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

api/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext",
+      "ESNext.AsyncIterable",
+    ],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "types": [
+      "@types/node",
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

api/types.ts

@@ -0,0 +1,7 @@
+export interface DBRecord {
+  data: string
+  id: string
+  creationTimestamp: string
+}
+
+export type DBInsertRecord = Omit<DBRecord, 'creationTimestamp'>

helpers/driverjsTutorials.ts

@@ -1,4 +1,4 @@
-import { Cookies, Tutorial, TutorialsMetadata, TutorialMetadata } from './types'
+import { Cookies, Tutorial, TutorialMetadata, TutorialsMetadata } from './types'
 // Need this to keep track of latest value of cookie otherwise users sees same tutorial untill they refresh the page after the cookie is dropped
 const _cookies: Partial<Cookies> = {}
 const labelsTutorial: Tutorial[] = [
@@ -75,7 +75,17 @@ const copyLinkShortcutTutorial: Tutorial[] = [
   },
 ]
 
-const diffTutorials: TutorialMetadata[] = [
+const CopyE2ELinkTutorial: Tutorial[] = [
+  {
+    element: '#copyLinkButton',
+    popover: {
+      title: 'Copy E2E link',
+      description: 'Now links for large data comparison are end-to-end encrytpted automatically. Read more about it on github repo.',
+    },
+  },
+]
+
+const diffV1Tutorials: TutorialMetadata[] = [
   {
     tutorial: actionBarTutorial,
     cookieName: 'isSkipScrollInSyncTutorial',
@@ -88,9 +98,28 @@ const diffTutorials: TutorialMetadata[] = [
     tutorial: copyLinkShortcutTutorial,
     cookieName: 'isSkipCopyLinkShortcutTutorial',
   },
+  {
+    tutorial: CopyE2ELinkTutorial,
+    cookieName: 'isSkipCopyE2ELinkTutorial',
+  }
 ]
 
-const comparePageTutorials: TutorialMetadata[] = [
+const diffV2Tutorials: TutorialMetadata[] = [
+  {
+    tutorial: CopyE2ELinkTutorial,
+    cookieName: 'isSkipCopyE2ELinkTutorial',
+  },
+  {
+    tutorial: backButtonTutorial,
+    cookieName: 'isSkipBackButtonPersistsDataTutorial',
+  },
+  {
+    tutorial: copyLinkShortcutTutorial,
+    cookieName: 'isSkipCopyLinkShortcutTutorial',
+  },
+]
+
+const comparePageV1Tutorials: TutorialMetadata[] = [
   {
     tutorial: labelsTutorial,
     cookieName: 'isSkipTutorial',
@@ -101,11 +130,18 @@ const comparePageTutorials: TutorialMetadata[] = [
   },
 ]
 
+const comparePageV2Tutorials: TutorialMetadata[] = [
+  {
+    tutorial: labelsTutorial,
+    cookieName: 'isSkipTutorial',
+  },
+]
+
 const tutorialsMetadata: TutorialsMetadata = {
-  '/v1/diff': diffTutorials,
-  '/v2/diff': diffTutorials,
-  '/': comparePageTutorials,
-  '/v2': comparePageTutorials,
+  '/v1/diff': diffV1Tutorials,
+  '/v2/diff': diffV2Tutorials,
+  '/': comparePageV1Tutorials,
+  '/v2': comparePageV2Tutorials,
 }
 
 export default async function showTutorials(

helpers/isSkipCopyE2ELinkTutorial.ts

@@ -0,0 +1,16 @@
+export default function () {
+  const cookies = document.cookie.split(';')
+  const cookieMap: {
+    isSkipCopyE2ELinkTutorial?: string
+  } = {
+    isSkipCopyE2ELinkTutorial: 'false',
+  }
+  cookies.forEach((element) => {
+    const [name, val] = element.split('=')
+    const trimmedName = name.trim()
+    if (trimmedName === 'isSkipCopyE2ELinkTutorial') {
+      cookieMap[trimmedName] = val
+    }
+  })
+  return cookieMap.isSkipCopyE2ELinkTutorial === 'true'
+}

helpers/types.ts

@@ -5,6 +5,7 @@ export interface Cookies {
   isSkipBackButtonPersistsDataTutorial: boolean
   isSkipSubmitKbdShortcutTutorial: boolean
   isSkipCopyLinkShortcutTutorial: boolean
+  isSkipCopyE2ELinkTutorial: boolean
 }
 
 export interface Tutorial {