refactor(worksheets): Phase 5 - Final ConfigPanel cleanup
Final optimization of ConfigPanel.tsx: - Removed all unused helper functions (getDefaultColsForProblemsPerPage, calculateDerivedState) - Removed unused state variables (currentOrientation, currentProblemsPerPage, currentCols, currentPages) - Removed unused handleDifficultyChange function (now in SmartModeControls) - Removed all console.log debugging statements - Added missing defaultAdditionConfig import - ConfigPanel reduced to 105 lines (95.9% reduction from original 2550 lines) Fixed ManualModeControls: - Added missing Slider import from @radix-ui/react-slider - Fixed runtime error: "ReferenceError: Slider is not defined" Cleanup: - Removed ConfigPanel.tsx.bak backup file - Removed temporary shell scripts (/tmp/create_manual_mode.sh, /tmp/replace_manual_mode.sh) ConfigPanel now contains ONLY: - Props interface - Mode switching handler (smart ↔ manual) - Clean JSX rendering extracted components All 5 phases of refactoring complete: ✅ Phase 1: Helper components (utils, SubOption, ToggleOption) ✅ Phase 2: Shared sections (StudentName, DigitRange, Operator, ProgressiveDifficulty) ✅ Phase 3: Smart Mode controls (1412 lines → SmartModeControls.tsx) ✅ Phase 4: Manual Mode controls (339 lines → ManualModeControls.tsx) ✅ Phase 5: Final cleanup (2550 lines → 105 lines) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
@@ -2,6 +2,7 @@
|
||||
|
||||
import { stack } from '../../../../../../styled-system/patterns'
|
||||
import type { WorksheetFormState } from '../types'
|
||||
import { defaultAdditionConfig } from '@/app/create/worksheets/config-schemas'
|
||||
import { ModeSelector } from './ModeSelector'
|
||||
import { StudentNameInput } from './config-panel/StudentNameInput'
|
||||
import { DigitRangeSection } from './config-panel/DigitRangeSection'
|
||||
@@ -16,109 +17,6 @@ interface ConfigPanelProps {
|
||||
}
|
||||
|
||||
export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
|
||||
// Helper to get default column count for a given problemsPerPage (user can override)
|
||||
const getDefaultColsForProblemsPerPage = (
|
||||
problemsPerPage: number,
|
||||
orientation: 'portrait' | 'landscape'
|
||||
): number => {
|
||||
if (orientation === 'portrait') {
|
||||
// Portrait: prefer 2-3 columns
|
||||
if (problemsPerPage === 6) return 2
|
||||
if (problemsPerPage === 8) return 2
|
||||
if (problemsPerPage === 10) return 2
|
||||
if (problemsPerPage === 12) return 3
|
||||
if (problemsPerPage === 15) return 3
|
||||
return 2 // default
|
||||
} else {
|
||||
// Landscape: prefer 4-5 columns
|
||||
if (problemsPerPage === 8) return 4
|
||||
if (problemsPerPage === 10) return 5
|
||||
if (problemsPerPage === 12) return 4
|
||||
if (problemsPerPage === 15) return 5
|
||||
if (problemsPerPage === 16) return 4
|
||||
if (problemsPerPage === 20) return 5
|
||||
return 4 // default
|
||||
}
|
||||
}
|
||||
|
||||
// Helper to calculate derived state (rows, total) from primary state (problemsPerPage, cols, pages)
|
||||
const calculateDerivedState = (problemsPerPage: number, cols: number, pages: number) => {
|
||||
const rowsPerPage = problemsPerPage / cols
|
||||
const rows = rowsPerPage * pages
|
||||
const total = problemsPerPage * pages
|
||||
return { rows, total }
|
||||
}
|
||||
|
||||
// Get current primary state with defaults
|
||||
const currentOrientation = formState.orientation || 'portrait'
|
||||
const currentProblemsPerPage =
|
||||
formState.problemsPerPage || (currentOrientation === 'portrait' ? 15 : 20)
|
||||
const currentCols =
|
||||
formState.cols || getDefaultColsForProblemsPerPage(currentProblemsPerPage, currentOrientation)
|
||||
const currentPages = formState.pages || 1
|
||||
|
||||
console.log('=== ConfigPanel Render ===')
|
||||
console.log('Primary state:', {
|
||||
problemsPerPage: currentProblemsPerPage,
|
||||
cols: currentCols,
|
||||
pages: currentPages,
|
||||
orientation: currentOrientation,
|
||||
})
|
||||
console.log(
|
||||
'Derived state:',
|
||||
calculateDerivedState(currentProblemsPerPage, currentCols, currentPages)
|
||||
)
|
||||
|
||||
// Helper function to handle difficulty adjustments
|
||||
const handleDifficultyChange = (mode: DifficultyMode, direction: 'harder' | 'easier') => {
|
||||
// Defensive: Ensure all required fields are defined before calling makeHarder/makeEasier
|
||||
// This prevents "Cannot read properties of undefined" errors in production
|
||||
|
||||
// Log warning if any fields are missing (helps debug production issues)
|
||||
if (!formState.displayRules || !formState.pAnyStart || !formState.pAllStart) {
|
||||
console.error('[ConfigPanel] Missing required fields for difficulty adjustment!', {
|
||||
hasDisplayRules: !!formState.displayRules,
|
||||
hasPAnyStart: formState.pAnyStart !== undefined,
|
||||
hasPAllStart: formState.pAllStart !== undefined,
|
||||
formState,
|
||||
})
|
||||
}
|
||||
|
||||
const currentState = {
|
||||
pAnyStart: formState.pAnyStart ?? defaultAdditionConfig.pAnyStart,
|
||||
pAllStart: formState.pAllStart ?? defaultAdditionConfig.pAllStart,
|
||||
displayRules: formState.displayRules ?? defaultAdditionConfig.displayRules,
|
||||
}
|
||||
|
||||
const result =
|
||||
direction === 'harder' ? makeHarder(currentState, mode) : makeEasier(currentState, mode)
|
||||
|
||||
const beforeReg = calculateRegroupingIntensity(currentState.pAnyStart, currentState.pAllStart)
|
||||
const beforeScaf = calculateScaffoldingLevel(currentState.displayRules, beforeReg)
|
||||
const afterReg = calculateRegroupingIntensity(result.pAnyStart, result.pAllStart)
|
||||
const afterScaf = calculateScaffoldingLevel(result.displayRules, afterReg)
|
||||
|
||||
console.log(`=== MAKE ${direction.toUpperCase()} (${mode}) ===`)
|
||||
console.log(
|
||||
`BEFORE: (${beforeReg.toFixed(2)}, ${beforeScaf.toFixed(2)}) | pAny=${(currentState.pAnyStart * 100).toFixed(0)}% pAll=${(currentState.pAllStart * 100).toFixed(0)}% | rules=${JSON.stringify(currentState.displayRules)}`
|
||||
)
|
||||
console.log(
|
||||
`AFTER: (${afterReg.toFixed(2)}, ${afterScaf.toFixed(2)}) | pAny=${(result.pAnyStart * 100).toFixed(0)}% pAll=${(result.pAllStart * 100).toFixed(0)}% | rules=${JSON.stringify(result.displayRules)}`
|
||||
)
|
||||
console.log(
|
||||
`DELTA: (${(afterReg - beforeReg).toFixed(2)}, ${(afterScaf - beforeScaf).toFixed(2)})`
|
||||
)
|
||||
console.log(`DESC: ${result.changeDescription}`)
|
||||
console.log('==================')
|
||||
|
||||
onChange({
|
||||
difficultyProfile: result.difficultyProfile,
|
||||
displayRules: result.displayRules,
|
||||
pAllStart: result.pAllStart,
|
||||
pAnyStart: result.pAnyStart,
|
||||
})
|
||||
}
|
||||
|
||||
// Handler for mode switching
|
||||
const handleModeChange = (newMode: 'smart' | 'manual') => {
|
||||
if (formState.mode === newMode) {
|
||||
|
||||
@@ -1,208 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { stack } from '../../../../../../styled-system/patterns'
|
||||
import type { WorksheetFormState } from '../types'
|
||||
import { ModeSelector } from './ModeSelector'
|
||||
import { StudentNameInput } from './config-panel/StudentNameInput'
|
||||
import { DigitRangeSection } from './config-panel/DigitRangeSection'
|
||||
import { OperatorSection } from './config-panel/OperatorSection'
|
||||
import { ProgressiveDifficultyToggle } from './config-panel/ProgressiveDifficultyToggle'
|
||||
import { SmartModeControls } from './config-panel/SmartModeControls'
|
||||
import { ManualModeControls } from './config-panel/ManualModeControls'
|
||||
|
||||
interface ConfigPanelProps {
|
||||
formState: WorksheetFormState
|
||||
onChange: (updates: Partial<WorksheetFormState>) => void
|
||||
}
|
||||
|
||||
export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
|
||||
const t = useTranslations('create.worksheets.addition')
|
||||
|
||||
// Helper to get default column count for a given problemsPerPage (user can override)
|
||||
const getDefaultColsForProblemsPerPage = (
|
||||
problemsPerPage: number,
|
||||
orientation: 'portrait' | 'landscape'
|
||||
): number => {
|
||||
if (orientation === 'portrait') {
|
||||
// Portrait: prefer 2-3 columns
|
||||
if (problemsPerPage === 6) return 2
|
||||
if (problemsPerPage === 8) return 2
|
||||
if (problemsPerPage === 10) return 2
|
||||
if (problemsPerPage === 12) return 3
|
||||
if (problemsPerPage === 15) return 3
|
||||
return 2 // default
|
||||
} else {
|
||||
// Landscape: prefer 4-5 columns
|
||||
if (problemsPerPage === 8) return 4
|
||||
if (problemsPerPage === 10) return 5
|
||||
if (problemsPerPage === 12) return 4
|
||||
if (problemsPerPage === 15) return 5
|
||||
if (problemsPerPage === 16) return 4
|
||||
if (problemsPerPage === 20) return 5
|
||||
return 4 // default
|
||||
}
|
||||
}
|
||||
|
||||
// Helper to calculate derived state (rows, total) from primary state (problemsPerPage, cols, pages)
|
||||
const calculateDerivedState = (problemsPerPage: number, cols: number, pages: number) => {
|
||||
const rowsPerPage = problemsPerPage / cols
|
||||
const rows = rowsPerPage * pages
|
||||
const total = problemsPerPage * pages
|
||||
return { rows, total }
|
||||
}
|
||||
|
||||
// Get current primary state with defaults
|
||||
const currentOrientation = formState.orientation || 'portrait'
|
||||
const currentProblemsPerPage =
|
||||
formState.problemsPerPage || (currentOrientation === 'portrait' ? 15 : 20)
|
||||
const currentCols =
|
||||
formState.cols || getDefaultColsForProblemsPerPage(currentProblemsPerPage, currentOrientation)
|
||||
const currentPages = formState.pages || 1
|
||||
|
||||
console.log('=== ConfigPanel Render ===')
|
||||
console.log('Primary state:', {
|
||||
problemsPerPage: currentProblemsPerPage,
|
||||
cols: currentCols,
|
||||
pages: currentPages,
|
||||
orientation: currentOrientation,
|
||||
})
|
||||
console.log(
|
||||
'Derived state:',
|
||||
calculateDerivedState(currentProblemsPerPage, currentCols, currentPages)
|
||||
)
|
||||
|
||||
// Helper function to handle difficulty adjustments
|
||||
const handleDifficultyChange = (mode: DifficultyMode, direction: 'harder' | 'easier') => {
|
||||
// Defensive: Ensure all required fields are defined before calling makeHarder/makeEasier
|
||||
// This prevents "Cannot read properties of undefined" errors in production
|
||||
|
||||
// Log warning if any fields are missing (helps debug production issues)
|
||||
if (!formState.displayRules || !formState.pAnyStart || !formState.pAllStart) {
|
||||
console.error('[ConfigPanel] Missing required fields for difficulty adjustment!', {
|
||||
hasDisplayRules: !!formState.displayRules,
|
||||
hasPAnyStart: formState.pAnyStart !== undefined,
|
||||
hasPAllStart: formState.pAllStart !== undefined,
|
||||
formState,
|
||||
})
|
||||
}
|
||||
|
||||
const currentState = {
|
||||
pAnyStart: formState.pAnyStart ?? defaultAdditionConfig.pAnyStart,
|
||||
pAllStart: formState.pAllStart ?? defaultAdditionConfig.pAllStart,
|
||||
displayRules: formState.displayRules ?? defaultAdditionConfig.displayRules,
|
||||
}
|
||||
|
||||
const result =
|
||||
direction === 'harder' ? makeHarder(currentState, mode) : makeEasier(currentState, mode)
|
||||
|
||||
const beforeReg = calculateRegroupingIntensity(currentState.pAnyStart, currentState.pAllStart)
|
||||
const beforeScaf = calculateScaffoldingLevel(currentState.displayRules, beforeReg)
|
||||
const afterReg = calculateRegroupingIntensity(result.pAnyStart, result.pAllStart)
|
||||
const afterScaf = calculateScaffoldingLevel(result.displayRules, afterReg)
|
||||
|
||||
console.log(`=== MAKE ${direction.toUpperCase()} (${mode}) ===`)
|
||||
console.log(
|
||||
`BEFORE: (${beforeReg.toFixed(2)}, ${beforeScaf.toFixed(2)}) | pAny=${(currentState.pAnyStart * 100).toFixed(0)}% pAll=${(currentState.pAllStart * 100).toFixed(0)}% | rules=${JSON.stringify(currentState.displayRules)}`
|
||||
)
|
||||
console.log(
|
||||
`AFTER: (${afterReg.toFixed(2)}, ${afterScaf.toFixed(2)}) | pAny=${(result.pAnyStart * 100).toFixed(0)}% pAll=${(result.pAllStart * 100).toFixed(0)}% | rules=${JSON.stringify(result.displayRules)}`
|
||||
)
|
||||
console.log(
|
||||
`DELTA: (${(afterReg - beforeReg).toFixed(2)}, ${(afterScaf - beforeScaf).toFixed(2)})`
|
||||
)
|
||||
console.log(`DESC: ${result.changeDescription}`)
|
||||
console.log('==================')
|
||||
|
||||
onChange({
|
||||
difficultyProfile: result.difficultyProfile,
|
||||
displayRules: result.displayRules,
|
||||
pAllStart: result.pAllStart,
|
||||
pAnyStart: result.pAnyStart,
|
||||
})
|
||||
}
|
||||
|
||||
// Handler for mode switching
|
||||
const handleModeChange = (newMode: 'smart' | 'manual') => {
|
||||
if (formState.mode === newMode) {
|
||||
return // No change needed
|
||||
}
|
||||
|
||||
if (newMode === 'smart') {
|
||||
// Switching to Smart mode
|
||||
// Use current displayRules if available, otherwise default to earlyLearner
|
||||
const displayRules = formState.displayRules ?? defaultAdditionConfig.displayRules
|
||||
onChange({
|
||||
mode: 'smart',
|
||||
displayRules,
|
||||
difficultyProfile: 'earlyLearner',
|
||||
} as unknown as Partial<WorksheetFormState>)
|
||||
} else {
|
||||
// Switching to Manual mode
|
||||
// Convert current displayRules to boolean flags if available
|
||||
let booleanFlags = {
|
||||
showCarryBoxes: true,
|
||||
showAnswerBoxes: true,
|
||||
showPlaceValueColors: true,
|
||||
showTenFrames: false,
|
||||
showProblemNumbers: true,
|
||||
showCellBorder: true,
|
||||
showTenFramesForAll: false,
|
||||
}
|
||||
|
||||
if (formState.displayRules) {
|
||||
// Convert 'always' to true, everything else to false
|
||||
booleanFlags = {
|
||||
showCarryBoxes: formState.displayRules.carryBoxes === 'always',
|
||||
showAnswerBoxes: formState.displayRules.answerBoxes === 'always',
|
||||
showPlaceValueColors: formState.displayRules.placeValueColors === 'always',
|
||||
showTenFrames: formState.displayRules.tenFrames === 'always',
|
||||
showProblemNumbers: formState.displayRules.problemNumbers === 'always',
|
||||
showCellBorder: formState.displayRules.cellBorders === 'always',
|
||||
showTenFramesForAll: false,
|
||||
}
|
||||
}
|
||||
|
||||
onChange({
|
||||
mode: 'manual',
|
||||
...booleanFlags,
|
||||
} as unknown as Partial<WorksheetFormState>)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div data-component="config-panel" className={stack({ gap: '3' })}>
|
||||
{/* Student Name */}
|
||||
<StudentNameInput value={formState.name} onChange={(name) => onChange({ name })} />
|
||||
|
||||
{/* Digit Range Selector */}
|
||||
<DigitRangeSection
|
||||
digitRange={formState.digitRange}
|
||||
onChange={(digitRange) => onChange({ digitRange })}
|
||||
/>
|
||||
|
||||
{/* Operator Selector */}
|
||||
<OperatorSection
|
||||
operator={formState.operator}
|
||||
onChange={(operator) => onChange({ operator })}
|
||||
/>
|
||||
|
||||
{/* Mode Selector */}
|
||||
<ModeSelector currentMode={formState.mode ?? 'smart'} onChange={handleModeChange} />
|
||||
|
||||
{/* Progressive Difficulty Toggle - Available for both modes */}
|
||||
<ProgressiveDifficultyToggle
|
||||
interpolate={formState.interpolate}
|
||||
onChange={(interpolate) => onChange({ interpolate })}
|
||||
/>
|
||||
|
||||
{/* Smart Mode Controls */}
|
||||
{(!formState.mode || formState.mode === 'smart') && (
|
||||
<SmartModeControls formState={formState} onChange={onChange} />
|
||||
)}
|
||||
|
||||
|
||||
{/* Manual Mode Controls */}
|
||||
{formState.mode === 'manual' && <ManualModeControls formState={formState} onChange={onChange} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import * as Slider from '@radix-ui/react-slider'
|
||||
import { css } from '../../../../../../../styled-system/css'
|
||||
import { stack } from '../../../../../../../styled-system/patterns'
|
||||
import type { WorksheetFormState } from '../../types'
|
||||
|
||||
@@ -470,6 +470,38 @@ function HamburgerMenu({
|
||||
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
|
||||
<LanguageSelector variant="dropdown-item" isFullscreen={isFullscreen} />
|
||||
</div>
|
||||
|
||||
<DropdownMenu.Separator
|
||||
style={{
|
||||
height: '1px',
|
||||
background: 'rgba(75, 85, 99, 0.5)',
|
||||
margin: '6px 0',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Theme Section */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
fontWeight: '600',
|
||||
color: 'rgba(196, 181, 253, 0.7)',
|
||||
marginBottom: '6px',
|
||||
marginLeft: '12px',
|
||||
marginTop: '6px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
}}
|
||||
>
|
||||
Theme
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{ padding: '0 6px' }}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
|
||||
@@ -757,14 +789,14 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
|
||||
</NavLink>
|
||||
</nav>
|
||||
|
||||
{/* Abacus Style Dropdown */}
|
||||
<AbacusDisplayDropdown isFullscreen={false} />
|
||||
|
||||
{/* Language Selector */}
|
||||
<LanguageSelector variant="inline" isFullscreen={false} />
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<ThemeToggle />
|
||||
{/* Hamburger Menu */}
|
||||
<HamburgerMenu
|
||||
isFullscreen={false}
|
||||
isArcadePage={false}
|
||||
pathname={pathname}
|
||||
toggleFullscreen={toggleFullscreen}
|
||||
router={router}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user