From b4516ef18e0c1e137818a93e3141e7d023ece7d1 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 22 Jun 2022 19:36:58 +0300
Subject: [PATCH 1/4] made a popup hint

---
 src/pages/digitalId/ProfileId.jsx | 66 +++++++++++++++++++++++++++++--
 1 file changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 99faca9..439a692 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -16,6 +16,33 @@ function Profile () {
   const [toggle, setToggle] = useState(true);
   const [addPanelOpen, setAddPanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
+  const [hintOpen, setHintOpen] = useState(false);
+  
+  const defaultValues = {
+    property: '',
+    value: '',
+    seed: '',
+    blockchained: true,
+  };
+  const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date']; 
+  const [propertyValues, setPropertyValues] = useState(initialPropertyValues);
+  const [currentValues, setCurrentValues] = useState(defaultValues); 
+
+  const openHint = () => {
+    setHintOpen(true);
+  }
+
+  const changeCurrentValues = (text, field) => {
+    setCurrentValues((prevState)=> ({
+      ...prevState,
+      [field]: text,
+    }));
+  }
+
+  const closeHint = (text) => {
+    currentValues.property = text;
+    setHintOpen(false);
+  }
 
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
@@ -54,6 +81,12 @@ function Profile () {
     setButtonPanelOpen(true);
   }
 
+  const handleInput = (text) => {
+    setPropertyValues(initialPropertyValues);
+    let reg = new RegExp(`^${text}`, 'img');
+    setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
+  };
+
   const userData = [
     {
       id: '0',
@@ -246,15 +279,42 @@ function Profile () {
                     <div className="flex flex-col gap-y-3">
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
-                        <input id="property" className="form-input w-full" type="text" required />
+                        <input
+                          id="property"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onClick={openHint}
+                          onInput={(e) => handleInput(e.target.value)}
+                          onChange={(e) => changeCurrentValues(e.target.value, 'property')}
+                        />
+                        <div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${hintOpen || 'hidden'}`}>
+                          <ul>
+                            {propertyValues.map((element, index) => (
+                              <li key={index} onClick={() => closeHint(element)}>{element}</li>
+                            ))}
+                          </ul>
+                        </div>
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
-                        <input id="value" className="form-input w-full" type="text" required />
+                        <input
+                          id="value"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onChange={(event) => changeCurrentValues(event.target.value, 'property')}
+                        />
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
-                        <input id="seed" className="form-input w-full" type="text" required />
+                        <input
+                          id="seed"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onChange={(event) => changeCurrentValues(event.target.value, 'property')}
+                        />
                       </div>
                     </div>
                     <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">

From 95cc2ac1e046e6e828836c1e8f549374200adf3f Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 23 Jun 2022 15:21:08 +0300
Subject: [PATCH 2/4] fix property field, added default value of seed

---
 src/pages/digitalId/ProfileId.jsx | 60 +++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 439a692..0124605 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ProfileTable from '../../partials/digitalId/ProfileTable';
@@ -21,26 +21,29 @@ function Profile () {
   const defaultValues = {
     property: '',
     value: '',
-    seed: '',
-    blockchained: true,
+    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(initialPropertyValues);
   const [currentValues, setCurrentValues] = useState(defaultValues); 
 
   const openHint = () => {
-    setHintOpen(true);
+    if (!currentValues.property) {
+      setPropertyValues(initialPropertyValues);
+      setHintOpen(true);
+    }
   }
 
-  const changeCurrentValues = (text, field) => {
+  const changeCurrentValues = (value, field) => {
     setCurrentValues((prevState)=> ({
       ...prevState,
-      [field]: text,
-    }));
+      [field]: value.charAt(0).toUpperCase()+value.slice(1),
+    }))
   }
 
-  const closeHint = (text) => {
-    currentValues.property = text;
+  const closeHint = (element) => {
+    changeCurrentValues(element, 'property');
     setHintOpen(false);
   }
 
@@ -66,7 +69,17 @@ function Profile () {
     setButtonPanelOpen(false);
   }
 
+  const sendValues = () => {
+    if (!userData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
+      setAddPanelOpen(false);
+      setButtonPanelOpen(true);
+      setCurrentValues(defaultValues);
+      setHintOpen(false);
+    }
+  }
+
   const cancelAddPanel = () => {
+    setCurrentValues(defaultValues);
     setAddPanelOpen(false);
     setButtonPanelOpen(true);
   }
@@ -81,10 +94,17 @@ function Profile () {
     setButtonPanelOpen(true);
   }
 
-  const handleInput = (text) => {
+  const handleInput = (text, field) => {
+    changeCurrentValues(text, field);
     setPropertyValues(initialPropertyValues);
-    let reg = new RegExp(`^${text}`, 'img');
-    setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
+    setHintOpen(true);
+    if (text) {
+      let reg = new RegExp(`^${text}`, 'img');
+      setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
+      if (propertyValues.length === 0) {
+        setHintOpen(false);
+      }
+    }
   };
 
   const userData = [
@@ -285,8 +305,8 @@ function Profile () {
                           type="text"
                           required
                           onClick={openHint}
-                          onInput={(e) => handleInput(e.target.value)}
-                          onChange={(e) => changeCurrentValues(e.target.value, 'property')}
+                          onInput={(e) => handleInput(e.target.value, 'property')}
+                          value={currentValues.property}
                         />
                         <div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${hintOpen || 'hidden'}`}>
                           <ul>
@@ -303,7 +323,9 @@ function Profile () {
                           className="form-input w-full"
                           type="text"
                           required
-                          onChange={(event) => changeCurrentValues(event.target.value, 'property')}
+                          onClick={() => setHintOpen(false)}
+                          onChange={(e) => changeCurrentValues(e.target.value, 'value')}
+                          value={currentValues.value}
                         />
                       </div>
                       <div>
@@ -313,7 +335,9 @@ function Profile () {
                           className="form-input w-full"
                           type="text"
                           required
-                          onChange={(event) => changeCurrentValues(event.target.value, 'property')}
+                          onClick={() => setHintOpen(false)}
+                          onChange={(e) => changeCurrentValues(e.target.value, 'seed')}
+                          value={currentValues.seed}
                         />
                       </div>
                     </div>
@@ -321,7 +345,7 @@ function Profile () {
                       <span className="block text-sm font-medium">Store data on blockchain</span>
                       <div className="flex items-center">
                         <div className="form-switch">
-                          <input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
+                          <input type="checkbox" id="blockcheined" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
                             <label className="bg-slate-400" htmlFor="switch-1">
                             <span className="bg-white shadow-sm" aria-hidden="true"></span>
                           </label>
@@ -338,7 +362,7 @@ function Profile () {
                       </button>
                       <button
                         className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
-                        onClick={cancelAddPanel}
+                        onClick={sendValues}
                       >
                         Send
                       </button>

From fe1105e9d669b18d48c9b21bbfc59b015f0a853c Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 23 Jun 2022 15:28:29 +0300
Subject: [PATCH 3/4] delete useEffect

---
 src/pages/digitalId/ProfileId.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 0124605..c188872 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState} from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ProfileTable from '../../partials/digitalId/ProfileTable';

From 54ccd3ed9f187dba6d4201ca18971fe2fe129555 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 23 Jun 2022 18:52:19 +0300
Subject: [PATCH 4/4] fix popup hint

---
 src/pages/digitalId/ProfileId.jsx | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index c188872..04cc9ce 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -1,4 +1,4 @@
-import React, { useState} from 'react';
+import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ProfileTable from '../../partials/digitalId/ProfileTable';
@@ -16,7 +16,6 @@ function Profile () {
   const [toggle, setToggle] = useState(true);
   const [addPanelOpen, setAddPanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
-  const [hintOpen, setHintOpen] = useState(false);
   
   const defaultValues = {
     property: '',
@@ -25,13 +24,12 @@ function Profile () {
   };
 
   const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'Residence', 'Document type', 'Document ID', 'Issue date', 'Expiry date']; 
-  const [propertyValues, setPropertyValues] = useState(initialPropertyValues);
-  const [currentValues, setCurrentValues] = useState(defaultValues); 
+  const [propertyValues, setPropertyValues] = useState([]);
+  const [currentValues, setCurrentValues] = useState(defaultValues);
 
   const openHint = () => {
     if (!currentValues.property) {
       setPropertyValues(initialPropertyValues);
-      setHintOpen(true);
     }
   }
 
@@ -44,7 +42,7 @@ function Profile () {
 
   const closeHint = (element) => {
     changeCurrentValues(element, 'property');
-    setHintOpen(false);
+    setPropertyValues([]);
   }
 
   const handleSelectedItems = (selectedItems) => {
@@ -74,7 +72,6 @@ function Profile () {
       setAddPanelOpen(false);
       setButtonPanelOpen(true);
       setCurrentValues(defaultValues);
-      setHintOpen(false);
     }
   }
 
@@ -97,13 +94,9 @@ function Profile () {
   const handleInput = (text, field) => {
     changeCurrentValues(text, field);
     setPropertyValues(initialPropertyValues);
-    setHintOpen(true);
     if (text) {
       let reg = new RegExp(`^${text}`, 'img');
       setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
-      if (propertyValues.length === 0) {
-        setHintOpen(false);
-      }
     }
   };
 
@@ -300,15 +293,16 @@ function Profile () {
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
                         <input
+                          autoComplete='off'
                           id="property"
                           className="form-input w-full"
                           type="text"
                           required
-                          onClick={openHint}
                           onInput={(e) => handleInput(e.target.value, 'property')}
                           value={currentValues.property}
+                          onClick={openHint}
                         />
-                        <div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${hintOpen || 'hidden'}`}>
+                        <div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
                           <ul>
                             {propertyValues.map((element, index) => (
                               <li key={index} onClick={() => closeHint(element)}>{element}</li>
@@ -319,11 +313,12 @@ function Profile () {
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
                         <input
+                          autoComplete='off'
                           id="value"
                           className="form-input w-full"
                           type="text"
                           required
-                          onClick={() => setHintOpen(false)}
+                          onClick={() => setPropertyValues([])}
                           onChange={(e) => changeCurrentValues(e.target.value, 'value')}
                           value={currentValues.value}
                         />
@@ -331,11 +326,12 @@ function Profile () {
                       <div>
                         <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
                         <input
+                          autoComplete='off'
                           id="seed"
                           className="form-input w-full"
                           type="text"
                           required
-                          onClick={() => setHintOpen(false)}
+                          onClick={() => setPropertyValues([])}
                           onChange={(e) => changeCurrentValues(e.target.value, 'seed')}
                           value={currentValues.seed}
                         />