Add connection dropdown (#5)

digicatapult · Mar 29, 2022 · 12da9c7 · 12da9c7
1 parent 76cfbf5
commit 12da9c7
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 323 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "veritable-issuer",
-  "version": "0.1.2",
+  "version": "0.2.2",
   "description": "Front-end for Veritable credentials issuer",
   "author": "Digital Catapult (https://www.digicatapult.org.uk/)",
   "license": "Apache-2.0",

diff --git a/src/components/ColumnLeft/ColumnLeftWrap/ColumnLeftWrap.js b/src/components/ColumnLeft/ColumnLeftWrap/ColumnLeftWrap.js
@@ -5,7 +5,8 @@ import AttributesManager from '../AttributesManager'
 import IssueAndResetButtons from '../IssueAndResetButtons/IssueAndResetButtons'
 import usePostIssueCredentialSendOffer from '../../../interface/hooks/use-post-issue-credential-send-offer'
 
-export default function ColumnLeftWrap({ origin, persona }) {
+export default function ColumnLeftWrap({ origin, persona, connections }) {
+  const [selectedConnection, setSelectedConnection] = useState('')
   const [selectedSchemaId, setSelectedSchemaId] = useState('')
   const [selectedCredDefId, setSelectedCredDefId] = useState('')
   const [selectedId, setSelectedId] = useState('')
@@ -21,6 +22,11 @@ export default function ColumnLeftWrap({ origin, persona }) {
   const [dataIssueCred, setDataIssueCred] = useState('')
   const [errorIssueCred, startFetchHandler] = usePostIssueCredentialSendOffer()
 
+  const chooseConnectionHandler = (e) => {
+    const v = e.target.value
+    setSelectedConnection(v)
+  }
+
   const selectedSchemaHandler = (chosenSchemaId) => {
     setSelectedCredDefId('')
     setSelectedSchemaId(chosenSchemaId)
@@ -29,6 +35,7 @@ export default function ColumnLeftWrap({ origin, persona }) {
     setSelectedCredDefId(chosenDefinitionId)
   }
   const activatedResetHandler = () => {
+    setSelectedConnection('')
     setSelectedSchemaId('')
     setSelectedCredDefId('')
     setSelectedId('')
@@ -39,12 +46,12 @@ export default function ColumnLeftWrap({ origin, persona }) {
     setSelectedExpiration('')
     setSelectedType('')
   }
-  const activatedSubmitHandler = (connectionId) => {
+  const activatedSubmitHandler = () => {
     const setStoreDataFn = setDataIssueCred
     const setStoreStatusFn = setStatusIssueCred
     startFetchHandler(
       origin,
-      connectionId,
+      selectedConnection,
       selectedCredDefId,
       selectedId,
       selectedName,
@@ -82,6 +89,11 @@ export default function ColumnLeftWrap({ origin, persona }) {
     setStatusIssueCred('idle')
   }
 
+  const activeConnections =
+    connections.results?.filter(
+      (connection) => connection.state === 'active'
+    ) || []
+
   return (
     <>
       <div className="col-md-6">
@@ -96,76 +108,86 @@ export default function ColumnLeftWrap({ origin, persona }) {
 
               <form>
                 <div className="row">
-                  <>
-                    <>
-                      <SchemasManager
-                        origin={origin}
-                        onSelectedSchema={selectedSchemaHandler}
-                        selectedSchemaId={selectedSchemaId}
-                      />
-                    </>
-                  </>
+                  <SchemasManager
+                    origin={origin}
+                    onSelectedSchema={selectedSchemaHandler}
+                    selectedSchemaId={selectedSchemaId}
+                  />
 
-                  <>
-                    {selectedSchemaId !== '' && (
-                      <>
-                        <DefinitionsManager
-                          origin={origin}
-                          persona={persona}
-                          onSelectedDefinition={selectedDefinitionHandler}
-                          selectedSchemaId={selectedSchemaId}
-                          selectedCredDefId={selectedCredDefId}
-                        />
-                      </>
-                    )}
-                  </>
+                  {selectedSchemaId && (
+                    <DefinitionsManager
+                      origin={origin}
+                      persona={persona}
+                      onSelectedDefinition={selectedDefinitionHandler}
+                      selectedSchemaId={selectedSchemaId}
+                      selectedCredDefId={selectedCredDefId}
+                    />
+                  )}
                 </div>
 
                 <hr />
 
-                <div className="text-black">
-                  <>
-                    {selectedSchemaId !== '' && selectedCredDefId !== '' && (
-                      <>
-                        <AttributesManager
-                          selectedId={selectedId}
-                          selectedTitle={selectedTitle}
-                          selectedName={selectedName}
-                          selectedSubtitle={selectedSubtitle}
-                          selectedSurname={selectedSurname}
-                          selectedExpiration={selectedExpiration}
-                          selectedType={selectedType}
-                          onInsertedId={insertedIdHandler}
-                          onInsertedTitle={insertedTitleHandler}
-                          onInsertedName={insertedNameHandler}
-                          onInsertedSubtitle={insertedSubtitleHandler}
-                          onInsertedSurname={insertedSurnameHandler}
-                          onInsertedExpiration={insertedExpirationHandler}
-                          onChosenType={chosenTypeHandler}
-                        />
-                      </>
-                    )}
-                  </>
-                </div>
+                {selectedSchemaId && selectedCredDefId && (
+                  <div className="form-group">
+                    <label htmlFor="connection">Connection:</label>
+                    <select
+                      name="connection"
+                      className="form-control"
+                      id="connection"
+                      onChange={chooseConnectionHandler}
+                      value={selectedConnection}
+                    >
+                      <option value="" disabled>
+                        - Select -
+                      </option>
+                      {activeConnections.map((connection) => {
+                        return (
+                          <option
+                            key={connection.connection_id}
+                            value={connection.connection_id}
+                          >
+                            {connection.their_label}
+                          </option>
+                        )
+                      })}
+                    </select>
+                  </div>
+                )}
+                {selectedConnection && (
+                  <AttributesManager
+                    selectedId={selectedId}
+                    selectedTitle={selectedTitle}
+                    selectedName={selectedName}
+                    selectedSubtitle={selectedSubtitle}
+                    selectedSurname={selectedSurname}
+                    selectedExpiration={selectedExpiration}
+                    selectedType={selectedType}
+                    onInsertedId={insertedIdHandler}
+                    onInsertedTitle={insertedTitleHandler}
+                    onInsertedName={insertedNameHandler}
+                    onInsertedSubtitle={insertedSubtitleHandler}
+                    onInsertedSurname={insertedSurnameHandler}
+                    onInsertedExpiration={insertedExpirationHandler}
+                    onChosenType={chosenTypeHandler}
+                  />
+                )}
 
                 <div className="row">
-                  <>
-                    <IssueAndResetButtons
-                      origin={origin}
-                      onActivatedReset={activatedResetHandler}
-                      onActivatedSubmit={activatedSubmitHandler}
-                      selectedSchemaId={selectedSchemaId}
-                      selectedCredDefId={selectedCredDefId}
-                      selectedId={selectedId}
-                      selectedTitle={selectedTitle}
-                      selectedName={selectedName}
-                      selectedSubtitle={selectedSubtitle}
-                      selectedSurname={selectedSurname}
-                      selectedExpiration={selectedExpiration}
-                      selectedType={selectedType}
-                      statusIssueCred={statusIssueCred}
-                    />
-                  </>
+                  <IssueAndResetButtons
+                    origin={origin}
+                    onActivatedReset={activatedResetHandler}
+                    onActivatedSubmit={activatedSubmitHandler}
+                    selectedSchemaId={selectedSchemaId}
+                    selectedCredDefId={selectedCredDefId}
+                    selectedId={selectedId}
+                    selectedTitle={selectedTitle}
+                    selectedName={selectedName}
+                    selectedSubtitle={selectedSubtitle}
+                    selectedSurname={selectedSurname}
+                    selectedExpiration={selectedExpiration}
+                    selectedType={selectedType}
+                    statusIssueCred={statusIssueCred}
+                  />
                 </div>
               </form>
             </div>

diff --git a/src/components/ColumnLeft/IssueAndResetButtons/IssueAndResetButtons.js b/src/components/ColumnLeft/IssueAndResetButtons/IssueAndResetButtons.js
@@ -2,11 +2,8 @@
  * This function is used to display the buttons for issuing and resetting the
  * credential
  */
-import { useState } from 'react'
-import useGetConn from '../../../interface/hooks/use-get-conn'
 
 export default function IssueAndResetButtons({
-  origin,
   onActivatedReset,
   onActivatedSubmit,
   selectedSchemaId,
@@ -20,8 +17,6 @@ export default function IssueAndResetButtons({
   selectedType,
   statusIssueCred,
 }) {
-  const [isDisconnected, setIsDisconnected] = useState(false)
-  const [statusConnId, errorConnId, startFetchConnIdHandler] = useGetConn()
   const isDisabledForm = () => {
     let isDisabled = false
     isDisabled = isDisabled || selectedId === ''
@@ -35,16 +30,8 @@ export default function IssueAndResetButtons({
   }
   const submitHandler = (e) => {
     e.preventDefault()
-    const setStoreDataIssueCb = (connectionId) => {
-      if (!connectionId) {
-        setIsDisconnected(true)
-        return
-      }
-      onActivatedSubmit(connectionId)
-    }
+    onActivatedSubmit()
     onActivatedReset()
-    setIsDisconnected(false)
-    startFetchConnIdHandler(origin, setStoreDataIssueCb)
   }
   const resetHandler = (e) => {
     e.preventDefault()
@@ -63,21 +50,12 @@ export default function IssueAndResetButtons({
             isDisabledForm()
           }
         >
-          {(statusConnId === 'fetching' || statusIssueCred === 'fetching') && (
+          {statusIssueCred === 'fetching' && (
             <>
               <i className="fa fa-spinner fa-pulse"></i>
             </>
           )}
           &nbsp; Issue &nbsp;
-          {isDisconnected && (
-            <>
-              <span className="small">
-                ( &nbsp;
-                <i className="fa fa-exclamation-triangle"></i>
-                &nbsp; disconnected )
-              </span>
-            </>
-          )}
         </button>
       </div>
       <div className="col-md-1">&nbsp;</div>
@@ -91,22 +69,6 @@ export default function IssueAndResetButtons({
           &nbsp;Reset&nbsp;
         </button>
       </div>
-
-      <div
-        className={`${errorConnId ? 'd-block' : 'd-none'}`}
-        style={{
-          position: 'fixed',
-          width: '10%',
-          height: '10%',
-          inset: '0px',
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          zIndex: 100,
-        }}
-      >
-        <div className="text-light m-2 p-2">
-          <small>Failed to fetch: {errorConnId}</small>
-        </div>
-      </div>
     </>
   )
 }
diff --git a/src/components/Common/Misc/ContentSelector/ContentSelector.js b/src/components/Common/Misc/ContentSelector/ContentSelector.js
@@ -1,14 +1,24 @@
 import ContentWrap from '../../../ContentWrap'
 
-export default function ContentSelector({ children, status, origin, persona }) {
+export default function ContentSelector({
+  children,
+  status,
+  origin,
+  persona,
+  connections,
+}) {
   return (
     <>
       {children && children}
       {!children && status !== 'fetched' && (
         <div className="py-4 my-4">&nbsp;</div>
       )}
-      {!children && status === 'fetched' && persona && (
-        <ContentWrap origin={origin} persona={persona} />
+      {!children && status === 'fetched' && (
+        <ContentWrap
+          origin={origin}
+          persona={persona}
+          connections={connections}
+        />
       )}
     </>
   )