PR Timeline Filtering

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "gitkit",
         "Plasmo"
     ]
 }

background/index.ts

@@ -1,15 +1,19 @@
-import { type Message, MessageType } from "../models";
+import { type Message, MessageType } from '../models'
 
-if(chrome?.tabs?.onUpdated) {
-	chrome.tabs.onUpdated.addListener(async (tabId, changeInfo) => {
-		if(changeInfo.status === 'complete') {
-			// Important: Github details must be called before anything else
-			await chrome.tabs.sendMessage<Message<null>>(tabId, { type: MessageType.GithubDetailsGet, data: null });
+if (chrome?.tabs?.onUpdated !== undefined) {
+  chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
+    if (changeInfo.status === 'complete') {
+      // Important: Github details must be called before anything else
+      chrome.tabs.sendMessage<Message<null>>(tabId, { type: MessageType.GithubDetailsGet, data: null }).then().catch(e => console.error(e))
 
-			chrome.tabs.sendMessage<Message<null>>(tabId, { type: MessageType.IssueLoadUI, data: null })
+      chrome.tabs.sendMessage<Message<null>>(tabId, { type: MessageType.IssueLoadUI, data: null }).then().catch(e => console.error(e))
 
-			const tab: chrome.tabs.Tab[] = await chrome.tabs.query({active: true, currentWindow: true});
-			chrome.tabs.sendMessage<Message<string | undefined>>(tabId, { type: MessageType.IssueVisitedCheck, data: tab[0]?.url})
-		}
-	})
+      chrome.tabs.query({ active: true, currentWindow: true })
+        .then(tab => {
+          chrome.tabs.sendMessage<Message<string | undefined>>(tabId, { type: MessageType.IssueVisitedCheck, data: tab[0]?.url })
+            .then().catch(e => console.error(e))
+        })
+        .catch(e => console.error(e))
+    }
+  })
 }

components/button/Button.tsx

@@ -1,24 +1,27 @@
-import clsx from "clsx";
-import './Button.scss';
+import clsx from 'clsx'
+import './Button.scss'
+import { type ReactNode } from 'react'
 
 export interface ButtonProps {
-    className?: string[];
-    child: string | JSX.Element;
-    click?: () => void;
-    variant?: 'no-style';
-    title?: string;
+  className?: string[]
+  child: string | JSX.Element
+  handleClick?: () => void
+  variant?: 'no-style'
+  title?: string
 }
-function Button(props: ButtonProps) {
-    return (
-        <button className={clsx('button', ...(props?.className ?? []),
+function Button (props: ButtonProps): ReactNode {
+  return (
+    <button
+      className={clsx('button', ...(props?.className ?? []),
         {
-            'button--no-style': props.variant === 'no-style'
-        })} 
-            onClick={props.click}
-            title={props?.title}>
-            {props.child}
-        </button>
-    )
+          'button--no-style': props.variant === 'no-style'
+        })}
+      onClick={props.handleClick}
+      title={props?.title}
+    >
+      {props.child}
+    </button>
+  )
 }
 
-export default Button;
+export default Button

components/loader/Loader.tsx

@@ -1,16 +1,15 @@
-import { Loader2 } from 'lucide-react';
-import './Loader.scss';
-import clsx from 'clsx';
+import { Loader2 } from 'lucide-react'
+import './Loader.scss'
+import clsx from 'clsx'
+import { type ReactNode } from 'react'
 
