From e74d0112c8e769c5d53d7bd782c811a722517068 Mon Sep 17 00:00:00 2001
From: Colbe Roberson <cgr28@njit.edu>
Date: Thu, 29 Jun 2023 13:30:34 -0400
Subject: [PATCH 1/4] created Chip component

---
 frontend/src/components/Chip.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 frontend/src/components/Chip.jsx

diff --git a/frontend/src/components/Chip.jsx b/frontend/src/components/Chip.jsx
new file mode 100644
index 0000000..57dc831
--- /dev/null
+++ b/frontend/src/components/Chip.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function Chip(props) {
+  const { label } = props;
+
+  return (
+    <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
+      {label}
+    </span>
+  );
+}
+
+Chip.propTypes = {
+  label: PropTypes.string.isRequired,
+};

From 64659622367c7c5435936bd87f2456bfd9e62e87 Mon Sep 17 00:00:00 2001
From: Colbe Roberson <cgr28@njit.edu>
Date: Thu, 29 Jun 2023 13:32:18 -0400
Subject: [PATCH 2/4] updated chips with Chip component

---
 frontend/src/components/Package.jsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Package.jsx b/frontend/src/components/Package.jsx
index 36882a8..01b8c3d 100644
--- a/frontend/src/components/Package.jsx
+++ b/frontend/src/components/Package.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import Chip from './Chip';
 
 export default function Package(props) {
   const { data, showRequest } = props;
@@ -31,10 +32,7 @@ export default function Package(props) {
       </div>
       {showRequest ? (
         <div className="flex items-center px-6 py-4 justify-end">
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
-            {data.quantityAvailable ?? '0'}
-            {' available'}
-          </span>
+          <Chip label={`${data.quantityAvailable ?? '0'} available`} />
           <Link to={`request/${data._id}`}>
             <button
               type="button"
@@ -47,10 +45,9 @@ export default function Package(props) {
         </div>
       ) : (
         <div className="flex items-center px-6 py-4 justify-end">
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
-            {data.requests ? data.requests.length : '0'}
-            {' requested'}
-          </span>
+          <Chip
+            label={`${data.requests ? data.requests.length : '0'} requested`}
+          />
         </div>
       )}
     </div>

From 4bfacece697c7fd2c67797d7e75a1649ffefdbf8 Mon Sep 17 00:00:00 2001
From: Colbe Roberson <cgr28@njit.edu>
Date: Fri, 7 Jul 2023 18:31:57 -0400
Subject: [PATCH 3/4] only account for unfulfilled keys in requests

---
 frontend/src/components/PackageGenerator.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/PackageGenerator.jsx b/frontend/src/components/PackageGenerator.jsx
index 0f87ac5..a0b496d 100644
--- a/frontend/src/components/PackageGenerator.jsx
+++ b/frontend/src/components/PackageGenerator.jsx
@@ -32,6 +32,7 @@ export default function PackageGenerator(props) {
           ...item,
           key: index,
         }));
+        dataWithKey.filter((item) => item.fulfilled === 0);
         setRequestData(dataWithKey);
       });
   }, []);

From a1216f80d9ff961ea17d580d7c3b2c95505c16e1 Mon Sep 17 00:00:00 2001
From: Colbe Roberson <cgr28@njit.edu>
Date: Fri, 7 Jul 2023 18:39:42 -0400
Subject: [PATCH 4/4] only display available chip

---
 frontend/src/components/Package.jsx | 30 +++++++++++++----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Package.jsx b/frontend/src/components/Package.jsx
index 01b8c3d..4933156 100644
--- a/frontend/src/components/Package.jsx
+++ b/frontend/src/components/Package.jsx
@@ -30,26 +30,22 @@ export default function Package(props) {
           </span>
         </div>
       </div>
-      {showRequest ? (
+      {
         <div className="flex items-center px-6 py-4 justify-end">
           <Chip label={`${data.quantityAvailable ?? '0'} available`} />
-          <Link to={`request/${data._id}`}>
-            <button
-              type="button"
-              className="bg-primary hover:bg-accent-blue text-black font-bold py-2 px-4 rounded"
-            >
-              {/* TODO: Disable button if quantityAvailable < 1 */}
-              Request
-            </button>
-          </Link>
+          {showRequest && (
+            <Link to={`request/${data._id}`}>
+              <button
+                type="button"
+                className="bg-primary hover:bg-accent-blue text-black font-bold py-2 px-4 rounded"
+              >
+                {/* TODO: Disable button if quantityAvailable < 1 */}
+                Request
+              </button>
+            </Link>
+          )}
         </div>
-      ) : (
-        <div className="flex items-center px-6 py-4 justify-end">
-          <Chip
-            label={`${data.requests ? data.requests.length : '0'} requested`}
-          />
-        </div>
-      )}
+      }
     </div>
   );
 }