diff --git a/cypress/e2e/organizationDashboard.cy.js b/cypress/e2e/organizationDashboard.cy.js index a874836..fd0a8a3 100644 --- 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 index 3218cfa..b2b9b5b 100644 --- a/cypress/fixtures/organizationData.json +++ b/cypress/fixtures/organizationData.json @@ -19,7 +19,7 @@ "id": "1", "organizationId": "99", "aidType": "Food", - "status": "Pending", + "status": "pending", "language": "German", "description": "Ipsum et nihil ducimus" }, @@ -27,7 +27,7 @@ "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 new file mode 100644 index 0000000..ad78569 --- /dev/null +++ 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 index 445c80a..874a484 100644 --- 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 => ( + + )); return (

{aidType} Aid

- {language &&

Language: {language}

} + {language !== 'None' &&

Language: {language}

}

{description}

Status: {status}

-
- - -
+
{buttons}
); } diff --git a/src/Components/OrganizationDashboard/OrganizationDashboard.js b/src/Components/OrganizationDashboard/OrganizationDashboard.js index 6ae865c..ead870e 100644 --- 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

No organization data available.

; } - const organization = data.organization; + const { + name, + contactPhone, + contactEmail, + streetAddress, + website, + city, + state, + zip, + } = data.organization; return (
-

Welcome, {organization.name}!

- +

Welcome, {name}!

Aid Requests

{aidRequests.map(request => ( - + ))}

Organization Details

-

Phone: {organization.contactPhone}

-

Email: {organization.contactEmail}

-

Address: {organization.streetAddress}

-

Website: {organization.website}

-

City: {organization.city}

-

State: {organization.state}

-

ZIP: {organization.zip}

- +

Phone: {contactPhone}

+

Email: {contactEmail}

+

Address: {streetAddress}

+

Website: {website}

+

City: {city}

+

State: {state}

+

ZIP: {zip}

+
- ); } diff --git a/src/Components/OrganizationDashboard/OrganizationDashboard.scss b/src/Components/OrganizationDashboard/OrganizationDashboard.scss index af1f068..98fa0b8 100644 --- 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 index e69de29..e08f0c2 100644 --- 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 + } + } + } +`;