Data vault view insert (#14)

* Create authenticated component/container to hold the header and navigtation.

- will handle navigation next.

* Create navigation with useState()

- Using useState() instead of routes right now becuase it is only two pages. Keeping it simple
- Empty DataVault component/container that will be populated next.
- Add test for navigation file

* Create Add Declarative Details UI, update scss and add icons.

* Add DeclarativeDetails display and update styles on Add.

* Move navigation and header into the authenticated folder.

- These are not reusable components but specific to the id manager.

* Fix broken test by wrapping it in act().

* Fix broken test by wrapping it in act().

* Add DataVault pinner service

- Save pinner client into context
- Create reducer to hold DV content, and connect it to components
- Create config endpoint for DV

* Connect "Add New" component to datavault

- Create create operations to connect DV
- Ad loading component and update button and input styles when loading.

* Fix test and create defaultstate for context.

* Move DV config to JSON files and handle null

- Save if it has DataVault in redux. Will be used in multiple places soon
- Do not show navigation tab for datavault if none for network
- Remove test that will always fail

* Remove hasDataVault from redux

- get the vault from context in the authenticated component and pass down to navigation.

* Implement ipfs-cpinner-client...beta2 version

- Save item in redux using its key
- Content is saved with its id to be used as the <tr> key and will be used for delete/update
- Update frontend and tests to reflect the changes

Author: jessgusclark

package.json

@@ -27,6 +27,7 @@
     "typescript": "^4.0.3"
   },
   "devDependencies": {
+    "@rsksmart/ipfs-cpinner-client": "^0.1.1-beta.2",
     "@rsksmart/rlogin": "0.0.1-beta.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/app/App.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import '../assets/scss/_index.scss'
 import { version } from '../../package.json'
 import LoginScreenContainer from './Login/LoginScreenContainer'
-import DashboardContainer from './Dashboard/DashboardContainer'
+import AuthenticatedContainer from './Authenticated/AuthenticatedContainer'
 import RifFooter from '../components/RifFooter/RifFooter'
 import { Web3ProviderContext } from '../providerContext'
 
@@ -13,7 +13,7 @@ const App = () => {
   return (
     <div className={isLoggedIn ? 'app loggedin' : 'app login'}>
       {isLoggedIn
-        ? <DashboardContainer />
+        ? <AuthenticatedContainer />
         : <LoginScreenContainer context={context} />
       }
       <RifFooter isLoggedIn={isLoggedIn} version={version} />

src/app/Authenticated/AuthenticatedComponent.tsx

@@ -0,0 +1,31 @@
+import React, { useContext, useState } from 'react'
+import HeaderComponent from './components/HeaderComponent'
+import Navigation, { screens } from './components/Navigation'
+import DashboardContainer from '../Dashboard/DashboardContainer'
+import DataVaultContainer from '../DataVault/DataVaultContainer'
+import { Web3ProviderContext } from '../../providerContext'
+
+interface AuthenticatedComponentInterface {
+  chainId: number | null
+  address: string | null
+}
+
+const AuthenticatedComponent: React.FC<AuthenticatedComponentInterface> = ({ chainId, address }) => {
+  const [screen, setScreen] = useState<screens>(screens.DASHBOARD)
+  const context = useContext(Web3ProviderContext)
+
+  return (
+    <>
+      <HeaderComponent chainId={chainId} did={address} />
+      <Navigation
+        selected={screen}
+        handleClick={(screen: screens) => setScreen(screen)}
+        showDataVault={!!context.dvClient}
+      />
+      {screen === screens.DASHBOARD && <DashboardContainer />}
+      {screen === screens.DATAVAULT && <DataVaultContainer />}
+    </>
+  )
+}
+
+export default AuthenticatedComponent

src/app/Authenticated/AuthenticatedContainer.ts

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux'
+import { stateInterface } from '../state/configureStore'
+import AuthenticatedComponent from './AuthenticatedComponent'
+
+const mapStateToProps = (state: stateInterface) => ({
+  address: state.identity.address,
+  chainId: state.identity.chainId
+})
+
+export default connect(mapStateToProps)(AuthenticatedComponent)

src/components/Header/Header.test.tsx renamed to src/app/Authenticated/components/Header.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import rifIdManager from '../../assets/images/rif-id-manager-gray.svg'
-import NetworkStatus from '../NetworkStatus/NetworkStatus'
-import ToolTip from '../Tooltip/Tooltip'
-import { truncateAddressDid } from '../../formatters'
+import rifIdManager from '../../../assets/images/rif-id-manager-gray.svg'
+import NetworkStatus from '../../../components/NetworkStatus/NetworkStatus'
+import ToolTip from '../../../components/Tooltip/Tooltip'
+import { truncateAddressDid } from '../../../formatters'
 
 interface HeaderComponentInterface {
   did: string | null

src/components/Header/HeaderComponent.tsx renamed to src/app/Authenticated/components/HeaderComponent.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { shallow, mount } from 'enzyme'
+import Navigation, { screens } from './Navigation'
+
+describe('Screen: Dashboard', () => {
+  it('renders the component', () => {
+    const wrapper = shallow(<Navigation selected='DASHBOARD' handleClick={jest.fn()} />)
+    expect(wrapper).toBeDefined()
+  })
+
+  it('sets the active item', () => {
+    const wrapper = mount(<Navigation selected={screens.DASHBOARD} handleClick={jest.fn()} />)
+    expect(wrapper.find('li.active').text()).toBe('Dashboard')
+  })
+
+  it('function clicks the correct item', () => {
+    const onClick = jest.fn()
+    const wrapper = shallow(<Navigation selected={screens.DASHBOARD} handleClick={onClick} showDataVault />)
+    wrapper.find('button').at(1).simulate('click')
+    expect(onClick).toBeCalledWith(screens.DATAVAULT)
+  })
+})

src/app/Authenticated/components/Navigation.test.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable no-unused-vars */
+import React from 'react'
+
+export enum screens {
+  DASHBOARD = 'dashboard',
+  DATAVAULT = 'datavault'
+}
+
+interface NavigationInterface {
+  selected: string
+  handleClick: (screen: screens) => void
+  showDataVault?: boolean
+}
+
+const Navigation: React.FC<NavigationInterface> = ({ selected, showDataVault, handleClick }) => (
+  <div className="container">
+    <div className="column">
+      <ul className="navigation">
+        <li className={selected === screens.DASHBOARD ? 'active' : ''}>
+          <button onClick={() => handleClick(screens.DASHBOARD)}>Dashboard</button>
+        </li>
+        {showDataVault && (
+          <li className={selected === screens.DATAVAULT ? 'active' : ''}>
+            <button onClick={() => handleClick(screens.DATAVAULT)}>Data Vault</button>
+          </li>
+        )}
+        <li>Request Credentials</li>
+        <li>My Dapps</li>
+      </ul>
+    </div>
+  </div>
+)
+
+export default Navigation

src/app/Authenticated/components/Navigation.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import HeaderComponent from '../../components/Header/HeaderComponent'
-import Navigation from '../../components/Navigation/Navigation'
 import IdentityInformationComponent from './panels/IdentityInformation'
 import { Authentication } from 'did-resolver'
 import Balance from './panels/Balance'
@@ -21,26 +19,22 @@ const DashboardScreen: React.FC<DashboardScreenInterface> = ({
   chainId, address, owner, delegates, tokens, changeOwner, addDelegate, addCustomToken
 }) => {
   return (
-    <>
-      <HeaderComponent chainId={chainId} did={address} />
-      <div className="content dashboard">
-        <Navigation />
-        <IdentityInformationComponent
-          address={address}
-          chainId={chainId}
-          owner={owner}
-          delegates={delegates}
-          changeOwner={changeOwner}
-          addDelegate={addDelegate}
-        />
-        <div className="container">
-          <div className="column">
-            <Balance tokens={tokens} addCustomToken={addCustomToken} />
-          </div>
-          <div className="column">&nbsp;</div>
+    <div className="content dashboard">
+      <IdentityInformationComponent
+        address={address}
+        chainId={chainId}
+        owner={owner}
+        delegates={delegates}
+        changeOwner={changeOwner}
+        addDelegate={addDelegate}
+      />
+      <div className="container">
+        <div className="column">
+          <Balance tokens={tokens} addCustomToken={addCustomToken} />
         </div>
+        <div className="column">&nbsp;</div>
       </div>
-    </>
+    </div>
   )
 }
 

src/app/Dashboard/DashboardScreen.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import DataVaultWebClient from '@rsksmart/ipfs-cpinner-client'
+import DeclarativeDetailsDisplay from './panels/DeclarativeDetailsDisplay'
+import AddDeclarativeDetails from './panels/AddDeclarativeDetails'
+import { DataVaultKey } from '../state/reducers/datavault'
+
+interface DataVaultComponentProps {
+  declarativeDetails: DataVaultKey
+  addDeclarativeDetail: (client: DataVaultWebClient, key: string, content: string) => any
+}
+
+const DataVaultComponent: React.FC<DataVaultComponentProps> = ({ addDeclarativeDetail, declarativeDetails }) => {
+  return (
+    <div className="content data-vault">
+      <div className="container">
+        <div className="column">
+          <AddDeclarativeDetails addDeclarativeDetail={addDeclarativeDetail} />
+        </div>
+      </div>
+      <div className="container">
+        <div className="column">
+          <DeclarativeDetailsDisplay details={declarativeDetails} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DataVaultComponent

src/app/DataVault/DataVaultComponent.tsx

@@ -0,0 +1,18 @@
+import { ThunkDispatch } from 'redux-thunk'
+import { connect } from 'react-redux'
+import DataVaultWebClient from '@rsksmart/ipfs-cpinner-client'
+import { stateInterface } from '../state/configureStore'
+import DataVaultComponent from './DataVaultComponent'
+import { AnyAction } from 'redux'
+import { createDataVaultContent } from '../state/operations/datavault'
+
+const mapStateToProps = (state: stateInterface) => ({
+  declarativeDetails: state.datavault.data
+})
+
+const mapDispatchToProps = (dispatch: ThunkDispatch<stateInterface, {}, AnyAction>) => ({
+  addDeclarativeDetail: (client: DataVaultWebClient, type: string, content: string) =>
+    dispatch(createDataVaultContent(client, type, content))
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(DataVaultComponent)

src/app/DataVault/DataVaultContainer.ts

@@ -0,0 +1,24 @@
+import React from 'react'
+import { shallow, mount } from 'enzyme'
+import AddDeclarativeDetails from './AddDeclarativeDetails'
+
+describe('Component: AddDeclarativeDetails', () => {
+  it('renders the component', () => {
+    const wrapper = shallow(<AddDeclarativeDetails addDeclarativeDetail={jest.fn()} />)
+    expect(wrapper).toBeDefined()
+  })
+
+  it('adds handles errors if type and content is empty', () => {
+    const submitData = jest.fn()
+    const wrapper = mount(<AddDeclarativeDetails addDeclarativeDetail={submitData} />)
+    const button = wrapper.find('button.submit')
+    button.simulate('click')
+    expect(submitData).toBeCalledTimes(0)
+    expect(wrapper.find('.alert.error').text()).toBe('Type and Content cannot be empty.')
+
+    wrapper.find('input.type').simulate('change', { target: { value: 'email' } })
+    expect(wrapper.find('input.type').props().value).toBe('email')
+    button.simulate('click')
+    expect(submitData).toBeCalledTimes(0)
+  })
+})

src/app/DataVault/panels/AddDeclarativeDetails.test.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useContext } from 'react'
+import DataVaultWebClient from '@rsksmart/ipfs-cpinner-client'
+import { BaseButton } from '../../../components/Buttons'
+import Panel from '../../../components/Panel/Panel'
+import uploadIcon from '../../../assets/images/icons/upload.svg'
+import { Web3ProviderContext } from '../../../providerContext'
+import LoadingComponent from '../../../components/Loading/LoadingComponent'
+
+interface AddDeclarativeDetailsInterface {
+  addDeclarativeDetail: (client: DataVaultWebClient, key: string, content: string) => Promise<any>
+}
+
+const AddDeclarativeDetails: React.FC<AddDeclarativeDetailsInterface> = ({ addDeclarativeDetail }) => {
+  const context = useContext(Web3ProviderContext)
+
+  const [type, setType] = useState('')
+  const [content, setContent] = useState('')
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [isError, setIsError] = useState<string | null>(null)
+
+  const handleClick = () => {
+    setIsLoading(true)
+    setIsError(null)
+
+    if (type === '' || content === '') {
+      setIsLoading(false)
+      return setIsError('Type and Content cannot be empty.')
+    }
+
+    context.dvClient && addDeclarativeDetail(context.dvClient, type, content)
+      .then(() => {
+        setIsLoading(false)
+        setContent('')
+        setType('')
+      })
+      .catch((err: Error) => {
+        setIsLoading(false)
+        setIsError(err.message)
+      })
+  }
+
+  const title = <><img src={uploadIcon} /> Add New Declarative Details</>
+
+  return (
+    <Panel title={title} className="add-declarative">
+      <div className="container">
+        <div className="column">
+          <p className="title">Type</p>
+          <input type="text"
+            className="line type"
+            value={type}
+            onChange={(evt) => setType(evt.target.value)}
+            disabled={isLoading}
+            placeholder="Content type" />
+        </div>
+        <div className="columnDouble">
+          <p className="title">Content</p>
+          <textarea
+            className="line content"
+            value={content}
+            onChange={(evt) => setContent(evt.target.value)}
+            disabled={isLoading}
+            placeholder="Content"
+          />
+        </div>
+        <div className="column submitColumn">
+          <BaseButton className="submit turquoise" onClick={handleClick} disabled={isLoading}>Add Data</BaseButton>
+        </div>
+      </div>
+      {isError && (
+        <div className="error container">
+          <div className="alert error">{isError}</div>
+        </div>
+      )}
+
+      {isLoading && <LoadingComponent />}
+    </Panel>
+  )
+}
+
+export default AddDeclarativeDetails

src/app/DataVault/panels/AddDeclarativeDetails.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import DeclarativeDetailsDisplay from './DeclarativeDetailsDisplay'
+import { DataVaultKey } from '../../state/reducers/datavault'
+
+describe('Component: DeclarativeDetailsDisplay', () => {
+  const mockDeclarativeDetials: DataVaultKey = {
+    EMAIL: [{ id: '1', content: '[email protected]' }],
+    NAME: [{ id: '5', content: 'Jesse Clark' }]
+  }
+
+  it('renders the component', () => {
+    const wrapper = shallow(<DeclarativeDetailsDisplay details={mockDeclarativeDetials} />)
+    expect(wrapper).toBeDefined()
+  })
+
+  it('shows the content in a row', () => {
+    const wrapper = shallow(<DeclarativeDetailsDisplay details={mockDeclarativeDetials} />)
+    expect(wrapper.find('tbody').children()).toHaveLength(2)
+
+    expect(wrapper.find('tr').at(1).find('td').at(0).text()).toBe('EMAIL')
+    expect(wrapper.find('tr').at(1).find('td').at(1).text()).toBe('[email protected]')
+  })
+})