From e837f7cc89c8a302eb7a6ac9ec2f9bf8b4d1840c Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Fri, 8 Jul 2022 18:06:32 +0300 Subject: [PATCH 1/2] added onblur, fixed seed, moved default values --- src/pages/digitalId/ProfileId.jsx | 37 +++++++++++++------------------ 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 85b59d1..6a00234 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -7,6 +7,14 @@ import Header from '../../partials/Header'; import ProfileTable from '../../partials/digitalId/ProfileTable'; import Image from '../../images/transactions-image-04.svg'; +const defaultValues = { + label: '', + value: '', + seed: parseInt(Math.floor(Math.random() * 90000000000000000000), 10) +}; + +const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc id', 'National doc issue date', 'National doc expiry date']; + const Profile = observer (() => { const [sidebarOpen, setSidebarOpen] = useState(false); const [buttonPanelOpen, setButtonPanelOpen] = useState(true); @@ -16,14 +24,6 @@ const Profile = observer (() => { const [addPanelOpen, setAddPanelOpen] = useState(false); const [updatePanelOpen, setUpdatePanelOpen] = useState(false); const [selectedItems, setSelectedItems] = useState([]); - - const defaultValues = { - label: '', - value: '', - seed: Math.floor(Math.random() * 90000000000000000000) - }; - - const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc id', 'National doc issue date', 'National doc expiry date']; const [propertyValues, setPropertyValues] = useState([]); const [updatedValues, setUpdatedValues] = useState([defaultValues]); const [addedValues, setAddedValues] = useState(defaultValues); @@ -35,26 +35,18 @@ const Profile = observer (() => { } const changeAddedValues = (value, field) => { - setAddedValues((prevState) => ( - field !== 'seed' ? { + setAddedValues((prevState) => ({ ...prevState, [field]: value - } : { - ...prevState, - [field]: +value, })) }; const changeUpdatedValues = (value, field, key) => { setUpdatedValues((prevState) => prevState.map((elem) => ( - (elem.key === key && field !== 'seed') ? { - ...elem, - [field]: value, - } : (elem.key === key) ? { ...elem, - [field]: +value, + [field]: value, } : elem )) ) @@ -71,7 +63,7 @@ const Profile = observer (() => { .map(elem => ( (!elem.seed) ? { ...elem, - seed: Math.floor(Math.random() * 90000000000000000000) + seed: parseInt(Math.floor(Math.random() * 90000000000000000000), 10) }: elem))); if (selectedItems.length > 0) { setButtonPanelOpen(false); @@ -95,7 +87,9 @@ const Profile = observer (() => { } const sendAddedData = () => { - if (!userDataStore.decryptedData.some((element) => element.label === addedValues.label) && (addedValues.seed.toString().length === 20)) { + const checkingAddedData = !userDataStore.decryptedData + some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20); + if (checkingAddedData) { setAddPanelOpen(false); setButtonPanelOpen(true); setAddedValues(defaultValues); @@ -245,11 +239,12 @@ const Profile = observer (() => { onInput={(e) => handleInput(e.target.value, 'label')} value={addedValues.label} onClick={openHint} + onBlur={() => setPropertyValues([])} />
0) || 'hidden'}`}>
From 47dfcf347ca2a051df18b6dec1b42bf85134869f Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Mon, 11 Jul 2022 15:08:12 +0300 Subject: [PATCH 2/2] added stacking context for the hint --- src/pages/digitalId/ProfileId.jsx | 116 +++++++++++++++--------------- 1 file changed, 60 insertions(+), 56 deletions(-) diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 6a00234..fae4309 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -10,10 +10,10 @@ import Image from '../../images/transactions-image-04.svg'; const defaultValues = { label: '', value: '', - seed: parseInt(Math.floor(Math.random() * 90000000000000000000), 10) + seed: String(Math.floor(Math.random() * 90000000000000000000), 10) }; -const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc id', 'National doc issue date', 'National doc expiry date']; +const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date']; const Profile = observer (() => { const [sidebarOpen, setSidebarOpen] = useState(false); @@ -52,18 +52,24 @@ const Profile = observer (() => { ) }; - const closeHint = (element) => { + const selectHint = (element) => { changeAddedValues(element, 'label'); setPropertyValues([]); } + const closeHint = (eventTarget) => { + if (!eventTarget || eventTarget.tabIndex !== -1) { + setPropertyValues([]); + } + }; + const handleSelectedItems = (selectedItems) => { setSelectedItems([...selectedItems]); setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)) .map(elem => ( (!elem.seed) ? { ...elem, - seed: parseInt(Math.floor(Math.random() * 90000000000000000000), 10) + seed: String(Math.floor(Math.random() * 90000000000000000000), 10) }: elem))); if (selectedItems.length > 0) { setButtonPanelOpen(false); @@ -88,7 +94,7 @@ const Profile = observer (() => { const sendAddedData = () => { const checkingAddedData = !userDataStore.decryptedData - some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20); + .some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20); if (checkingAddedData) { setAddPanelOpen(false); setButtonPanelOpen(true); @@ -226,57 +232,55 @@ const Profile = observer (() => {
{/* Add panel */} -
-
-
- - handleInput(e.target.value, 'label')} - value={addedValues.label} - onClick={openHint} - onBlur={() => setPropertyValues([])} - /> -
0) || 'hidden'}`}> -
    - {propertyValues.map((element, index) => ( -
  • closeHint(element)}>{element}
    • - ))} -
-
-
-
- - setPropertyValues([])} - onChange={(e) => changeAddedValues(e.target.value, 'value')} - value={addedValues.value} - /> -
-
- - setPropertyValues([])} - onChange={(e) => changeAddedValues(e.target.value, 'seed')} - value={addedValues.seed} - /> -
+
+
+ + handleInput(e.target.value, 'label')} + value={addedValues.label} + onClick={openHint} + onBlur={(e) => closeHint(e.relatedTarget)} + /> +
0) || 'hidden'}`}> +
    + {propertyValues.map((element, index) => ( +
  • selectHint(element)}>{element}
    • + ))} +
+
-
+
+ + setPropertyValues([])} + onChange={(e) => changeAddedValues(e.target.value, 'value')} + value={addedValues.value} + /> +
+
+ + setPropertyValues([])} + onChange={(e) => changeAddedValues(e.target.value, 'seed')} + value={addedValues.seed} + /> +
+
Store data on blockchain
@@ -288,7 +292,7 @@ const Profile = observer (() => {
{/* Buttons */} -
+