fix: handle undefined usernames in import and display

src/components/__tests__/user-table.test.tsx

@@ -58,4 +58,19 @@ describe('UserTable component', () => {
     expect(screen.getByText('1 user')).toBeInTheDocument()
     expect(screen.getByText('user1')).toBeInTheDocument()
   })
+
+  it('should filter out users with undefined username', () => {
+    const usersWithUndefined: User[] = [
+      { username: 'user1', profileUrl: 'https://instagram.com/user1' },
+      { username: undefined as any, profileUrl: 'https://instagram.com/user2' },
+      { username: 'user3', profileUrl: 'https://instagram.com/user3' }
+    ]
+
+    render(<UserTable title="Test Users" users={usersWithUndefined} />)
+
+    // Should only show valid users
+    expect(screen.getByText('user1')).toBeInTheDocument()
+    expect(screen.getByText('user3')).toBeInTheDocument()
+    expect(screen.queryByText('undefined')).not.toBeInTheDocument()
+  })
 })

src/components/import-dialog.tsx

@@ -48,13 +48,17 @@ const parseFollowers = (json: FileContent): User[] => {
     // New structure from user
     if (Array.isArray(json)) {
       return json.flatMap(item =>
-        (item.string_list_data || []).map(d => ({ username: d.value, profileUrl: d.href }))
+        (item.string_list_data || [])
+          .filter(d => d?.value)
+          .map(d => ({ username: d.value, profileUrl: d.href || '' }))
       );
     }
     // Original structure
     if (json.relationships_followers) {
         return (json.relationships_followers || []).flatMap(item =>
-            (item.string_list_data || []).map(d => ({ username: d.value, profileUrl: d.href }))
+            (item.string_list_data || [])
+              .filter(d => d?.value)
+              .map(d => ({ username: d.value, profileUrl: d.href || '' }))
         );
     }
     throw new Error("Invalid followers file format. Expected an array or an object with 'relationships_followers' key.");
@@ -63,7 +67,9 @@ const parseFollowers = (json: FileContent): User[] => {
 const parseFollowing = (json: InstagramData): User[] => {
     if (!json.relationships_following) throw new Error("Invalid following file format. Expected 'relationships_following' key.");
     return (json.relationships_following || []).flatMap(item =>
-      (item.string_list_data || []).map(d => ({ username: d.value, profileUrl: d.href }))
+      (item.string_list_data || [])
+        .filter(d => d?.value)
+        .map(d => ({ username: d.value, profileUrl: d.href || '' }))
     );
 };
 

src/components/user-table.tsx

@@ -22,7 +22,7 @@ export default function UserTable({ title, users }: UserTableProps) {
   };
 
   const filteredAndSortedUsers = users
-    .filter(user => user.username.toLowerCase().includes(searchTerm.toLowerCase()))
+    .filter(user => user?.username?.toLowerCase().includes(searchTerm.toLowerCase()))
     .sort((a, b) => {
       if (sortOrder === 'asc') {
         return a.username.localeCompare(b.username);