fix: replace deprecated useStore and fix typecheck errors

[amitsingh-007]

Changes

• Replace deprecated useStore with useSelector from @tanstack/react-store in AddOrEditPersonDialog.tsx
• Add null checks for signInWithCredential and refreshIdToken return values in useFirebaseStore.ts
• Add @tanstack/react-store to pnpm catalog and extension dependencies

Context

The Build CI was failing due to:

1. Lint error: useStore is deprecated. Use useSelector instead. (@typescript-eslint/no-deprecated)
2. Typecheck errors: IAuthResponse | undefined not assignable to IAuthResponse and refreshedTokenData possibly undefined

Both were pre-existing issues on the renovate-updates branch.

Verification

• pnpm lint passes
• pnpm typecheck:all passes

Greptile Summary

This PR fixes a lint error on the renovate-updates branch by replacing the deprecated useStore hook (from @tanstack/react-form) with useSelector from @tanstack/react-store in AddOrEditPersonDialog.tsx, and adds the new package as an explicit dependency in both the pnpm catalog and the extension's package.json.

• AddOrEditPersonDialog.tsx: Swaps useStore(form.store, selector) for useSelector(form.store, selector) — the correct migration path since form.store is a @tanstack/store Store instance that useSelector subscribes to natively.
• pnpm-workspace.yaml / package.json: Adds @tanstack/react-store@0.11.0 to the centralised catalog and the extension's explicit dependencies, with the lock file updated accordingly.
• Note: The PR description and title also claim null checks were added to useFirebaseStore.ts, but that file does not appear in the diff — the description may be describing changes already committed to the base branch.

Confidence Score: 5/5

Safe to merge — the code change is a straightforward, correct hook migration with no behavioural side effects.

The only code change is swapping a deprecated import for its documented replacement, which is correct both in terms of API shape and package boundaries. The dependency additions are minimal and properly wired through the catalog. No logic is altered and no new runtime paths are introduced.

No files require special attention beyond the open clarification about whether the useFirebaseStore.ts null-check fixes described in the PR exist elsewhere on the base branch.

_{Reviews (2): Last reviewed commit: "fix: replace deprecated useStore with us..." | Re-trigger Greptile}

[qodo-code-review]

PR Summary by Qodo

Fix deprecated react-form useStore usage and Firebase auth type safety

🐞 Bug fix ⚙️ Configuration changes 🕐 20-40 Minutes

AI Description

• Replace deprecated useStore with useSelector to satisfy lint rules.
• Add null/undefined guards around Firebase auth responses to satisfy typechecking.
• Add @tanstack/react-store to the workspace catalog and extension dependencies.

Diagram

graph TD
  A["Add/Edit Person UI"] --> B["react-form store"] --> C["useSelector (react-store)"]
  D["Firebase store"] --> E["signInWithCredential"] --> D
  D --> F["refreshIdToken"] --> D
  G["pnpm workspace catalog"] --> H["extension package deps"]

  subgraph Legend
    direction LR
    _ui[UI Component] ~~~ _st[Store/State] ~~~ _fn[Auth Function] ~~~ _cfg[Dependency Config]
  end

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Suppress the deprecation lint rule

• ➕ Fastest change; no dependency additions
• ➕ Avoids introducing a new package in the extension bundle
• ➖ Keeps deprecated API usage that will eventually break
• ➖ Ignores a real maintenance signal from upstream libraries

2. Upgrade/react-form-only solution (avoid react-store)

• ➕ Potentially fewer dependencies if react-form exposes a non-deprecated selector API
• ➖ May require a larger version upgrade and broader regression risk
• ➖ Not guaranteed to exist depending on the installed react-form version

3. Manual subscription to form.store

• ➕ No new dependency; explicit control over subscriptions
• ➖ Reimplements selector/subscription behavior; easier to leak subscriptions or over-render
• ➖ More code and ongoing maintenance than using the supported hook

Recommendation: Proceed with the current approach: using useSelector is the supported replacement for useStore and aligns with the lint rule intent. The added null checks in the Firebase store are the safest minimal fix to make runtime behavior match the declared types without expanding the surface area of the change.

Files changed (5) +17 / -3

Bug fix (2) +9 / -3

AddOrEditPersonDialog.tsxReplace deprecated useStore with useSelector for form store reads +3/-2

Replace deprecated useStore with useSelector for form store reads

• Stops importing 'useStore' from '@tanstack/react-form' and switches to 'useSelector' from '@tanstack/react-store'. Updates the 'uid' subscription to use the supported selector hook, resolving the deprecation lint error.

apps/extension/src/entrypoints/popup/panels/PersonsPanel/components/AddOrEditPersonDialog.tsx

