Add method for delete property account

src/pages/digitalId/ProfileId.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { userDataStore } from '../../store/userDataStore';
+import { registrationStore } from "../../store/store";
 import Sidebar from '../../partials/Sidebar';
 import { observer } from 'mobx-react-lite';
 import Header from '../../partials/Header';
@@ -14,14 +15,14 @@ const Profile = observer (() => {
   const [toggle, setToggle] = useState(true);
   const [addPanelOpen, setAddPanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
-  
+
   const defaultValues = {
     property: '',
     value: '',
     seed: Math.floor(Math.random() * 90000000000000000000)
   };
 
-  const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date']; 
+  const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date'];
   const [propertyValues, setPropertyValues] = useState([]);
   const [currentValues, setCurrentValues] = useState(defaultValues);
 
@@ -73,6 +74,11 @@ const Profile = observer (() => {
     }
   }
 
+  const deletePropertyData = () => {
+    const changeData = registrationStore.userData.data.filter(item=>!selectedItems.includes(item.label))
+    registrationStore.fetchChangeAccountData(changeData)
+  }
+
   const cancelAddPanel = () => {
     setCurrentValues(defaultValues);
     setAddPanelOpen(false);
@@ -87,6 +93,7 @@ const Profile = observer (() => {
   const applyRemovePanel = () => {
     setRemovePanelOpen(false);
     setButtonPanelOpen(true);
+    deletePropertyData()
   }
 
   const handleInput = (text, field) => {
@@ -231,7 +238,7 @@ const Profile = observer (() => {
                   <div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
                     <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2>
                     <div className="flex flex-col">
-                      {userDataStore.decryptedData.filter(({ label }) => selectedItems.includes(label)).map(item => (
+                      {userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)).map(item => (
                         <span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
                       ))}
                     </div>
@@ -335,4 +342,4 @@ const Profile = observer (() => {
   )
 })
 
-export default Profile
+export default Profile

src/partials/digitalId/ProfileTable.jsx

@@ -38,7 +38,7 @@ function ProfileTable({
   const generalData = userData.filter(elem => data.general.includes(elem.label)),
         nationalityData = userData.filter(elem => data.nationality.includes(elem.label)),
         sosialData = userData.filter(elem => data.nationality.includes(elem.label)),
-        otherData = userData.filter((elem) => 
+        otherData = userData.filter((elem) =>
           !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
 
   return (
@@ -53,7 +53,7 @@ function ProfileTable({
                 return (
                   <ProfileTableItem
                     key={data.label}
-                    id={data.label}
+                    id={data.key}
                     image={defaultData.image}
                     value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
                     property={data.label}
@@ -61,7 +61,7 @@ function ProfileTable({
                     transactions={defaultData.transactions}
                     avatars={defaultData.avatars}
                     handleClick={handleClick}
-                    isChecked={isCheck.includes(data.label)}
+                    isChecked={isCheck.includes(data.key)}
                   />
                 )
               })}
@@ -115,7 +115,7 @@ function ProfileTable({
                   handleClick={handleClick}
                   isChecked={isCheck.includes(data.label)}
                 />
-              ) 
+              )
             })}
             </tbody>
           </table>

src/store/store.js

@@ -17,23 +17,42 @@ class Store {
 
     this.fetchNodeInfo()
 
-    reaction(() => this.tokenKey, () => fetchWrapper.getAuth('http://3.125.47.101/api/data/account', {
+    reaction(() => this.tokenKey, () => fetchWrapper.getAuth('http://3.125.47.101/api/data/private', {
       networkIdentifier: this.nodeInfo.networkIdentifier,
       lastBlockID: this.nodeInfo.lastBlockID
     }).then((res) => this.userDataFetchChange(res)))
   };
 
   fetchCreateNewAccount() {
-    fetchWrapper.postAuth('http://3.125.47.101/api/data/account', {
+    fetchWrapper.postAuth('http://3.125.47.101/api/data/private', {
       networkIdentifier: this.nodeInfo.networkIdentifier,
       lastBlockID: this.nodeInfo.lastBlockID
     }, [...this.encryptAccountData]).catch(()=>{})
   };
 
+  fetchNewAccountData() {
+    fetchWrapper.getAuth('http://3.125.47.101/api/data/private', {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    }).then((res) => this.userDataFetchChange(res))
+  }
+
+  fetchChangeAccountData(data) {
+    fetchWrapper.postAuth('http://3.125.47.101/api/data/private', {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    }, [...data])
+        .then(()=>this.fetchNewAccountData())
+  }
+
   userDataFetchChange(res) {
     this._userData = res;
   }
 
+  get userData() {
+    return this._userData
+  }
+
   savePassPhrase(phrase) {
     this._passPhrase = phrase
   }
@@ -56,10 +75,6 @@ class Store {
     console.log(err)
   }
 
-  get userData() {
-    return this._userData;
-  }
-
   get passPhrase() {
     return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
   }

src/store/userDataStore.js

@@ -11,7 +11,7 @@ const labelMap = {
   nationality: "Nationality",
   national_id: "National id",
   national_doctype: "National doctype",
-  national_doc_id: "National doc id",  
+  national_doc_id: "National doc id",
   national_doc_issue_date: "National doc issue date",
   national_doc_expiry_date: "National doc expiry date",
   telephone: "Telephone",
@@ -40,14 +40,14 @@ class UserDataStore{
       this._data = data.data;
     })
   }
-
   get decryptedData(){
     return this._data.map((elem) => ({
       ...elem,
+      key: elem.label,
       label: labelMap[elem.label],
       value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
     }))
   }
 }
 
-export const userDataStore = new UserDataStore();
+export const userDataStore = new UserDataStore();