NextGraph
/
nao-web-ui
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign ContactListPage with clean, professional contact cards layout

Browse Source 
- Separate responsive layouts for desktop and mobile
- Desktop: Clean 4-column layout (Avatar | Info | Vouches/Tags | Status)
- Mobile: Optimized 3-column layout (Avatar | Info | Status)
- Fix contact card alignment and spacing issues
- Restore directional arrows for vouches/praises (↑ sent, ↓ received)
- Right-align status buttons (Invite/NAO Member/Invited) on both layouts
- Improve mobile spacing and chip sizing
- Remove unused formatDate function and fix imports

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
main
Claude Code Assistant 2 months ago
parent 9849318490
commit e0ce0fbcd4
2 changed files with 458 additions and 319 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 741
      src/pages/ContactListPage.tsx
  2. 36
      src/services/dataService.ts

741
src/pages/ContactListPage.tsx
Unescape View File

@ -118,13 +118,6 @@ const ContactListPage = () => {
} }
}; };
const formatDate = (date: Date) => {
return new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
}).format(date);
};
const getNaoStatusIndicator = (contact: Contact) => { const getNaoStatusIndicator = (contact: Contact) => {
switch (contact.naoStatus) { switch (contact.naoStatus) {
@ -390,137 +383,69 @@ const ContactListPage = () => {
borderColor: 'divider', borderColor: 'divider',
'&:hover': !isSelectionMode ? { '&:hover': !isSelectionMode ? {
borderColor: 'primary.main', borderColor: 'primary.main',
boxShadow: theme.shadows[4], boxShadow: theme.shadows[2],
transform: 'translateY(-2px)', transform: 'translateY(-1px)',
} : {}, } : {},
}} }}
> >
<CardContent sx={{ p: { xs: 2, md: 3 } }}> <CardContent sx={{ p: 3 }}>
<Box sx={{ {/* Desktop Layout */}
display: 'flex', <Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: 'flex-start', width: '100%' }}>
flexDirection: { xs: 'column', md: 'row' }, {/* Avatar */}
alignItems: { xs: 'stretch', md: 'center' }, <Box
gap: { xs: 2, md: 2 } sx={{
}}> width: 56,
{/* Top row on mobile: Avatar + Name + Action Button */} height: 56,
<Box sx={{ borderRadius: '50%',
display: 'flex', backgroundImage: contact.profileImage ? `url(${contact.profileImage})` : 'none',
alignItems: 'center', backgroundSize: 'cover',
gap: 2, backgroundPosition: 'center',
width: { xs: '100%', md: 'auto' }, display: 'flex',
flexShrink: 0 alignItems: 'center',
}}> justifyContent: 'center',
<Box backgroundColor: contact.profileImage ? 'transparent' : 'primary.main',
sx={{ color: 'white',
width: { xs: 48, md: 64 }, fontSize: '1.25rem',
height: { xs: 48, md: 64 }, fontWeight: 600,
borderRadius: '50%', flexShrink: 0,
backgroundImage: contact.profileImage ? `url(${contact.profileImage})` : 'none', mr: 3
backgroundSize: 'cover', }}
backgroundPosition: 'center center', >
backgroundRepeat: 'no-repeat', {!contact.profileImage && contact.name.charAt(0)}
display: 'flex', </Box>
alignItems: 'center',
justifyContent: 'center', {/* Left Column - Basic Info */}
backgroundColor: contact.profileImage ? 'transparent' : 'primary.main', <Box sx={{ width: 280, flexShrink: 0, mr: 3 }}>
color: 'white', {/* Name with source icon inline */}
fontSize: { xs: '1.2rem', md: '1.5rem' }, <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
fontWeight: 'bold',
flexShrink: 0
}}
>
{!contact.profileImage && contact.name.charAt(0)}
</Box>
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
<Typography
variant="h6"
component="div"
sx={{
fontWeight: 600,
fontSize: { xs: '1rem', md: '1.25rem' },
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
flexGrow: 1
}}
>
{contact.name}
</Typography>
{getSourceIcon(contact.source)}
</Box>
<Typography <Typography
variant="body2" variant="h6"
color="text.secondary"
sx={{ sx={{
fontSize: { xs: '0.75rem', md: '0.875rem' }, fontWeight: 600,
overflow: 'hidden', fontSize: '1.125rem',
textOverflow: 'ellipsis', color: 'text.primary'
whiteSpace: 'nowrap'
}} }}
> >
{contact.position} {contact.company && `at ${contact.company}`} {contact.name}
</Typography> </Typography>
{getSourceIcon(contact.source)}
</Box> </Box>
{/* Action buttons - always visible on the right */} {/* Job Title & Company */}
<Box sx={{ flexShrink: 0 }}> <Typography
{/* Select button for selection mode */} variant="body2"
{isSelectionMode && ( color="text.secondary"
<Button sx={{ mb: 1, lineHeight: 1.4 }}
variant="contained" >
onClick={(e) => { {contact.position}{contact.company && ` at ${contact.company}`}
e.stopPropagation(); </Typography>
handleSelectContact(contact);
}} {/* Email */}
sx={{
borderRadius: 2,
textTransform: 'none',
minWidth: { xs: 60, md: 80 },
fontSize: { xs: '0.75rem', md: '0.875rem' }
}}
>
Select
</Button>
)}
{/* Invite to NAO button for non-members (not in selection mode) */}
{!isSelectionMode && contact.naoStatus === 'not_invited' && (
<Button
variant="outlined"
startIcon={<Send sx={{ fontSize: 16 }} />}
onClick={(e) => {
e.stopPropagation();
handleInviteToNao(contact);
}}
sx={{
borderRadius: 2,
textTransform: 'none',
minWidth: { xs: 60, md: 80 },
fontSize: { xs: '0.75rem', md: '0.875rem' },
py: 0.5,
px: { xs: 1, md: 1.5 }
}}
>
Invite
</Button>
)}
</Box>
</Box>
{/* Bottom section: Email + Status chips + Tags */}
<Box sx={{
width: '100%',
display: { xs: 'block', md: 'none' } // Only show on mobile
}}>
<Typography <Typography
variant="body2" variant="body2"
color="text.secondary" color="text.secondary"
sx={{ sx={{
mb: 1, fontSize: '0.875rem',
fontSize: '0.75rem',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
whiteSpace: 'nowrap' whiteSpace: 'nowrap'
@ -528,182 +453,21 @@ const ContactListPage = () => {
> >
{contact.email} {contact.email}
</Typography> </Typography>
{/* Compact status and metrics chips */}
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: 1 }}>
{contact.groupIds && contact.groupIds.length > 0 && (
<Chip
icon={<Group sx={{ fontSize: 12 }} />}
label={contact.groupIds.length}
size="small"
variant="outlined"
sx={{
fontSize: '0.65rem',
height: 18,
borderRadius: 1,
backgroundColor: alpha(theme.palette.success.main, 0.04),
borderColor: alpha(theme.palette.success.main, 0.12),
color: 'success.main',
'& .MuiChip-icon': { fontSize: 12 },
}}
/>
)}
{/* NAO Status Indicator */}
{(() => {
const naoStatus = getNaoStatusIndicator(contact);
return naoStatus ? (
<Chip
icon={naoStatus.icon}
label={naoStatus.label}
size="small"
variant="outlined"
sx={{
fontSize: '0.65rem',
height: 18,
borderRadius: 1,
backgroundColor: naoStatus.bgColor,
borderColor: naoStatus.borderColor,
color: naoStatus.color,
'& .MuiChip-icon': { fontSize: 12 },
}}
/>
) : null;
})()}
{/* Simplified Vouch and Praise counts */}
{(() => {
const counts = getVouchPraiseCounts(contact);
const totalVouches = counts.vouchesSent + counts.vouchesReceived;
const totalPraises = counts.praisesSent + counts.praisesReceived;
return (
<>
{totalVouches > 0 && (
<Chip
icon={<VerifiedUser sx={{ fontSize: 12 }} />}
label={totalVouches}
size="small"
variant="outlined"
sx={{
fontSize: '0.65rem',
height: 18,
borderRadius: 1,
backgroundColor: alpha(theme.palette.primary.main, 0.04),
borderColor: alpha(theme.palette.primary.main, 0.12),
color: 'primary.main',
'& .MuiChip-icon': { fontSize: 12 },
}}
/>
)}
{totalPraises > 0 && (
<Chip
icon={<Favorite sx={{ fontSize: 12 }} />}
label={totalPraises}
size="small"
variant="outlined"
sx={{
fontSize: '0.65rem',
height: 18,
borderRadius: 1,
backgroundColor: alpha('#f8bbd9', 0.3),
borderColor: alpha('#d81b60', 0.3),
color: '#d81b60',
'& .MuiChip-icon': { fontSize: 12 },
}}
/>
)}
</>
);
})()}
</Box>
{/* Tags - only show first 2 on mobile */}
{contact.tags && contact.tags.length > 0 && (
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
{contact.tags.slice(0, 2).map((tag) => (
<Chip
key={tag}
label={tag}
size="small"
variant="outlined"
sx={{
borderRadius: 1,
backgroundColor: alpha(theme.palette.primary.main, 0.04),
borderColor: alpha(theme.palette.primary.main, 0.12),
color: 'primary.main',
fontWeight: 500,
fontSize: '0.65rem',
height: 18
}}
/>
))}
{contact.tags.length > 2 && (
<Chip
label={`+${contact.tags.length - 2}`}
size="small"
variant="outlined"
sx={{
borderRadius: 1,
backgroundColor: alpha(theme.palette.grey[500], 0.04),
borderColor: alpha(theme.palette.grey[500], 0.12),
color: 'text.secondary',
fontSize: '0.65rem',
height: 18
}}
/>
)}
</Box>
)}
</Box> </Box>
{/* Desktop layout (hidden on mobile) */} {/* Middle Column - Vouch & Praise Counts + Tags */}
<Box sx={{ <Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
gap: 1,
flexGrow: 1, flexGrow: 1,
display: { xs: 'none', md: 'block' } // Only show on desktop pt: 0.5,
minWidth: 200
}}> }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1, flexWrap: 'wrap' }}> {/* Vouches and Praises Row */}
{contact.groupIds && contact.groupIds.length > 0 && ( <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, height: 24 }}>
<Chip
icon={<Group sx={{ fontSize: 14 }} />}
label={contact.groupIds.length}
size="small"
variant="outlined"
sx={{
fontSize: '0.75rem',
height: 20,
borderRadius: 1,
backgroundColor: alpha(theme.palette.success.main, 0.04),
borderColor: alpha(theme.palette.success.main, 0.12),
color: 'success.main',
'& .MuiChip-icon': { fontSize: 14 },
}}
/>
)}
{/* NAO Status Indicator */}
{(() => {
const naoStatus = getNaoStatusIndicator(contact);
return naoStatus ? (
<Chip
icon={naoStatus.icon}
label={naoStatus.label}
size="small"
variant="outlined"
sx={{
fontSize: '0.75rem',
height: 20,
borderRadius: 1,
backgroundColor: naoStatus.bgColor,
borderColor: naoStatus.borderColor,
color: naoStatus.color,
'& .MuiChip-icon': { fontSize: 14 },
}}
/>
) : null;
})()}
{/* Vouch and Praise Indicators with directional arrows - desktop only */}
{(() => { {(() => {
const counts = getVouchPraiseCounts(contact); const counts = getVouchPraiseCounts(contact);
const totalVouches = counts.vouchesSent + counts.vouchesReceived; const totalVouches = counts.vouchesSent + counts.vouchesReceived;
@ -740,11 +504,12 @@ const ContactListPage = () => {
: `Vouches: ${counts.vouchesSent} sent (hidden until they join)`} : `Vouches: ${counts.vouchesSent} sent (hidden until they join)`}
sx={{ sx={{
fontSize: '0.75rem', fontSize: '0.75rem',
height: 20, height: 24,
borderRadius: 1, borderRadius: 1,
backgroundColor: alpha(theme.palette.primary.main, 0.04), backgroundColor: alpha(theme.palette.primary.main, 0.04),
borderColor: alpha(theme.palette.primary.main, 0.12), borderColor: alpha(theme.palette.primary.main, 0.12),
color: 'primary.main', color: 'primary.main',
fontWeight: 500,
'& .MuiChip-icon': { fontSize: 14 }, '& .MuiChip-icon': { fontSize: 14 },
'& .MuiChip-label': { '& .MuiChip-label': {
fontSize: '0.75rem', fontSize: '0.75rem',
@ -752,6 +517,7 @@ const ContactListPage = () => {
}, },
}} }}
/> />
<Chip <Chip
icon={<Favorite sx={{ fontSize: 14 }} />} icon={<Favorite sx={{ fontSize: 14 }} />}
label={ label={
@ -781,11 +547,12 @@ const ContactListPage = () => {
: `Praises: ${counts.praisesSent} sent (hidden until they join)`} : `Praises: ${counts.praisesSent} sent (hidden until they join)`}
sx={{ sx={{
fontSize: '0.75rem', fontSize: '0.75rem',
height: 20, height: 24,
borderRadius: 1, borderRadius: 1,
backgroundColor: alpha('#f8bbd9', 0.3), backgroundColor: alpha('#f8bbd9', 0.3),
borderColor: alpha('#d81b60', 0.3), borderColor: alpha('#d81b60', 0.3),
color: '#d81b60', color: '#d81b60',
fontWeight: 500,
'& .MuiChip-icon': { fontSize: 14 }, '& .MuiChip-icon': { fontSize: 14 },
'& .MuiChip-label': { '& .MuiChip-label': {
fontSize: '0.75rem', fontSize: '0.75rem',
@ -797,32 +564,382 @@ const ContactListPage = () => {
); );
})()} })()}
</Box> </Box>
{/* Tags Row */}
{contact.tags && contact.tags.length > 0 && (
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', justifyContent: 'flex-start' }}>
{contact.tags.slice(0, 3).map((tag) => (
<Chip
key={tag}
label={tag}
size="small"
variant="outlined"
sx={{
borderRadius: 1,
backgroundColor: alpha(theme.palette.grey[500], 0.04),
borderColor: alpha(theme.palette.grey[500], 0.12),
color: 'text.secondary',
fontWeight: 500,
fontSize: '0.65rem',
height: 18
}}
/>
))}
{contact.tags.length > 3 && (
<Chip
label={`+${contact.tags.length - 3}`}
size="small"
variant="outlined"
sx={{
borderRadius: 1,
backgroundColor: alpha(theme.palette.grey[500], 0.04),
borderColor: alpha(theme.palette.grey[500], 0.12),
color: 'text.secondary',
fontSize: '0.65rem',
height: 18
}}
/>
)}
</Box>
)}
</Box>
{/* Right Column - Network Status Only (Push to Far Right) */}
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'center',
gap: 1,
flexShrink: 0,
minWidth: 140,
height: 56,
ml: 'auto'
}}>
{(() => {
const naoStatus = getNaoStatusIndicator(contact);
if (isSelectionMode) {
return (
<Button
variant="contained"
size="small"
onClick={() => handleSelectContact(contact)}
sx={{
borderRadius: 2,
px: 3,
py: 1,
fontWeight: 600,
fontSize: '0.75rem',
height: 28,
minWidth: 80
}}
>
Select
</Button>
);
} else if (contact.naoStatus === 'not_invited') {
return (
<Button
variant="outlined"
size="small"
startIcon={<Send sx={{ fontSize: 14 }} />}
onClick={() => handleInviteToNao(contact)}
sx={{
borderRadius: 2,
px: 2,
py: 1,
fontWeight: 500,
fontSize: '0.75rem',
height: 28,
minWidth: 80
}}
>
Invite
</Button>
);
} else {
return naoStatus ? (
<Chip
icon={naoStatus.icon}
label={naoStatus.label}
size="small"
sx={{
backgroundColor: naoStatus.bgColor,
borderColor: naoStatus.borderColor,
color: naoStatus.color,
fontWeight: 500,
fontSize: '0.75rem',
height: 28,
minWidth: 80,
'& .MuiChip-icon': { fontSize: 14 }
}}
/>
) : null;
}
})()}
{contact.groupIds && contact.groupIds.length > 0 && (
<Chip
icon={<Group sx={{ fontSize: 14 }} />}
label={`${contact.groupIds.length} group${contact.groupIds.length > 1 ? 's' : ''}`}
size="small"
variant="outlined"
sx={{
backgroundColor: alpha(theme.palette.primary.main, 0.04),
borderColor: alpha(theme.palette.primary.main, 0.2),
color: 'primary.main',
fontWeight: 500,
fontSize: '0.75rem',
height: 24
}}
/>
)}
</Box>
</Box>
{/* Mobile Layout */}
<Box sx={{ display: { xs: 'flex', md: 'none' }, alignItems: 'flex-start', gap: 2 }}>
{/* Avatar */}
<Box
sx={{
width: 48,
height: 48,
borderRadius: '50%',
backgroundImage: contact.profileImage ? `url(${contact.profileImage})` : 'none',
backgroundSize: 'cover',
backgroundPosition: 'center',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: contact.profileImage ? 'transparent' : 'primary.main',
color: 'white',
fontSize: '1.125rem',
fontWeight: 600,
flexShrink: 0
}}
>
{!contact.profileImage && contact.name.charAt(0)}
</Box>
{/* Main Content */}
<Box sx={{ flex: 1, minWidth: 0 }}>
{/* Name with source icon */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
<Typography
variant="h6"
sx={{
fontWeight: 600,
fontSize: '1rem',
color: 'text.primary'
}}
>
{contact.name}
</Typography>
{getSourceIcon(contact.source)}
</Box>
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}> {/* Job Title & Company */}
{contact.email} <Typography
variant="body2"
color="text.secondary"
sx={{ mb: 0.5, lineHeight: 1.3, fontSize: '0.8rem' }}
>
{contact.position}{contact.company && ` at ${contact.company}`}
</Typography> </Typography>
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 2 }}> {/* Email */}
{contact.tags?.map((tag) => ( <Typography
<Chip variant="body2"
key={tag} color="text.secondary"
label={tag} sx={{
size="small" mb: 1,
fontSize: '0.75rem',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}
>
{contact.email}
</Typography>
{/* Info Chips Row (excluding NAO status) */}
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', alignItems: 'center', mb: 1 }}>
{/* Groups Count */}
{contact.groupIds && contact.groupIds.length > 0 && (
<Chip
icon={<Group sx={{ fontSize: 12 }} />}
label={`${contact.groupIds.length} group${contact.groupIds.length > 1 ? 's' : ''}`}
size="small"
variant="outlined" variant="outlined"
sx={{ sx={{
borderRadius: 1,
backgroundColor: alpha(theme.palette.primary.main, 0.04), backgroundColor: alpha(theme.palette.primary.main, 0.04),
borderColor: alpha(theme.palette.primary.main, 0.12), borderColor: alpha(theme.palette.primary.main, 0.2),
color: 'primary.main', color: 'primary.main',
fontWeight: 500, fontWeight: 500,
fontSize: '0.65rem',
height: 20
}} }}
/> />
))} )}
{/* Vouch & Praise Counts */}
{(() => {
const counts = getVouchPraiseCounts(contact);
const totalVouches = counts.vouchesSent + counts.vouchesReceived;
const totalPraises = counts.praisesSent + counts.praisesReceived;
return (
<>
{totalVouches > 0 && (
<Chip
icon={<VerifiedUser sx={{ fontSize: 10 }} />}
label={totalVouches}
size="small"
variant="outlined"
sx={{
fontSize: '0.6rem',
height: 18,
borderRadius: 1,
backgroundColor: alpha(theme.palette.primary.main, 0.04),
borderColor: alpha(theme.palette.primary.main, 0.12),
color: 'primary.main',
'& .MuiChip-icon': { fontSize: 10 },
}}
/>
)}
{totalPraises > 0 && (
<Chip
icon={<Favorite sx={{ fontSize: 10 }} />}
label={totalPraises}
size="small"
variant="outlined"
sx={{
fontSize: '0.6rem',
height: 18,
borderRadius: 1,
backgroundColor: alpha('#f8bbd9', 0.3),
borderColor: alpha('#d81b60', 0.3),
color: '#d81b60',
'& .MuiChip-icon': { fontSize: 10 },
}}
/>
)}
</>
);
})()}
</Box> </Box>
<Typography variant="caption" color="text.secondary"> {/* Tags Row */}
Added {formatDate(contact.createdAt)} {contact.tags && contact.tags.length > 0 && (
</Typography> <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
{contact.tags.slice(0, 2).map((tag) => (
<Chip
key={tag}
label={tag}
size="small"
variant="outlined"
sx={{
borderRadius: 1,
backgroundColor: alpha(theme.palette.grey[500], 0.04),
borderColor: alpha(theme.palette.grey[500], 0.12),
color: 'text.secondary',
fontWeight: 500,
fontSize: '0.6rem',
height: 16
}}
/>
))}
{contact.tags.length > 2 && (
<Chip
label={`+${contact.tags.length - 2}`}
size="small"
variant="outlined"
sx={{
borderRadius: 1,
backgroundColor: alpha(theme.palette.grey[500], 0.04),
borderColor: alpha(theme.palette.grey[500], 0.12),
color: 'text.secondary',
fontSize: '0.6rem',
height: 16
}}
/>
)}
</Box>
)}
</Box>
{/* Right Column - Status & Action */}
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'center',
gap: 1,
flexShrink: 0,
minWidth: 80,
height: 48
}}>
{(() => {
const naoStatus = getNaoStatusIndicator(contact);
if (isSelectionMode) {
return (
<Button
variant="contained"
size="small"
onClick={() => handleSelectContact(contact)}
sx={{
borderRadius: 2,
px: 2,
py: 0.5,
fontWeight: 600,
fontSize: '0.7rem',
height: 24,
minWidth: 60
}}
>
Select
</Button>
);
} else if (contact.naoStatus === 'not_invited') {
return (
<Button
variant="outlined"
size="small"
startIcon={<Send sx={{ fontSize: 12 }} />}
onClick={() => handleInviteToNao(contact)}
sx={{
borderRadius: 2,
px: 1.5,
py: 0.5,
fontWeight: 500,
fontSize: '0.7rem',
height: 24,
minWidth: 60
}}
>
Invite
</Button>
);
} else {
return naoStatus ? (
<Chip
icon={naoStatus.icon}
label={naoStatus.label}
size="small"
sx={{
backgroundColor: naoStatus.bgColor,
borderColor: naoStatus.borderColor,
color: naoStatus.color,
fontWeight: 500,
fontSize: '0.65rem',
height: 24,
minWidth: 60,
'& .MuiChip-icon': { fontSize: 12 }
}}
/>
) : null;
}
})()}
</Box> </Box>
</Box> </Box>
</CardContent> </CardContent>

36
src/services/dataService.ts
Unescape View File

@ -8,11 +8,23 @@ export const dataService = {
try { try {
const response = await fetch('/contacts.json'); const response = await fetch('/contacts.json');
const contactsData = await response.json(); const contactsData = await response.json();
const contacts = contactsData.map((contact: any) => ({ const contacts = contactsData.map((contact: any) => {
...contact, const processedContact = {
createdAt: new Date(contact.createdAt), ...contact,
updatedAt: new Date(contact.updatedAt) createdAt: new Date(contact.createdAt),
})); updatedAt: new Date(contact.updatedAt)
};
// Convert optional date fields if they exist
if (contact.joinedAt) {
processedContact.joinedAt = new Date(contact.joinedAt);
}
if (contact.invitedAt) {
processedContact.invitedAt = new Date(contact.invitedAt);
}
return processedContact;
});
resolve(contacts); resolve(contacts);
} catch (error) { } catch (error) {
console.error('Failed to load contacts:', error); console.error('Failed to load contacts:', error);
@ -30,11 +42,21 @@ export const dataService = {
const contactsData = await response.json(); const contactsData = await response.json();
const contact = contactsData.find((c: any) => c.id === id); const contact = contactsData.find((c: any) => c.id === id);
if (contact) { if (contact) {
resolve({ const processedContact = {
...contact, ...contact,
createdAt: new Date(contact.createdAt), createdAt: new Date(contact.createdAt),
updatedAt: new Date(contact.updatedAt) updatedAt: new Date(contact.updatedAt)
}); };
// Convert optional date fields if they exist
if (contact.joinedAt) {
processedContact.joinedAt = new Date(contact.joinedAt);
}
if (contact.invitedAt) {
processedContact.invitedAt = new Date(contact.invitedAt);
}
resolve(processedContact);
} else { } else {
resolve(undefined); resolve(undefined);
} }

Write Preview
Loading…
Cancel
Save