feature: popup now displays results once available instead of waiting…

… for all queries to return

LICENCE

@@ -1,4 +1,5 @@
-The parties agree that the Licence below is to be governed by Singapore law.
+The parties agree that the Licence below is to be governed by and construed in
+accordance with the law of the Republic of Singapore.
 
                       EUROPEAN UNION PUBLIC LICENCE v. 1.2
                       EUPL © the European Union 2007, 2016

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clerkent",
-  "version": "3.4.11",
+  "version": "3.5.0",
   "private": true,
   "description": "quick search legal search",
   "repository": "https://github.com/lacuna-technologies/clerkent.git",
@@ -41,9 +41,10 @@
     ]
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.6",
-    "axios": "^1.2.1",
-    "axios-cache-interceptor": "^0.10.7",
+    "@babel/runtime": "^7.20.13",
+    "async-mutex": "^0.4.0",
+    "axios": "^1.2.3",
+    "axios-cache-interceptor": "^1.0.0",
     "cheerio": "^1.0.0-rc.12",
     "fuse.js": "^6.6.2",
     "leven": "^4.0.0",
@@ -56,56 +57,56 @@
     "svg-country-flags": "^1.2.10"
   },
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.5",
-    "@babel/node": "^7.20.5",
-    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/node": "^7.20.7",
+    "@babel/plugin-transform-react-jsx": "^7.20.13",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@testing-library/preact": "^3.2.2",
-    "@types/jest": "^29.2.4",
+    "@testing-library/preact": "^3.2.3",
+    "@types/jest": "^29.2.6",
     "@types/memoizee": "^0.4.8",
-    "@types/node": "^18.11.12",
+    "@types/node": "^18.11.18",
     "@types/qs": "^6.9.7",
-    "@types/sharp": "^0.31.0",
+    "@types/sharp": "^0.31.1",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^5.46.0",
-    "@typescript-eslint/parser": "^5.46.0",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "autoprefixer": "^10.4.13",
-    "babel-loader": "^9.1.0",
+    "babel-loader": "^9.1.2",
     "clean-webpack-plugin": "^4.0.0",
     "codecov": "^3.8.3",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.2",
-    "eslint": "^8.29.0",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.32.0",
     "eslint-config-preact": "^1.3.0",
     "eslint-plugin-disable": "^2.0.3",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-json-format": "^2.0.1",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-sonarjs": "^0.17.0",
+    "eslint-plugin-sonarjs": "^0.18.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "eslint-plugin-unicorn": "^45.0.1",
+    "eslint-plugin-unicorn": "^45.0.2",
     "file-loader": "^6.2.0",
     "filemanager-webpack-plugin": "^7.0.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.3.0",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^8.0.2",
+    "husky": "^8.0.3",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^13.1.0",
     "mini-css-extract-plugin": "^2.7.2",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
     "resolve-url-loader": "^5.0.0",
-    "sharp": "^0.31.2",
+    "sharp": "^0.31.3",
     "svg-inline-loader": "^0.8.2",
     "tailwindcss": "^3.2.4",
     "terser-webpack-plugin": "^5.3.6",
-    "ts-jest": "^29.0.3",
+    "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
     "tsc-files": "^1.1.3",
     "typescript": "^4.9.4",

src/Background.tsx

@@ -7,25 +7,9 @@ import Finder from './utils/Finder'
 import Storage from './utils/Storage'
 import Scraper from './utils/scraper'
 import Logger from './utils/Logger'
-import { Helpers } from './utils'
+import { Constants, Helpers } from './utils'
 import Browser from 'utils/Browser'
 
