Files
kandev/apps/web/components/github/my-github/use-github-search.ts
T
João Salavisa 85aa3ac0aa feat(github): add /github page for PRs and issues (#687)
* feat(github): add /github page for PRs and issues

Dedicated page under /github lists pull requests and issues across the
authenticated user's repos with preset filters, custom GitHub search
queries, per-repo narrowing, saved queries, and one-click task launching
for any PR or issue.

Performance:
- Cache user PR/issue search responses for 30s with singleflight to
  coalesce concurrent misses, so preset switching and pagination avoid
  upstream round trips.
- Replace the per-row PR status fetch (N+1) with a batch endpoint
  POST /api/v1/github/prs/statuses that fans out concurrently on the
  backend with a semaphore and caches per-PR.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* style: apply Prettier formatting

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address review feedback on PR cache + status batching

- Harden searchCacheKey against separator collisions from
  user-controllable customQuery (length-prefix encoding).
- Drop repositories.loaded hydration when inner workspace fetch fails
  so the client refetches instead of trusting a partial snapshot.
- Guard useGitHubSearch with a monotonic request counter to drop
  stale responses when filter+page changes overlap.
- Fix usePRStatuses teardown: depend only on composed key so a new
  array identity per render doesn't cancel the in-flight batch.
- Correct godocs (duplicate, outdated state:open claim).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address additional review feedback

- Restore state:open for issue watcher: buildIssueSearchQuery no
  longer injects it as a default, so existing watches were starting
  to surface closed issues. Inject state:open in buildIssueFilter so
  only the watcher path is affected; the /github page presets already
  set their own state qualifiers.
- countCheckResults now excludes in-progress checks from the denominator
  so a `1/3` badge reflects pass rate on completed checks, not a mix of
  running and failed. The pending state is still carried via ChecksState.
- usePRStatuses retries after a transient fetch error (only mark the
  key as completed once the fetch resolves). This also fixes missing
  badges under React Strict Mode's intentional double-mount, since the
  first effect's cleanup fires before the response lands and the guard
  stays unset for the second mount to retry.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test(github): add tests for my-github hooks

Covers use-committed-query, buildParams from use-github-search,
use-saved-presets readStorage validation, use-known-repos recordForKey
accumulator semantics, and use-pr-statuses batch fetch lifecycle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address review feedback on search cache and repo accumulator

- Clamp perPage before composing the search cache key so identical
  pages (e.g. perPage=150 and =100) share a cache entry instead of
  creating duplicates keyed on the raw value.
- Add resetKnownReposStore and call it on /github unmount so the
  module-level repo accumulator doesn't carry across navigations.
- Rename use-pr-statuses test to match its assertion (it verifies
  stale statuses are cleared when the key changes and fetch fails).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* style: apply Prettier formatting

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(web): distinguish blocked from dirty in PR mergeable badge

GitHub's blocked state (required reviews/checks/branch protection)
is not a merge conflict, so don't label it "Conflicts". Surface it
as "Blocked" with the pending tone; keep "Conflicts" for dirty.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix: address remaining /github code review comments

- Route PR status + batch through handleSearchError so ErrNoClient
  surfaces as 503 instead of 500 (matches the search endpoints).
- Sort workflow steps by position in the quick-task-launcher default
  pick, matching the convention in issue-watch-dialog.
- Make PresetItem keyboard-accessible: role=button, tabIndex, and
  Enter/Space handling on the wrapping div (it contains a nested
  delete button, so it can't itself be a button).
- Extract useRepoOptions out of useGitHubPageState to bring the hook
  back under the 100-line complexity limit.
- Honor ctx.Done() when acquiring the PR-status batch semaphore so a
  cancelled HTTP request releases queued goroutines instead of
  running each upstream fetch to completion.
- Clarify parsePaginationQuery doc: the upper bound (100) is enforced
  by clampSearchPage in the client layer, not here.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix(web): address /github review follow-ups

- Merge duplicate @/lib/utils imports in pr-list.
- Use rel="noopener noreferrer" on external PR/issue links (codebase
  convention) and add cursor-pointer per the UI guidelines.
- Rewrite onOpenSaveDialog as an explicit if-block so the callback
  returns void rather than boolean | void.
- Use PaginationEllipsis in its own PaginationItem so the ellipsis
  and the adjacent page link are separate list items instead of
  visually fused into a single cell.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* refactor(web): derive QuickTaskLauncher dialog state from props

Replaces the useEffect+setState anti-pattern with useMemo-derived state
driven directly by the payload prop. Drops the eslint suppression that
was needed for react-hooks/set-state-in-effect.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Kandev Agent <agent@kandev.dev>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-24 10:38:49 +01:00

113 lines
3.3 KiB
TypeScript

"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { searchUserPRs, searchUserIssues } from "@/lib/api/domains/github-api";
import type { GitHubPR, GitHubIssue } from "@/lib/types/github";
import type { PresetOption } from "./search-bar";
type SearchKind = "pr" | "issue";
export const SEARCH_PAGE_SIZE = 25;
type SearchState<T> = {
items: T[];
loading: boolean;
error: string | null;
lastFetchedAt: Date | null;
total: number;
};
type FetchArgs = {
preset: string;
customQuery: string;
repoFilter: string;
page: number;
};
export function buildParams(
presets: PresetOption[],
preset: string,
customQuery: string,
repoFilter: string,
) {
const trimmed = customQuery.trim();
const repoQualifier = repoFilter ? `repo:${repoFilter}` : "";
if (trimmed) {
return { query: [trimmed, repoQualifier].filter(Boolean).join(" ") };
}
const found = presets.find((p) => p.value === preset);
const filter = [found?.filter ?? "", repoQualifier].filter(Boolean).join(" ");
return { filter };
}
export function useGitHubSearch<T extends GitHubPR | GitHubIssue>(
kind: SearchKind,
presets: PresetOption[],
preset: string,
customQuery: string,
repoFilter: string = "",
) {
const [state, setState] = useState<SearchState<T>>({
items: [],
loading: false,
error: null,
lastFetchedAt: null,
total: 0,
});
const [page, setPage] = useState(1);
// Monotonic request counter: responses from older requests are dropped so
// a slow page-N request can't overwrite a fresher page-1 result after a
// filter change.
const requestSeq = useRef(0);
// Reset to page 1 whenever the filter inputs change.
useEffect(() => {
setPage(1);
}, [preset, customQuery, repoFilter, kind]);
const fetchData = useCallback(
async ({ preset: ep, customQuery: ec, repoFilter: er, page: epage }: FetchArgs) => {
const seq = ++requestSeq.current;
setState((s) => ({ ...s, loading: true, error: null }));
try {
const base = buildParams(presets, ep, ec, er);
const params = { ...base, page: epage, perPage: SEARCH_PAGE_SIZE };
const response =
kind === "pr" ? await searchUserPRs(params) : await searchUserIssues(params);
if (seq !== requestSeq.current) return;
const items = (kind === "pr"
? (response as { prs: GitHubPR[] }).prs
: (response as { issues: GitHubIssue[] }).issues) as unknown as T[];
setState({
items: items ?? [],
loading: false,
error: null,
lastFetchedAt: new Date(),
total: response.total_count ?? (items ?? []).length,
});
} catch (err) {
if (seq !== requestSeq.current) return;
setState((s) => ({
items: [],
loading: false,
error: err instanceof Error ? err.message : "Failed to search GitHub",
lastFetchedAt: s.lastFetchedAt,
total: 0,
}));
}
},
[kind, presets],
);
useEffect(() => {
void fetchData({ preset, customQuery, repoFilter, page });
}, [fetchData, preset, customQuery, repoFilter, page]);
const refresh = useCallback(
() => fetchData({ preset, customQuery, repoFilter, page }),
[fetchData, preset, customQuery, repoFilter, page],
);
return { ...state, page, setPage, pageSize: SEARCH_PAGE_SIZE, refresh };
}