Fix: Use domain name as key for editing and deleting

frontend/src/App.jsx

@@ -12,7 +12,7 @@ function App() {
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
-  const [editingIndex, setEditingIndex] = useState(null)
+  const [editingDomain, setEditingDomain] = useState(null)
   const [editingValue, setEditingValue] = useState('')
   const [bulkFrom, setBulkFrom] = useState('SharkFIN')
   const [bulkTo, setBulkTo] = useState('SharkAM')
@@ -41,24 +41,25 @@ function App() {
     setNewDomain({ domain: '', type: 'SharkFIN' })
   }
 
-  const handleEdit = (index) => {
-    setEditingIndex(index)
-    setEditingValue(domains[index].type)
+  const handleEdit = (domain) => {
+    setEditingDomain(domain.domain)
+    setEditingValue(domain.type)
   }
 
-  const handleSaveEdit = (index) => {
-    const updatedDomains = [...domains]
-    updatedDomains[index].type = editingValue
+  const handleSaveEdit = (domainName) => {
+    const updatedDomains = domains.map(d => 
+      d.domain === domainName ? { ...d, type: editingValue } : d
+    )
     setDomains(updatedDomains)
-    setEditingIndex(null)
+    setEditingDomain(null)
   }
 
   const handleCancelEdit = () => {
-    setEditingIndex(null)
+    setEditingDomain(null)
   }
 
-  const handleDeleteDomain = (index) => {
-    setDomains(domains.filter((_, i) => i !== index))
+  const handleDeleteDomain = (domainNameToDelete) => {
+    setDomains(domains.filter(d => d.domain !== domainNameToDelete))
   }
 
   const handleSaveChanges = async () => {
@@ -194,11 +195,11 @@ function App() {
               </thead>
               <tbody>
                 {filteredDomains.map((d, index) => (
-                  <tr key={index}>
+                  <tr key={d.domain}>
                     <td>{index + 1}</td>
                     <td>{d.domain}</td>
                     <td>
-                      {editingIndex === index ? (
+                      {editingDomain === d.domain ? (
                         <Form.Control 
                           type="text" 
                           value={editingValue} 
@@ -210,9 +211,9 @@ function App() {
                       )}
                     </td>
                     <td className="text-center">
-                      {editingIndex === index ? (
+                      {editingDomain === d.domain ? (
                         <>
-                          <Button variant="success" size="sm" className="me-2" onClick={() => handleSaveEdit(index)}>
+                          <Button variant="success" size="sm" className="me-2" onClick={() => handleSaveEdit(d.domain)}>
                             Сохранить
                           </Button>
                           <Button variant="secondary" size="sm" onClick={handleCancelEdit}>
@@ -221,10 +222,10 @@ function App() {
                         </>
                       ) : (
                         <>
-                          <Button variant="info" size="sm" className="me-2" onClick={() => handleEdit(index)}>
+                          <Button variant="info" size="sm" className="me-2" onClick={() => handleEdit(d)}>
                             Изменить
                           </Button>
-                          <Button variant="danger" size="sm" onClick={() => handleDeleteDomain(index)}>
+                          <Button variant="danger" size="sm" onClick={() => handleDeleteDomain(d.domain)}>
                             Удалить
                           </Button>
                         </>