fixed presentations

IV-Portal-Franklin/src/App.js

@@ -9,20 +9,15 @@ import * as SSIConnections from 'ssi-lib/Connections';
 import * as SSICredentialExchange from 'ssi-lib/CredentialExchange';
 import * as SSIPresentationsHelper from 'ssi-lib/PresentationsHelper';
 
-import { Card, CardMedia, CardContent, CardActions, Typography, DialogActions } from '@mui/material';
+import { Card, CardMedia, CardContent, Typography } from '@mui/material';
 import { Button, Grid } from '@mui/material';
 import { Box } from '@mui/system';
 
 import { CircularProgress } from '@mui/material';
 import { Stack } from '@mui/material';
 
-import { Dialog, DialogContent, DialogTitle } from '@mui/material';
-
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { Chip } from '@mui/material';
 
-import InfoIcon from '@mui/icons-material/Info';
-
 import { TextField } from '@mui/material';
 import SovDropZoneWithRead from './components/SovDropZoneWithRead';
 
@@ -72,11 +67,6 @@ export default function App() {
   const [credentialExchangeResults, setCredentialExchangeResults] = useState([]);
   const [presentationResults, setPresentationResults] = useState([]);
 
-  const [jsonDialogOpen, setJsonDialogOpen] = useState(false);
-  const [jsonDialogCredExId, setJsonDialogCredExId] = useState("");
-  const [jsonDialogCredConnId, setJsonDialogCredConnId] = useState("");
-  const [jsonDialogCredProposal, setJsonDialogCredProposal] = useState("");
-
   const [imageHash, setImageHash] = useState(undefined); // autocomputed
   const [imageUrl, setImageUrl] = useState(undefined); // autocomputed
   const [imageFile, setImageFile] = useState(undefined);
@@ -94,6 +84,7 @@ export default function App() {
     setVerified(false);
   }, [value]);
 
+  useEffect(() => { console.log("invite was set", invite); }, [invite]);
 
   // *** todo - WE SHOULD SELECT THE IMAGE FROM THE IMAGE REPO, NOT UPLOAD IT !
   //          - THERE IS A REPO FUNCTION TO OBTAIN THE HASH TOO, SO NO NEED TO SHA3 IT HERE...