-export interface LoaderProps {}
+function Loader (): ReactNode {
+  return (
+    <div className={clsx('loader')}>
+      <Loader2 />
+    </div>
 
-function Loader(props?: LoaderProps) {
-    return (
-        <div className={clsx('loader')}>
-            <Loader2 />
-        </div>
-
-    )
+  )
 }
 
-export default Loader;
+export default Loader

components/report-issue-link/ReportIssueLink.tsx

@@ -1,15 +1,15 @@
-import clsx from "clsx";
-import { Link, BrowserRouter as Router } from "react-router-dom";
+import clsx from 'clsx'
+import { Link, BrowserRouter as Router } from 'react-router-dom'
+import { type ReactNode } from 'react'
 
-function ReportIssueLink() {
-
-    return (
-        <div className={clsx('report-issue-link')}>
-            <Router>
-                <Link to='https://github.com/JStuve/github-extension/issues' target="_blank" rel="noopener norefferer">{'Have a problem? Submit an issue'}</Link>
-            </Router>
-        </div>
-    )
+function ReportIssueLink (): ReactNode {
+  return (
+    <div className={clsx('report-issue-link')}>
+      <Router>
+        <Link to='https://github.com/JStuve/github-extension/issues' target='_blank' rel='noopener norefferer'>Have a problem? Submit an issue</Link>
+      </Router>
+    </div>
+  )
 }
 
-export default ReportIssueLink;
+export default ReportIssueLink

contents/github-details.ts

@@ -1,69 +1,68 @@
-import type { PlasmoCSConfig } from "plasmo";
-import { type GithubDetails, GithubTab, LocalStorageToken, type Message, MessageType } from "../models";
-import { ArrayUtility } from "../utilities";
-import { CookieUtility } from "~utilities/cookie.utility";
+import type { PlasmoCSConfig } from 'plasmo'
+import { type GithubDetails, GithubTab, LocalStorageToken, type Message, MessageType } from '../models'
+import { ArrayUtility } from '../utilities'
+import { CookieUtility } from '~utilities/cookie.utility'
 
 export const config: PlasmoCSConfig = {
-    matches: ["https://github.com/*/*"]
+  matches: ['https://github.com/*/*']
 }
 
-if(chrome?.runtime?.onMessage) {
-    chrome.runtime.onMessage.addListener(async (message: Message<unknown>, never, sendResponse) => {
-        switch(message.type) {
-            case MessageType.GithubDetailsGet: {
-                sendResponse(getGithubDetails());
-                break;
-            }
-            default: break;
-        }
-    });
+if (chrome?.runtime?.onMessage !== undefined) {
+  chrome.runtime.onMessage.addListener((message: Message<unknown>, never, sendResponse) => {
+    switch (message.type) {
+      case MessageType.GithubDetailsGet: {
+        sendResponse(getGithubDetails())
+        break
+      }
+      default: break
+    }
+  })
 }
 
-function getGithubDetails(): GithubDetails {
-
-    const splitUrl: string[] = document.location?.pathname?.split('/')
+function getGithubDetails (): GithubDetails {
+  const splitUrl: string[] = document.location?.pathname?.split('/')
 
-    const author: string = ArrayUtility.safeGetNth(splitUrl, 1) ?? '';
-    const repo: string = ArrayUtility.safeGetNth(splitUrl, 2) ?? '';
-    const tab: GithubTab = ArrayUtility.safeGetNth(splitUrl, 3) as GithubTab ?? GithubTab.Home;
+  const author: string = ArrayUtility.safeGetNth(splitUrl, 1) ?? ''
+  const repo: string = ArrayUtility.safeGetNth(splitUrl, 2) ?? ''
+  const tab: GithubTab = ArrayUtility.safeGetNth(splitUrl, 3) as GithubTab ?? GithubTab.Home
 
-    localStorage.setItem(LocalStorageToken.GitAuthor, author)
-    localStorage.setItem(LocalStorageToken.GitRepo, repo)
-    localStorage.setItem(LocalStorageToken.GitTab, tab)
+  localStorage.setItem(LocalStorageToken.GitAuthor, author)
+  localStorage.setItem(LocalStorageToken.GitRepo, repo)
+  localStorage.setItem(LocalStorageToken.GitTab, tab)
 
-    const githubColorModeCookie: string = CookieUtility.getCookie('color_mode');
-    const githubColorMode: { "color_mode": string } = JSON.parse(decodeURIComponent(githubColorModeCookie) ?? '{}');
+  const githubColorModeCookie: string | undefined = CookieUtility.getCookie('color_mode')
+  const githubColorMode: { 'color_mode': string } = githubColorModeCookie === undefined ? {} : JSON.parse(decodeURIComponent(githubColorModeCookie) ?? '{}')
 
-    let colorTheme: 'light' | 'dark' = 'light';
+  let colorTheme: 'light' | 'dark' = 'light'
 
-    switch(githubColorMode.color_mode) {
-        case 'auto': {
-            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                colorTheme = 'dark';
-            } else {
-                colorTheme = 'light';
-            }
-            break
-        }
-        case 'dark': {
-            colorTheme = 'dark';
-            break;
-        }
-        default: {
-            colorTheme = 'light';
-            break;
-        }
+  switch (githubColorMode.color_mode) {
+    case 'auto': {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        colorTheme = 'dark'
+      } else {
+        colorTheme = 'light'
+      }
+      break
+    }
+    case 'dark': {
+      colorTheme = 'dark'
+      break
     }
+    default: {
+      colorTheme = 'light'
+      break
+    }
+  }
 
-    localStorage.setItem(LocalStorageToken.GitColorMode, colorTheme)
+  localStorage.setItem(LocalStorageToken.GitColorMode, colorTheme)
 
-    return {
-        isGithubSite: document.location.hostname.includes('github'),
-        author: author, 
-        repo: repo,
-        tab: tab,
-        colorTheme: colorTheme
-    }
+  return {
+    isGithubSite: document.location.hostname.includes('github'),
+    author,
+    repo,
+    tab,
+    colorTheme
+  }
 }
 
-getGithubDetails();
+getGithubDetails()