converted user data into Map object

src/partials/digitalId/ProfileTable.jsx

@@ -29,17 +29,40 @@ function ProfileTable({
     }
   };
 
+  function filterByCategory(map, category) {
+    let filteredArray = [];
+    if (arguments.length === 1) {
+     map.forEach((value, key) => {
+        if (!data.general.includes(key) && !data.nationality.includes(key) && !data.social.includes(key)){
+          filteredArray.push({
+            'key': key,
+            'value': value
+        });
+        }
+    });
+    } else {
+      map.forEach((value, key) => {
+        if (category.includes(key)){
+          filteredArray.push({
+            'key': key,
+            'value': value
+        })
+        }
+      });
+    }
+    return filteredArray;
+  }
+
   const data = {
     general:["First name","Second name", "Gender", "Birthdate", "Place of birth"],
     nationality:["Nationality", "National id", "National doctype", "National doc id", "National doc issue date", "National doc expiry date"],
     social:["Telephone", "Twitter", "Facebook", "Instagram", "Youtube", "Wechat", "Tiktok", "Linkedin", "Vk", "Github", "Telegram", "Qq", "Snapchat", "Reddit"]
   }
 
-  const generalData = userData.filter(elem => data.general.includes(elem.label)),
+  const generalData = filterByCategory(userData, data.general),
-        nationalityData = userData.filter(elem => data.nationality.includes(elem.label)),
+        nationalityData = filterByCategory(userData, data.nationality),
-        sosialData = userData.filter(elem => data.nationality.includes(elem.label)),
+        sosialData = filterByCategory(userData, data.social),
-        otherData = userData.filter((elem) => 
+        otherData = filterByCategory(userData);
-          !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
 
   return (
     <>
@@ -49,19 +72,19 @@ function ProfileTable({
         <div className="overflow-x-auto w-[828px]">
           <table className="w-[828px] table-auto w-full">
             <tbody className="divide-slate-200 divide-y">
-              {generalData.map((data) => {
+              {generalData.map((elem) => {
                 return (
                   <ProfileTableItem
-                    key={data.label}
+                    key={elem.key}
-                    id={data.label}
+                    id={elem.key}
                     image={defaultData.image}
-                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                    value={elem.value.charAt(0).toUpperCase()+elem.value.slice(1)}
-                    property={data.label}
+                    property={elem.key}
                     status={defaultData.status}
                     transactions={defaultData.transactions}
                     avatars={defaultData.avatars}
                     handleClick={handleClick}
-                    isChecked={isCheck.includes(data.label)}
+                    isChecked={isCheck.includes(elem.key)}
                   />
                 )
               })}
@@ -70,24 +93,24 @@ function ProfileTable({
         </div>
       </div>
       {/* Nationality */}
-      <div className={`${nationalityData.length > 0 || 'hidden'}`}>
+      <div className={`${nationalityData.length> 0 || 'hidden'}`}>
         <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</h2>
         <div className="overflow-x-auto w-[828px]">
           <table className="w-[828px] table-auto w-full">
             <tbody className="text-sm divide-slate-200 divide-y ">
-              {nationalityData.map(data => {
+              {nationalityData.map((elem) => {
                 return (
                   <ProfileTableItem
-                    key={data.label}
+                    key={elem.key}
-                    id={data.label}
+                    id={elem.key}
                     image={defaultData.image}
-                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                    value={elem.value.charAt(0).toUpperCase()+elem.value.slice(1)}
-                    property={data.label}
+                    property={elem.key}
                     status={defaultData.status}
                     transactions={defaultData.transactions}
                     avatars={defaultData.avatars}
                     handleClick={handleClick}
-                    isChecked={isCheck.includes(data.label)}
+                    isChecked={isCheck.includes(elem.key)}
                   />
                 )
               })}
@@ -101,21 +124,21 @@ function ProfileTable({
         <div className="overflow-x-auto w-[828px]">
           <table className="w-[828px] table-auto w-full">
             <tbody className="text-sm divide-slate-200 divide-y ">
-            {sosialData.map(data => {
+            {sosialData.map((elem) => {
               return (
                 <ProfileTableItem
-                  key={data.label}
+                  key={elem.key}
-                  id={data.label}
+                  id={elem.key}
                   image={defaultData.image}
-                  value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                  value={elem.value.charAt(0).toUpperCase()+elem.value.slice(1)}
-                  property={data.label}
+                  property={elem.key}
                   status={defaultData.status}
                   transactions={defaultData.transactions}
                   avatars={defaultData.avatars}
                   handleClick={handleClick}
-                  isChecked={isCheck.includes(data.label)}
+                  isChecked={isCheck.includes(elem.key)}
                 />
-              ) 
+              )
             })}
             </tbody>
           </table>
@@ -127,19 +150,19 @@ function ProfileTable({
         <div className="overflow-x-auto w-[828px]">
           <table className="w-[828px] table-auto w-full">
             <tbody className="text-sm divide-slate-200 divide-y ">
-            {otherData.map(data => {
+            {otherData.map((elem) => {
               return (
                 <ProfileTableItem
-                  key={data.label}
+                  key={elem.key}
-                  id={data.label}
+                  id={elem.key}
                   image={defaultData.image}
-                  value={data.value}
+                  value={elem.value.charAt(0).toUpperCase()+elem.value.slice(1)}
-                  property={data.label}
+                  property={elem.key}
                   status={defaultData.status}
                   transactions={defaultData.transactions}
                   avatars={defaultData.avatars}
                   handleClick={handleClick}
-                  isChecked={isCheck.includes(data.label)}
+                  isChecked={isCheck.includes(elem.key)}
                 />
               )
             })}

src/store/userDataStore.js

@@ -4,7 +4,7 @@ import { registrationStore } from './store';
 
 class UserDataStore{
   _data = []
-  
+
   constructor() {
     makeAutoObservable(this);
 
@@ -13,12 +13,17 @@ class UserDataStore{
     })
   }
 
-  get data(){
+  get data() {
-    return this._data.map((elem) => ({
+    return this._data;
-      ...elem,
+  }
-      label: elem.label.charAt(0).toUpperCase()+elem.label.slice(1).split('_').join(' '),
+  get decryptData(){
-      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
+    const labelMap = new Map;
-    }))
+    this._data.forEach(elem => 
+      labelMap.set(elem.label.charAt(0).toUpperCase()+elem.label.slice(1).split('_').join(' '), 
+      cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
+      )
+    )
+    return labelMap;
   }
 }