From 1c539e525538cdd2195d73dad4b86833b7a16bfd Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 29 Jun 2022 18:34:42 +0300 Subject: [PATCH 1/6] made userDataStore --- src/pages/digitalId/ProfileId.jsx | 24 ++++++++++++++++++++---- src/store/store.js | 15 ++++++++++++--- src/store/userDataStore.js | 24 ++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 7 deletions(-) create mode 100644 src/store/userDataStore.js diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 04cc9ce..b41d353 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -1,5 +1,8 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } 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'; @@ -8,7 +11,7 @@ import Avatar01 from '../../images/avatar-01.jpg'; import Avatar02 from '../../images/avatar-02.jpg'; import Avatar03 from '../../images/avatar-03.jpg'; -function Profile () { +const Profile = observer (() => { const [sidebarOpen, setSidebarOpen] = useState(false); const [buttonPanelOpen, setButtonPanelOpen] = useState(true); const [removePanelOpen, setRemovePanelOpen] = useState(false); @@ -16,6 +19,10 @@ function Profile () { const [toggle, setToggle] = useState(true); const [addPanelOpen, setAddPanelOpen] = useState(false); const [selectedItems, setSelectedItems] = useState([]); + + /*useEffect(() => { + userDataStore.getUserData(); + }, []);*/ const defaultValues = { property: '', @@ -269,6 +276,15 @@ function Profile () { {/* Table */} + {/* Test user data */} +
+ {userDataStore.userData.map((elem, index) => ( +
+ {elem.label} + {elem.value.split(':')[1]} +
+ )) } +
{/* Left sidebar */}
@@ -470,6 +486,6 @@ function Profile () {
) -} +}) -export default Profile; \ No newline at end of file +export default Profile \ No newline at end of file diff --git a/src/store/store.js b/src/store/store.js index 80ebc8b..0528b0a 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -10,6 +10,8 @@ class Store { _nodeInfo = {} + _userData = {} + constructor() { makeAutoObservable(this); @@ -18,15 +20,18 @@ class Store { reaction(() => this.tokenKey, () => fetchWrapper.getAuth('http://3.125.47.101/api/data/account', { networkIdentifier: this.nodeInfo.networkIdentifier, lastBlockID: this.nodeInfo.lastBlockID - })) + }).then((res) => this.userInfoFetchChange(res))) }; fetchCreateNewAccount() { fetchWrapper.postAuth('http://3.125.47.101/api/data/account', { networkIdentifier: this.nodeInfo.networkIdentifier, lastBlockID: this.nodeInfo.lastBlockID - }, [...this.encryptAccountData]) - .catch(()=>{}) + }, [...this.encryptAccountData]).catch(()=>{}) + }; + + userInfoFetchChange(res) { + this._userData = res; } savePassPhrase(phrase) { @@ -51,6 +56,10 @@ 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' } diff --git a/src/store/userDataStore.js b/src/store/userDataStore.js new file mode 100644 index 0000000..91cd9b5 --- /dev/null +++ b/src/store/userDataStore.js @@ -0,0 +1,24 @@ +import { cryptography } from "@liskhq/lisk-client"; +import { makeAutoObservable, reaction } from "mobx"; +import { registrationStore } from './store'; + +class UserDataStore{ + _data = [] + + constructor() { + makeAutoObservable(this); + + reaction(() => ({data: registrationStore.userData}), ({data}) => { + this._data = data.data; + }) + } + + get userData(){ + return this._data.map((elem) => ({ + ...elem, + value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey) + })) + } +} + +export const userDataStore = new UserDataStore(); \ No newline at end of file From 5f85d1696a84ac39b3f0e5137ed7c3d5293ee03b Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Thu, 30 Jun 2022 14:30:52 +0300 Subject: [PATCH 2/6] integrated received data into table --- src/pages/digitalId/ProfileId.jsx | 163 +---------------------- src/partials/digitalId/ProfileTable.jsx | 170 +++++++++++++++--------- src/store/userDataStore.js | 5 +- 3 files changed, 116 insertions(+), 222 deletions(-) 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] })) } } From 85897a8efe5f972c7d9afb815b9b3b8d96eec890 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Thu, 30 Jun 2022 14:50:59 +0300 Subject: [PATCH 3/6] changed name of the method in store.js --- src/store/store.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/store/store.js b/src/store/store.js index 0528b0a..390588c 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -20,7 +20,7 @@ class Store { reaction(() => this.tokenKey, () => fetchWrapper.getAuth('http://3.125.47.101/api/data/account', { networkIdentifier: this.nodeInfo.networkIdentifier, lastBlockID: this.nodeInfo.lastBlockID - }).then((res) => this.userInfoFetchChange(res))) + }).then((res) => this.userDataFetchChange(res))) }; fetchCreateNewAccount() { @@ -30,7 +30,7 @@ class Store { }, [...this.encryptAccountData]).catch(()=>{}) }; - userInfoFetchChange(res) { + userDataFetchChange(res) { this._userData = res; } From e883b190a7115f768791b26e59f126ab2f39a8f6 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Fri, 1 Jul 2022 16:01:20 +0300 Subject: [PATCH 4/6] 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 (
{/* Sidebar */} @@ -131,7 +144,7 @@ const Profile = observer (() => {
{/* Table */} - +
{/* Left sidebar */}
@@ -231,8 +244,8 @@ const Profile = observer (() => {

Summary

- {userDataStore.data.filter(({ label }) => selectedItems.includes(label)).map(item => ( - {item.label} + {filterByLabel(userDataStore.decryptData).map((elem) => ( + {elem.key} ))}
From 16ca8a1df2da6bd6dcb0168fb139f234e89f82bd Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Fri, 1 Jul 2022 16:03:21 +0300 Subject: [PATCH 5/6] 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({
- {generalData.map((data) => { + {generalData.map((elem) => { return ( ) })} @@ -70,24 +93,24 @@ function ProfileTable({ {/* Nationality */} -
0 || 'hidden'}`}> +
0 || 'hidden'}`}>

Nationality 🖋️

- {nationalityData.map(data => { + {nationalityData.map((elem) => { return ( ) })} @@ -101,21 +124,21 @@ function ProfileTable({
- {sosialData.map(data => { + {sosialData.map((elem) => { return ( - ) + ) })}
@@ -127,19 +150,19 @@ function ProfileTable({
- {otherData.map(data => { + {otherData.map((elem) => { return ( ) })} 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; } } From 9703371f2812e4a00bef2f626dc9c6ce034e2b40 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Fri, 1 Jul 2022 17:16:09 +0300 Subject: [PATCH 6/6] made a reference book --- src/pages/digitalId/ProfileId.jsx | 6 +++--- src/store/userDataStore.js | 36 +++++++++++++++++++++++++++---- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 10e7c67..7819184 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.decryptedData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) { setAddPanelOpen(false); setButtonPanelOpen(true); setCurrentValues(defaultValues); @@ -131,7 +131,7 @@ const Profile = observer (() => { {/* Table */} - + {/* Left sidebar */}
@@ -231,7 +231,7 @@ const Profile = observer (() => {

Summary

- {userDataStore.data.filter(({ label }) => selectedItems.includes(label)).map(item => ( + {userDataStore.decryptedData.filter(({ label }) => selectedItems.includes(label)).map(item => ( {item.label} ))}
diff --git a/src/store/userDataStore.js b/src/store/userDataStore.js index 65c118c..2dd65ab 100644 --- a/src/store/userDataStore.js +++ b/src/store/userDataStore.js @@ -2,9 +2,37 @@ import { cryptography } from "@liskhq/lisk-client"; import { makeAutoObservable, reaction } from "mobx"; import { registrationStore } from './store'; +const labelMap = { + first_name: 'First name', + second_name: 'Second name', + gender: "Gender", + birthdate: "Birthdate", + place_of_birth: "Place of birth", + nationality: "Nationality", + national_id: "National id", + national_doctype: "National doctype", + national_doc_id: "National doc id", + national_doc_issue_date: "National doc issue date", + national_doc_expiry_date: "National doc expiry date", + telephone: "Telephone", + twitter: "Twitter", + facebook: "Facebook", + instagram: "Instagram", + youtube: "Youtube", + wechat: "Wechat", + tiktok: "Tiktok", + linkedin: "Linkedin", + vk: "Vk", + github: "Github", + telegram: "Telegram", + qq: "Qq", + snapchat: "Snapchat", + reddit: "Reddit" +}; + class UserDataStore{ - _data = [] - + _data = []; + constructor() { makeAutoObservable(this); @@ -13,10 +41,10 @@ class UserDataStore{ }) } - get data(){ + get decryptedData(){ return this._data.map((elem) => ({ ...elem, - label: elem.label.charAt(0).toUpperCase()+elem.label.slice(1).split('_').join(' '), + label: labelMap[elem.label], value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1] })) }