@@ -127,7 +118,8 @@ export default function App() {
     if (connectionResults.length === 0) return;
 
     const conn = connectionResults[0]; // todo *** should search presentationResults for a match against INVITATION; don't just get the "latest" one ([0]) - see below also
-    console.log(conn);
+    console.log("conn1", conn);
+    console.log(invite);
 
     switch (conn.rfc23_state) {
       case "request-received":
@@ -143,6 +135,7 @@ export default function App() {
         break;
 
       case "completed":
+        if (!invite.label) return console.log("no invite was found, so the web socket presentation marked as completed was not actioned - it must have been processed earlier.");
         console.log("completed");
 
         let body = {};
@@ -175,7 +168,7 @@ export default function App() {
   useEffect(() => {
     if (presentationResults.length === 0) return;
     const conn = presentationResults[0]; // todo *** should search presentationResults for a match against INVITATION; don't just get the "latest" one ([0]) - see below also
-    console.log("conn", conn);
+    console.log("conn2", conn);
 
     switch (conn.state) {
       case "presentation_received":
@@ -215,9 +208,7 @@ export default function App() {
   useEffect(SSICredentialExchange.startWebSocketEffect(hook_url, setCredentialExchangeResults), []);
   useEffect(SSIPresentationsHelper.startWebSocketEffect(hook_url, setPresentationResults), []);
 
-  // todo *** credential here is actually a Presentation... details of the card need updating... (old thoday credentials)
-  //          should organise this better and put into ./components folder (same goes for all portals)
-  const Credential = (props) => {
+  const Interaction = (props) => {
     console.log(props.details);
 
     var flag, geolocation, imgHash, imgTimestamp, imgUrl, macAddress;
@@ -290,62 +281,10 @@ export default function App() {
               Mac Address: {macAddress} <br />
             </Typography>
           </CardContent>
-          <CardActions>
-            {presentation && proposal_received && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<InfoIcon style={{ color: 'green' }} />} label="New Presentation"></Chip>}
-            {presentation && proposal_received && <Button size="small" onClick={
-              () => {
-                console.log("1--->", api_url, props.details.presentation_exchange_id);
-                console.log("should be similar to: 1--->  http://localhost:8121/ 2be4c7a9-a0df-4d85-87f1-dd7820403de4");
-                SSIPresentationsHelper.sendPresentationRequest(api_url, {}, props.details.presentation_exchange_id)
-              }}>
-              Send Request
-            </Button>}
-
-            {presentation && presentation_received && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<InfoIcon style={{ color: 'green' }} />} label="Presentation received"></Chip>}
-            {presentation && presentation_received && <Button size="small" onClick={() =>
-              SSIPresentationsHelper.verifyPresentation(api_url, props.details.presentation_exchange_id)}
-            >
-              Verify
-            </Button>}
-
-            {presentation && verified && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<InfoIcon style={{ color: 'green' }} />} label="Verified !"></Chip>}
-
-            {offer_sent && <Stack direction="row"><CircularProgress /><Typography m={1}>Awaiting applicant response.</Typography></Stack>}
-            {request_received && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Offer accepted"></Chip>}
-            {proposal_received && <Button size="small" onClick={() => {
-              setJsonDialogCredExId(props.details.cred_ex_id);
-              setJsonDialogCredConnId(props.details.connection_id);
-              setJsonDialogCredProposal(JSON.stringify(props.details));
-              setJsonDialogOpen(true)
-            }}
-            >
-              View JSON
-            </Button>}
-            {credential_issued && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
-            {done && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
-          </CardActions>
         </Card >
       </Box>);
   }
 
-  // todo - put in ./components
-  const JsonDialog = () => {
-    return <Dialog open={jsonDialogOpen}>
-      <DialogTitle>JSON Details</DialogTitle>
-      <DialogContent>
-        <Typography style={{ fontWeight: 600 }}>Credential Exchange Id</Typography>
-        <p>{jsonDialogCredExId}</p>
-        <Typography style={{ fontWeight: 600 }}>Connection Id</Typography>
-        <p>{jsonDialogCredConnId}</p>
-        <Typography style={{ fontWeight: 600 }}>Credential Proposal</Typography>
-        <p>{jsonDialogCredProposal}</p>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={() => { setJsonDialogOpen(false) }}>Close</Button>
-      </DialogActions>
-    </Dialog>
-  }
-
   return (
     <Box>
       <SovAppBarTitle
@@ -378,10 +317,9 @@ export default function App() {
             </Typography>
             {[...presentationResults, ...credentialExchangeResults]
               .sort((x, y) => new Date(x.updated_at) - new Date(y.updated_at))
-              .map((x, index) => <Credential key={index} details={x} />)}
+              .map((x, index) => <Interaction key={index} details={x} />)}
           </Grid>
         </Grid>
-        <JsonDialog></JsonDialog>
       </Box >
     </Box >
   );
@@ -398,7 +336,10 @@ export default function App() {
         <Button
           style={{ marginTop: 40, backgroundColor: "blue" }}
           variant="contained"
-          onClick={() => setValue("details")}>
+          onClick={() => {
+            setValue("details");
+            createNewInvite(); // create a new invite before switching tabs
+          }}>
           CONTINUE
         </Button>
       </Box>
@@ -441,10 +382,7 @@ export default function App() {
         <Button
           style={{ marginTop: 40, backgroundColor: "blue" }}
           variant="contained"
-          onClick={() => {
-            createNewInvite(); // create a new invite before switching tabs
-            setValue("invite");
-          }}>
+          onClick={() => setValue("invite")}>
           CONTINUE
         </Button>
       </Box>