From 5f1e8c55ff0bc3264f10a495e2c62f6bab779dcf Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 26 May 2022 12:29:12 +0300
Subject: [PATCH] fix validate prop

---
 src/pages/digitalId/ProfileId.jsx           |  10 +-
 src/partials/digitalId/ProfileTableItem.jsx | 104 ++++++++------------
 2 files changed, 46 insertions(+), 68 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 5a06620..75103fe 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -4,6 +4,9 @@ import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ProfileTableItem from '../../partials/digitalId/ProfileTableItem';
 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';
 
 function Profile () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -14,8 +17,8 @@ function Profile () {
       value: 'Passport',
       property: 'Document type',
       status: 'Progress',
-      transactions: '0x7234ABC342342352345',
-      validatedData: '7234ABC342342352345'
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
     };
 
   return (
@@ -47,13 +50,12 @@ function Profile () {
                     property={data.property}
                     status={data.status}
                     transactions={data.transactions}
-                    validatedData={data.validatedData}
+                    avatars={data.avatars}
                   />
                 </tbody>
               </table>
           </div>
         </main>
-
       </div>
     </div>
   )
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx
index d00669d..5a17432 100644
--- a/src/partials/digitalId/ProfileTableItem.jsx
+++ b/src/partials/digitalId/ProfileTableItem.jsx
@@ -1,7 +1,4 @@
 import React, { useState } from 'react';
-import Avatar01 from '../../images/avatar-01.jpg';
-import Avatar02 from '../../images/avatar-02.jpg';
-import Avatar03 from '../../images/avatar-03.jpg';
 
 function ProfileTableItem(props) {
   const [descriptionOpen, setDescriptionOpen] = useState(false);
@@ -9,7 +6,7 @@ function ProfileTableItem(props) {
   return (
     <>
       <tr className="bg-[#eaf0f6]">
-        <td className="pl-2 pr-4 py-3 whitespace-nowrap w-px">
+        <td className="pl-4 pr-4 py-3 whitespace-nowrap w-px">
           <div className="flex items-center">
             <label className="inline-flex">
               <span className="sr-only">Select</span>
@@ -28,7 +25,7 @@ function ProfileTableItem(props) {
             </div>
           </div>
         </td>
-        <td className="px-2 py-3 whitespace-nowrap w-px">
+        <td className="py-3 whitespace-nowrap w-px">
           <div className="w-fit text-xs inline-flex font-medium px-2.5 py-1">
             {(props.status === 'Progress') ? (
                 <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
@@ -51,9 +48,11 @@ function ProfileTableItem(props) {
         <td className="px-2 py-3 whitespace-nowrap w-[340px] box-border">
           <div className="flex flex-wrap items-center -m-1.5 justify-center">
             <div className="flex -space-x-3 -ml-0.5">
-              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar01} width="32" height="32" alt="Avatar" />
-              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
-              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar03} width="32" height="32" alt="Avatar" />
+              {(props.avatars) ? (
+                props.avatars.map((avatar, index) => (
+                  <img className="rounded-full border-2 border-slate-100 box-content" key={index} src={avatar} width="32" height="32" alt="Avatar" />
+                ))
+              ): null}
               <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
                   <span className="sr-only">Add avatar</span>
                   <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
@@ -64,7 +63,7 @@ function ProfileTableItem(props) {
           </div>
         </td>
         <td className="px-1 py-3 whitespace-nowrap w-px">
-          {/* Menu button */}
+          {/* Button */}
           <div className="flex items-center">
             <button className="text-slate-400 hover:text-slate-500 rounded-full">
               <span className="sr-only">Link</span>
@@ -74,7 +73,7 @@ function ProfileTableItem(props) {
             </button>
           </div>
         </td>
-        <td className="py-3 whitespace-nowrap w-px">
+        <td className="py-3 whitespace-nowrap w-px pr-1.5">
             <div className="flex items-center">
               <button
                 className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
@@ -93,9 +92,9 @@ function ProfileTableItem(props) {
       <tr className={`${!descriptionOpen && 'hidden'} bg-[#eaf0f6]` }>
         <td colSpan="10" className="px-12 py-3.5">
           <div className="flex items-center gap-x-5">
-            <div className='isolate'>
+            <div>
               <label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label>
-              <input id="placeholder" className="form-input w-[396px] bg-white isolate" type="text" placeholder="2342423423423234223" />
+              <input id="placeholder" className="form-input w-[396px] bg-white" type="text" placeholder="2342423423423234223" />
             </div>
             <div>
               <span className="block text-sm font-medium mb-1">Transaction</span>
@@ -111,60 +110,37 @@ function ProfileTableItem(props) {
               <div>
                 <ul className="-my-2">
                   {/* List item */}
-                  <li className="relative py-2">
-                    <div className="flex items-center mb-2.5">
-                      <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
-                      <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
-                        <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
-                          <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
-                        </svg>
+                  {props.transactions.map((data, index) => (
+                    <li className="relative py-2" key={index}>
+                      <div className="flex items-center mb-2.5">
+                        {(props.transactions[index+1]) ? (
+                          <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
+                        ) : null}
+                        <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+                          <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+                            <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
+                          </svg>
+                        </div>
+                        <h3 className="pl-9 whitespace-nowrap">
+                          <span className="text-validateLg font-bold text-slate-800">Validate by </span>
+                          <a href="" className="font-bold text-validateLg underline text-indigo-500">{data}</a>
+                        </h3>
                       </div>
-                      <h3 className="pl-9 whitespace-nowrap">
-                        <span className="text-validateLg font-bold text-slate-800">Validate by </span>
-                        <a href="" className="font-bold text-validateLg underline text-indigo-500">{props.transactions}</a>
-                      </h3>
-                    </div>
-                    <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.transactions}</a>
-                      <span className="block text-xxs font-normal mb-1">Transactions ID</span>
-                    </div>
-                    <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.validatedData}</a>
-                      <span className="block text-xxs font-normal mb-1">Validated data</span>
-                    </div>
-                    <div className="pl-9 pt-[14px]">
-                      <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
-                        Explore -&gt;
-                      </a>
-                    </div>
-                  </li>     
-                  {/* List item */}
-                  <li className="relative py-2">
-                    <div className="flex items-center mb-2.5">
-                      <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
-                        <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
-                          <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
-                        </svg>
+                      <div className="pl-9">
+                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data}</a>
+                        <span className="block text-xxs font-normal mb-1">Transactions ID</span>
                       </div>
-                      <h3 className="pl-9 whitespace-nowrap">
-                        <span className="text-validateLg font-bold text-slate-800">Validate by </span>
-                        <a href="" className="font-bold text-validateLg underline text-indigo-500">{props.transactions}</a>
-                      </h3>
-                    </div>
-                    <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.transactions}</a>
-                      <span className="block text-xxs font-normal mb-1">Transactions ID</span>
-                    </div>
-                    <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.validatedData}</a>
-                      <span className="block text-xxs font-normal mb-1">Validated data</span>
-                    </div>
-                    <div className="pl-9 pt-[14px]">
-                      <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
-                        Explore -&gt;
-                      </a>
-                    </div>
-                  </li>
+                      <div className="pl-9">
+                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data.slice(2, data.length)}</a>
+                        <span className="block text-xxs font-normal mb-1">Validated data</span>
+                      </div>
+                      <div className="pl-9 pt-[14px]">
+                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                          Explore -&gt;
+                        </a>
+                      </div>
+                    </li>     
+                  ))}
                 </ul>
               </div>
             </div>