done store for shared data

src/pages/digitalId/Verify.jsx

@@ -1,11 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } 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);
 
+ /*useEffect(() => {
+    sharedDataStore.fetchSharedData();
+  }, []);*/
+
   const verifiedData = [
     {
       "date": "31.05.2022 10:48",
@@ -160,6 +166,11 @@ const Verify = (() => {
                 </div> 
               ))}
             </div>
+            {sharedDataStore.decryptedData.map((elem, index) => (
+              <div key={index}>
+                {elem}
+              </div>
+            ))}
           </div>
         </main>
       </div>

src/store/sharedDataStore.js

@@ -0,0 +1,76 @@
+import { cryptography } from "@liskhq/lisk-client";
+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.map((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,
+    });
+    console.log(this._sharedData);
+  }
+
+  get sharedData() {
+    return this._sharedData;
+  }
+
+  get decryptedData() {
+    return this._sharedData.map((elem) =>
+      elem.data.map((item) => ({
+        key: item.label,
+        label: labelMap[item.label],
+        value: cryptography.decryptMessageWithPassphrase(item.value, item.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
+      })
+    ))  
+  }
+}
+
+export const sharedDataStore = new SharedDataStore();
+console.log(sharedDataStore.sharedData);

src/store/store.js

@@ -12,14 +12,21 @@ class Store {
 
   _userData = {}
 
+  _keysArray = []
+
   constructor() {
     makeAutoObservable(this);
 
     this.fetchNodeInfo()
 
-    reaction(() => this.tokenKey, () => this.fetchNewAccountData())
+    reaction(() => this.tokenKey, () => this.fetchData())
   };
 
+  fetchData() {
+    this.fetchNewAccountData();
+    this.fetchLinksArray();
+  }
+
   fetchNewAccountData() {
     fetchWrapper.getAuth('http://3.125.47.101/api/data/private', {
       networkIdentifier: this.nodeInfo.networkIdentifier,
@@ -35,12 +42,27 @@ class Store {
         .then(()=>this.fetchNewAccountData())
   }
 
+  fetchLinksArray() {
+    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))
+  }
+
   userDataFetchChange(res) {
     this._userData = res;
   }
 
+  keysArrayFetchChange(res) {
+    this._keysArray = res.data;
+  }
+
+  get keysArray() {
+    return this._keysArray;
+  }
+
   get userData() {
-    return this._userData
+    return this._userData;
   }
 
   savePassPhrase(phrase) {