Merge pull request #36 from franze6/DID-8

Интеграция страницы ValidationLog с сервером
2022-07-15 11:52:25 +03:00
parent f58a94bf24 9820692cd9
commit 67133c5414
7 changed files with 100 additions and 230 deletions
--- a/src/pages/digitalId/Validate.jsx
+++ b/src/pages/digitalId/Validate.jsx
@@ -1,70 +1,18 @@
 import React, { useState } from 'react';
+import {observer} from "mobx-react-lite";

+import {transactionsStore} from "../../store/transactionsStore";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ValidateTable from "../../partials/validate/ValidateTable";
 import ValidatePanel from "../../partials/validate/ValidatePanel";
 import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
 import {Link} from "react-router-dom";
-import User06 from "../../images/user-28-06.jpg";
-import User08 from "../../images/user-28-08.jpg";
-import User09 from "../../images/user-28-09.jpg";
-import User05 from "../../images/user-28-05.jpg";

-function Validate () {
+const Validate = observer(()=>{
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [validatePanelOpen, setValidatePanelOpen] = useState(true);

-  const validateItems = [
-    {
-      id: '40',
-      name: 'Today',
-      data: '7234ABC342342352345',
-      usersImges: [
-        {
-          size: 24,
-          img: User06,
-          imgId: "343"
-        },
-        {
-          size: 24,
-          img: User08,
-          imgId: "345"
-        },
-        {
-          size: 24,
-          img: User09,
-          imgId: "321"
-        },
-        {
-          size: 24,
-          img: User05,
-          imgId: "387"
-        },
-      ],
-      items: [
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '555',
-          text: 'Second name for',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '534',
-          text: 'Gender name for',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '567',
-          text: 'Document ID name for',
-          checked: true
-        },
-      ]
-    },
-  ];
-
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
@@ -110,7 +58,7 @@ function Validate () {
              <div className="pb-8 border-b border-zinc-200 mt-[50px]">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
              </div>
-              {validateItems.map(item => {
+              {transactionsStore.transactionsData.map(item => {
                return <ValidateRoadMap season={item} key={item.id}/>
              })}
            </div>
@@ -120,6 +68,6 @@ function Validate () {
      </div>
    </div>
  )
-}
+})

 export default Validate;
--- a/src/pages/digitalId/ValidationLog.jsx
+++ b/src/pages/digitalId/ValidationLog.jsx
@@ -1,115 +1,14 @@
 import React, {useState} from 'react';

 import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
+import {transactionsStore} from "../../store/transactionsStore";
+import {observer} from "mobx-react-lite";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import User05 from "../../images/user-28-05.jpg";
-import User08 from "../../images/user-28-08.jpg";
-import User09 from "../../images/user-28-09.jpg";
-import User06 from "../../images/user-28-06.jpg";
-import User03 from "../../images/user-28-03.jpg";
-import User01 from "../../images/user-28-01.jpg";

-function ValidationLog () {
+const ValidationLog = observer(()=>{
  const [sidebarOpen, setSidebarOpen] = useState(false);

-  const logItems = [
-    {
-      id: '20',
-      name: 'Today',
-      data: '7234ABC342342352345',
-      usersImges: [
-        {
-          size: 24,
-          img: User06,
-          imgId: "249"
-        },
-        {
-          size: 24,
-          img: User08,
-          imgId: "212"
-        },
-        {
-          size: 24,
-          img: User09,
-          imgId: "217"
-        },
-        {
-          size: 24,
-          img: User05,
-          imgId: "276"
-        },
-      ],
-      items: [
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '434',
-          text: 'Second name',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '476',
-          text: 'First name by',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '422',
-          text: 'Document name by',
-          checked: true
-        },
-      ]
-    },
-    {
-      id: '30',
-      name: 'Last Week',
-      data: '7234ABC342342352345',
-      usersImges: [
-        {
-          size: 24,
-          img: User06,
-          imgId: "145"
-        },
-        {
-          size: 24,
-          img: User08,
-          imgId: "182"
-        },
-        {
-          size: 24,
-          img: User09,
-          imgId: "154"
-        },
-        {
-          size: 24,
-          img: User05,
-          imgId: "114"
-        },
-      ],
-      items: [
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '654',
-          text: 'Gender name by',
-          checked: true
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '617',
-          text: 'Second name Updated',
-          checked: false
-        },
-        {
-          dataSeason: '7234ABC342342352345',
-          id: '643',
-          text: 'Gender name by',
-          checked: true
-        },
-      ]
-    },
-  ]
-
  return (
      <div className="flex h-screen overflow-hidden">
        {/* Sidebar */}
@@ -129,61 +28,9 @@ function ValidationLog () {
              <div className="max-w-3xl m-auto mt-6">
                <div className="xl:-translate-x-16 max-w-fit">
                  {/* PostsID */}
-                  {logItems.map(item => {
+                  {transactionsStore.transactionsData.map(item=>{
                    return <ValidateRoadMap season={item} key={item.id}/>
                  })}
-                  {/* Post */}
-                  <article className="pt-3">
-                    <div className="xl:flex">
-                      <div className="w-32 shrink-0">
-                        <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Even earlier</h2>
-                      </div>
-                      <div className="grow pb-6 border-b border-slate-200">
-                        <header>
-                          <div className="flex flex-nowrap items-center space-x-2 mb-6">
-                            {/* Avatars */}
-                            <div className="flex shrink-0 -space-x-3 -ml-px">
-                              <a className="block" href="#0">
-                                <img className="rounded-full border-2 border-white box-content" src={User03} width="28" height="28" alt="User 03" />
-                              </a>
-                              <a className="block" href="#0">
-                                <img className="rounded-full border-2 border-white box-content" src={User01} width="28" height="28" alt="User 01" />
-                              </a>
-                            </div>
-                            <div className="text-slate-400">·</div>
-                          </div>
-                        </header>
-                        {/* List */}
-                        <ul className="-my-2">
-                          {/* List item */}
-                          <li className="relative py-2">
-                            <div className="flex items-center mb-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>
-                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
-                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
-                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
-                                </svg>
-                              </div>
-                              <h3 className="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
-                            </div>
-                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
-                          </li>
-                          {/* List item */}
-                          <li className="relative py-2">
-                            <div className="flex items-center mb-1">
-                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
-                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
-                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
-                                </svg>
-                              </div>
-                              <h3 className="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
-                            </div>
-                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </article>
                </div>
              </div>
            </div>
@@ -191,6 +38,6 @@ function ValidationLog () {
        </div>
      </div>
  )
-}
+})

 export default ValidationLog;
--- a/src/partials/validationlog/ValidateRoadMap.jsx
+++ b/src/partials/validationlog/ValidateRoadMap.jsx
@@ -9,15 +9,15 @@ function ValidateRoadMap({ season }) {
      <article className="pt-3">
        <div className="xl:flex">
          <div className="w-32 shrink-0">
-            <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{season.name}</h2>
+            <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{''}</h2>
          </div>
-          <div className="grow pb-6 border-b border-slate-200">
+          <div className="grow pb-6">
            <header>
              <div className="flex flex-nowrap items-center space-x-2 mb-6">
                {/* Avatars */}
                <div className="flex shrink-0 -space-x-3 -ml-px">
-                  {season.usersImges.map(pic => {
-                    return <ValidationUsersImg key={pic.imgId} image={pic}/>
+                  {season.users_images.map(pic => {
+                    return <ValidationUsersImg image={pic} key={pic.image}/>
                  })}
                </div>
                <div className="text-slate-400">·</div>
@@ -26,8 +26,8 @@ function ValidateRoadMap({ season }) {
            {/* List */}
            <ul className="-my-2">
              {/* List item(s) */}
-              {season.items.map((item, index) => {
-                return <ValidationSeasonItem key={item.id} length={season.items.length} item={item} index={index}/>
+              {season.transaction.map((item, index) => {
+                return <ValidationSeasonItem key={item.label} length={season.transaction.length} item={item} index={index}/>
              })}
            </ul>
          </div>
--- a/src/partials/validationlog/ValidationSeasonItem.jsx
+++ b/src/partials/validationlog/ValidationSeasonItem.jsx
@@ -5,21 +5,21 @@ function ValidationSeasonItem({ length, item, index }) {
      <li className="relative pt-2 pb-2.5">
        <div className="flex items-center mb-2.5">
          {length-1!==index && <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 ${item.checked ? "bg-indigo-500" : "bg-[#FF0000]"}`} aria-hidden="true">
+          <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">
-              {item.checked && <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>}
+              <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z"/>
            </svg>
          </div>
          <h3 className="text-lg font-bold text-slate-800 pl-9">
-            {item.text} {item.checked && <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{`0x${item.dataSeason}`}</a>}
+            {`${item.label} by`} <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{item.address}</a>
          </h3>
        </div>
        <div className="block text-slate-800 w-fit pl-9">
-          <div className="text-base font-semibold underline mb-[-10px]">{`0x${item.dataSeason}`}</div>
+          <div className="text-base font-semibold underline mb-[-10px]">{item.transaction_id}</div>
          <span className="font-normal text-slate-600 text-[10px]">Transactions ID</span>
        </div>
        <div className="mb-3.5 block text-slate-800 w-fit pl-9">
-          <div className="text-base font-semibold underline mb-[-10px]">{item.dataSeason}</div>
+          <div className="text-base font-semibold underline mb-[-10px]">{item.value}</div>
          <span className="font-normal text-slate-600 text-[10px]">Validated data</span>
        </div>
        <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
--- a/src/partials/validationlog/ValidationUsersImg.jsx
+++ b/src/partials/validationlog/ValidationUsersImg.jsx
@@ -1,9 +1,10 @@
 import React from "react";

 function ValidationUsersImg({ image }) {
+
  return (
-      <a className="block" href="#0">
-        <img className="rounded-full border-2 border-slate-100 box-content" src={image.img} width={`${image.size}`} alt={image.img} height={`${image.size}`}/>
+      <a className="block">
+        <img className="rounded-full border-2 border-slate-100 box-content" src={image.image} width={`${image.size}`} alt={image.image} height={`${image.size}`}/>
      </a>
  );
 }
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -12,12 +12,15 @@ class Store {

  _userData = {}

+  _transactionsInfo = {}
+
  constructor() {
    makeAutoObservable(this);

    this.fetchNodeInfo()

    reaction(() => this.tokenKey, () => this.fetchNewAccountData())
+    reaction(() => this.tokenKey, () => this.fetchTransactionsInfo())
  };

  fetchNewAccountData() {
@@ -35,6 +38,18 @@ class Store {
        .then(()=>this.fetchNewAccountData())
  }

+  fetchTransactionsInfo() {
+    fetchWrapper.getAuth(`http://3.125.47.101/api/account/transactions/${this.accountMadeTransaction}?moduleID=1001&assetID=11`, {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    })
+        .then((res)=>this.saveInfoTransactions(res))
+  }
+
+  get accountMadeTransaction() {
+    return "b444b7ff3118cf2a30cbd54cfcdb8fd5d805017a"
+  }
+
  userDataFetchChange(res) {
    this._userData = res;
  }
@@ -43,6 +58,10 @@ class Store {
    return this._userData
  }

+  get transactionsInfo() {
+    return this._transactionsInfo
+  }
+
  savePassPhrase(phrase) {
    this._passPhrase = phrase
  }
@@ -51,6 +70,10 @@ class Store {
    this._accountData = data;
  };

+  saveInfoTransactions(transaction) {
+    this._transactionsInfo = transaction
+  }
+
  fetchNodeInfo() {
    getNodeInfo()
      .then((info) => this.fetchNodeInfoSuccess(info))
--- a/src/store/transactionsStore.js
+++ b/src/store/transactionsStore.js
@@ -0,0 +1,51 @@
+import {makeAutoObservable, reaction} from "mobx";
+import {registrationStore} from "./store";
+import User05 from "../../src/images/user-28-05.jpg";
+import User08 from "../../src/images/user-28-08.jpg";
+import User09 from "../../src/images/user-28-09.jpg";
+import User06 from "../../src/images/user-28-06.jpg";
+
+const labelMap = {
+  firstname: 'First name',
+  secondname: 'Second name',
+  gender: "Gender",
+  birthdate: "Birthdate"
+};
+
+const usersImages = [User08,User06,User05,User09];
+
+class TransactionsStore {
+  _transactionsData = [];
+
+  constructor() {
+    makeAutoObservable(this)
+
+    reaction(() => ({data: registrationStore.transactionsInfo}), ({data}) => {
+      this._transactionsData = data.data;
+    })
+  }
+
+  get transactionsData() {
+    return this._transactionsData.map(item=>{
+      return {
+        id: item.id,
+        users_images: usersImages.map(image=>{
+          return {
+            image: image,
+            size: 24
+          }
+        }),
+        transaction: item.asset.features.map(asset=>{
+          return {
+            transaction_id: item.id,
+            address: registrationStore.accountMadeTransaction,
+            value: asset.value,
+            label: labelMap[asset.label],
+          }
+        })
+      }
+    })
+  }
+}
+
+export const transactionsStore = new TransactionsStore()