-const getScraperResult = (
-  targets: Finder.FinderResult[],
-  jurisdiction: Law.JurisdictionCode,
-): Promise<Law.Legislation[] | Law.Case[]> => {
-  const { type } = targets[0]
-  switch (type) {
-    case `case-citation`: {
-      return Scraper.getCaseByCitation(targets[0] as Finder.CaseCitationFinderResult, jurisdiction)
-    }
-    case `case-name`: {
-      return Scraper.getCaseByName(targets[0] as Finder.CaseNameFinderResult, jurisdiction)
-    }
-  }
-  return Promise.resolve([])
-}
-
 // used by ContentScript/Highlighter for citation hover
 const viewCitation = async (port: Runtime.Port, otherProperties: Messenger.OtherProperties) => {
   const { citation, source } = otherProperties
@@ -39,62 +23,68 @@ const viewCitation = async (port: Runtime.Port, otherProperties: Messenger.Other
     source: Messenger.TARGETS.background,
     target: source,
   }
+
   if(targets.length === 0){
     return port.postMessage(noResultMessage)
   }
 
-  const result = await Scraper.getCaseByCitation(targets[0] as Finder.CaseCitationFinderResult)
+  const eventTarget = await Scraper.getCaseByCitation(targets[0] as Finder.CaseCitationFinderResult)
+  const query = targets[0].type === `case-citation`
+    ? targets[0].citation
+    : (targets[0] as Finder.CaseNameFinderResult).name
 
-  if(result.length === 0){
-    return port.postMessage(noResultMessage)
-  }
+  eventTarget.addEventListener(`${Constants.EVENTS.CASE_RESULTS}-${query}`, async (event: CustomEvent) => {
+    const { detail: { done, results } }: { detail: { done: boolean, results: Law.Case[] } } = event
 
-  if(citation === await Storage.get(`CURRENT_HIGHLIGHTED_CITATION`)){ // ignore outdated results
-    const data = result.map((r: Law.Case) => ({...targets[0], ...r}))
+    if(done){
+      if(results.length === 0){
+        return port.postMessage(noResultMessage)
+      }
+
+      if(citation === await Storage.get(`CURRENT_HIGHLIGHTED_CITATION`)){ // ignore outdated results
+        const data = results.map((r: Law.Case) => ({...targets[0], ...r}))
 
-    const message = {
-      action: Messenger.ACTION_TYPES.viewCitation,
-      data,
-      source: Messenger.TARGETS.background,
-      target: source,
+        const message = {
+          action: Messenger.ACTION_TYPES.viewCitation,
+          data,
+          source: Messenger.TARGETS.background,
+          target: source,
+        }
+        port.postMessage(message)
+      }
     }
-    Logger.log(`sending viewCitation`, message)
-    port.postMessage(message)
-  }
+  })
 }
 
 // Used by Popup
 const search = async (port: Runtime.Port, otherProperties: Messenger.OtherProperties) => {
   const { citation, source, jurisdiction } = otherProperties
   await Storage.set(`CURRENT_HIGHLIGHTED_CITATION`, citation)
   const targets = Finder.findCase(citation)
+  const { type } = targets[0]
 
-  const noResultMessage: Messenger.Message = {
-    action: Messenger.ACTION_TYPES.search,
-    data: [],
-    source: Messenger.TARGETS.background,
-    target: source,
-  }
-
-  const result = await getScraperResult(targets, jurisdiction)
-  Logger.log(`BackgroundPage scraper result`, jurisdiction, result)
+  const eventTarget: EventTarget = type === `case-citation`
+    ? Scraper.getCaseByCitation(targets[0] as Finder.CaseCitationFinderResult, jurisdiction)
+    : Scraper.getCaseByName(targets[0] as Finder.CaseNameFinderResult, jurisdiction)
 
-  if(result.length === 0){
-    return port.postMessage(noResultMessage)
-  }
+  const query = type === `case-citation`
+    ? targets[0].citation
+    : (targets[0] as Finder.CaseNameFinderResult).name
 
-  if(citation === await Storage.get(`CURRENT_HIGHLIGHTED_CITATION`)){ // ignore outdated results
-    const data = result.map((r: Law.Legislation | Law.Case) => ({...targets[0], ...r}))
+  eventTarget.addEventListener(`${Constants.EVENTS.CASE_RESULTS}-${query}`, async (event: CustomEvent) => {
+    const { detail: { done, results } }: { detail: { done: boolean, results: Law.Case[] } } = event
+    if(citation === await Storage.get(`CURRENT_HIGHLIGHTED_CITATION`)){ // ignore outdated results
+      const data = { done, results: results.map((r: Law.Case) => ({...targets[0], ...r})) }
 
-    const message = {
-      action: Messenger.ACTION_TYPES.search,
-      data,
-      source: Messenger.TARGETS.background,
-      target: source,
+      const message = {
+        action: Messenger.ACTION_TYPES.search,
+        data,
+        source: Messenger.TARGETS.background,
+        target: source,
+      }
+      port.postMessage(message)
     }
-    Logger.log(`sending search`, message)
-    port.postMessage(message)
-  }
+  })
 }
 
 const downloadFile = async (url: string, fileName: string) => {
@@ -127,8 +117,6 @@ const handleAction = (port: Runtime.Port) => async ({ action, ...otherProperties
         const pdfResult = await Scraper.getPDF(law as Law.Case, doctype)
         if(typeof pdfResult === `string`){
           const fileName = Helpers.getFileName(law, doctype)
-          Logger.log(`downloadPDF fileName: `, fileName)
-          Logger.log(`downloadPDF url: ${pdfResult}`)
           await downloadFile(pdfResult, fileName)
         } else { // downloadOptions
           await browser.downloads.download(pdfResult)

src/ContentScript/Searcher/Searcher.ts

@@ -1,7 +1,6 @@
 import LawNet from './LawNet'
 import LexisUK from './LexisUK'
 import WestlawUK from './WestlawUK'
-import { Logger } from '../../utils'
 import SearcherStorage from './SearcherStorage'
 
 const getClerkentQuery = (): string | null => {
@@ -26,13 +25,6 @@ const isQueryValid = (query: string) => (query && query.length > 0)
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 const init = async () => {
-  Logger.log(`Searcher debug data`, {
-    host: window.location.host,
-    path: window.location.pathname,
-    query: getClerkentQuery(),
-    type: getClerkentType(),
-  })
-
   switch(window.location.hostname){
     case `www.lawnet.sg`:
     case `www-lawnet-sg.lawproxy1.nus.edu.sg`:
@@ -93,7 +85,6 @@ const init = async () => {
         }
 
         const query = getClerkentQuery() || (await SearcherStorage.getLexisUKQuery())
-        Logger.log(`Get query`, query)
         return LexisUK.init(query)
       }
 

src/Popup/__tests__/QueryResult.test.tsx

@@ -7,6 +7,7 @@ jest.mock(`Popup/hooks/useClipboard`)
 const useClipboardMock = useClipboard as jest.Mock
 
 const mockDownloadPDF = () => () => null
+const mockUpdateResults = () => null
 const mockCases: Law.Case[] = [
   {
     citation: `[1884] EWHC 2 (QB)`,
@@ -39,9 +40,11 @@ describe(`QueryResult`, () => {
   it(`renders no cases found`, () => {
     const tree = render(
       <QueryResult
-        searchResult={[]}
+        searchResults={[]}
         downloadPDF={mockDownloadPDF}
         isSearching={false}
+        updatePending={false}
+        updateResults={mockUpdateResults}
       />,
     )
     expect(tree).toMatchSnapshot()
@@ -50,9 +53,11 @@ describe(`QueryResult`, () => {
   it(`renders loading`, () => {
     const treeCase = render(
       <QueryResult
-        searchResult={[]}
+        searchResults={[]}
         downloadPDF={mockDownloadPDF}
         isSearching={true}
+        updatePending={false}
+        updateResults={mockUpdateResults}
       />,
     )
     expect(treeCase).toMatchSnapshot()
@@ -61,9 +66,11 @@ describe(`QueryResult`, () => {
   it(`renders list of UK cases`, () => {
     const tree = render(
       <QueryResult
-        searchResult={mockCases}
+        searchResults={mockCases}
         downloadPDF={mockDownloadPDF}
         isSearching={false}
+        updatePending={false}
+        updateResults={mockUpdateResults}
       />,
     )
     expect(tree).toMatchSnapshot()

src/Popup/__tests__/__snapshots__/QueryResult.test.tsx.snap

@@ -188,6 +188,33 @@ exports[`QueryResult renders loading 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <div
+        class="flex flex-col mt-2 items-start content-start gap-4"
+      >
+        <div
+          class="inline-flex flex-row items-center"
+        >
+          <div
+            class="ml-[0.2rem]"
+          >
+            Loading...
+          </div>
+          <div
+            class="inline-block relative w-[80px] h-[10px] loading-container"
+          >
+            <div />
+            <div />
+            <div />
+            <div />
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="flex flex-col mt-2 items-start content-start gap-4"
+    >
       <div
         class="inline-flex flex-row items-center"
       >
@@ -206,25 +233,6 @@ exports[`QueryResult renders loading 1`] = `
         </div>
       </div>
     </div>
-  </body>,
-  "container": <div>
-    <div
-      class="inline-flex flex-row items-center"
-    >
-      <div
-        class="ml-[0.2rem]"
-      >
-        Loading...
-      </div>
-      <div
-        class="inline-block relative w-[80px] h-[10px] loading-container"
-      >
-        <div />
-        <div />
-        <div />
-        <div />
-      </div>
-    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],