Merge pull request #37 from franze6/DID-9

Интеграция страницы Verify с сервером

src/pages/digitalId/Verify.jsx

@@ -1,83 +1,13 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
+import { sharedDataStore } from '../../store/sharedDataStore';
+import { observer } from 'mobx-react-lite';
 
-const Verify = (() => {
+const Verify = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [descriptionOpen, setDescriptionOpen] = useState(false);
 
-  const verifiedData = [
-    {
-      "date": "31.05.2022 10:48",
-      "fields": [
-        {
-          "name": "Residence",
-          "value": "United Kindom",
-          "hash1": "7234ABC3423423523457234ABC34234",
-          "hash2": "7234ABC3423423523457234ABC34234"
-        },
-        {
-          "name": "Document ID",
-          "value": "A1321313",
-          "hash1": "7234ABC3423423523457234ABC34234",
-          "hash2": "7234ABC3423423523457234ABC34234"
-        },
-        {
-          "name": 'Document ID',
-          "value": 'A3451313',
-          "hash1": '9584ABC3423423523457234ABC34234',
-          "hash2": '9584ABC3423423523457234ABC34234'
-        }
-      ]
-    },
-    {
-      "date": "31.05.2022 10:48",
-      "fields": [
-        {
-          "name": 'Residence',
-          "value": 'Holland',
-          "hash1": '1024ABC3423423523457234ABC34234',
-          "hash2": '1024ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'B3451313',
-          "hash1": '7893ABC3423423523457234ABC34234',
-          "hash2": '7893ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'A3451313',
-          "hash1": '7286ABC3423423523457234ABC34234',
-          "hash2": '7286ABC3423423523457234ABC34234'
-        },
-      ]
-    },
-    {
-      "date": "31.05.2022 10:48",
-      "fields": [
-        {
-          "name": 'Residence',
-          "value": 'China',
-          "hash1": '0000ABC3423423523457234ABC34234',
-          "hash2": '0000ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'C3451313',
-          "hash1": '1230ABC3423423523457234ABC34234',
-          "hash2": '1230ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'D3451313',
-          "hash1": '4483ABC3423423523457234ABC34234',
-          "hash2": '4483ABC3423423523457234ABC34234'
-        },
-      ]
-    }
-  ];
-
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
@@ -112,13 +42,10 @@ const Verify = (() => {
             </div>
             {/* Block */}
             <div className="flex flex-col gap-y-4">
-              {verifiedData.map((item, index) => (
+              {sharedDataStore.sharedData.map((item, index) => (
                 <div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]">
                   {/* Header */}
-                  <div className="flex justify-between items-center h-[42px]">
+                  <div className="flex justify-end items-center h-[42px]">
-                    <span className="font-normal text-descriptionSize text-slate-500" >
-                      Yesterday at {item.date.slice(-5)} AM
-                    </span>
                     {/* Buttons */}
                     <div className="flex gap-x-[6px]">
                       <div className="flex items-center">
@@ -133,7 +60,6 @@ const Verify = (() => {
                         <button
                           className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
                           aria-expanded={descriptionOpen}
-                            onClick={() => setDescriptionOpen(!descriptionOpen)}
                         >
                           <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                             <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
@@ -144,15 +70,13 @@ const Verify = (() => {
                   </div>
                   {/* Content */}
                   <div className='flex flex-col gap-y-[9px]'>
-                    {item.fields.map((elem, index) => (
+                    {item.data.map((elem, index) => (
                       <div key={index} className='flex gap-y-2'>
                         <div className='flex flex-col'>
                           <div className='flex flex-row items-center'>
-                            <span className='font-semibold text-slate-800 text-base w-[204px]'>{elem.value}</span>
+                            <span className='font-inter font-semibold text-slate-800 text-base w-[204px]'>{elem.label}</span>
-                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash1}</span>
+                            <span className='font-inter truncate font-semibold text-descriptionSize text-slate-600 underline w-[770px]'>{elem.value}</span>
-                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash2}</span>
                           </div>
-                          <span className='font-normal text-xxs'>{elem.name}</span>
                         </div>
                       </div>
                     ))}

src/store/sharedDataStore.js

@@ -0,0 +1,66 @@
+import { makeAutoObservable, reaction } from "mobx";
+import { fetchWrapper } from "../shared/fetchWrapper";
+import { registrationStore } from './store';
+
+const labelMap = {
+  firstname: 'First name',
+  secondname: 'Second name',
+  gender: "Gender",
+  birthdate: "Birthdate",
+  placeofbirth: "Place of birth",
+  nationality: "Nationality",
+  nationalid: "National ID",
+  nationaldoctype: "National doctype",
+  nationaldocid: "National doc ID",
+  nationaldocissuedate: "National doc issue date",
+  nationaldocexpirydate: "National doc expiry date",
+  telephone: "Telephone",
+  twitter: "Twitter",
+  facebook: "Facebook",
+  instagram: "Instagram",
+  youtube: "Youtube",
+  wechat: "Wechat",
+  tiktok: "Tiktok",
+  linkedin: "Linkedin",
+  vk: "Vk",
+  github: "Github",
+  telegram: "Telegram",
+  qq: "Qq",
+  snapchat: "Snapchat",
+  reddit: "Reddit"
+};
+
+class SharedDataStore{
+  _keysArray = [];
+  _sharedData = [];
+
+  constructor() {
+    makeAutoObservable(this);
+
+    reaction(() => ({data: registrationStore.keysArray}), ({data}) => {
+      this._keysArray = data;
+      this.fetchSharedData();
+    })
+  }
+
+  fetchSharedData() {
+    this._keysArray.forEach((elem) => fetchWrapper.get(`http://3.125.47.101/api/data/shared/${elem}`).then((res) => this.changeSharedData(res)))
+  };
+
+  changeSharedData(incomingData) {
+    this._sharedData.push({
+      data: incomingData.data,
+    })
+  }
+
+  get sharedData() {
+    return this._sharedData.map(elem => ({
+      data: elem.data.map(item => ({
+        label: labelMap[item.label],
+        value: item.value,
+      }))
+  }));
+  };
+}
+
+export const sharedDataStore = new SharedDataStore();

src/store/store.js

@@ -12,6 +12,8 @@ class Store {
 
   _userData = {}
 
+  _keysArray = []
+  
   _transactionsInfo = {}
 
   constructor() {
@@ -19,10 +21,16 @@ class Store {
 
     this.fetchNodeInfo()
 
+    reaction(() => this.tokenKey, () => this.getData())
     reaction(() => this.tokenKey, () => this.fetchNewAccountData())
     reaction(() => this.tokenKey, () => this.fetchTransactionsInfo())
   };
 
+  getData() {
+    this.fetchNewAccountData();
+    this.fetchKeysArray();
+  }
+
   fetchNewAccountData() {
     fetchWrapper.getAuth('http://3.125.47.101/api/data/private', {
       networkIdentifier: this.nodeInfo.networkIdentifier,
@@ -38,6 +46,12 @@ class Store {
         .then(()=>this.fetchNewAccountData())
   }
 
+  fetchKeysArray() {
+    fetchWrapper.getAuth('https://ccab53ea-d042-47b3-b9b4-79b913f47b3d.mock.pstmn.io/data/shared', {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    }).then((res) => this.keysArrayFetchChange(res))
+
   fetchTransactionsInfo() {
     fetchWrapper.getAuth(`http://3.125.47.101/api/account/transactions/${this.accountMadeTransaction}?moduleID=1001&assetID=11`, {
       networkIdentifier: this.nodeInfo.networkIdentifier,
@@ -54,8 +68,16 @@ class Store {
     this._userData = res;
   }
 
+  keysArrayFetchChange(res) {
+    this._keysArray = res.data;
+  }
+
+  get keysArray() {
+    return this._keysArray;
+  }
+
   get userData() {
-    return this._userData
+    return this._userData;
   }
 
   get transactionsInfo() {