Merge pull request #26 from franze6/DID-5

Интеграция таблицы страницы Profile с сервером
2022-07-04 10:10:03 +03:00
parent bcfc018560 0d4f27660a
commit 0f455f126d
4 changed files with 182 additions and 211 deletions
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -1,14 +1,12 @@
 import React, { useState } from 'react';
+import { userDataStore } from '../../store/userDataStore';
 import Sidebar from '../../partials/Sidebar';
+import { observer } from 'mobx-react-lite';
 import Header from '../../partials/Header';
 import ProfileTable from '../../partials/digitalId/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
-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 Profile = observer (() => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
  const [removePanelOpen, setRemovePanelOpen] = useState(false);
@@ -68,7 +66,7 @@ function Profile () {
  }

  const sendValues = () => {
-    if (!userData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
+    if (!userDataStore.decryptedData.some((element) => element.property === currentValues.property) && (currentValues.seed.toString().length === 20)) {
      setAddPanelOpen(false);
      setButtonPanelOpen(true);
      setCurrentValues(defaultValues);
@@ -100,141 +98,6 @@ function Profile () {
    }
  };

-  const userData = [
-    {
-      id: '0',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Dominik',
-      property: 'First name',
-      status: 'Completed',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-    {
-      id: '1',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Lamakani',
-      property: 'Second name',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '2',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '05.10.1983',
-      property: 'Birthdate',
-      status: 'Incorrect',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '3',
-      category: 'General',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Male',
-      property: 'Gender',
-      status: 'Stored',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '4',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'United Kindom',
-      property: 'Residence',
-      status: 'Completed',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-    {
-      id: '5',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'Passport',
-      property: 'Document type',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-    {
-      id: '6',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: 'A123B3143',
-      property: 'Document ID',
-      status: 'Incorrect',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '7',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '05.10.2012',
-      property: 'Issue date',
-      status: 'Stored',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '8',
-      category: 'Nationality',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '05.10.2032',
-      property: 'Expiry date',
-      status: 'Stored',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '9',
-      category: 'Social',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '@lamakani',
-      property: 'Telegram',
-      status: 'Completed',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: null
-    },
-    {
-      id: '10',
-      category: 'Social',
-      validated: true,
-      blockchained: true,
-      image: ProfileIcon,
-      value: '@lamakani',
-      property: 'Telegram',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    },
-  ]
-
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
@@ -268,7 +131,7 @@ function Profile () {
                  </ul>
                </div>
                {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={userData}/>
+                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.decryptedData}/>
              </div>
              {/* Left sidebar */}
              <div>
@@ -368,8 +231,8 @@ function Profile () {
                  <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">
-                      {userData.filter(({ id }) => selectedItems.includes(id)).map(item => (
-                        <span key={item.id} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.property}</span>
+                      {userDataStore.decryptedData.filter(({ label }) => selectedItems.includes(label)).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>
                    <div className="flex flex-row justify-between pt-[16px] pb-7 items-center">
@@ -470,6 +333,6 @@ function Profile () {
      </div>
    </div>
  )
-}
+})

-export default Profile;
+export default Profile
--- a/src/partials/digitalId/ProfileTable.jsx
+++ b/src/partials/digitalId/ProfileTable.jsx
@@ -1,5 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import ProfileTableItem from './ProfileTableItem';
+import ProfileIcon from '../../images/profile-icon.svg';

 function ProfileTable({
  selectedItems,
@@ -8,6 +9,13 @@ function ProfileTable({

  const [isCheck, setIsCheck] = useState([]);

+  const defaultData = {
+    image: ProfileIcon,
+    status: 'Stored',
+    transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+    avatars: null
+  }
+
  useEffect(() => {
    selectedItems(isCheck);
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -21,86 +29,124 @@ function ProfileTable({
    }
  };

+  const data = {
+    general:["First name","Second name", "Gender", "Birthdate", "Place of birth"],
+    nationality:["Nationality", "National id", "National doctype", "National doc id", "National doc issue date", "National doc expiry date"],
+    social:["Telephone", "Twitter", "Facebook", "Instagram", "Youtube", "Wechat", "Tiktok", "Linkedin", "Vk", "Github", "Telegram", "Qq", "Snapchat", "Reddit"]
+  }
+
+  const generalData = userData.filter(elem => data.general.includes(elem.label)),
+        nationalityData = userData.filter(elem => data.nationality.includes(elem.label)),
+        sosialData = userData.filter(elem => data.nationality.includes(elem.label)),
+        otherData = userData.filter((elem) => 
+          !data.general.includes(elem.label) && !data.nationality.includes(elem.label) && !data.social.includes(elem.label));
+
  return (
    <>
    {/* General */}
+      <div className={`${generalData.length > 0 || 'hidden'}`}>
        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
        <div className="overflow-x-auto w-[828px]">
          <table className="w-[828px] table-auto w-full">
            <tbody className="divide-slate-200 divide-y">
-            {userData.filter(data => data.category === 'General')
-              .map(data => {
+              {generalData.map((data) => {
                return (
                  <ProfileTableItem
-                    key={data.id}
-                    id={data.id}
-                    image={data.image}
-                    value={data.value}
-                    property={data.property}
-                    status={data.status}
-                    transactions={data.transactions}
-                    avatars={data.avatars}
+                    key={data.label}
+                    id={data.label}
+                    image={defaultData.image}
+                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                    property={data.label}
+                    status={defaultData.status}
+                    transactions={defaultData.transactions}
+                    avatars={defaultData.avatars}
                    handleClick={handleClick}
-                    isChecked={isCheck.includes(data.id)}
+                    isChecked={isCheck.includes(data.label)}
                  />
                )
-              })
-            }
+              })}
            </tbody>
          </table>
        </div>
+      </div>
      {/* Nationality */}
+      <div className={`${nationalityData.length > 0 || 'hidden'}`}>
        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</h2>
        <div className="overflow-x-auto w-[828px]">
          <table className="w-[828px] table-auto w-full">
            <tbody className="text-sm divide-slate-200 divide-y ">
-            {userData.filter(data => data.category === 'Nationality')
-              .map(data => {
+              {nationalityData.map(data => {
                return (
                  <ProfileTableItem
-                    key={data.id}
-                    id={data.id}
-                    image={data.image}
-                    value={data.value}
-                    property={data.property}
-                    status={data.status}
-                    transactions={data.transactions}
-                    avatars={data.avatars}
+                    key={data.label}
+                    id={data.label}
+                    image={defaultData.image}
+                    value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                    property={data.label}
+                    status={defaultData.status}
+                    transactions={defaultData.transactions}
+                    avatars={defaultData.avatars}
                    handleClick={handleClick}
-                    isChecked={isCheck.includes(data.id)}
+                    isChecked={isCheck.includes(data.label)}
                  />
                )
-              })
-            }
+              })}
            </tbody>
          </table>
        </div>
+      </div>
      {/* Social */}
+      <div className={`${sosialData.length > 0 || 'hidden'}`}>
        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</h2>
        <div className="overflow-x-auto w-[828px]">
          <table className="w-[828px] table-auto w-full">
            <tbody className="text-sm divide-slate-200 divide-y ">
-            {userData.filter(data => data.category === 'Social')
-              .map(data => {
+            {sosialData.map(data => {
              return (
                <ProfileTableItem
-                    key={data.id}
-                    id={data.id}
-                    image={data.image}
-                    value={data.value}
-                    property={data.property}
-                    status={data.status}
-                    transactions={data.transactions}
-                    avatars={data.avatars}
+                  key={data.label}
+                  id={data.label}
+                  image={defaultData.image}
+                  value={data.value.charAt(0).toUpperCase()+data.value.slice(1)}
+                  property={data.label}
+                  status={defaultData.status}
+                  transactions={defaultData.transactions}
+                  avatars={defaultData.avatars}
                  handleClick={handleClick}
-                    isChecked={isCheck.includes(data.id)}
+                  isChecked={isCheck.includes(data.label)}
                />
              ) 
-              })
-            }
+            })}
            </tbody>
          </table>
        </div>
+      </div>
+      {/* Other */}
+      <div className={`${otherData.length > 0 || 'hidden'}`}>
+        <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Other 🖋️</h2>
+        <div className="overflow-x-auto w-[828px]">
+          <table className="w-[828px] table-auto w-full">
+            <tbody className="text-sm divide-slate-200 divide-y ">
+            {otherData.map(data => {
+              return (
+                <ProfileTableItem
+                  key={data.label}
+                  id={data.label}
+                  image={defaultData.image}
+                  value={data.value}
+                  property={data.label}
+                  status={defaultData.status}
+                  transactions={defaultData.transactions}
+                  avatars={defaultData.avatars}
+                  handleClick={handleClick}
+                  isChecked={isCheck.includes(data.label)}
+                />
+              )
+            })}
+            </tbody>
+          </table>
+        </div>
+      </div>
    </>
  )
 }
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -10,6 +10,8 @@ class Store {

  _nodeInfo = {}

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

@@ -18,15 +20,18 @@ class Store {
    reaction(() => this.tokenKey, () => fetchWrapper.getAuth('http://3.125.47.101/api/data/account', {
      networkIdentifier: this.nodeInfo.networkIdentifier,
      lastBlockID: this.nodeInfo.lastBlockID
-    }))
+    }).then((res) => this.userDataFetchChange(res)))
  };

  fetchCreateNewAccount() {
    fetchWrapper.postAuth('http://3.125.47.101/api/data/account', {
      networkIdentifier: this.nodeInfo.networkIdentifier,
      lastBlockID: this.nodeInfo.lastBlockID
-    }, [...this.encryptAccountData])
-        .catch(()=>{})
+    }, [...this.encryptAccountData]).catch(()=>{})
+  };
+
+  userDataFetchChange(res) {
+    this._userData = res;
  }

  savePassPhrase(phrase) {
@@ -51,6 +56,10 @@ class Store {
    console.log(err)
  }

+  get userData() {
+    return this._userData;
+  }
+
  get passPhrase() {
    return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
  }
--- a/src/store/userDataStore.js
+++ b/src/store/userDataStore.js
@@ -0,0 +1,53 @@
+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,
+      label: labelMap[elem.label],
+      value: cryptography.decryptMessageWithPassphrase(elem.value, elem.value_nonce, registrationStore.passPhrase, registrationStore.pubKey).split(':')[1]
+    }))
+  }
+}
+
+export const userDataStore = new UserDataStore();