Refactor from CommentState to CommentTableRow

Author: nedtwigg

browser-extension/src/components/SpotRow.tsx

@@ -1,10 +1,10 @@
 import { TableCell, TableRow } from '@/components/ui/table'
-import type { CommentState } from '@/entrypoints/background'
+import type { CommentStorage } from '@/entrypoints/background'
 import type { EnhancerRegistry } from '@/lib/registries'
 import { cn } from '@/lib/utils'
 
 interface SpotRowProps {
-  commentState: CommentState
+  commentState: CommentStorage
   enhancerRegistry: EnhancerRegistry
   onClick: () => void
   className?: string

browser-extension/src/components/SpotTable.tsx

@@ -1,12 +1,12 @@
 import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import type { CommentState } from '@/entrypoints/background'
+import type { CommentStorage } from '@/entrypoints/background'
 import type { EnhancerRegistry } from '@/lib/registries'
 import { SpotRow } from './SpotRow'
 
 interface SpotTableProps {
-  spots: CommentState[]
+  spots: CommentStorage[]
   enhancerRegistry: EnhancerRegistry
-  onSpotClick: (spot: CommentState) => void
+  onSpotClick: (spot: CommentStorage) => void
   title?: string
   description?: string
   headerText?: string

browser-extension/src/entrypoints/background.ts

@@ -1,6 +1,6 @@
 import type { CommentEvent, CommentSpot } from '@/lib/enhancer'
-import type { DraftStats } from '@/lib/enhancers/draftStats'
-import type { GetOpenSpotsResponse, ToBackgroundMessage } from '@/lib/messages'
+import { type DraftStats, statsFor } from '@/lib/enhancers/draftStats'
+import type { GetTableRowsResponse, ToBackgroundMessage } from '@/lib/messages'
 import {
   CLOSE_MESSAGE_PORT,
   isContentToBackgroundMessage,
@@ -13,10 +13,12 @@ export interface Tab {
   tabId: number
   windowId: number
 }
-export interface CommentState {
+export interface CommentStorage {
   tab: Tab
   spot: CommentSpot
   drafts: [number, string][]
+  sentOn: number | null
+  trashedOn: number | null
 }
 interface Draft {
   content: string
@@ -31,7 +33,7 @@ export interface CommentTableRow {
   isTrashed: boolean
 }
 
-export const openSpots = new Map<string, CommentState>()
+export const openSpots = new Map<string, CommentStorage>()
 
 export function handleCommentEvent(message: CommentEvent, sender: any): boolean {
   if (
@@ -40,13 +42,15 @@ export function handleCommentEvent(message: CommentEvent, sender: any): boolean
     sender.tab?.windowId
   ) {
     if (message.type === 'ENHANCED') {
-      const commentState: CommentState = {
+      const commentState: CommentStorage = {
         drafts: [],
+        sentOn: null,
         spot: message.spot,
         tab: {
           tabId: sender.tab.id,
           windowId: sender.tab.windowId,
         },
+        trashedOn: null,
       }
       openSpots.set(message.spot.unique_key, commentState)
     } else if (message.type === 'DESTROYED') {
@@ -64,9 +68,22 @@ export function handlePopupMessage(
   sendResponse: (response: any) => void,
 ): typeof CLOSE_MESSAGE_PORT | typeof KEEP_PORT_OPEN {
   if (isGetOpenSpotsMessage(message)) {
-    const spots: CommentState[] = Array.from(openSpots.values())
-
-    const response: GetOpenSpotsResponse = { spots }
+    const rows: CommentTableRow[] = Array.from(openSpots.values()).map((storage) => {
+      const [time, content] = storage.drafts.at(-1)!
+      const row: CommentTableRow = {
+        isOpenTab: true,
+        isSent: storage.sentOn != null,
+        isTrashed: storage.trashedOn != null,
+        latestDraft: {
+          content,
+          stats: statsFor(content),
+          time,
+        },
+        spot: storage.spot,
+      }
+      return row
+    })
+    const response: GetTableRowsResponse = { rows }
     sendResponse(response)
     return KEEP_PORT_OPEN
   } else if (isSwitchToTabMessage(message)) {

browser-extension/src/entrypoints/popup/popup.tsx

@@ -1,36 +1,32 @@
 import './style.css'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { SpotTable } from '@/components/SpotTable'
-import type { CommentState } from '@/entrypoints/background'
+import type { CommentTableRow } from '@/entrypoints/background'
 import { logger } from '@/lib/logger'
-import type { GetOpenSpotsMessage, GetOpenSpotsResponse, SwitchToTabMessage } from '@/lib/messages'
-import { EnhancerRegistry } from '@/lib/registries'
+import type { GetOpenSpotsMessage, GetTableRowsResponse } from '@/lib/messages'
 
-async function getOpenSpots(): Promise<CommentState[]> {
+async function getOpenSpots(): Promise<CommentTableRow[]> {
   logger.debug('Sending message to background script...')
   try {
     const message: GetOpenSpotsMessage = { type: 'GET_OPEN_SPOTS' }
-    const response = (await browser.runtime.sendMessage(message)) as GetOpenSpotsResponse
+    const response = (await browser.runtime.sendMessage(message)) as GetTableRowsResponse
     logger.debug('Received response:', response)
-    return response.spots || []
+    return response.rows || []
   } catch (error) {
     logger.error('Error sending message to background:', error)
     return []
   }
 }
 
-function switchToTab(tabId: number, windowId: number): void {
-  const message: SwitchToTabMessage = {
-    tabId,
-    type: 'SWITCH_TO_TAB',
-    windowId,
-  }
-  browser.runtime.sendMessage(message)
-  window.close()
-}
-
-const enhancers = new EnhancerRegistry()
+// function switchToTab(tabId: number, windowId: number): void {
+//   const message: SwitchToTabMessage = {
+//     tabId,
+//     type: 'SWITCH_TO_TAB',
+//     windowId,
+//   }
+//   browser.runtime.sendMessage(message)
+//   window.close()
+// }
 
 export interface FilterState {
   sentFilter: 'both' | 'sent' | 'unsent'
@@ -39,7 +35,7 @@ export interface FilterState {
 }
 
 function PopupApp() {
-  const [spots, setSpots] = React.useState<CommentState[]>([])
+  const [_spots, setSpots] = React.useState<CommentTableRow[]>([])
   const [isLoading, setIsLoading] = React.useState(true)
 
   React.useEffect(() => {
@@ -61,26 +57,16 @@ function PopupApp() {
     return <div className='p-4 text-center text-muted-foreground'>Loading...</div>
   }
 
-  const handleSpotClick = (spot: CommentState) => {
-    switchToTab(spot.tab.tabId, spot.tab.windowId)
-  }
+  // const handleSpotClick = (spot: CommentTableRow) => {
+  //   console.log('TODO: switchToTab')
+  //   //switchToTab(spot.tab.tabId, spot.tab.windowId)
+  // }
 
   return (
     <div className='w-full'>
       <h2 className='mb-4 text-lg font-semibold text-foreground'>Open Comment Spots</h2>
 
-      <div className='border rounded-md'>
-        <SpotTable
-          spots={spots}
-          enhancerRegistry={enhancers}
-          onSpotClick={handleSpotClick}
-          headerClassName='p-3 font-medium text-muted-foreground'
-          rowClassName='transition-colors hover:bg-muted/50 border-b border-border/40'
-          cellClassName='p-3'
-          emptyStateMessage='No open comment spots'
-          showHeader={true}
-        />
-      </div>
+      <div className='border rounded-md'></div>
     </div>
   )
 }

browser-extension/src/lib/messages.ts

@@ -1,4 +1,5 @@
-import type { CommentEvent, CommentSpot } from './enhancer'
+import type { CommentTableRow } from '@/entrypoints/background'
+import type { CommentEvent } from './enhancer'
 
 // Message handler response types
 export const CLOSE_MESSAGE_PORT = false as const // No response will be sent
@@ -24,15 +25,8 @@ export type PopupToBackgroundMessage = GetOpenSpotsMessage | SwitchToTabMessage
 export type ToBackgroundMessage = ContentToBackgroundMessage | PopupToBackgroundMessage
 
 // Background -> Popup responses
-export interface GetOpenSpotsResponse {
-  spots: Array<{
-    tab: {
-      tabId: number
-      windowId: number
-    }
-    spot: CommentSpot
-    drafts: Array<[number, string]>
-  }>
+export interface GetTableRowsResponse {
+  rows: CommentTableRow[]
 }
 
 // Type guard functions
@@ -76,5 +70,5 @@ export type BackgroundMessageHandler = (
 export type PopupMessageSender = {
   sendMessage<T extends PopupToBackgroundMessage>(
     message: T,
-  ): Promise<T extends GetOpenSpotsMessage ? GetOpenSpotsResponse : void>
+  ): Promise<T extends GetOpenSpotsMessage ? GetTableRowsResponse : void>
 }

browser-extension/tests/background.test.ts

@@ -31,6 +31,7 @@ describe('Background Event Handler', () => {
             "test-key",
             {
               "drafts": [],
+              "sentOn": null,
               "spot": {
                 "type": "TEST_SPOT",
                 "unique_key": "test-key",
@@ -39,6 +40,7 @@ describe('Background Event Handler', () => {
                 "tabId": 123,
                 "windowId": 456,
               },
+              "trashedOn": null,
             },
           ],
         ]

browser-extension/tests/playground/replica.tsx

@@ -1,5 +1,5 @@
 import { SpotTable } from '@/components/SpotTable'
-import type { CommentState } from '@/entrypoints/background'
+import type { CommentStorage } from '@/entrypoints/background'
 import type { CommentSpot } from '@/lib/enhancer'
 import type { GitHubIssueAddCommentSpot } from '@/lib/enhancers/github/githubIssueAddComment'
 import type { GitHubPRAddCommentSpot } from '@/lib/enhancers/github/githubPRAddComment'
@@ -23,20 +23,22 @@ const gh_issue: GitHubIssueAddCommentSpot = {
 }
 
 const spots: CommentSpot[] = [gh_pr, gh_issue]
-const sampleSpots: CommentState[] = spots.map((spot) => {
-  const state: CommentState = {
+const sampleSpots: CommentStorage[] = spots.map((spot) => {
+  const state: CommentStorage = {
     drafts: [[0, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.']],
+    sentOn: null,
     spot,
     tab: {
       tabId: 123,
       windowId: 456,
     },
+    trashedOn: null,
   }
   return state
 })
 
 export function Replica() {
-  const handleSpotClick = (spot: CommentState) => {
+  const handleSpotClick = (spot: CommentStorage) => {
     alert(`Clicked: ${spot.spot.type}\nTab: ${spot.tab.tabId}`)
   }