Refactoring store and association stores into one

src/pages/Onboarding2.jsx

@@ -10,8 +10,8 @@ import Logo from "../images/logo.png";
 const Onboarding2 = observer(()=>{
   const [dataRegistration, setDataRegistration] = useState(
       {
-        first_name: '',
-        second_name: '',
+        firstname: '',
+        secondname: '',
         gender: '',
         birthdate: '',
       }
@@ -95,11 +95,11 @@ const Onboarding2 = observer(()=>{
                   <div className="space-y-4 mb-8">
                     <div>
                       <label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label>
-                      <input id="first_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
+                      <input id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-1" htmlFor="second_name">Last name <span className="text-rose-500">*</span></label>
-                      <input id="second_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
+                      <input id="secondname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>

src/pages/Onboarding4.jsx

@@ -23,7 +23,7 @@ const Onboarding4 = observer(()=>{
     }
   }
 
-  const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item=>item.key==="first_name").value
+  const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item=>item.key==="firstname").value
 
   return (
     <main className="bg-white">

src/pages/digitalId/ProfileId.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { userDataStore } from '../../store/userDataStore';
 import { registrationStore } from "../../store/store";
 import Sidebar from '../../partials/Sidebar';
 import { observer } from 'mobx-react-lite';
@@ -65,7 +64,7 @@ const Profile = observer (() => {
 
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
-    setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))
+    setUpdatedValues(registrationStore.decryptedUserData.filter(({ key }) => selectedItems.includes(key))
       .map(elem => (
         (!elem.seed) ? {
         ...elem,
@@ -93,7 +92,7 @@ const Profile = observer (() => {
   }
 
   const sendAddedData = () => {
-    const checkingAddedData = !userDataStore.decryptedData
+    const checkingAddedData = !registrationStore.decryptedUserData
       .some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
     if (checkingAddedData) {
       setAddPanelOpen(false);
@@ -110,13 +109,13 @@ const Profile = observer (() => {
   }
 
   const deleteDataParameters = () => {
-    const changeData = userDataStore.decryptedData.filter(item=>!selectedItems.includes(item.key))
+    const changeData = registrationStore.decryptedUserData.filter(item=>!selectedItems.includes(item.key))
     registrationStore.pushAccountData(changeData);
   }
 
   const changeInitialArray = () => {
     let newArr = [];
-    userDataStore.decryptedData.map(elem => {
+    registrationStore.decryptedUserData.map(elem => {
       updatedValues.forEach(item => {
         if (elem.label === item.label) {
           newArr.push({
@@ -140,7 +139,7 @@ const Profile = observer (() => {
 
   const addDataParameters = () => {
     addedValues.key = addedValues.label.toLowerCase().split(' ').join('_');
-    registrationStore.pushAccountData(userDataStore.decryptedData.concat(addedValues));
+    registrationStore.pushAccountData(registrationStore.decryptedUserData.concat(addedValues));
   }
 
   const cancelAddPanel = () => {
@@ -212,7 +211,7 @@ const Profile = observer (() => {
                   </ul>
                 </div>
                 {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.decryptedData}/>
+                <ProfileTable selectedItems={handleSelectedItems} userData={registrationStore.decryptedUserData}/>
               </div>
               {/* Left sidebar */}
               <div>
@@ -383,7 +382,7 @@ const Profile = observer (() => {
                   <div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
                     <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2>
                     <div className="flex flex-col">
-                      {userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)).map(item => (
+                      {registrationStore.decryptedUserData.filter(({ key }) => selectedItems.includes(key)).map(item => (
                         <span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
                       ))}
                     </div>

src/pages/digitalId/Validate.jsx

@@ -1,13 +1,13 @@
 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 {registrationStore} from "../../store/store";
 
 const Validate = observer(()=>{
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -58,7 +58,7 @@ const Validate = observer(()=>{
               <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>
-              {transactionsStore.transactionsData.map(item => {
+              {registrationStore.transactionsInfo.map(item => {
                 return <ValidateRoadMap season={item} key={item.id}/>
               })}
             </div>

src/pages/digitalId/ValidationLog.jsx

@@ -1,10 +1,10 @@
 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 {registrationStore} from "../../store/store";
 
 const ValidationLog = observer(()=>{
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -28,7 +28,7 @@ const ValidationLog = observer(()=>{
               <div className="max-w-3xl m-auto mt-6">
                 <div className="xl:-translate-x-16 max-w-fit">
                   {/* PostsID */}
-                  {transactionsStore.transactionsData.map(item=>{
+                  {registrationStore.transactionsInfo.map(item=>{
                     return <ValidateRoadMap season={item} key={item.id}/>
                   })}
                 </div>

src/pages/digitalId/Verify.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import { sharedDataStore } from '../../store/sharedDataStore';
+import {registrationStore} from "../../store/store";
 import { observer } from 'mobx-react-lite';
 
 const Verify = observer(() => {
@@ -42,7 +42,7 @@ const Verify = observer(() => {
             </div>
             {/* Block */}
             <div className="flex flex-col gap-y-4">
-              {sharedDataStore.sharedData.map((item, index) => (
+              {registrationStore.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-end items-center h-[42px]">

src/shared/labelMap.js

@@ -0,0 +1,27 @@
+export 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"
+};

src/store/sharedDataStore.js

@@ -1,66 +0,0 @@
-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

@@ -1,7 +1,14 @@
-import { reaction, makeAutoObservable } from "mobx";
+import { reaction, makeAutoObservable, onBecomeObserved, onBecomeUnobserved} from "mobx";
 import {cryptography} from "@liskhq/lisk-client";
 import {getNodeInfo} from '../api/node';
 import {fetchWrapper} from '../shared/fetchWrapper';
+import {labelMap} from "../shared/labelMap";
+import User08 from "../images/user-28-08.jpg";
+import User06 from "../images/user-28-06.jpg";
+import User05 from "../images/user-28-05.jpg";
+import User09 from "../images/user-28-09.jpg";
+
+const usersImages = [User08,User06,User05,User09];
 
 class Store {
   _accountData = []
@@ -10,27 +17,26 @@ class Store {
 
   _nodeInfo = {}
 
-  _userData = {}
+  _userData = []
 
   _keysArray = []
 
-  _transactionsInfo = {}
+  _sharedData = []
+
+  _transactionsInfo = []
 
   constructor() {
     makeAutoObservable(this);
 
     this.fetchNodeInfo()
 
-    reaction(() => this.tokenKey, () => this.getData())
-    reaction(() => this.tokenKey, () => this.fetchNewAccountData())
-    reaction(() => this.tokenKey, () => this.fetchTransactionsInfo())
+    reaction(()=>this.keysArray, ()=>this.fetchSharedData())
+    onBecomeObserved(this, "userData", () => this.fetchNewAccountData())
+    onBecomeObserved(this, "transactionsInfo", ()=>this.fetchTransactionsInfo())
+    onBecomeUnobserved(this, "transactionsInfo", ()=>this.unobservedTransactionsInfo())
+    onBecomeObserved(this, "sharedData", ()=>this.fetchKeysArray())
   };
 
-  getData() {
-    this.fetchNewAccountData();
-    this.fetchKeysArray();
-  }
-
   fetchNewAccountData() {
     fetchWrapper.getAuth('http://3.125.47.101/api/data/private', {
       networkIdentifier: this.nodeInfo.networkIdentifier,
@@ -63,18 +69,24 @@ class Store {
         .then((res)=>this.saveInfoTransactions(res))
   }
 
+  fetchSharedData() {
+    this._keysArray.forEach((elem) => fetchWrapper.get(`http://3.125.47.101/api/data/shared/${elem}`).then((res) => this.changeSharedData(res)))
+  };
+
+  unobservedTransactionsInfo() {
+    this._transactionsInfo=[]
+  }
+
+  changeSharedData(incomingData) {
+    this._sharedData.push({
+      data: incomingData.data,
+    })
+  }
+
   get accountMadeTransaction() {
     return "b444b7ff3118cf2a30cbd54cfcdb8fd5d805017a"
   }
 
-  userDataFetchChange(res) {
-    this._userData = res;
-  }
-
-  keysArrayFetchChange(res) {
-    this._keysArray = res.data;
-  }
-
   get keysArray() {
     return this._keysArray;
   }
@@ -83,10 +95,6 @@ class Store {
     return this._userData;
   }
 
-  get transactionsInfo() {
-    return this._transactionsInfo
-  }
-
   savePassPhrase(phrase) {
     this._passPhrase = phrase
   }
@@ -96,7 +104,15 @@ class Store {
   };
 
   saveInfoTransactions(transaction) {
-    this._transactionsInfo = transaction
+    this._transactionsInfo = transaction.data
+  }
+
+  userDataFetchChange(res) {
+    this._userData = res.data;
+  }
+
+  keysArrayFetchChange(res) {
+    this._keysArray = res.data;
   }
 
   fetchNodeInfo() {
@@ -121,6 +137,46 @@ class Store {
     return this._accountData
   }
 
+  get sharedData() {
+    return this._sharedData.map(elem => ({
+      data: elem.data.map(item => ({
+        label: labelMap[item.label],
+        value: item.value,
+      }))
+    }));
+  };
+
+  get transactionsInfo() {
+    return this._transactionsInfo.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: this.accountMadeTransaction,
+            value: asset.value,
+            label: labelMap[asset.label],
+          }
+        })
+      }
+    })
+  }
+
+  get decryptedUserData(){
+    return this._userData.map((elem) => ({
+      ...elem,
+      key: elem.label,
+      label: labelMap[elem.label],
+      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
+    }))
+  }
+
   encryptAccountData(data) {
     return data.map((item) => {
       let value = cryptography.encryptMessageWithPassphrase(cryptography.getRandomBytes(32).toString('hex') + ":" + item.value, this.passPhrase, this.pubKey);

src/store/transactionsStore.js

@@ -1,51 +0,0 @@
-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()

src/store/userDataStore.js

@@ -1,53 +0,0 @@
-import { cryptography } from "@liskhq/lisk-client";
-import { makeAutoObservable, reaction } from "mobx";
-import { registrationStore } from './store';
-
-const labelMap = {
-  first_name: 'First name',
-  second_name: 'Second name',
-  gender: "Gender",
-  birthdate: "Birthdate",
-  place_of_birth: "Place of birth",
-  nationality: "Nationality",
-  national_id: "National ID",
-  national_doctype: "National doctype",
-  national_doc_id: "National doc ID",
-  national_doc_issue_date: "National doc issue date",
-  national_doc_expiry_date: "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 UserDataStore{
-  _data = [];
-
-  constructor() {
-    makeAutoObservable(this);
-
-    reaction(() => ({data: registrationStore.userData}), ({data}) => {
-      this._data = data.data;
-    })
-  }
-  get decryptedData(){
-    return this._data.map((elem) => ({
-      ...elem,
-      key: elem.label,
-      label: labelMap[elem.label],
-      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
-    }))
-  }
-}
-
-export const userDataStore = new UserDataStore();