integrated received data into table

src/pages/digitalId/ProfileId.jsx

@@ -1,15 +1,10 @@
-import React, { useState, useEffect } from 'react';
+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';
 import ProfileTable from '../../partials/digitalId/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
-import ProfileIcon from '../../images/profile-icon.svg';
-import Avatar01 from '../../images/avatar-01.jpg';
-import Avatar02 from '../../images/avatar-02.jpg';
-import Avatar03 from '../../images/avatar-03.jpg';
 
 const Profile = observer (() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -19,10 +14,6 @@ const Profile = observer (() => {
   const [toggle, setToggle] = useState(true);
   const [addPanelOpen, setAddPanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
-
-  /*useEffect(() => {
-    userDataStore.getUserData();
-  }, []);*/
   
   const defaultValues = {
     property: '',
@@ -75,7 +66,7 @@ const Profile = observer (() => {
   }
 
   const sendValues = () => {
-    if (!userData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
+    if (!userDataStore.data.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
       setAddPanelOpen(false);
       setButtonPanelOpen(true);
       setCurrentValues(defaultValues);
@@ -107,141 +98,6 @@ const Profile = observer (() => {
     }
   };
 
-  const userData = [
-    {
-      id: '0',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Dominik',
-      property: 'First name',
-      status: 'Completed',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-    {
-      id: '1',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Lamakani',
-      property: 'Second name',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '2',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '05.10.1983',
-      property: 'Birthdate',
-      status: 'Incorrect',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '3',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Male',
-      property: 'Gender',
-      status: 'Stored',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '4',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'United Kindom',
-      property: 'Residence',
-      status: 'Completed',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-    {
-      id: '5',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Passport',
-      property: 'Document type',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-    {
-      id: '6',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'A123B3143',
-      property: 'Document ID',
-      status: 'Incorrect',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '7',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '05.10.2012',
-      property: 'Issue date',
-      status: 'Stored',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '8',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '05.10.2032',
-      property: 'Expiry date',
-      status: 'Stored',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '9',
-      category: 'Social',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '@lamakani',
-      property: 'Telegram',
-      status: 'Completed',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '10',
-      category: 'Social',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '@lamakani',
-      property: 'Telegram',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-  ]
-
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
@@ -275,16 +131,7 @@ const Profile = observer (() => {
                   </ul>
                 </div>
                 {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={userData}/>
-                {/* Test user data */}
-                <div className='bg-slate-500'>
-                  {userDataStore.userData.map((elem, index) => (
-                    <div key={index} className='flex flex-col gap-y-2'>
-                      <span>{elem.label}</span>
-                      <span>{elem.value.split(':')[1]}</span>
-                    </div>
-                  )) }
-                </div>
+                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.data}/>
               </div>
               {/* Left sidebar */}
               <div>
@@ -384,8 +231,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">
-                      {userData.filter(({ id }) => selectedItems.includes(id)).map(item => (
-                        <span key={item.id} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.property}</span>
+                      {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>
                       ))}
                     </div>
                     <div className="flex flex-row justify-between pt-[16px] pb-7 items-center">

src/partials/digitalId/ProfileTable.jsx

@@ -1,5 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import ProfileTableItem from './ProfileTableItem';
+import ProfileIcon from '../../images/profile-icon.svg';
 
 function ProfileTable({
   selectedItems,
@@ -8,6 +9,13 @@ function ProfileTable({
 
   const [isCheck, setIsCheck] = useState([]);
 
+  const defaultData = {
+    image: ProfileIcon,
+    status: 'Stored',
+    transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+    avatars: null
+  }
+
   useEffect(() => {
     selectedItems(isCheck);
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -21,85 +29,123 @@ function ProfileTable({
     }
   };
 
+  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));
+
   return (
     <>
     {/* General */}
-      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
-      <div className="overflow-x-auto w-[828px]">
-        <table className="w-[828px] table-auto w-full">
-          <tbody className="divide-slate-200 divide-y">
-            {userData.filter(data => data.category === 'General')
-              .map(data => {
+      <div className={`${generalData.length > 0 || 'hidden'}`}>
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
+        <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) => {
                 return (
                   <ProfileTableItem
-                    key={data.id}
-                    id={data.id}
-                    image={data.image}
-                    value={data.value}
-                    property={data.property}
-                    status={data.status}
-                    transactions={data.transactions}
-                    avatars={data.avatars}
+                    key={data.label}
+                    id={data.label}
+                    image={defaultData.image}
+                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                    property={data.label}
+                    status={defaultData.status}
+                    transactions={defaultData.transactions}
+                    avatars={defaultData.avatars}
                     handleClick={handleClick}
-                    isChecked={isCheck.includes(data.id)}
+                    isChecked={isCheck.includes(data.label)}
                   />
                 )
-              })
-            }
-          </tbody>
-        </table>
+              })}
+            </tbody>
+          </table>
+        </div>
       </div>
       {/* Nationality */}
-      <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 ">
-            {userData.filter(data => data.category === 'Nationality')
-              .map(data => {
+      <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 => {
                 return (
                   <ProfileTableItem
-                    key={data.id}
-                    id={data.id}
-                    image={data.image}
-                    value={data.value}
-                    property={data.property}
-                    status={data.status}
-                    transactions={data.transactions}
-                    avatars={data.avatars}
+                    key={data.label}
+                    id={data.label}
+                    image={defaultData.image}
+                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                    property={data.label}
+                    status={defaultData.status}
+                    transactions={defaultData.transactions}
+                    avatars={defaultData.avatars}
                     handleClick={handleClick}
-                    isChecked={isCheck.includes(data.id)}
+                    isChecked={isCheck.includes(data.label)}
                   />
                 )
-              })
-            }
-          </tbody>
-        </table>
+              })}
+            </tbody>
+          </table>
+        </div>
       </div>
       {/* Social */}
-      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</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 ">
-            {userData.filter(data => data.category === 'Social')
-              .map(data => {
-                return (
-                  <ProfileTableItem
-                    key={data.id}
-                    id={data.id}
-                    image={data.image}
-                    value={data.value}
-                    property={data.property}
-                    status={data.status}
-                    transactions={data.transactions}
-                    avatars={data.avatars}
-                    handleClick={handleClick}
-                    isChecked={isCheck.includes(data.id)}
-                  />
-                )
-              })
-            }
-          </tbody>
-        </table>
+      <div className={`${sosialData.length > 0 || 'hidden'}`}>
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</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 ">
+            {sosialData.map(data => {
+              return (
+                <ProfileTableItem
+                  key={data.label}
+                  id={data.label}
+                  image={defaultData.image}
+                  value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                  property={data.label}
+                  status={defaultData.status}
+                  transactions={defaultData.transactions}
+                  avatars={defaultData.avatars}
+                  handleClick={handleClick}
+                  isChecked={isCheck.includes(data.label)}
+                />
+              ) 
+            })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      {/* Other */}
+      <div className={`${otherData.length > 0 || 'hidden'}`}>
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Other 🖋️</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 ">
+            {otherData.map(data => {
+              return (
+                <ProfileTableItem
+                  key={data.label}
+                  id={data.label}
+                  image={defaultData.image}
+                  value={data.value}
+                  property={data.label}
+                  status={defaultData.status}
+                  transactions={defaultData.transactions}
+                  avatars={defaultData.avatars}
+                  handleClick={handleClick}
+                  isChecked={isCheck.includes(data.label)}
+                />
+              )
+            })}
+            </tbody>
+          </table>
+        </div>
       </div>
     </>
   )

src/store/userDataStore.js

@@ -13,10 +13,11 @@ class UserDataStore{
     })
   }
 
-  get userData(){
+  get data(){
     return this._data.map((elem) => ({
       ...elem,
-      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey)
+      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]
     }))
   }
 }