Skip to content

refactor(resume): Optimize resume components and error handling #252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codeunia-dev merged 1 commit into from
Oct 27, 2025
Merged

refactor(resume): Optimize resume components and error handling #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion components/resume/ConfettiEffect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
'use client';

import { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';

interface ConfettiPiece {
id: number;
Expand Down
4 changes: 2 additions & 2 deletions components/resume/ResumeErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { Component, ReactNode } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { AlertTriangle, RefreshCw } from 'lucide-react';
import { ResumeError, ErrorLogger, getErrorMessage } from '@/lib/errors/resume-errors';
import { ResumeError, ResumeErrorCode, ErrorLogger, getErrorMessage } from '@/lib/errors/resume-errors';

interface Props {
children: ReactNode;
Expand Down Expand Up @@ -45,7 +45,7 @@ export class ResumeErrorBoundary extends Component<Props, State> {
});
} else {
ErrorLogger.log(
new ResumeError(error.message, 'UNKNOWN_ERROR' as any, {
new ResumeError(error.message, ResumeErrorCode.UNKNOWN_ERROR, {
originalError: error,
componentStack: errorInfo.componentStack,
})
Expand Down
10 changes: 5 additions & 5 deletions components/resume/ResumeList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export function ResumeList({ onResumeSelect, onCreateNew }: ResumeListProps) {
toast.success('Resume loaded', {
description: `Loaded "${resume.title}"`,
});
} catch (error) {
} catch {
toast.error('Failed to load resume', {
description: 'Please try again.',
});
Expand All @@ -94,7 +94,7 @@ export function ResumeList({ onResumeSelect, onCreateNew }: ResumeListProps) {
toast.success('Resume duplicated', {
description: `Created "${duplicated.title}"`,
});
} catch (error) {
} catch {
toast.error('Failed to duplicate resume', {
description: 'Please try again.',
});
Expand All @@ -119,7 +119,7 @@ export function ResumeList({ onResumeSelect, onCreateNew }: ResumeListProps) {
});
setDeleteDialogOpen(false);
setResumeToDelete(null);
} catch (error) {
} catch {
toast.error('Failed to delete resume', {
description: 'Please try again.',
});
Expand All @@ -136,7 +136,7 @@ export function ResumeList({ onResumeSelect, onCreateNew }: ResumeListProps) {
toast.success('Resume created', {
description: `Created "${newResume.title}"`,
});
} catch (error) {
} catch {
toast.error('Failed to create resume', {
description: 'Please try again.',
});
Expand Down Expand Up @@ -277,7 +277,7 @@ export function ResumeList({ onResumeSelect, onCreateNew }: ResumeListProps) {
<AlertDialogHeader>
<AlertDialogTitle>Delete Resume</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to delete "{resumeToDelete?.title}"? This action cannot be undone.
Are you sure you want to delete &ldquo;{resumeToDelete?.title}&rdquo;? This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
Expand Down
1 change: 0 additions & 1 deletion components/resume/ResumePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { useState, useEffect, useRef } from 'react';

// Constants for page calculations
const PAGE_HEIGHT_INCHES = 11;
const PAGE_WIDTH_INCHES = 8.5;
const PIXELS_PER_INCH = 96; // Standard screen DPI
const PAGE_HEIGHT_PX = PAGE_HEIGHT_INCHES * PIXELS_PER_INCH;

Expand Down
2 changes: 1 addition & 1 deletion components/resume/SaveAsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export function SaveAsDialog({ open, onOpenChange }: SaveAsDialogProps) {
});

onOpenChange(false);
} catch (error) {
} catch {
toast.error('Failed to save as', {
description: 'Please try again.',
});
Expand Down
2 changes: 1 addition & 1 deletion components/resume/SaveErrorBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function SaveErrorBanner({ onRetry, onDismiss }: SaveErrorBannerProps) {
} else {
try {
await saveResume();
} catch (err) {
} catch {
// Error is handled by context
}
}
Expand Down
24 changes: 12 additions & 12 deletions components/resume/StyleCustomizer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ export function StyleCustomizer() {
<div className="space-y-3">
<div className="flex items-center justify-between">
<Label htmlFor="margin-top">Top Margin</Label>
<span className="text-sm text-muted-foreground">{styling.margin_top}"</span>
<span className="text-sm text-muted-foreground">{styling.margin_top}&rdquo;</span>
</div>
<Slider
id="margin-top"
Expand All @@ -326,16 +326,16 @@ export function StyleCustomizer() {
className="w-full"
/>
<div className="flex justify-between text-xs text-muted-foreground">
<span>0.5"</span>
<span>1.5"</span>
<span>0.5&rdquo;</span>
<span>1.5&rdquo;</span>
</div>
</div>

{/* Bottom Margin */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<Label htmlFor="margin-bottom">Bottom Margin</Label>
<span className="text-sm text-muted-foreground">{styling.margin_bottom}"</span>
<span className="text-sm text-muted-foreground">{styling.margin_bottom}&rdquo;</span>
</div>
<Slider
id="margin-bottom"
Expand All @@ -347,16 +347,16 @@ export function StyleCustomizer() {
className="w-full"
/>
<div className="flex justify-between text-xs text-muted-foreground">
<span>0.5"</span>
<span>1.5"</span>
<span>0.5&rdquo;</span>
<span>1.5&rdquo;</span>
</div>
</div>

{/* Left Margin */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<Label htmlFor="margin-left">Left Margin</Label>
<span className="text-sm text-muted-foreground">{styling.margin_left}"</span>
<span className="text-sm text-muted-foreground">{styling.margin_left}&rdquo;</span>
</div>
<Slider
id="margin-left"
Expand All @@ -368,16 +368,16 @@ export function StyleCustomizer() {
className="w-full"
/>
<div className="flex justify-between text-xs text-muted-foreground">
<span>0.5"</span>
<span>1.5"</span>
<span>0.5&rdquo;</span>
<span>1.5&rdquo;</span>
</div>
</div>

{/* Right Margin */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<Label htmlFor="margin-right">Right Margin</Label>
<span className="text-sm text-muted-foreground">{styling.margin_right}"</span>
<span className="text-sm text-muted-foreground">{styling.margin_right}&rdquo;</span>
</div>
<Slider
id="margin-right"
Expand All @@ -389,8 +389,8 @@ export function StyleCustomizer() {
className="w-full"
/>
<div className="flex justify-between text-xs text-muted-foreground">
<span>0.5"</span>
<span>1.5"</span>
<span>0.5&rdquo;</span>
<span>1.5&rdquo;</span>
</div>
</div>

Expand Down
22 changes: 0 additions & 22 deletions components/resume/SuggestionPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,28 +64,6 @@ export function SuggestionPanel({ className }: SuggestionPanelProps) {
return 'Needs Work';
};

const getSeverityIcon = (severity: ResumeSuggestion['severity']) => {
switch (severity) {
case 'critical':
return <AlertCircle className="h-4 w-4 text-red-500" />;
case 'warning':
return <AlertTriangle className="h-4 w-4 text-yellow-500" />;
case 'info':
return <Info className="h-4 w-4 text-blue-500" />;
}
};

const getSeverityBadgeVariant = (severity: ResumeSuggestion['severity']) => {
switch (severity) {
case 'critical':
return 'destructive';
case 'warning':
return 'default';
case 'info':
return 'secondary';
}
};

// Group suggestions by severity
const criticalSuggestions = suggestions.filter((s) => s.severity === 'critical');
const warningSuggestions = suggestions.filter((s) => s.severity === 'warning');
Expand Down
2 changes: 1 addition & 1 deletion components/resume/sections/AwardsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export function AwardsSection({ content, onChange }: AwardsSectionProps) {
<div className="text-center py-8 text-muted-foreground">
<Trophy className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">No awards yet</p>
<p className="text-xs mt-1">Click "Add Award" to get started</p>
<p className="text-xs mt-1">Click &ldquo;Add Award&rdquo; to get started</p>
</div>
) : (
content.map((award, index) => (
Expand Down
2 changes: 1 addition & 1 deletion components/resume/sections/CertificationsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export function CertificationsSection({ content, onChange }: CertificationsSecti
<div className="text-center py-8 text-muted-foreground">
<Award className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">No certifications yet</p>
<p className="text-xs mt-1">Click "Add Certification" to get started</p>
<p className="text-xs mt-1">Click &ldquo;Add Certification&rdquo; to get started</p>
</div>
) : (
content.map((certification, index) => (
Expand Down
2 changes: 1 addition & 1 deletion components/resume/sections/EducationSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ export function EducationSection({ content, onChange }: EducationSectionProps) {
<div className="text-center py-8 text-muted-foreground">
<GraduationCap className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">No education entries yet</p>
<p className="text-xs mt-1">Click "Add Education" to get started</p>
<p className="text-xs mt-1">Click &ldquo;Add Education&rdquo; to get started</p>
</div>
) : (
content.map((education, index) => (
Expand Down
2 changes: 1 addition & 1 deletion components/resume/sections/ExperienceSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export function ExperienceSection({ content, onChange }: ExperienceSectionProps)
<div className="text-center py-8 text-muted-foreground">
<Briefcase className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">No work experience entries yet</p>
<p className="text-xs mt-1">Click "Add Experience" to get started</p>
<p className="text-xs mt-1">Click &ldquo;Add Experience&rdquo; to get started</p>
</div>
) : (
content.map((experience, index) => (
Expand Down
2 changes: 1 addition & 1 deletion components/resume/sections/ProjectsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export function ProjectsSection({ content, onChange }: ProjectsSectionProps) {
<div className="text-center py-8 text-muted-foreground">
<Code className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">No projects yet</p>
<p className="text-xs mt-1">Click "Add Project" to get started</p>
<p className="text-xs mt-1">Click &ldquo;Add Project&rdquo; to get started</p>
</div>
) : (
content.map((project, index) => (
Expand Down
19 changes: 11 additions & 8 deletions components/resume/sections/SkillsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { Skill } from '@/types/resume';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
Expand Down Expand Up @@ -50,7 +49,7 @@ function SortableSkillCategory({
onRemove: (id: string) => void;
}) {
const [inputValue, setInputValue] = useState('');
const [isExpanded, setIsExpanded] = useState(true);
const [isExpanded] = useState(true);
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Remove unnecessary state for constant value.

isExpanded is initialized to true with no setter, making it a constant rather than state. This wastes rendering cycles and memory.

Replace the state with a constant:

-  const [isExpanded] = useState(true);
+  const isExpanded = true;

Or simply remove it entirely and use the condition directly:

-  const [isExpanded] = useState(true);
   
   // ... later in JSX
-  {isExpanded && (
+  {true && (
     <>

Or remove the condition altogether if it's always true:

-  {isExpanded && (
-    <>
       <div className="flex flex-wrap gap-2 min-h-[2rem] p-2 border rounded-md bg-muted/20">
         ...
       </div>
-    </>
-  )}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const [isExpanded] = useState(true);
const isExpanded = true;
🤖 Prompt for AI Agents 
In components/resume/sections/SkillsSection.tsx around line 52 the code declares
const [isExpanded] = useState(true); which creates React state without a setter
for a value that's always true; replace this state with a plain constant or
remove it entirely: either change to const isExpanded = true; or eliminate the
variable and use the condition directly (or remove the conditional block if it’s
always true) so you stop allocating unused state and reduce re-renders.


const {
attributes,
Expand Down Expand Up @@ -222,21 +221,24 @@ export function SkillsSection({ content, onChange }: SkillsSectionProps) {
};
const newSkills = [...skillsWithIds, newSkill];
setSkillsWithIds(newSkills);
onChange(newSkills.map(({ id, ...skill }) => skill));
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onChange(newSkills.map(({ id: _id, ...skill }) => skill));
};

const handleUpdateCategory = (id: string, updates: Partial<Skill>) => {
const newSkills = skillsWithIds.map((skill) =>
skill.id === id ? { ...skill, ...updates } : skill
);
setSkillsWithIds(newSkills);
onChange(newSkills.map(({ id, ...skill }) => skill));
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onChange(newSkills.map(({ id: _id, ...skill }) => skill));
};

const handleRemoveCategory = (id: string) => {
const newSkills = skillsWithIds.filter((skill) => skill.id !== id);
setSkillsWithIds(newSkills);
onChange(newSkills.map(({ id, ...skill }) => skill));
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onChange(newSkills.map(({ id: _id, ...skill }) => skill));
};

const handleDragEnd = (event: DragEndEvent) => {
Expand All @@ -250,7 +252,8 @@ export function SkillsSection({ content, onChange }: SkillsSectionProps) {

const newSkills = arrayMove(skillsWithIds, oldIndex, newIndex);
setSkillsWithIds(newSkills);
onChange(newSkills.map(({ id, ...skill }) => skill));
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onChange(newSkills.map(({ id: _id, ...skill }) => skill));
}
};

Expand Down Expand Up @@ -280,7 +283,7 @@ export function SkillsSection({ content, onChange }: SkillsSectionProps) {
<Wrench className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">No skill categories yet</p>
<p className="text-xs mt-1">
Click "Add Category" to organize your skills
Click &ldquo;Add Category&rdquo; to organize your skills
</p>
</div>
) : (
Expand Down Expand Up @@ -326,7 +329,7 @@ export function SkillsSection({ content, onChange }: SkillsSectionProps) {
</Alert>
) : null;
})()}

<div className="pt-2">
<p className="text-xs text-muted-foreground">
💡 Tip: Drag categories to reorder them. Organize skills by type
Expand Down
10 changes: 5 additions & 5 deletions components/resume/templates/CreativeTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export function CreativeTemplate({ resume }: CreativeTemplateProps) {
if (!items || items.length === 0) return null;
return (
<div className="space-y-5">
{items.map((item, index) => (
{items.map((item) => (
<div
key={item.id}
className="relative pl-6 border-l-4 border-gradient-to-b from-purple-500 to-pink-500"
Expand Down Expand Up @@ -176,7 +176,7 @@ export function CreativeTemplate({ resume }: CreativeTemplateProps) {
if (!items || items.length === 0) return null;
return (
<div className="space-y-5">
{items.map((item, index) => (
{items.map((item) => (
<div
key={item.id}
className="relative pl-6 border-l-4"
Expand Down Expand Up @@ -224,7 +224,7 @@ export function CreativeTemplate({ resume }: CreativeTemplateProps) {
if (!items || items.length === 0) return null;
return (
<div className="space-y-5">
{items.map((item, index) => (
{items.map((item) => (
<div
key={item.id}
className="relative pl-6 border-l-4"
Expand Down Expand Up @@ -326,7 +326,7 @@ export function CreativeTemplate({ resume }: CreativeTemplateProps) {
if (!items || items.length === 0) return null;
return (
<div className="space-y-4">
{items.map((item, index) => (
{items.map((item) => (
<div
key={item.id}
className="relative pl-6 border-l-4"
Expand Down Expand Up @@ -368,7 +368,7 @@ export function CreativeTemplate({ resume }: CreativeTemplateProps) {
if (!items || items.length === 0) return null;
return (
<div className="space-y-4">
{items.map((item, index) => (
{items.map((item) => (
<div
key={item.id}
className="relative pl-6 border-l-4"
Expand Down
1 change: 1 addition & 0 deletions lib/services/resume-import.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Resume, ResumeSection, SectionType, SectionContent } from '@/types/resume';
import { v4 as uuidv4 } from 'uuid';

Expand Down
Loading
Loading