Refugee-Aid-Capstone · Sulton88Mehron90 · Nov 16, 2023 · Nov 16, 2023 · Nov 19, 2023 · Nov 30, 2023
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <div>
     <h1 style="color:red; display: inline;">
       Refuge
-         <img src="https://github.com/Refugee-Aid-Capstone/refugee-aid-fe/blob/main/src/images/refuge.png" alt="refuge logo" width="105" style="margin-left: 5px; border-radius: 50%; vertical-align: middle;">
+         <img src="https://github.com/Refugee-Aid-Capstone/refugee-aid-fe/blob/main/src/images/refugee-aid.PNG" alt="refuge logo" width="105" style="margin-left: 5px; border-radius: 50%; vertical-align: middle;">
     </h1>
 </div>
 

diff --git a/public/index.html b/public/index.html
@@ -39,7 +39,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Refuge</title>
+    <title>Refugee Aid</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/Components/App/App.js b/src/Components/App/App.js
@@ -1,13 +1,14 @@
-import { useState } from 'react';
-import { Route, Routes, useNavigate, } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 import NavBar from '../NavBar/NavBar';
 import Homepage from '../Homepage/Homepage';
 import OrganizationDashboard from '../OrganizationDashboard/OrganizationDashboard';
 import ProvideAidPage from '../ProvideAidPage/ProvideAidPage';
 import Error404 from '../ErrorHandling/Error404';
 import Error500 from '../ErrorHandling/Error500';
 import GeneralError from '../ErrorHandling/GeneralError';
-import Contact from '../Contact/Contact'
+import Contact from '../Contact/Contact';
+import CareRequestForm from '../CareRequestForm/CareRequestForm';
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -31,6 +32,7 @@ function App() {
         <Route exact path='/Contact' element={<Contact />} />
         <Route exact path='/provideAid' element={<ProvideAidPage />} />
         <Route exact path='/OrganizationDashboard' element={<OrganizationDashboard orgId={99} />} />
+        <Route path='/care-request' element={<CareRequestForm />} />
         <Route path='/error500' element={<Error500 />} />
         {window.location.pathname === '/500-test' && (
           <Route path="/500-test" element={<Error500 />} />

diff --git a/src/Components/CareRequestForm/CareRequestForm.js b/src/Components/CareRequestForm/CareRequestForm.js
@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import '../CareRequestForm/CareRequestForm.scss';
+import { useMutation } from '@apollo/client';
+import { CREATE_AID_REQUEST } from '../../apollo-client/mutations';
+import Spinner from '../Spinner/Spinner';
+
+function CareRequestForm({ orgId }) { 
+
+    console.log(orgId)
+
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    aidType: '',
+    description: '',
+    language: '',
+  });
+  const [errorMessage, setErrorMessage] = useState('');
+  const [createAidRequest, { loading }] = useMutation(CREATE_AID_REQUEST);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!formData.aidType || !formData.description) {
+      setErrorMessage('Please fill in all required fields.');
+      return;
+    }
+
+    createAidRequest({
+      variables: {
+        aidType: formData.aidType,
+        description: formData.description,
+        organizationId: parseInt(orgId, 10), 
+        language: formData.language || null,
+      },
+    })
+      .then(() => navigate('/organization-dashboard'))
+      .catch((err) => {
+        console.error('Error creating aid request:', err);
+        setErrorMessage(`Failed to create aid request: ${err.message}`);
+      });
+  };
+
+  return (
+    <div className='care-request-form-container'>
+      <form onSubmit={handleSubmit} className='care-request-form'>
+        {/* Aid Type Field */}
+        <div className='form-group'>
+          <label htmlFor='aidType'>Aid Type:</label>
+          <select
+            id='aidType'
+            name='aidType'
+            value={formData.aidType}
+            onChange={handleChange}
+            className='form-control'
+          >
+            <option value=''>Select Aid Type</option>
+            <option value='food'>Food</option>
+            <option value='medical'>Medical</option>
+            <option value='legal'>Legal</option>
+            <option value='language'>Language</option>
+            <option value='other'>Other</option>
+          </select>
+        </div>
+        {/* Description Field */}
+        <div className='form-group'>
+          <label htmlFor='description'>Description:</label>
+          <textarea
+            id='description'
+            name='description'
+            value={formData.description}
+            onChange={handleChange}
+            className='form-control'
+          />
+        </div>
+        {/* Language Field (Optional) */}
+        <div className='form-group'>
+          <label htmlFor='language'>Language (optional):</label>
+          <input
+            id='language'
+            name='language'
+            value={formData.language}
+            onChange={handleChange}
+            className='form-control'
+          />
+        </div>
+        {/* Error Message */}
+        {errorMessage && <div className='error-message'>{errorMessage}</div>}
+        {/* Submit Button */}
+        {loading ? (
+          <Spinner />
+        ) : (
+          <button type='submit' className='submit-button' disabled={loading}>
+            Submit Request
+          </button>
+        )}
+      </form>
+    </div>
+  );
+}
+
+export default CareRequestForm;
+
diff --git a/src/Components/CareRequestForm/CareRequestForm.scss b/src/Components/CareRequestForm/CareRequestForm.scss
@@ -0,0 +1,56 @@
+.care-request-form-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+.care-request-form {
+  background-color: #f3f3f3;
+  padding: 2rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  max-width: 500px;
+
+  .form-group {
+    margin-bottom: 1.5rem;
+
+    label {
+      display: block;
+      margin-bottom: 0.5rem;
+    }
+
+    .form-control {
+      width: 100%;
+      padding: 0.5rem;
+      border-radius: 5px;
+      border: 1px solid #ced4da;
+
+      &:focus {
+        border-color: #80bdff;
+        outline: 0;
+        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+      }
+    }
+  }
+
+.error-message {
+  color: red;
+  margin-top: 10px;
+}
+
+  .submit-button {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+}