fix popup hint

Создание fetch wrapper

.gitignore

@@ -1,2 +1,3 @@
 # dependencies
-/node_modules
+/node_modules
+.idea

src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {Buffer} from "buffer";
-import { BrowserRouter as Router } from 'react-router-dom'
+import { HashRouter as Router } from 'react-router-dom'
 import App from './App'
 
 globalThis.Buffer = Buffer

src/pages/digitalId/ProfileId.jsx

@@ -16,6 +16,34 @@ function Profile () {
   const [toggle, setToggle] = useState(true);
   const [addPanelOpen, setAddPanelOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
+  
+  const defaultValues = {
+    property: '',
+    value: '',
+    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 [currentValues, setCurrentValues] = useState(defaultValues);
+
+  const openHint = () => {
+    if (!currentValues.property) {
+      setPropertyValues(initialPropertyValues);
+    }
+  }
+
+  const changeCurrentValues = (value, field) => {
+    setCurrentValues((prevState)=> ({
+      ...prevState,
+      [field]: value.charAt(0).toUpperCase()+value.slice(1),
+    }))
+  }
+
+  const closeHint = (element) => {
+    changeCurrentValues(element, 'property');
+    setPropertyValues([]);
+  }
 
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
@@ -39,7 +67,16 @@ 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);
+    }
+  }
+
   const cancelAddPanel = () => {
+    setCurrentValues(defaultValues);
     setAddPanelOpen(false);
     setButtonPanelOpen(true);
   }
@@ -54,6 +91,15 @@ function Profile () {
     setButtonPanelOpen(true);
   }
 
+  const handleInput = (text, field) => {
+    changeCurrentValues(text, field);
+    setPropertyValues(initialPropertyValues);
+    if (text) {
+      let reg = new RegExp(`^${text}`, 'img');
+      setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
+    }
+  };
+
   const userData = [
     {
       id: '0',
@@ -246,22 +292,56 @@ 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
+                          autoComplete='off'
+                          id="property"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          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 ${(propertyValues.length > 0) || '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
+                          autoComplete='off'
+                          id="value"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onClick={() => setPropertyValues([])}
+                          onChange={(e) => changeCurrentValues(e.target.value, 'value')}
+                          value={currentValues.value}
+                        />
                       </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
+                          autoComplete='off'
+                          id="seed"
+                          className="form-input w-full"
+                          type="text"
+                          required
+                          onClick={() => setPropertyValues([])}
+                          onChange={(e) => changeCurrentValues(e.target.value, 'seed')}
+                          value={currentValues.seed}
+                        />
                       </div>
                     </div>
                     <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
                       <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>
@@ -278,7 +358,7 @@ function Profile () {
                       </button>
                       <button
                         className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
-                        onClick={cancelAddPanel}
+                        onClick={sendValues}
                       >
                         Send
                       </button>

src/shared/fetchWrapper.js

@@ -1,12 +1,14 @@
+import {registrationStore} from '../store/store';
+
 function prepareUrl(url) {
   if (url.startsWith('http')) return url;
-  return `/api/${url}`;
+  return `http://3.125.47.101/api/${url}`;
 }
 
-function handleRequest(method, url, attempts, token, body) {
+function handleRequest(method, url, headers, attempts, token, body) {
   return new Promise((resolve, reject) => {
     (function internalRequest() {
-      return request(method, url, token, body)
+      return request(method, url, headers, token, body)
         .then(resolve)
         .catch(err => --attempts > 0 ? internalRequest() : reject(err))
     })()
@@ -17,17 +19,21 @@ function handleRequest(method, url, attempts, token, body) {
 
 /**
  * Request
+ * @param {string} method - method name
  * @param {string} url - endpoint url.
+ * @param {string} token - auth token
  * @param {object} body - request body.
+ * @param {object} headers - request headers
  */
-function request(method, url, token, body) {
+function request(method, url, headers = {}, token, body) {
   let controller = new AbortController;
   let requestOptions = {};
   if (method === 'GET' || method === 'DELETE'){
     requestOptions = {
       method: method,
       headers: {
-        Authorization: `Token ${token}`,
+        authorization: `IDNTTY ${token}`,
+        ...headers
       },
       signal: controller.signal,
     }
@@ -36,9 +42,10 @@ function request(method, url, token, body) {
     requestOptions = {
       method: method,
       headers: {
-        Authorization: `Token ${token}`,
+        authorization: `IDNTTY ${token}`,
         Accept: 'application/json',
         'Content-Type': 'application/json',
+        ...headers
       },
       body: JSON.stringify(body),
       signal: controller.signal,
@@ -48,39 +55,39 @@ function request(method, url, token, body) {
     requestOptions.headers.Authorization = null;
   }
   setTimeout(() => controller.abort(), 3000);
-  return fetch(url, requestOptions);
+  return fetch(prepareUrl(url), requestOptions);
 };
 
-function get(url, attempts = 1) {
-  return handleRequest('GET', url, attempts, null);
+function get(url, headers, attempts = 1) {
+  return handleRequest('GET', url, headers, attempts, null);
 }
 
-function getAuth(url, attempts = 1) {
-  return handleRequest('GET', url, attempts, registrationStore.tokenKey);
+function getAuth(url, headers, attempts = 1) {
+  return handleRequest('GET', url, headers, attempts, registrationStore.tokenKey);
 }
 
-function del(url, attempts = 1) {
-  return handleRequest('DELETE', url, attempts, null);
+function del(url, headers, attempts = 1) {
+  return handleRequest('DELETE', url, headers, attempts, null);
 }
 
-function delAuth(url, attempts = 1) {
-  return handleRequest('DELETE', url, attempts, registrationStore.tokenKey);
+function delAuth(url, headers, attempts = 1) {
+  return handleRequest('DELETE', url, headers, attempts, registrationStore.tokenKey);
 }
 
-function post(url, body, attempts = 1) {
-  return handleRequest('POST', url, attempts, null, body);
+function post(url, headers, body, attempts = 1) {
+  return handleRequest('POST', url, headers, attempts, null, body);
 }
 
-function postAuth(url, body, attempts = 1) {
-  return handleRequest('POST', url, attempts, registrationStore.tokenKey, body);
+function postAuth(url, headers, body, attempts = 1) {
+  return handleRequest('POST', url, headers, attempts, registrationStore.tokenKey, body);
 }
 
-function put(url, body, attempts = 1) {
-  return handleRequest('PUT', url, attempts, null, body);
+function put(url, headers, body, attempts = 1) {
+  return handleRequest('PUT', url, headers, attempts, null, body);
 }
 
-function putAuth(url, body, attempts = 1) {
-  return handleRequest('PUT', url, attempts, registrationStore.tokenKey, body);
+function putAuth(url, headers, body, attempts = 1) {
+  return handleRequest('PUT', url, headers, attempts, registrationStore.tokenKey, body);
 }
 
 export const fetchWrapper = {