From e883b190a7115f768791b26e59f126ab2f39a8f6 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 1 Jul 2022 16:01:20 +0300
Subject: [PATCH 1/2] converted user data into Map object

---
 src/pages/digitalId/ProfileId.jsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 10e7c67..d2d9bec 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -66,7 +66,7 @@ const Profile = observer (() => {
   }
 
   const sendValues = () => {
-    if (!userDataStore.data.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
+    if (!userDataStore.decryptData.has(currentValues.property) && (currentValues.seed.toString().length === 20)) {
       setAddPanelOpen(false);
       setButtonPanelOpen(true);
       setCurrentValues(defaultValues);
@@ -98,6 +98,19 @@ const Profile = observer (() => {
     }
   };
 
+  const filterByLabel = (map) => {
+    let newArray = [];
+    map.forEach((value, key) => {
+      if (selectedItems.includes(key)){
+        newArray.push({
+          'key': key,
+          'value': value
+      });
+      }
+    });
+    return newArray;
+  }
+
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
@@ -131,7 +144,7 @@ const Profile = observer (() => {
                   </ul>
                 </div>
                 {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.data}/>
+                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.decryptData}/>
               </div>
               {/* Left sidebar */}
               <div>
@@ -231,8 +244,8 @@ 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.data.filter(({ label }) => selectedItems.includes(label)).map(item => (
-                        <span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
+                      {filterByLabel(userDataStore.decryptData).map((elem) => (
+                        <span key={elem.key} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{elem.key}</span>
                       ))}
                     </div>
                     <div className="flex flex-row justify-between pt-[16px] pb-7 items-center">

From 16ca8a1df2da6bd6dcb0168fb139f234e89f82bd Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 1 Jul 2022 16:03:21 +0300
Subject: [PATCH 2/2] converted user data into Map object

---
 src/partials/digitalId/ProfileTable.jsx | 85 ++++++++++++++++---------
 src/store/userDataStore.js              | 19 ++++--
 2 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/src/partials/digitalId/ProfileTable.jsx b/src/partials/digitalId/ProfileTable.jsx
index b65797b..77901bc 100644
--- a/src/partials/digitalId/ProfileTable.jsx
+++ b/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)),
-        nationalityData = userData.filter(elem => data.nationality.includes(elem.label)),
-        sosialData = userData.filter(elem => data.nationality.includes(elem.label)),
-        otherData = userData.filter((elem) => 
-          !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
+  const generalData = filterByCategory(userData, data.general),
+        nationalityData = filterByCategory(userData, data.nationality),
+        sosialData = filterByCategory(userData, data.social),
+        otherData = filterByCategory(userData);
 
   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}
-                    id={data.label}
+                    key={elem.key}
+                    id={elem.key}
                     image={defaultData.image}
-                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
-                    property={data.label}
+                    value={elem.value.charAt(0).toUpperCase()+elem.value.slice(1)}
+                    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}
-                    id={data.label}
+                    key={elem.key}
+                    id={elem.key}
                     image={defaultData.image}
-                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
-                    property={data.label}
+                    value={elem.value.charAt(0).toUpperCase()+elem.value.slice(1)}
+                    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}
-                  id={data.label}
+                  key={elem.key}
+                  id={elem.key}
                   image={defaultData.image}
-                  value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
-                  property={data.label}
+                  value={elem.value.charAt(0).toUpperCase()+elem.value.slice(1)}
+                  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}
-                  id={data.label}
+                  key={elem.key}
+                  id={elem.key}
                   image={defaultData.image}
-                  value={data.value}
-                  property={data.label}
+                  value={elem.value.charAt(0).toUpperCase()+elem.value.slice(1)}
+                  property={elem.key}
                   status={defaultData.status}
                   transactions={defaultData.transactions}
                   avatars={defaultData.avatars}
                   handleClick={handleClick}
-                  isChecked={isCheck.includes(data.label)}
+                  isChecked={isCheck.includes(elem.key)}
                 />
               )
             })}
diff --git a/src/store/userDataStore.js b/src/store/userDataStore.js
index 65c118c..e5032c0 100644
--- a/src/store/userDataStore.js
+++ b/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(){
-    return this._data.map((elem) => ({
-      ...elem,
-      label: elem.label.charAt(0).toUpperCase()+elem.label.slice(1).split('_').join(' '),
-      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
-    }))
+  get data() {
+    return this._data;
+  }
+  get decryptData(){
+    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;
   }
 }