Merge pull request #34 from Refugee-Aid-Capstone/feature/edit-org

Feature/edit org
Refugee-Aid-Capstone · Oct 22, 2023 · 7e87bf2 · 7e87bf2
2 parents 6769927 + 34b3679
commit 7e87bf2
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 100 deletions.
diff --git a/cypress/e2e/organizationDashboard.cy.js b/cypress/e2e/organizationDashboard.cy.js
@@ -35,20 +35,20 @@ describe('OrganizationDashboard Tests', () => {
     cy.get('.left-column').should('contain', 'Food Aid');
     cy.get(':nth-child(2)').should('contain', 'Language: German');
     cy.get('.description').should('contain', 'Ipsum et nihil ducimus');
-    cy.get(':nth-child(4)').should('contain', 'Status: Pending');
+    cy.get(':nth-child(4)').should('contain', 'Status: pending');
     cy.get('.action-button').should('be.visible');
     cy.get('.action-button').should('be.visible');
-    cy.get('.action-button').eq(0).click();
-    cy.get(':nth-child(4)').should('contain', 'Status: Approved');
+    // cy.get('.action-button').eq(0).click();
+    // cy.get(':nth-child(4)').should('contain', 'Status: approved');
 
     cy.get('.left-column').should('contain', 'Legal Aid');
     cy.get(':nth-child(2)').should('contain', 'Language: German');
     cy.get('.description').should('contain', 'Veniam dolorem hic sint');
-    cy.get(':nth-child(4)').should('contain', 'Status: Pending');
+    cy.get(':nth-child(4)').should('contain', 'Status: pending');
     cy.get('.action-button').should('be.visible');
     cy.get('.action-button').should('be.visible');
-    cy.get('.action-button').eq(1).click();
-    cy.get(':nth-child(4)').should('contain', 'Status: Fulfilled');
+    // cy.get('.action-button').eq(1).click();
+    // cy.get(':nth-child(4)').should('contain', 'Status: fulfilled');
 
     cy.get('.right-column > h3').should('contain', 'Organization Details');
     cy.get('.right-column > :nth-child(2)').should('contain', '1234567890');
@@ -58,7 +58,6 @@ describe('OrganizationDashboard Tests', () => {
     cy.get('.right-column > :nth-child(6)').should('contain', 'New York City');
     cy.get('.right-column > :nth-child(7)').should('contain', 'NY');
     cy.get('.right-column > :nth-child(8)').should('contain', '20813-8431');
-    cy.get('.right-column > button').should('be.visible');
   });
 
 

diff --git a/cypress/fixtures/organizationData.json b/cypress/fixtures/organizationData.json
@@ -19,15 +19,15 @@
           "id": "1",
           "organizationId": "99",
           "aidType": "Food",
-          "status": "Pending",
+          "status": "pending",
           "language": "German",
           "description": "Ipsum et nihil ducimus"
         },
         {
           "id": "2",
           "organizationId": "99",
           "aidType": "Legal",
-          "status": "Pending",
+          "status": "pending",
           "language": "English",
           "description": "Veniam dolorem hic sint"
         }

diff --git a/src/Components/OrgRequestCard/OrgRequest.scss b/src/Components/OrgRequestCard/OrgRequest.scss
@@ -0,0 +1,10 @@
+.action-button {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.9rem;
+  border-radius: 9px;
+  margin-left: 1rem;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-top: 1rem;
+}
diff --git a/src/Components/OrgRequestCard/OrgRequestCard.js b/src/Components/OrgRequestCard/OrgRequestCard.js
@@ -1,28 +1,35 @@
-export default function OrgRequestCard({ request, handleApprove, handleDecline }) {
+import '../RequestCard/RequestCard.scss';
+import '../OrganizationDashboard/OrganizationDashboard.scss';
+import './OrgRequest.scss';
+import { useMutation } from '@apollo/client';
+import { UPDATE_AID_REQUEST } from '../../apollo-client/mutations';
+
+export default function OrgRequestCard({ request }) {
   const { id, description, aidType, language, status } = request;
+  const [updateStatus] = useMutation(UPDATE_AID_REQUEST);
+
+  const buttons = ['pending', 'fulfilled', 'active']
+    .filter(buttonType => buttonType !== status)
+    .map(buttonType => (
+      <button
+        key={buttonType}
+        className='action-button'
+        onClick={() =>
+          updateStatus({ variables: { id: id, status: buttonType } })
+        }
+        aria-label={`Mark request for ${aidType} aid as ${buttonType}`}
+      >
+        {buttonType}
+      </button>
+    ));
 
   return (
     <article className='request-card org' id={id}>
       <h3 className='card-text type'>{aidType} Aid</h3>
-      {language && <p className='card-text'>Language: {language}</p>}
+      {language !== 'None' && <p className='card-text'>Language: {language}</p>}
       <p className='card-text description'>{description}</p>
       <p className='card-text'>Status: {status}</p>
-      <div>
-        <button 
-          className="action-button" 
-          onClick={() => handleApprove(request.id)}
-          aria-label={`Approve request for ${aidType} aid`}
-        >
-          Approve
-        </button>
-        <button 
-          className="action-button" 
-          onClick={() => handleDecline(request.id)}
-          aria-label={`Mark request for ${aidType} aid as fulfilled`}
-        >
-          Fulfilled
-        </button>
-      </div>
+      <div>{buttons}</div>
     </article>
   );
 }
diff --git a/src/Components/OrganizationDashboard/OrganizationDashboard.js b/src/Components/OrganizationDashboard/OrganizationDashboard.js
@@ -1,40 +1,25 @@
-import React, { useState, useEffect } from 'react';
-import { useQuery } from '@apollo/client';
-import OrgRequestCard from '../OrgRequestCard/OrgRequestCard';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useQuery } from '@apollo/client';
 import { GET_ONE_ORG } from '../../apollo-client/queries';
-import '../OrganizationDashboard/OrganizationDashboard.scss';
+import OrgRequestCard from '../OrgRequestCard/OrgRequestCard';
 import Spinner from '../Spinner/Spinner';
-export default function OrganizationDashboard( {orgId}) {
+import '../OrganizationDashboard/OrganizationDashboard.scss';
+
+export default function OrganizationDashboard({ orgId }) {
+  const navigate = useNavigate();
+  const [aidRequests, setAidRequests] = useState([]);
 
   const { loading, error, data } = useQuery(GET_ONE_ORG, {
     variables: { id: orgId },
   });
 
-  const [aidRequests, setAidRequests] = useState([]);
-
-  useEffect(() => { 
+  useEffect(() => {
     if (data && data.organization) {
       setAidRequests(data.organization.aidRequests);
     }
   }, [data]);
 
-  const handleApprove = requestId => {
-    const updatedRequests = aidRequests.map(request =>
-      request.id === requestId ? { ...request, status: 'Approved' } : request,
-    );
-    setAidRequests(updatedRequests);
-  };
-
-  const handleDecline = requestId => {
-    const updatedRequests = aidRequests.map(request =>
-      request.id === requestId ? { ...request, status: 'Fulfilled' } : request,
-    );
-    setAidRequests(updatedRequests);
-  };
-
-  const navigate = useNavigate();
-
   useEffect(() => {
     if (error) {
       if (error.message.includes('500')) {
@@ -53,36 +38,38 @@ export default function OrganizationDashboard( {orgId}) {
     return <p>No organization data available.</p>;
   }
 
-  const organization = data.organization;
+  const {
+    name,
+    contactPhone,
+    contactEmail,
+    streetAddress,
+    website,
+    city,
+    state,
+    zip,
+  } = data.organization;
 
   return (
     <div className='organization-dashboard-container'>
-      <h1>Welcome, {organization.name}!</h1>
-
+      <h1>Welcome, {name}!</h1>
       <div className='dashboard-content'>
         <section className='left-column'>
           <h3>Aid Requests</h3>
           {aidRequests.map(request => (
-            <OrgRequestCard
-              key={request.id}
-              request={request}
-              handleApprove={handleApprove}
-              handleDecline={handleDecline}
-            />
+            <OrgRequestCard key={request.id} request={request} />
           ))}
         </section>
         <section className='right-column'>
           <h3>Organization Details</h3>
-          <p>Phone: {organization.contactPhone}</p>
-          <p>Email: {organization.contactEmail}</p>
-          <p>Address: {organization.streetAddress}</p>
-          <p>Website: {organization.website}</p>
-          <p>City: {organization.city}</p>
-          <p>State: {organization.state}</p>
-          <p>ZIP: {organization.zip}</p>
-          <button className="edit-button">Edit Details</button>
+          <p>Phone: {contactPhone}</p>
+          <p>Email: {contactEmail}</p>
+          <p>Address: {streetAddress}</p>
+          <p>Website: {website}</p>
+          <p>City: {city}</p>
+          <p>State: {state}</p>
+          <p>ZIP: {zip}</p>
         </section>
+      </div>
     </div>
-  </div>
   );
 }
diff --git a/src/Components/OrganizationDashboard/OrganizationDashboard.scss b/src/Components/OrganizationDashboard/OrganizationDashboard.scss
@@ -66,37 +66,6 @@
         }
       }
     }
-
-    .action-button {
-      padding: 0.4rem 0.8rem;
-      font-size: 0.9rem;
-      border-radius: 9px;
-      margin-left: 1rem;
-      border: none;
-      cursor: pointer;
-      transition: background-color 0.3s ease;
-      margin-top: 1rem;
-
-      // Approve button style
-      &:nth-child(1) {
-        background-color: #4CAF50;
-        color: white;
-
-        &:hover {
-          background-color: #45a049;
-        }
-      }
-
-      // Decline button style
-      &:nth-child(2) {
-        background: linear-gradient(to bottom, #e50914, #db0200);
-        color: white;
-
-        &:hover {
-          background-color: #da190b;
-        }
-      }
-    }
   }
 
   @media (max-width: 992px) {

diff --git a/src/apollo-client/mutations.js b/src/apollo-client/mutations.js
@@ -0,0 +1,14 @@
+import { gql } from "@apollo/client";
+
+export const UPDATE_AID_REQUEST = gql`
+  mutation updateAidRequest($id: ID!, $status: String) {
+    updateAidRequest(id: $id, status: $status) {
+      id
+      status
+      organization {
+        name
+        id
+      }
+    }
+  }
+`;