useFirebaseStore.tsGuard against undefined auth responses in sign-in and token refresh +6/-1

Guard against undefined auth responses in sign-in and token refresh

• Adds checks to only set IdP auth state when 'signInWithCredential' returns a value. Adds an early return when 'refreshIdToken' returns undefined, preventing construction of an invalid 'IAuthResponse' and fixing typecheck errors.

apps/extension/src/store/firebase/useFirebaseStore.ts

Other (3) +8 / -0

package.jsonAdd @tanstack/react-store to extension dependencies +1/-0

Add @tanstack/react-store to extension dependencies

• Adds '@tanstack/react-store' to the extension's dependency list via the workspace catalog reference so the UI can import 'useSelector'.

apps/extension/package.json

pnpm-lock.yamlLockfile updates for @tanstack/react-store addition +6/-0

Lockfile updates for @tanstack/react-store addition

• Records the new '@tanstack/react-store@0.11.0' entry in the pnpm catalog and ensures the extension importer resolves it from 'catalog:'.

pnpm-lock.yaml

pnpm-workspace.yamlAdd @tanstack/react-store to workspace catalog +1/-0

Add @tanstack/react-store to workspace catalog

• Adds '@tanstack/react-store' with a pinned version to the shared pnpm workspace catalog so packages can depend on it via 'catalog:'.

pnpm-workspace.yaml

[webext-bot]

Extension Size Change:   1.24 KB 🔺

Commit	45a509f
Latest release size	216.10 KB
Current size	217.34 KB
Percent change	0.57 %

---

This commit looks good, cheers 👏

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📜 Skill insights (0)

Context used

✅ Compliance rules (platform): 22 rules

✅ Skills: e2e-test-generation

1. Bearer null auth header ✓ Resolved 🐞 Bug ≡ Correctness

Description

getIdToken() now returns null when refreshIdToken() yields no data, but wretchApi() always
formats the header as `Bearer ${await getIdToken()}, which becomes Bearer null`. This can cause
authenticated requests (e.g. /upload-file) to fail with 401s in a hard-to-debug way.

Code

apps/extension/src/store/firebase/useFirebaseStore.ts[R76-79]

        const refreshedTokenData = await refreshIdToken(idpAuth.refreshToken);
+        if (!refreshedTokenData) {
+          return null;
+        }

Relevance

⭐⭐ Medium

No prior “Bearer null”/auth-header pattern found; team often rejects defensive null/try-catch guards
(PR #3776, #3812).

PR-#3776
PR-#3812

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The PR introduces an explicit return null path in getIdToken() on refresh failure. wretchApi()
constructs the Authorization header via template-string interpolation without checking for null,
which will stringify to "null", and the upload utility uses wretchApi() for an authenticated
endpoint.

apps/extension/src/store/firebase/useFirebaseStore.ts[64-87]
apps/extension/src/apis/wretchApi.ts[5-10]
apps/extension/src/entrypoints/popup/panels/PersonsPanel/utils/uploadImage.ts[3-9]
apps/extension/src/apis/trpcApi.ts[12-20]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`getIdToken()` can now return `null` (e.g. when refresh fails), but `wretchApi()` unconditionally interpolates the value into a Bearer token string, producing `Authorization: Bearer null`.

## Issue Context
- `useFirebaseStore.getIdToken()` returns `null` when `refreshIdToken()` returns no data.
- `wretchApi()` always does `.auth(`Bearer ${await getIdToken()}`)`.
- Callers like the person image upload path rely on `wretchApi()` and will send an invalid auth header when the token is missing.

## Fix Focus Areas
- apps/extension/src/store/firebase/useFirebaseStore.ts[76-79]
- apps/extension/src/apis/wretchApi.ts[5-10]
- apps/extension/src/entrypoints/popup/panels/PersonsPanel/utils/uploadImage.ts[3-9]

## Suggested fix
1. Update `wretchApi()` to fetch the token first and either:
  - omit `.auth(...)` when the token is `null`, or
  - throw a descriptive error (preferred if the endpoint requires auth), e.g.
  ```ts
  const token = await getIdToken();
  if (!token) throw new Error('Missing Firebase idToken');
  return wretch(...).auth(`Bearer ${token}`);
  ```
2. Optionally, when refresh fails in `getIdToken()`, consider clearing `idpAuth` (e.g., `resetIdpAuth()`) so the system can force a clean re-auth rather than repeatedly attempting refresh and returning `null`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[webext-bot]

Extension Size Change:   1.22 KB 🔺

Commit	26aa80b
Latest release size	216.10 KB
Current size	217.32 KB
Percent change	0.57 %

---

This commit looks good, cheers 👏