From f21d10f8305df9aacf4b42280ed17e67e36d3b18 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Mon, 4 Jul 2022 19:01:41 +0300 Subject: [PATCH 1/6] added prop key, made update form --- src/pages/digitalId/ProfileId.jsx | 116 ++++++++++++++++++++++-- src/partials/digitalId/ProfileTable.jsx | 14 +-- 2 files changed, 117 insertions(+), 13 deletions(-) diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index a1fb4e0..7f4fdeb 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -14,6 +14,7 @@ const Profile = observer (() => { const [changePanelOpen, setChangePanelOpen] = useState(false); const [toggle, setToggle] = useState(true); const [addPanelOpen, setAddPanelOpen] = useState(false); + const [updatePanelOpen, setUpdatePanelOpen] = useState(false); const [selectedItems, setSelectedItems] = useState([]); const defaultValues = { @@ -32,15 +33,28 @@ const Profile = observer (() => { } } - const changeCurrentValues = (value, field) => { + const addCurrentValues = (value, field) => { setCurrentValues((prevState)=> ({ ...prevState, [field]: value.charAt(0).toUpperCase()+value.slice(1), })) + console.log(currentValues); } + const changeCurrentValue = (value, field, id) => { + setCurrentValues((prevState) => + prevState.map((elem) => ( + elem.id === id ? { + ...elem, + [field]: value.charAt(0).toUpperCase()+value.slice(1), + } : elem + )) + ) + console.log(currentValues); + }; + const closeHint = (element) => { - changeCurrentValues(element, 'property'); + addCurrentValues(element, 'property'); setPropertyValues([]); } @@ -85,11 +99,24 @@ const Profile = observer (() => { setButtonPanelOpen(true); } + const cancelUpdatePanel = () => { + setUpdatePanelOpen(false); + setButtonPanelOpen(true); + } + const openRemovePanel = () => { setRemovePanelOpen(true); setChangePanelOpen(false); } + const openUpdatePanel = () => { + setCurrentValues(selectedUserData); + setUpdatePanelOpen(true); + setChangePanelOpen(false); + console.log(currentValues); + console.log(selectedUserData) + } + const applyRemovePanel = () => { setRemovePanelOpen(false); setButtonPanelOpen(true); @@ -97,7 +124,7 @@ const Profile = observer (() => { } const handleInput = (text, field) => { - changeCurrentValues(text, field); + addCurrentValues(text, field); setPropertyValues(initialPropertyValues); if (text) { let reg = new RegExp(`^${text}`, 'img'); @@ -105,6 +132,8 @@ const Profile = observer (() => { } }; + let selectedUserData = userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)); + return (
{/* Sidebar */} @@ -189,7 +218,7 @@ const Profile = observer (() => { type="text" required onClick={() => setPropertyValues([])} - onChange={(e) => changeCurrentValues(e.target.value, 'value')} + onChange={(e) => addCurrentValues(e.target.value, 'value')} value={currentValues.value} />
@@ -202,7 +231,7 @@ const Profile = observer (() => { type="text" required onClick={() => setPropertyValues([])} - onChange={(e) => changeCurrentValues(e.target.value, 'seed')} + onChange={(e) => addCurrentValues(e.target.value, 'seed')} value={currentValues.seed} /> @@ -234,6 +263,78 @@ const Profile = observer (() => { + {/* Update panel */} +
+ {currentValues.map((item, index) => ( +
+
+ + changeCurrentValue(e.target.value, 'property', item.id)} + value={item.label} + disabled='disabled' + /> +
+
+ + changeCurrentValue(e.target.value, 'value', item.id)} + value={item.value} + /> +
+
+ + changeCurrentValue(e.target.value, 'seed', item.id)} + value={item.seed || Math.floor(Math.random() * 90000000000000000000)} + /> +
+ {(currentValues[index+1]) ? ( +
+ ) : null} +
+ ))} +
+ Store data on blockchain +
+
+ setToggle(!toggle)} /> + +
+
+
+ {/* Buttons */} +
+ + +
+
{/* Remove panel */}

Summary

@@ -319,7 +420,10 @@ const Profile = observer (() => { Remove -
{/* Update panel */}
- {currentValues.map((item, index) => ( -
+ {updatedValues.map((item, index) => ( +
changeCurrentValue(e.target.value, 'property', item.id)} + onChange={(e) => changeUpdatedValues(e.target.value, 'property', item.key)} value={item.label} disabled='disabled' /> @@ -283,11 +282,11 @@ const Profile = observer (() => { changeCurrentValue(e.target.value, 'value', item.id)} + onChange={(e) => changeUpdatedValues(e.target.value, 'value', item.key)} value={item.value} />
@@ -295,15 +294,15 @@ const Profile = observer (() => { changeCurrentValue(e.target.value, 'seed', item.id)} + onChange={(e) => changeUpdatedValues(e.target.value, 'seed', item.key)} value={item.seed || Math.floor(Math.random() * 90000000000000000000)} />
- {(currentValues[index+1]) ? ( + {(updatedValues[index+1]) ? (
) : null}
From 944c9989e97124abca977ee716f93edc04b0f931 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 6 Jul 2022 13:33:45 +0300 Subject: [PATCH 3/6] fix seed --- src/pages/digitalId/ProfileId.jsx | 116 +++++++++++++++++------------- 1 file changed, 66 insertions(+), 50 deletions(-) diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 900fb11..4f5ff20 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -16,16 +16,16 @@ const Profile = observer (() => { const [addPanelOpen, setAddPanelOpen] = useState(false); const [updatePanelOpen, setUpdatePanelOpen] = useState(false); const [selectedItems, setSelectedItems] = useState([]); - + const defaultValues = { property: '', value: '', - seed: Math.floor(Math.random() * 90000000000000000000) + seed: Math.floor(Math.random() * 90000000000000000000) }; const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date']; const [propertyValues, setPropertyValues] = useState([]); - const [updatedValues, setUpdatedValues] = useState(defaultValues); + const [updatedValues, setUpdatedValues] = useState([defaultValues]); const [addedValues, setAddedValues] = useState(defaultValues); const openHint = () => { @@ -35,9 +35,13 @@ const Profile = observer (() => { } const changeAddedValues = (value, field) => { - setAddedValues((prevState)=> ({ + setAddedValues((prevState) => ( + field !== 'seed' ? { ...prevState, - [field]: value.charAt(0).toUpperCase()+value.slice(1), + [field]: value + } : { + ...prevState, + [field]: +value, })) console.log(addedValues); }; @@ -45,9 +49,13 @@ const Profile = observer (() => { const changeUpdatedValues = (value, field, key) => { setUpdatedValues((prevState) => prevState.map((elem) => ( - elem.key === key ? { + (elem.key === key && field !== 'seed') ? { ...elem, - [field]: value.charAt(0).toUpperCase()+value.slice(1), + [field]: value, + } : + (elem.key === key) ? { + ...elem, + [field]: +value, } : elem )) ) @@ -61,7 +69,12 @@ const Profile = observer (() => { const handleSelectedItems = (selectedItems) => { setSelectedItems([...selectedItems]); - setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))); + setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)) + .map(elem => ( + (!elem.seed) ? { + ...elem, + seed: Math.floor(Math.random() * 90000000000000000000) + }: elem))); if (selectedItems.length > 0) { setButtonPanelOpen(false); setAddPanelOpen(false); @@ -104,7 +117,7 @@ const Profile = observer (() => { const cancelUpdatePanel = () => { setUpdatePanelOpen(false); - setButtonPanelOpen(true); + setChangePanelOpen(true); } const openRemovePanel = () => { @@ -227,7 +240,7 @@ const Profile = observer (() => { autoComplete='off' id="seed" className="form-input w-full" - type="text" + type="number" required onClick={() => setPropertyValues([])} onChange={(e) => changeAddedValues(e.target.value, 'seed')} @@ -265,48 +278,51 @@ const Profile = observer (() => { {/* Update panel */}
{updatedValues.map((item, index) => ( -
-
- - changeUpdatedValues(e.target.value, 'property', item.key)} - value={item.label} - disabled='disabled' - /> +
+ +
+ + changeUpdatedValues(e.target.value, 'property', item.key)} + value={item.label} + disabled='disabled' + /> +
+
+ + changeUpdatedValues(e.target.value, 'value', item.key)} + value={item.value} + /> +
+
+ + changeUpdatedValues(e.target.value, 'seed', item.key)} + value={item.seed} + /> +
+ {(updatedValues[index+1]) ? ( +
+ ) : null}
-
- - changeUpdatedValues(e.target.value, 'value', item.key)} - value={item.value} - /> -
-
- - changeUpdatedValues(e.target.value, 'seed', item.key)} - value={item.seed || Math.floor(Math.random() * 90000000000000000000)} - /> -
- {(updatedValues[index+1]) ? ( -
- ) : null} -
+ ))} +
Store data on blockchain
From 18bf3735084a3eaef4fd3a2e3b5a4cc9e66f8b9b Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 6 Jul 2022 19:32:31 +0300 Subject: [PATCH 4/6] changed the names of the methods --- src/pages/Onboarding1.jsx | 5 +-- src/pages/Onboarding4.jsx | 1 - src/pages/digitalId/ProfileId.jsx | 68 +++++++++++++++++++++++-------- src/store/store.js | 2 +- 4 files changed, 53 insertions(+), 23 deletions(-) diff --git a/src/pages/Onboarding1.jsx b/src/pages/Onboarding1.jsx index 2ec84de..bc6e19d 100644 --- a/src/pages/Onboarding1.jsx +++ b/src/pages/Onboarding1.jsx @@ -1,4 +1,4 @@ -import React, {useEffect} from 'react'; +import React from 'react'; import { Link } from 'react-router-dom'; import OnboardingImage from '../images/onboarding-image.jpg'; @@ -11,9 +11,6 @@ import {registrationStore} from "../store/store"; const Onboarding1 = observer(()=>{ let phrase = passphrase.Mnemonic.generateMnemonic() registrationStore.savePassPhrase(phrase) - useEffect(()=>{ - - },[]) return (
diff --git a/src/pages/Onboarding4.jsx b/src/pages/Onboarding4.jsx index f84f292..bea7ea5 100644 --- a/src/pages/Onboarding4.jsx +++ b/src/pages/Onboarding4.jsx @@ -16,7 +16,6 @@ const Onboarding4 = observer(()=>{ } else { registrationStore.pushAccountData() setCheckBoxesSelected(true) - } } diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 4f5ff20..06c30ad 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -18,7 +18,7 @@ const Profile = observer (() => { const [selectedItems, setSelectedItems] = useState([]); const defaultValues = { - property: '', + label: '', value: '', seed: Math.floor(Math.random() * 90000000000000000000) }; @@ -29,7 +29,7 @@ const Profile = observer (() => { const [addedValues, setAddedValues] = useState(defaultValues); const openHint = () => { - if (!addedValues.property) { + if (!addedValues.label) { setPropertyValues(initialPropertyValues); } } @@ -63,7 +63,7 @@ const Profile = observer (() => { }; const closeHint = (element) => { - changeAddedValues(element, 'property'); + changeAddedValues(element, 'label'); setPropertyValues([]); } @@ -96,19 +96,53 @@ const Profile = observer (() => { setButtonPanelOpen(false); } - const sendValues = () => { - if (!userDataStore.decryptedData.some((element) => element.property === addedValues.property) && (addedValues.seed.toString().length === 20)) { + const sendAddedData = () => { + if (!userDataStore.decryptedData.some((element) => element.label === addedValues.label) && (addedValues.seed.toString().length === 20)) { setAddPanelOpen(false); setButtonPanelOpen(true); setAddedValues(defaultValues); + addDataParameters(); } } - const deletePropertyData = () => { + const sendUpdatedData = () => { + setUpdatePanelOpen(false); + changeDataParameters(); + setChangePanelOpen(true); + } + + const deleteDataParameters = () => { const changeData = userDataStore.decryptedData.filter(item=>!selectedItems.includes(item.key)) registrationStore.pushAccountData(changeData) } + const changeDataParameters = () => { + const updatedData = (function changeValue() { + let newArr = [] + userDataStore.decryptedData.map(elem => { + updatedValues.forEach(item => { + if (elem.label === item.label) { + newArr.push({ + ...elem, + 'value': item.value, + 'seed': item.seed, + }) + } + }) + if (!newArr.find(element => element.label === elem.label)) { + newArr.push(elem); + } + }) + return newArr + })(); + console.log(updatedData); + } + + const addDataParameters = () => { + addedValues.label = addedValues.label.toLowerCase().split(' ').join('_'); + console.log(registrationStore.userData.data.concat(addedValues)); + } + const cancelAddPanel = () => { setAddedValues(defaultValues); setAddPanelOpen(false); @@ -131,10 +165,10 @@ const Profile = observer (() => { console.log(updatedValues); } - const applyRemovePanel = () => { + const applyDataDeletion = () => { setRemovePanelOpen(false); setButtonPanelOpen(true); - deletePropertyData() + deleteDataParameters() } const handleInput = (text, field) => { @@ -205,12 +239,12 @@ const Profile = observer (() => { handleInput(e.target.value, 'property')} - value={addedValues.property} + onInput={(e) => handleInput(e.target.value, 'label')} + value={addedValues.label} onClick={openHint} />
0) || 'hidden'}`}> @@ -269,7 +303,7 @@ const Profile = observer (() => { @@ -283,11 +317,11 @@ const Profile = observer (() => {
changeUpdatedValues(e.target.value, 'property', item.key)} + onChange={(e) => changeUpdatedValues(e.target.value, 'label', item.key)} value={item.label} disabled='disabled' /> @@ -344,9 +378,9 @@ const Profile = observer (() => {
@@ -372,7 +406,7 @@ const Profile = observer (() => {