diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index b41d353..10e7c67 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/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 (
{/* Sidebar */} @@ -275,16 +131,7 @@ const Profile = observer (() => {
{/* Table */} - - {/* Test user data */} -
- {userDataStore.userData.map((elem, index) => ( -
- {elem.label} - {elem.value.split(':')[1]} -
- )) } -
+ {/* Left sidebar */}
@@ -384,8 +231,8 @@ const Profile = observer (() => {

Summary

- {userData.filter(({ id }) => selectedItems.includes(id)).map(item => ( - {item.property} + {userDataStore.data.filter(({ label }) => selectedItems.includes(label)).map(item => ( + {item.label} ))}
diff --git a/src/partials/digitalId/ProfileTable.jsx b/src/partials/digitalId/ProfileTable.jsx index cadad05..b65797b 100644 --- a/src/partials/digitalId/ProfileTable.jsx +++ b/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 */} -

General 🖋️

-
- - - {userData.filter(data => data.category === 'General') - .map(data => { +
0 || 'hidden'}`}> +

General 🖋️

+
+
+ + {generalData.map((data) => { return ( ) - }) - } - -
+ })} + + +
{/* Nationality */} -

Nationality 🖋️

-
- - - {userData.filter(data => data.category === 'Nationality') - .map(data => { +
0 || 'hidden'}`}> +

Nationality 🖋️

+
+
+ + {nationalityData.map(data => { return ( ) - }) - } - -
+ })} + + +
{/* Social */} -

Social 🖋️

-
- - - {userData.filter(data => data.category === 'Social') - .map(data => { - return ( - - ) - }) - } - -
+
0 || 'hidden'}`}> +

Social 🖋️

+
+ + + {sosialData.map(data => { + return ( + + ) + })} + +
+
+
+ {/* Other */} +
0 || 'hidden'}`}> +

Other 🖋️

+
+ + + {otherData.map(data => { + return ( + + ) + })} + +
+
) diff --git a/src/store/userDataStore.js b/src/store/userDataStore.js index 91cd9b5..65c118c 100644 --- a/src/store/userDataStore.js +++ b/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] })) } }