Complexity: High (200)
Problem: CreateGroupModal.tsx combines step transitions, form state, avatar selection, member curation, and creation mapping in one large component.
Scope: Extract the modal’s flow logic into a reusable reducer or hook so UI steps stay declarative.
Implementation guidance: Keep the modal component focused on rendering and move step progression plus draft state into a flow model.
Acceptance criteria: The group-creation modal no longer owns a large amount of mutable wizard logic inline.
Validation: Tests for step transitions, validation gating, reset on close, and creation payload generation.
Files to modify: frontend/src/components/SplitGroup/CreateGroupModal.tsx, frontend/src/components/SplitGroup/MemberList.tsx
Files to create: frontend/src/components/SplitGroup/useCreateGroupFlow.ts
Complexity: High (200)
Problem:
CreateGroupModal.tsxcombines step transitions, form state, avatar selection, member curation, and creation mapping in one large component.Scope: Extract the modal’s flow logic into a reusable reducer or hook so UI steps stay declarative.
Implementation guidance: Keep the modal component focused on rendering and move step progression plus draft state into a flow model.
Acceptance criteria: The group-creation modal no longer owns a large amount of mutable wizard logic inline.
Validation: Tests for step transitions, validation gating, reset on close, and creation payload generation.
Files to modify:
frontend/src/components/SplitGroup/CreateGroupModal.tsx,frontend/src/components/SplitGroup/MemberList.tsxFiles to create:
frontend/src/components/SplitGroup/useCreateGroupFlow.ts