**Version:** 1.0.0
Improves code quality through refactoring while maintaining all existing tests. Use this after Phase 5b to eliminate duplication, reduce complexity, and optimize performance without changing behavior.
/plugin marketplace add nguyenthienthanh/ccpm-team-agents/plugin install nguyenthienthanh-aura-frog-aura-frog-2@nguyenthienthanh/ccpm-team-agentsworkflow/Version: 1.0.0
Purpose: Execute Phase 5c - Refactor (REFACTOR Phase of TDD)
Trigger: Auto-triggered after Phase 5b approval OR manual /workflow:phase:5c
Improve code quality WITHOUT changing behavior.
Deliverables:
Safety Net: Tests ensure no regressions
Capture current state:
// Before Refactoring
const baseline = {
complexity: 18, // Cyclomatic complexity
duplication: 25, // % duplicated code
maintainability: 65, // Maintainability index
linesOfCode: 650,
testsPassing: 73,
coverage: 88.2,
};
Common Issues to Fix:
// ā BEFORE: Duplicated loading button logic
<TouchableOpacity disabled={isLoading}>
<Text>{isLoading ? 'Loading...' : 'Save'}</Text>
</TouchableOpacity>
<TouchableOpacity disabled={isGenerating}>
<Text>{isGenerating ? 'Generating...' : 'Generate'}</Text>
</TouchableOpacity>
// ā
AFTER: Extract LoadingButton component
<LoadingButton
onPress={onSave}
isLoading={isLoading}
label="Save"
loadingLabel="Saving..."
/>
<LoadingButton
onPress={onGenerate}
isLoading={isGenerating}
label="Generate"
loadingLabel="Generating..."
/>
// ā BEFORE: 50+ line function
const handlePostNow = async () => {
// Validation logic
// API call preparation
// Error handling
// Success handling
// Analytics tracking
// Navigation
// 50+ lines total
};
// ā
AFTER: Break into smaller functions
const handlePostNow = async () => {
if (!validatePost()) return;
const postData = preparePostData();
const result = await submitPost(postData);
handlePostResult(result);
trackPostAnalytics(result);
navigateToResult(result);
};
// ā BEFORE: Nested conditionals
if (user) {
if (user.isActive) {
if (user.hasPermission) {
// Do something
}
}
}
// ā
AFTER: Early returns
if (!user) return;
if (!user.isActive) return;
if (!user.hasPermission) return;
// Do something
// ā BEFORE: Magic values
if (caption.length > 280) {
// Error
}
// ā
AFTER: Named constants
const MAX_CAPTION_LENGTH = 280;
if (caption.length > MAX_CAPTION_LENGTH) {
// Error
}
Agent: Primary dev agent
Apply refactorings one at a time:
# Refactor 1: Extract LoadingButton
ā Run tests ā All pass ā
ā Commit changes
# Refactor 2: Break handlePostNow into smaller functions
ā Run tests ā All pass ā
ā Commit changes
# Refactor 3: Simplify conditionals
ā Run tests ā All pass ā
ā Commit changes
# ... continue
// Add React.memo for pure components
export const PostCaptionEditor = React.memo<PostCaptionEditorProps>(
({ caption, onCaptionChange, ...props }) => {
// Component code
}
);
// Use useCallback for event handlers
const handleCaptionChange = useCallback((text: string) => {
onCaptionChange(text);
}, [onCaptionChange]);
// Use useMemo for derived values
const isValid = useMemo(() => {
return caption.length > 0 && caption.length <= MAX_CAPTION_LENGTH;
}, [caption]);
// Add comprehensive JSDoc
/**
* PostCaptionEditor - Component for editing post captions
*
* @param caption - Current caption text
* @param onCaptionChange - Callback when caption changes
* @param onGenerate - Optional callback to generate caption via AI
* @param canGenerate - Whether generate button should be shown
* @param isGenerating - Whether caption is currently being generated
*
* @example
* <PostCaptionEditor
* caption={post.caption}
* onCaptionChange={setCaption}
* onGenerate={handleGenerate}
* canGenerate={true}
* />
*/
# After EVERY refactoring:
npm test
# Must see:
Test Suites: 6 passed, 6 total
Tests: 73 passed, 73 total
Coverage: 88.2% (maintained) ā
// After Refactoring
const improved = {
complexity: 8, // ā
Reduced from 18
duplication: 5, // ā
Reduced from 25
maintainability: 85, // ā
Improved from 65
linesOfCode: 620, // ā
Reduced from 650
testsPassing: 73, // ā
Still 73 (no change)
coverage: 88.5, // ā
Slightly improved
};
const improvements = {
complexity: -56%, // 56% reduction
duplication: -80%, // 80% reduction
maintainability: +31%, // 31% improvement
};
Phase 5c complete when:
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
šÆ PHASE 5c COMPLETE: Refactor
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š Summary:
Refactored code for better quality, all tests still passing!
š¦ Changes Made:
ā»ļø Extracted LoadingButton component (removed duplication)
ā»ļø Split handlePostNow into 5 smaller functions
ā»ļø Simplified nested conditionals (early returns)
ā»ļø Replaced magic numbers with constants
ā»ļø Added React.memo to 3 components
ā»ļø Added useCallback to 8 handlers
ā»ļø Added comprehensive JSDoc comments
š¢ Test Results (Still GREEN!):
Total: 73 tests
Passing: 73 ā
Failing: 0 ā
Coverage: 88.5% ā
(improved from 88.2%)
Duration: 11.8s (faster!)
š Code Quality Improvements:
Complexity: 8 (was 18) ā 56%
Duplication: 5% (was 25%) ā 80%
Maintainability: 85 (was 65) ā 31%
Lines of Code: 620 (was 650) ā 5%
ā
Success Criteria:
ā
Code refactored
ā
All tests still passing
ā
Coverage maintained (88.5%)
ā
Complexity reduced (-56%)
ā
Duplication eliminated (-80%)
ā
No behavior changes
āļø Next Phase: Phase 6 - Code Review
Cross-agent review for final quality check
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ļø ACTION REQUIRED
Type "/workflow:approve" ā Proceed to Phase 6 (Code Review)
Type "/workflow:reject" ā Revert refactorings
Type "/workflow:modify <feedback>" ā Adjust refactorings
Your response:
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
// After each refactoring, verify:
const safetyChecks = {
testsPass: true, // ā
REQUIRED
coverageMaintained: true, // ā
REQUIRED
behaviorUnchanged: true, // ā
REQUIRED
performanceOK: true, // ā
REQUIRED
};
if (!safetyChecks.testsPass) {
console.error('ā Tests broke! Revert refactoring.');
git.revert();
}
src/features/socialMarketing/
āāā components/
āāā SocialMarketingCompositePost/
āāā SocialMarketingCompositePost.phone.tsx (refactored)
āāā components/
ā āāā PostCaptionEditor.tsx (optimized)
ā āāā PlatformSelector.tsx (optimized)
ā āāā MediaPreviewSection.tsx (optimized)
ā āāā PostActionButtons.tsx (optimized)
ā āāā LoadingButton.tsx (new - extracted)
āāā hooks/
āāā useSocialMarketingCompositePostLogic.ts (refactored)
logs/contexts/{workflow-id}/deliverables/
āāā PHASE_5C_REFACTORING_REPORT.md
After approval ā /workflow:phase:6:
Status: Active command
Related: workflow:phase:5b, workflow:phase:6, workflow:approve
Remember:
ā»ļø REFACTOR = IMPROVE! Better code, same behavior, tests still green!