Simplify and Focus Invite Members Callout Code
Agent
Codex
Model
GPT-5.3 Codex
Shared
Mar 9, 3:38 PM
Messages1,868
Downloads44
I found it: that branch is checked out in /Users/maxgeorgopoulos/Documents/traces-worktrees/codex-feat-onboarding-team-step (branch name currently spelled codex/feat-invite-memebers-callout). I’ll switch context there now.
You’re right to call it out. It’s there because MembersList currently needs an imperative reload function, not just passive data.
fetchMembers is reused:
useEffect)PATCH role changesDELETE member removal{ members, isMember, isAdmin }.loading, error, or refetch.So yes, this is duplicated fetch orchestration right now. The clean fix is to make useNamespaceMembers return:
membersisMemberisAdminloadingerrorrefetch()Then MembersList can drop that local useCallback + useEffect block and call refetch() after mutations.
Use useCallback only when function identity matters.
Good reasons:
memo) and want to avoid needless re-renders.Don’t use it:
In your MembersList case, useCallback is mostly there because useEffect depends on fetchMembers. If we move to a hook that exposes refetch, we can avoid this pattern entirely.
I’m going to refactor useNamespaceMembers to expose loading, error, and refetch, then wire MembersList to consume the hook directly and remove its local fetch useCallback/useEffect.
I’ve wired MembersList to the hook and removed its local fetch effect/callback. I’m running typecheck now to catch any typing or lint regressions from this refactor.
Implemented.
Changes made:
useNamespaceMembers.tsloading, error, refetch()members, isMember, isAdminrefetch() now drives member reloads and is used by the internal load effectMembersList.tsxuseCallback + useEffect)useNamespaceMembers({ slug, shouldFetch: true, userId })await refetch()actionError and merged display with hook errorloading && members.length === 0Validation:
bun run typecheck successfully.I see the lint cause: the effect invokes refetch(), and refetch sets state before its first await. I’ll patch the hook so the effect does its own async load path (no sync setState in effect) while keeping refetch() for button/action refreshes.
I’m patching just the effect: it will fetch directly with an async IIFE (no refetch() call inside the effect), which removes the lint issue while keeping refetch() for manual refresh after mutations.
I fixed the pattern that triggered that lint rule. I’m running ESLint on the hook file directly to confirm the warning is gone, not just typecheck.
I confirmed the branch tracks origin/codex/feat-invite-memebers-callout. Next I’ll inspect existing commit trailers in this repo so the co-author line matches your project’s expected format exactly.
Fixed.
I removed the void refetch() call from the effect in useNamespaceMembers.ts and replaced it with an inline async load in the effect that only sets state after await fetchNamespaceMembers(...).
refetch() is still exposed/used for manual refreshes (like post-mutation in MembersList.tsx), but the effect no longer invokes a function that performs synchronous state updates.
Validation:
bun run typecheck passed../node_modules/.bin/eslint hooks/useNamespaceMembers.ts (run in frontend/).You’re right. I’m going to extract the shared “apply fetch result” path so refetch and the effect only differ in trigger behavior, not full logic.
I extracted the shared fetch-result handling into one callback and rewired both paths to use it. I’ll run typecheck and targeted lint again to ensure the duplicate cleanup didn’t reintroduce the effect warning.
Agreed, and fixed.
I deduplicated useNamespaceMembers by extracting shared result handling into one function:
applyFetchResult(requestId, slug, result) inrefetch() now call that helper.Validation:
bun run typecheck passed.frontend/. → ./node_modules/.bin/eslint hooks/useNamespaceMembers.tsI’ll open that storage helper so I can answer based on the exact behavior it currently implements.
I’m also checking the callout component usage, because the value of two flags depends on how each one is interpreted there.
Great question. In principle:
dismissed means user explicitly hid it (X / “Maybe later”).completed means goal achieved (invite flow done), so it should auto-hide.In your code, that maps to:
markInviteCalloutDismissed in InviteMembersCallout.tsxmarkInviteCalloutCompleted in InviteManager.tsx (and also member-count logic in callout)But today, both flags are effectively used the same way for visibility (hide if either true), so functionally they’re mostly semantic separation right now. If you don’t need that distinction for analytics or future re-show rules, we can collapse to a single hidden/closed key.
I’m staging only the three modified frontend files, then I’ll commit with a Co-Authored-By: GPT-5 Codex <codex@openai.com> trailer and push to the tracked branch.
I’ll collapse the callout storage to a single closed key and update both InviteMembersCallout and InviteManager to use that shared state. Then I’ll run typecheck.
I’m editing three files now: storage helper, callout, and invite manager. I’ll keep backward compatibility by treating old dismissed/completed keys as closed on read so existing users stay closed.
I’ve applied the closed merge and updated callsites. I’m running typecheck now to verify no stale references remain.
There’s one lint error: setIsClosed(true) inside the effect. I’ll remove that state write and rely on memberCount > 1 for immediate hiding while still persisting closed to storage.
Done. I merged invite callout state into a single closed flag.
Updated:
isDismissed + isCompleted with isClosedtraces:invite-callout:closed:<slug>dismissed/completed keys still count as closedisClosed + markInviteCalloutClosedclosedmarkInviteCalloutClosedValidation:
bun run typecheck passed.I’ll remove the legacy key fallback and make the callout read/write only the new closed key. Then I’ll run a quick check.
Done. I removed the backward-compatibility key reads.
Now invite-callout-storage.ts only uses:
traces:invite-callout:closed:<slug>No fallback to old dismissed or completed keys anymore.
Validation:
bun run typecheck passed.I’ll check the current git state first, then I’ll split your pending changes into logical commits and push.
There are 5 modified frontend files from the latest refactors. I’ll split them into two commits: useNamespaceMembers + MembersList, then invite-callout closed state changes.
First commit is in. I’m now committing the invite-callout closed key consolidation as the second logical commit, then I’ll push.
Committed and pushed in logical order.
New commits on codex/feat-invite-memebers-callout:
e37d78e1refactor(frontend): unify namespace members loading and refreshuseNamespaceMembers now exposes loading, error, refetchMembersList now uses the hook directly and drops local fetch effect/callbackaaa74652refactor(frontend): collapse invite callout state to closed flagclosed keyInviteMembersCallout and InviteManager accordinglyPush result:
origin/codex/feat-invite-memebers-callout0 ahead / 0 behind).I’ll audit the current org-members + invite-callout flow and give you a concrete simplification pass with highest-impact cuts first. I’m starting by reading the current hook/components end to end.
Commit is created. I’m pushing codex/feat-invite-memebers-callout to origin now.
I hit a shell parse issue on the profile layout path; I’m reopening that file with escaped path now, then I’ll give you a tight simplification map.
I found several major simplification opportunities. I’m grabbing exact line references now so the recommendations map directly to concrete edits.
Done.
codex/feat-invite-memebers-callout:
145c2e2bRename teammates naming to memebers and sidebar listCo-Authored-By: GPT-5 Codex <codex@openai.com>origin/codex/feat-invite-memebers-callout successfully.Highest-leverage simplifications I’d do, in order:
useNamespaceMembers to be data-onlyuserId, isAdmin, and isMember from the hook contract.{ members, loading, error, refetch }.isAdmin/membership in consumers (profile-layout-client.tsx, MembersList.tsx).requestIdRef, mountedRef, applyFetchResult, effect fetch path, and refetch fetch path.runFetch function + one trigger (reloadToken) + AbortController.refetch() just bumps token.memberCount visibility dependency.InviteManager already handles completion via InviteManager.tsx.readInviteCalloutState() returns an object with one field.isInviteCalloutClosed(slug): boolean and closeInviteCallout(slug): void.frontend/lib/namespace-http.ts) and reuse it.If you want, I can implement items 1-4 in one refactor commit and leave 5 for a second commit.
For #5, I’d add a tiny namespace HTTP wrapper so components stop duplicating apiUrl + credentials + csrf + json parsing + error handling. It would look like namespaceGet(slug, path) / namespaceMutation(slug, path, method, body) and MembersList + InviteManager would call that instead of raw fetch. I need two product decisions to lock the plan.
<proposed_plan>
Refactor the frontend org-members/invite flow to remove duplicated state/fetch logic, make useNamespaceMembers data-only, enforce the callout visibility rule (never show when org has >1 member) as runtime logic, flatten callout storage API, and introduce a small shared namespace HTTP helper used only in org member/invite modules.
In scope:
frontend/hooks/useNamespaceMembers.tsfrontend/components/org/MembersList.tsxfrontend/app/(main)/[slug]/profile-layout-client.tsxfrontend/components/org/InviteMembersCallout.tsxfrontend/lib/invite-callout-storage.tsfrontend/components/org/InviteManager.tsxfrontend/lib/namespace-http.tsOut of scope:
useNamespaceMembers API (internal frontend contract)In frontend/hooks/useNamespaceMembers.ts:
Current:
{ slug, shouldFetch?, userId? }{ members, loading, error, isMember, isAdmin, refetch }New:
{ slug, shouldFetch? }{ members, loading, error, refetch }Notes:
isMember and isAdmin are removed from the hook.members, session, and fetch state.In frontend/lib/invite-callout-storage.ts:
Current:
readInviteCalloutState(slug): { isClosed: boolean }markInviteCalloutClosed(slug): voidNew:
isInviteCalloutClosed(slug): booleancloseInviteCallout(slug): voidNotes:
closed key remains unchanged (traces:invite-callout:closed:${slug}).New file frontend/lib/namespace-http.ts:
Exports:
namespaceGet<T>(slug: string, path: string): Promise<{ ok: boolean; data?: T; error?: string; status: number }>namespaceMutation<T>(slug: string, path: string, options: { method: "POST" | "PATCH" | "DELETE"; body?: unknown }): Promise<{ ok: boolean; data?: T; error?: string; status: number }>Behavior:
NEXT_PUBLIC_CONVEX_HTTP_URL lookup.credentials: "include".{ ok, data, error, status }.useNamespaceMembers data-only and single-path fetchuserId option and all admin/membership derivation.requestIdRef, mountedRef, and dual fetch application paths.slugshouldFetchreloadNonce state (incremented by refetch)cancelled boolean or AbortController).loading behavior:
true while waiting for current slug request.false once slug-resolved request completes.refetch:
reloadNonce.fetchNamespaceMembers internal (non-exported) unless required externally after refactor.useNamespaceMembers({ slug, shouldFetch: loaded && Boolean(session) && isOrg }).isMember as isOrg && !loading && !errorisAdmin as isMember && members.some(m => m.userId === session?.userId && m.role === "admin")members, isMember, isAdmin, slug to sidebar/callout.In MembersList.tsx:
{ members, loading, error, refetch }.fetchNamespaceMembers usage.refetch() after role updates/removals.memberCount > 1.isMember === trueisAdmin === truememberCount <= 1!isClosedX, “Maybe later”) writing closed.InviteManager close-on-create behavior unchanged semantically.Result:
isInviteCalloutClosed(slug)closeInviteCallout(slug)Create namespace-http.ts and migrate:
MembersList.tsx:
InviteManager.tsx:
namespaceGet for consistency.bun run typecheck at repo root.frontend/hooks/useNamespaceMembers.tsfrontend/components/org/MembersList.tsxfrontend/components/org/InviteMembersCallout.tsxfrontend/components/org/InviteManager.tsxfrontend/lib/invite-callout-storage.tsfrontend/lib/namespace-http.tsX or “Maybe later”:
refetch.refetch./.I’m implementing now. I’ll first verify the worktree state and then apply the refactor only to the scoped frontend files in your plan.