Add the ability to star pull requests

Closes #4

src/components/DashboardSection.tsx

@@ -35,7 +35,7 @@ export default function DashboardSection({isLoading, section, isFirst, isLast, d
                     <div className="section-label">
                         <Icon icon={isCollapsed ? "chevron-down" : "chevron-up"} color="text"/>
                         <span className="ml-2">{section.label}</span>
-                        {!isLoading && (count > 0) && (
+                        {(count > 0) && (
                             <Tag round intent={Intent.NONE} className="ml-2">{count}</Tag>
                         )}
                     </div>
@@ -56,11 +56,11 @@ export default function DashboardSection({isLoading, section, isFirst, isLast, d
                 onSubmit={onChange}
                 onDelete={onDelete}/>
 
-            {isLoading && <Spinner/>}
-
-            {!isLoading && <Collapse isOpen={!isCollapsed}>
-                {count > 0 ? <PullTable data={data} /> : <p className="no-results">No results</p>}
-            </Collapse>}
+            {isLoading 
+                ? <Spinner/>
+                : <Collapse isOpen={!isCollapsed}>
+                    {count > 0 ? <PullTable data={data} /> : <p className="no-results">No results</p>}
+                </Collapse>}
         </Card>
     )
 }

src/components/PullTable.tsx

@@ -1,7 +1,10 @@
+import { useContext } from "react"
 import { HTMLTable, Tooltip, Tag, Icon } from "@blueprintjs/core"
-import ReactTimeAgo from 'react-time-ago'
+import ReactTimeAgo from "react-time-ago"
+
 import { PullList, computeSize } from "../model"
 import IconWithTooltip from "./IconWithTooltip"
+import { ConfigContext } from "../config"
 
 
 export type Props = {
@@ -19,10 +22,20 @@ const formatDate = (d: string)  => {
 }
 
 export default function PullTable({data}: Props) {
+    const { config, setConfig } = useContext(ConfigContext)
+
+    const stars = new Set(config.stars)
+
+    const handleStar = (number: number) => {
+        setConfig(prev => prev.stars.indexOf(number) > -1 
+            ? {...prev, stars: prev.stars.filter(s => s != number)} 
+            : {...prev, stars: prev.stars.concat([number])})
+    }
     return (
         <HTMLTable interactive className="pull-table">
             <thead>
                 <tr>
+                    <th>&nbsp;</th>
                     <th>Author</th>
                     <th>Status</th>
                     <th>Last Action</th>
@@ -31,9 +44,14 @@ export default function PullTable({data}: Props) {
                 </tr>
             </thead>
             <tbody>
-            {data.flatMap((pulls, idx) => (
-                pulls.pulls.map((pull, idx2) => (
+                {data.map((pullList, idx) => (
+                    pullList.pulls.map((pull, idx2) => (
                     <tr key={`${idx}-${idx2}`}>
+                        <td className="cursor-pointer" onClick={() => handleStar(pull.number)}>
+                            {stars.has(pull.number)
+                                ? <Tooltip content="Unstar pull request"><Icon icon="star" color="#FBD065"/></Tooltip>
+                                : <Tooltip content="Star pull request"><Icon icon="star-empty"/></Tooltip>}
+                        </td>
                         <td>
                             <a href={pull.url}>
                                 <div className="pull-author">
@@ -75,7 +93,7 @@ export default function PullTable({data}: Props) {
                             <a href={pull.url}>
                                 <div className="font-semibold">{pull.title}</div>
                                 <div className="text-sm">
-                                    {pulls.host}:{pull.repository.nameWithOwner} #{pull.number}
+                                    {pullList.host}:{pull.repository.nameWithOwner} #{pull.number}
                                 </div>
                             </a>
                         </td>

src/components/Sidebar.tsx

@@ -46,6 +46,7 @@ export default function Sidebar({ isDark, onDarkChange }: Props) {
     <div className="sidebar">
       <img src="/logo.svg" height="30" className="mt-2 mb-2"/>
       <SidebarLink link="/" title="Dashboard" icon="dashboard"/>
+      <SidebarLink link="/stars" title="Stars" icon="bookmark"/>
       <SidebarLink link="/settings" title="Settings" icon="cog"/>
       <div className="bottom">
         <SidebarButton

src/config.ts

@@ -4,6 +4,7 @@ import { createContext } from "react"
 export type Config = {
     sections: Section[],
     connections: Connection[],
+    stars: number[],
 }
 
 export type Section = {
@@ -55,14 +56,15 @@ export const defaultConfig: Config = {
         }
     ],
     connections: [],
+    stars: [],
 }
 
 export const emptyConfig = {sections: [], connections: []}
 export const emptySectionConfig = {label: "", search: "", notified: false}
 
 export function readConfig(): Promise<Config> {
     return localforage.getItem<Config>(configKey)
-        .then(config => (config === null) ? defaultConfig : config)
+        .then(config => (config === null) ? defaultConfig : {...defaultConfig, ...config})
 }
 
 export function writeConfig(config: Config): Promise<Config> {

src/main.tsx

@@ -1,14 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import {
-  createBrowserRouter,
-  RouterProvider,
-} from 'react-router-dom'
+import {createBrowserRouter, RouterProvider} from 'react-router-dom'
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import TimeAgo from 'javascript-time-ago'
 import timeAgoEnLocale from 'javascript-time-ago/locale/en.json'
-import { Intent } from '@blueprintjs/core'
+import { Intent, BlueprintProvider } from '@blueprintjs/core'
 
 import { AppToaster}  from './toaster'
 import App from './App.tsx'
@@ -20,6 +17,7 @@ import 'normalize.css/normalize.css'
 import '@blueprintjs/icons/lib/css/blueprint-icons.css'
 import '@blueprintjs/core/lib/css/blueprint.css'
 import './styles/index.less'
+import Stars from './routes/stars.tsx'
 
 TimeAgo.addDefaultLocale(timeAgoEnLocale)
 
@@ -29,14 +27,18 @@ const router = createBrowserRouter([
         element: <App/>,
         errorElement: <ErrorPage />,
         children: [
-        {
-            index: true,
-            element: <Dashboard/>,
-        },
-        {
-            path: "/settings",
-            element: <Settings/>,
-        },
+            {
+                index: true,
+                element: <Dashboard/>,
+            },
+            {
+                path: "/stars",
+                element: <Stars/>,
+            },
+            {
+                path: "/settings",
+                element: <Settings/>,
+            },
         ]
     },
 ])
@@ -52,9 +54,11 @@ const queryClient = new QueryClient({
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <QueryClientProvider client={queryClient}>
-            <ReactQueryDevtools position="bottom-right"/>
-            <RouterProvider router={router} />
-        </QueryClientProvider>
+        <BlueprintProvider>
+            <QueryClientProvider client={queryClient}>
+                <ReactQueryDevtools position="bottom-right"/>
+                <RouterProvider router={router} />
+            </QueryClientProvider>
+        </BlueprintProvider>
     </React.StrictMode>,
 )

src/queries.ts

@@ -0,0 +1,27 @@
+import { UseQueryResult, useQueries } from "@tanstack/react-query";
+import { Config } from "./config";
+import { getPulls, getViewer } from "./github";
+import { Pull } from "./model";
+
+export const usePullRequests = (config: Config): UseQueryResult<Pull[]>[] => {
+    const viewers = useQueries({
+        queries: config.connections.map(connection => ({
+            queryKey: ['viewer', connection.host],
+            queryFn: () => getViewer(connection),
+            staleTime: Infinity,
+        })),
+    })
+    return useQueries({
+        queries: config.sections.flatMap(section => {
+            return config.connections.map((connection, idx) => ({
+                queryKey: ['pulls', connection.host, connection.auth, section.search],
+                queryFn: () => getPulls(connection, section.search, viewers[idx].data?.login || ""),
+                refetchInterval: 300_000,
+                refetchIntervalInBackground: true,
+                // refetchOnWindowFocus: false,
+                staleTime: 60_000,
+                enabled: viewers[idx].data !== undefined,
+            }))
+        }),
+    })
+}

src/routes/dashboard.tsx

@@ -1,13 +1,13 @@
-import { useCallback, useContext, useEffect, useState } from "react";
-import { Section, emptySectionConfig, ConfigContext } from "../config";
-import DashboardSection from "../components/DashboardSection";
-import { Button } from "@blueprintjs/core";
-import SectionDialog from "../components/SectionDialog";
-import { useQueries } from "@tanstack/react-query";
-import { useSearchParams } from "react-router-dom";
-import { getPulls, getViewer } from "../github";
-import { Pull } from "../model";
-import SearchInput from "../components/SearchInput";
+import { useCallback, useContext, useEffect, useState } from "react"
+import { useSearchParams } from "react-router-dom"
+import { Button } from "@blueprintjs/core"
+
+import { Section, emptySectionConfig, ConfigContext } from "../config"
+import SectionDialog from "../components/SectionDialog"
+import DashboardSection from "../components/DashboardSection"
+import { Pull } from "../model"
+import SearchInput from "../components/SearchInput"
+import { usePullRequests } from "../queries"
 
 function matches(pull: Pull, tokens: string[]): boolean {
     return tokens.length === 0 || tokens.every(tok => pull.title.toLowerCase().indexOf(tok) > -1 || pull.repository.nameWithOwner.indexOf(tok) > -1)
@@ -24,25 +24,7 @@ export default function Dashboard() {
     const [ searchParams, setSearchParams ] = useSearchParams()
     const [ newSection, setNewSection ] = useState(emptySectionConfig)
 
-    const viewers = useQueries({
-        queries: config.connections.map(connection => ({
-            queryKey: ['viewer', connection.host],
-            queryFn: () => getViewer(connection),
-            staleTime: Infinity,
-        })),
-    })
-    const results = useQueries({
-        queries: config.sections.flatMap(section => {
-            return config.connections.map((connection, idx) => ({
-                queryKey: ['pulls', connection.host, connection.auth, section.search],
-                queryFn: () => getPulls(connection, section.search, viewers[idx].data?.login || ""),
-                refetchInterval: 300_000,
-                refetchIntervalInBackground: true,
-                refetchOnWindowFocus: false,
-                enabled: viewers[idx].data !== undefined,
-            }))
-        }),
-    })
+    const results = usePullRequests(config)
 
     const refetchAll = useCallback(async () => {
 		await Promise.all(results.map(res => res.refetch()));

src/routes/stars.tsx

@@ -0,0 +1,49 @@
+import { useCallback, useContext } from "react";
+import { Button, Card, H3, Spinner } from "@blueprintjs/core";
+
+import { ConfigContext } from "../config";
+import PullTable from "../components/PullTable";
+import { usePullRequests } from "../queries";
+
+
+export default function Stars() {
+    const { config } = useContext(ConfigContext)
+    const results = usePullRequests(config)
+
+    const stars = new Set(config.stars)
+
+    const isLoading = results.some(res => res.isLoading)
+    const isFetching = results.some(res => res.isFetching)
+
+    const data = config.connections.map((connection, idx) => ({
+        host: connection.host,
+        pulls: config.sections.flatMap((_, idx2) => results[idx + config.connections.length * idx2].data || []).filter(v => stars.has(v.number))
+    }))
+    const count = data.map(res => res.pulls.length).reduce((acc, v) => acc + v, 0)
+
+    const refetchAll = useCallback(async () => {
+		await Promise.all(results.map(res => res.refetch()));
+	}, [results]);
+
+    return (
+        <>
+            <div className="flex mb-4">
+                <H3 className="grow">Starred pull requests</H3>
+                <Button
+                    icon="refresh"
+                    disabled={isFetching}
+                    loading={isFetching}
+                    className="ml-4"
+                    onClick={refetchAll}/>
+            </div>
+
+            <Card className="mt-4">
+            {isLoading 
+                ? <Spinner/>
+                : count > 0
+                ? <PullTable data={data}/>
+                : <p className="no-results">No results</p>}
+            </Card>
+        </>
+    )
+}

src/styles/index.less

@@ -104,18 +104,22 @@ footer {
         overflow: hidden;
         vertical-align: middle;
     }
-    tbody td:nth-child(1) { /* Author */
+    tbody td:nth-child(1) { /* Star */
+        text-align: center;
+        width: 25px;
+    }
+    tbody td:nth-child(2) { /* Author */
         text-align: center;
         width: 50px;
     }
-    tbody td:nth-child(2) { /* Status */
+    tbody td:nth-child(3) { /* Status */
         text-align: center;
         width: 50px;
     }
-    tbody td:nth-child(3) { /* Last Action */
+    tbody td:nth-child(4) { /* Last Action */
         width: 200px;
     }
-    tbody td:nth-child(4) { /* Size */
+    tbody td:nth-child(5) { /* Size */
         text-align: center;
         width: 50px;
     }

src/styles/utils.less

@@ -15,6 +15,10 @@
     flex-grow: 1;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .text-sm {
   font-size: @pt-font-size-small;
 }