chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

Add implementation plan for commissioner-without-team feature (#6)

Browse source 
* Add implementation plan for commissioner-without-team feature

https://claude.ai/code/session_01NSRMSYtb7jSFbngDS8okn3

* Allow commissioners to exist without owning a team

- Add opt-out checkbox on league creation ("I want to play in this league")
  so the creator can be commissioner-only without claiming a team
- Add Commissioner Management card to league settings with add/remove
  commissioner UI; guards against removing the last commissioner
- Add countCommissionersByLeagueId model helper for the last-commissioner guard
- Show "No team" indicator on the league homepage next to commissioners
  who don't own a team in the current season

https://claude.ai/code/session_01NSRMSYtb7jSFbngDS8okn3

* Fix code review issues in commissioner management

- Add success/error feedback banners to commissioner add/remove actions
- Gate allUsers query to admin-only (prevents exposing all users to non-admin commissioners)
- Prevent commissioner self-removal in both action (server) and UI (client)
- Add "(you)" label next to current user in commissioner list
- Remove all unnecessary `any` type casts in favor of inferred types

https://claude.ai/code/session_01NSRMSYtb7jSFbngDS8okn3

* Allow commissioners to add league members as co-commissioners

Non-admin commissioners can now add users who already own a team in
the league as co-commissioners. Admins still see the full user list.
Previously the add-commissioner form was admin-only.

https://claude.ai/code/session_01NSRMSYtb7jSFbngDS8okn3

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Chris Parsons 2026-02-20 08:45:09 -08:00 • committed by GitHub
parent 03fdba3022
commit eb7aa42cef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 303 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/models/commissioner.ts
View file

@ -50,6 +50,16 @@ export async function isCommissioner(
return !!commissioner;
}
export async function countCommissionersByLeagueId(
leagueId: string
): Promise<number> {
const db = database();
const commissioners = await db.query.commissioners.findMany({
where: eq(schema.commissioners.leagueId, leagueId),
});
return commissioners.length;
}
export async function deleteCommissioner(id: string): Promise<void> {
const db = database();
await db.delete(schema.commissioners).where(eq(schema.commissioners.id, id));

227
app/routes/leagues/$leagueId.settings.tsx
View file

@ -4,7 +4,13 @@ import { getAuth } from "@clerk/react-router/server";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { findLeagueById, updateLeague, deleteLeague } from "~/models/league";
import { isCommissioner } from "~/models/commissioner";
import {
isCommissioner,
findCommissionersByLeagueId,
createCommissioner,
countCommissionersByLeagueId,
removeCommissionerByLeagueAndUser,
} from "~/models/commissioner";
import { findCurrentSeasonWithSports, updateSeason } from "~/models/season";
import { findTeamsBySeasonId, createManyTeams, deleteTeam, removeTeamOwner, assignTeamOwner } from "~/models/team";
import { findAllUsers, findUserByClerkId, isUserAdminByClerkId } from "~/models/user";
@ -92,9 +98,21 @@ export async function loader(args: Route.LoaderArgs) {
// Check if user is admin
const isAdmin = await isUserAdminByClerkId(userId);
// Get all users if admin (for team assignment dropdown)
// Get all users (only for admins - used in team assignment dropdown)
const allUsers = isAdmin ? await findAllUsers() : [];
// Get commissioners for this league with user info
const commissioners = await findCommissionersByLeagueId(leagueId);
const commissionerUserData = await Promise.all(
commissioners.map(async (c) => {
const user = await findUserByClerkId(c.userId);
return {
...c,
userName: user?.username || user?.displayName || "Unknown User",
};
})
);
// Get owner details for teams
const ownerIds = teams
.map((t) => t.ownerId)
@ -108,11 +126,15 @@ export async function loader(args: Route.LoaderArgs) {
: null;
})
);
const ownerMap = new Map(
owners
.filter((o): o is NonNullable<typeof o> => o !== null)
.map((o) => [o.clerkId, o.name])
);
const validOwners = owners.filter((o): o is NonNullable<typeof o> => o !== null);
const ownerMap = new Map(validOwners.map((o) => [o.clerkId, o.name]));
// League members (team owners) - available to all commissioners for adding co-commissioners
const leagueMembers = validOwners.map((o) => ({
id: o.id,
clerkId: o.clerkId,
name: o.name,
}));
return {
league,
@ -124,7 +146,10 @@ export async function loader(args: Route.LoaderArgs) {
draftSlots,
isAdmin,
allUsers,
leagueMembers,
ownerMap: Object.fromEntries(ownerMap),
commissioners: commissionerUserData,
currentUserId: userId,
};
}
@ -471,20 +496,69 @@ export async function action(args: Route.ActionArgs) {
}
}
if (intent === "add-commissioner") {
const userClerkId = formData.get("userClerkId") as string;
if (!userClerkId) {
return { error: "User is required" };
}
// Check if user is already a commissioner
const alreadyCommissioner = await isCommissioner(leagueId, userClerkId);
if (alreadyCommissioner) {
return { error: "This user is already a commissioner" };
}
try {
await createCommissioner({ leagueId, userId: userClerkId });
return { success: true, message: "Commissioner added successfully" };
} catch (error) {
console.error("Error adding commissioner:", error);
return { error: "Failed to add commissioner. Please try again." };
}
}
if (intent === "remove-commissioner") {
const commissionerUserId = formData.get("commissionerUserId") as string;
if (!commissionerUserId) {
return { error: "User is required" };
}
// Prevent self-removal
if (commissionerUserId === userId) {
return { error: "You cannot remove yourself as a commissioner" };
}
// Prevent removing the last commissioner
const count = await countCommissionersByLeagueId(leagueId);
if (count <= 1) {
return { error: "Cannot remove the last commissioner" };
}
try {
await removeCommissionerByLeagueAndUser(leagueId, commissionerUserId);
return { success: true, message: "Commissioner removed successfully" };
} catch (error) {
console.error("Error removing commissioner:", error);
return { error: "Failed to remove commissioner. Please try again." };
}
}
return { error: "Invalid action" };
}
export default function LeagueSettings({ loaderData, actionData }: Route.ComponentProps) {
const { league, season, teams, teamCount, teamsWithOwners, allSportsSeasons, draftSlots, isAdmin, allUsers, ownerMap } = loaderData;
const { league, season, teams, teamCount, teamsWithOwners, allSportsSeasons, draftSlots, isAdmin, allUsers, leagueMembers, ownerMap, commissioners, currentUserId } = loaderData;
const navigation = useNavigation();
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [selectedSports, setSelectedSports] = useState<Set<string>>(
new Set(season?.seasonSports?.map((s: any) => s.sportsSeason.id) || [])
);
const [draftOrderTeams, setDraftOrderTeams] = useState<string[]>(
draftSlots.length > 0
? draftSlots.map((slot: any) => slot.teamId)
: teams.map((team: any) => team.id)
draftSlots.length > 0
? draftSlots.map((slot) => slot.teamId)
: teams.map((team) => team.id)
);
const [draftRounds, setDraftRounds] = useState<number>(season?.draftRounds || 20);
const [draftDate, setDraftDate] = useState<Date | undefined>(
@ -498,9 +572,9 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
// Update draft order when loader data changes (after randomization)
useEffect(() => {
const newOrder = draftSlots.length > 0
? draftSlots.map((slot: any) => slot.teamId)
: teams.map((team: any) => team.id);
const newOrder = draftSlots.length > 0
? draftSlots.map((slot) => slot.teamId)
: teams.map((team) => team.id);
setDraftOrderTeams(newOrder);
}, [draftSlots, teams]);
@ -539,7 +613,7 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
};
const getTeamById = (teamId: string) => {
return teams.find((t: any) => t.id === teamId);
return teams.find((t) => t.id === teamId);
};
return (
@ -972,7 +1046,7 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
</CardHeader>
<CardContent>
<div className="space-y-3">
{teams.map((team: any) => {
{teams.map((team) => {
const ownerName = team.ownerId ? ownerMap[team.ownerId] : null;
return (
<div
@ -1013,12 +1087,11 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
<SelectValue placeholder="Select user" />
</SelectTrigger>
<SelectContent>
{allUsers.map((user: any) => {
// Check if user already owns a team in this league
const userOwnsTeam = teams.some((t: any) => t.ownerId === user.clerkId);
{allUsers.map((user) => {
const userOwnsTeam = teams.some((t) => t.ownerId === user.clerkId);
return (
<SelectItem
key={user.id}
<SelectItem
key={user.id}
value={user.clerkId}
disabled={userOwnsTeam}
>
@ -1047,6 +1120,118 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
</CardContent>
</Card>
{/* Commissioner Management */}
<Card>
<CardHeader>
<CardTitle>Commissioner Management</CardTitle>
<CardDescription>
Commissioners can manage league settings and oversee the draft. They do not need to own a team.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{actionData?.error && !actionData?.success && (
<div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
{actionData.error}
</div>
)}
{actionData?.success && actionData?.message && (
<div className="bg-green-500/15 text-green-700 dark:text-green-400 px-4 py-3 rounded-md text-sm">
{actionData.message}
</div>
)}
<div className="space-y-3">
{commissioners.map((commissioner) => (
<div
key={commissioner.id}
className="flex items-center justify-between p-3 border rounded-md"
>
<div className="flex-1">
<p className="font-medium">
{commissioner.userName}
{commissioner.userId === currentUserId && (
<span className="text-xs text-muted-foreground ml-2">(you)</span>
)}
</p>
{!teams.some((t) => t.ownerId === commissioner.userId) && (
<p className="text-xs text-muted-foreground">No team in current season</p>
)}
</div>
{commissioners.length > 1 && commissioner.userId !== currentUserId && (
<Form method="post">
<input type="hidden" name="intent" value="remove-commissioner" />
<input type="hidden" name="commissionerUserId" value={commissioner.userId} />
<Button
type="submit"
variant="outline"
size="sm"
disabled={navigation.state === "submitting"}
>
Remove
</Button>
</Form>
)}
</div>
))}
</div>
<div className="border-t pt-4">
<p className="text-sm font-medium mb-3">Add Commissioner</p>
<Form method="post" className="flex gap-2">
<input type="hidden" name="intent" value="add-commissioner" />
<Select name="userClerkId" required>
<SelectTrigger className="flex-1">
<SelectValue placeholder="Select a user" />
</SelectTrigger>
<SelectContent>
{isAdmin ? (
allUsers.map((user) => {
const alreadyCommissioner = commissioners.some(
(c) => c.userId === user.clerkId
);
return (
<SelectItem
key={user.id}
value={user.clerkId}
disabled={alreadyCommissioner}
>
{user.username || user.displayName || user.email}
{alreadyCommissioner && " (already commissioner)"}
</SelectItem>
);
})
) : (
leagueMembers.map((member) => {
const alreadyCommissioner = commissioners.some(
(c) => c.userId === member.clerkId
);
return (
<SelectItem
key={member.id}
value={member.clerkId}
disabled={alreadyCommissioner}
>
{member.name || "Unknown"}
{alreadyCommissioner && " (already commissioner)"}
</SelectItem>
);
})
)}
</SelectContent>
</Select>
<Button
type="submit"
variant="outline"
size="sm"
disabled={navigation.state === "submitting"}
>
Add
</Button>
</Form>
</div>
</CardContent>
</Card>
{/* Danger Zone */}
<Card className="border-destructive">
<CardHeader>

8
app/routes/leagues/$leagueId.tsx
View file

@ -373,6 +373,9 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
<div className="space-y-2">
{commissioners.map((commissioner) => {
const commissionerName = commissionerMap[commissioner.userId];
const hasTeam = teams.some(
(t) => t.ownerId === commissioner.userId
);
return (
<div
key={commissioner.id}
@ -386,6 +389,11 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
</span>
)}
</p>
{!hasTeam && (
<p className="text-xs text-muted-foreground">
No team
</p>
)}
</div>
);
})}

14
app/routes/leagues/new.tsx
View file

@ -194,11 +194,12 @@ export async function action(args: Route.ActionArgs) {
}
// Create teams with fun random names
const joinAsPlayer = formData.get("joinAsPlayer") === "on";
const teamNames = generateUniqueTeamNames(teamCountNum);
const teams = teamNames.map((name, i) => ({
seasonId: season.id,
name,
ownerId: i === 0 ? userId : null, // Assign first team to creator
ownerId: joinAsPlayer && i === 0 ? userId : null,
}));
await createManyTeams(teams);
@ -485,6 +486,17 @@ export default function NewLeague({ loaderData, actionData }: Route.ComponentPro
</div>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="joinAsPlayer"
name="joinAsPlayer"
defaultChecked={true}
/>
<Label htmlFor="joinAsPlayer" className="font-normal cursor-pointer">
I want to play in this league (claim a team)
</Label>
</div>
{actionData?.error && (
<div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
{actionData.error}

66
plan.md Normal file
View file

@ -0,0 +1,66 @@
# Plan: Commissioner Without a Team
## Current State
**At the database level**, commissioners and teams are already independent:
- Commissioners are stored in the `commissioners` table (league-level, keyed by `leagueId` + `userId`)
- Teams are stored in the `teams` table (season-level, keyed by `seasonId` + `ownerId`)
- A commissioner does NOT need a team to access the league homepage or draft room — this already works
**The actual problem** is that there's no way to *become* a commissioner without also getting a team:
1. **League creation** (`app/routes/leagues/new.tsx:198-201`): The creator is always assigned the first team (`ownerId: i === 0 ? userId : null`)
2. **No "Add Commissioner" UI**: There's no way for a league creator to add additional commissioners at all
3. **Invite link flow** (`app/routes/i.$inviteCode.tsx`): Joining always assigns a team — there's no option to join as commissioner-only
**Also**, the league creation flow has no opt-out for team ownership — the creator always gets Team 1.
## Changes
### 1. League creation: Add "Join as player" checkbox
**File**: `app/routes/leagues/new.tsx`
- Add a checkbox: "I want to play in this league" (checked by default)
- When unchecked, skip assigning the creator to the first team (all teams get `ownerId: null`)
- When checked, behavior stays the same (creator gets first team)
### 2. Add Commissioner Management UI to League Settings
**File**: `app/routes/leagues/$leagueId.settings.tsx`
- Add a new "Commissioner Management" card section
- Show current commissioners with a "Remove" button (cannot remove if they're the last commissioner)
- Add an "Add Commissioner" form with a user search/select dropdown
- Only show users who are already members of the league (team owners) OR allow adding by searching all users
- Since only the site admin can currently assign users to teams, let's keep it simple: commissioners can add any registered user as a commissioner
- Backend actions: `add-commissioner` and `remove-commissioner` intents
### 3. Model changes
**File**: `app/models/commissioner.ts`
- Already has `createCommissioner`, `deleteCommissioner`, `removeCommissionerByLeagueAndUser` — these are sufficient
- Add `countCommissionersByLeagueId` to prevent removing the last commissioner
### 4. Settings loader changes
**File**: `app/routes/leagues/$leagueId.settings.tsx`
- Load commissioners list and user data for display
- Load all users list for the "add commissioner" dropdown (reuse existing `allUsers` pattern but make it available to commissioners, not just admins)
### 5. League homepage: Show commissioner-only indicator
**File**: `app/routes/leagues/$leagueId.tsx`
- In the commissioners list, if a commissioner doesn't own a team in the current season, show a "(No team)" indicator next to their name
- This helps distinguish playing commissioners from non-playing commissioners
## Files to modify
1. `app/routes/leagues/new.tsx` — Add "play in league" checkbox, conditionally assign first team
2. `app/models/commissioner.ts` — Add `countCommissionersByLeagueId` helper
3. `app/routes/leagues/$leagueId.settings.tsx` — Add commissioner management card (loader + action + UI)
4. `app/routes/leagues/$leagueId.server.ts` — Pass team ownership info for commissioners to the homepage
5. `app/routes/leagues/$leagueId.tsx` — Show "(No team)" indicator for commissioners without teams
## Out of scope (not changing)
- The invite link flow — this is for players joining, not commissioners. Commissioners should be added through settings.
- The `createdBy` vs commissioners table inconsistency in draft control endpoints — that's a separate bug
- Adding a way for a commissioner to later claim/release a team mid-season — possible future work but not needed here