feat: implement accept, decline and delete in trusts

Greenstand · May 7, 2024 · c11c1d4 · c11c1d4
1 parent cb43d3c
commit c11c1d4
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 23 deletions.
diff --git a/src/api/trust_relationships.js b/src/api/trust_relationships.js
@@ -1,5 +1,6 @@
 import apiClient from '../utils/apiClient';
 import { makeQueryString } from '../utils/formatting';
+import secureLocalStorage from 'react-secure-storage';
 
 export const getTrustRelationships = async (
   token,
@@ -51,9 +52,17 @@ export const requestTrustRelationship = async (
 
 export const acceptTrustRelationship = async ({ id, token }) => {
   try {
-    const response = await apiClient
-      .setAuthHeader(token)
-      .get(`/trust_relationships/${id}/accept`);
+    const response = await fetch(
+      `${process.env.REACT_APP_WALLET_API_ROOT}/trust_relationships/${id}/accept`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'TREETRACKER-API-KEY': secureLocalStorage.getItem('api-key') || '',
+          'Authorization': token ? `Bearer ${token}` : ''
+        },
+      }
+    );
     return response;
   } catch (error) {
     console.error(error);
@@ -62,11 +71,46 @@ export const acceptTrustRelationship = async ({ id, token }) => {
 
 export const declineTrustRelationship = async ({ id, token }) => {
   try {
-    const response = await apiClient
-      .setAuthHeader(token)
-      .get(`/trust_relationships/${id}/decline`);
+    const response = await fetch(
+      `${process.env.REACT_APP_WALLET_API_ROOT}/trust_relationships/${id}/decline`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'TREETRACKER-API-KEY': secureLocalStorage.getItem('api-key') || '',
+          'Authorization': token ? `Bearer ${token}` : ''
+        },
+      }
+    );
     return response;
   } catch (error) {
     console.error(error);
   }
 };
+
+
+
+
+export const deleteTrustRelationship = async ({ id, token }) => {
+  try {
+    const response = await fetch(
+      `${process.env.REACT_APP_WALLET_API_ROOT}/trust_relationships/${id}`,
+      {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          'TREETRACKER-API-KEY': secureLocalStorage.getItem('api-key') || '',
+          'Authorization': token ? `Bearer ${token}` : ''
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    return response.json(); 
+  } catch (error) {
+    console.error(error);
+  }
+};
diff --git a/src/pages/TrustRelationship/TrustRelationshipSidePanel.styled.js b/src/pages/TrustRelationship/TrustRelationshipSidePanel.styled.js
@@ -90,6 +90,19 @@ const DeclineButton = styled(Button)({
     border: 'none', 
   }
 });
+const DeleteButton = styled(Button)({
+  textTransform: 'none',
+  padding: 0,
+  minWidth: 0,
+  border: 'none',
+  fontWeight: 700,
+  fontSize: '1rem',
+  margin: '0 10px', 
+  color: 'white',
+  '&:hover': {
+    border: 'none', 
+  }
+});
 
 const AcceptButton = styled(Button)({
   textTransform: 'none',
@@ -102,4 +115,4 @@ const AcceptButton = styled(Button)({
 });
 
 
-export { DrawerHeaderStyled, DrawerStyled, BoldTypography, NormalTypography, TallTypography, DeclineButton, AcceptButton };
+export { DrawerHeaderStyled, DrawerStyled, BoldTypography, NormalTypography, TallTypography, DeclineButton, AcceptButton, DeleteButton };
diff --git a/src/pages/TrustRelationship/trustRelationshipSidePanel.js b/src/pages/TrustRelationship/trustRelationshipSidePanel.js
@@ -13,12 +13,14 @@ import {
   NormalTypography,
   TallTypography,
   DeclineButton,
-  AcceptButton
+  AcceptButton,
+  DeleteButton
 } from './TrustRelationshipSidePanel.styled.js';
 import AuthContext from '../../store/auth-context.js';
 import {
   acceptTrustRelationship,
   declineTrustRelationship,
+  deleteTrustRelationship
 } from '../../api/trust_relationships.js';
 import { useTrustRelationshipsContext } from '../../store/TrustRelationshipsContext.js';
 
@@ -32,7 +34,7 @@ function TrustRelationshipSidePanel({ open, onClose, rowInfo }) {
   const handleAccept = (id) => {
     const res = acceptTrustRelationship({ id, token });
     onClose()
-    setRefetch(true)
+        setRefetch(true)
   };
 
   const handleDecline = (id) => {
@@ -41,6 +43,12 @@ function TrustRelationshipSidePanel({ open, onClose, rowInfo }) {
     setRefetch(true);
   };
 
+  const handleDelete = (id) => {
+    const res = deleteTrustRelationship({ id, token });
+    onClose()
+    setRefetch(true);
+  };
+
 
 
   return (
@@ -123,20 +131,27 @@ function TrustRelationshipSidePanel({ open, onClose, rowInfo }) {
             </TallTypography>
           </Grid>
         </Grid>
-       <Grid sx={3} style={{margin: '5rem 4rem',}}>
-       <AcceptButton
-          variant="contained"
-          color="primary"
-          onClick={() => handleAccept(rowInfo.id)}
-        >
-          Accept
-        </AcceptButton>
-        <DeclineButton
-        onClick={() => handleDecline(rowInfo.id)}
-        >
-          Decline
-        </DeclineButton>
-       </Grid>
+        {rowInfo.state === 'requested' && (
+          <Grid sx={3} style={{ margin: '5rem 4rem' }}>
+            <AcceptButton
+              variant="contained"
+              color="primary"
+              onClick={() => handleAccept(rowInfo.id)}
+            >
+              Accept
+            </AcceptButton>
+            <DeclineButton onClick={() => handleDecline(rowInfo.id)}>
+              Decline
+            </DeclineButton>
+          </Grid>
+      )}
+          {rowInfo.state === 'trusted' && (
+          <Grid sx={3} style={{ margin: '5rem 7.2rem', backgroundColor: 'red', borderRadius: 8, padding: '10px' }}>
+            <DeleteButton onClick={() => handleDelete(rowInfo.id)}>
+              Delete
+            </DeleteButton>
+          </Grid>
+         )}
       </div>
     </DrawerStyled>
   );