Grant Sorting

frontend/src/grant-info/components/GrantItem.tsx

@@ -1,83 +1,83 @@
-import React, {useState } from 'react';
-import './styles/GrantItem.css';
-import { GrantAttributes } from './GrantAttributes';
-import GrantDetails from './GrantDetails';
-import {StatusContext} from './StatusContext';
-import {Grant} from "@/external/bcanSatchel/store.ts";
+import React, { useState } from "react";
+import "./styles/GrantItem.css";
+import { GrantAttributes } from "./GrantAttributes";
+import GrantDetails from "./GrantDetails";
+import { StatusContext } from "./StatusContext";
+import { Grant } from "@/external/bcanSatchel/store.ts";
 
 interface GrantItemProps {
-    grant: Grant;
+  grant: Grant;
 }
 
 // TODO: [JAN-14] Make uneditable field editable (ex: Description, Application Reqs, Additional Notes)
-const GrantItem: React.FC<GrantItemProps> = ({grant}) => {
+const GrantItem: React.FC<GrantItemProps> = ({ grant }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [curStatus, setCurStatus] = useState(grant.status);
 
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+  // when toggleEdit gets saved, then updates the backend to update itself with whatever
+  // is shown in the front-end
 
-    const [isExpanded, setIsExpanded] = useState(false);
-    const [isEditing, setIsEditing] = useState(false);
-    const [curStatus, setCurStatus] = useState(grant.status);
+  const toggleEdit = async () => {
+    if (isEditing) {
+      // if you are saving
+      try {
+        const response = await fetch(
+          "http://localhost:3001/grant/save/status",
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ status: curStatus }),
+          }
+        );
+        const result = await response.json();
+        console.log(result);
+      } catch (err) {
+        console.error("Error saving data:", err);
+      }
+      // holding result for now
+    }
+    setIsEditing(!isEditing);
+  };
 
-
-    const toggleExpand = () => {
-        setIsExpanded(!isExpanded);
-    };
-    // when toggleEdit gets saved, then updates the backend to update itself with whatever
-    // is shown in the front-end
-
-    const toggleEdit = async () => {
-        if(isEditing) { // if you are saving
-            try {
-
-                const response = await fetch('http://localhost:3001/grant/save/status', {
-                    method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({status: curStatus}),
-                });
-                const result = await response.json();
-                console.log(result);
-            } catch(err) {
-                console.error('Error saving data:', err);
-            }
-            // holding result for now
-        }
-        setIsEditing(!isEditing);
-    };
-
-    return (
-        // class name with either be grant-item or grant-item-expanded
-        <div className='grant-item-wrapper'>
-            <ul className={`grant-summary ${isExpanded ? 'expanded' : ''}`} onClick={toggleExpand}>
-                <li className="grant-name">{grant.organization_name}</li>
-                <li className="application-date">{"no attribute for app-date"}</li>
-                <li className="status">{grant.status}</li>
-                <li className="amount">${grant.amount}</li>
-                <li className="restriction-status">{grant.restrictions}</li>
-            </ul>
-            <div className={`grant-body ${isExpanded ? 'expanded' : ''}`}>
-                {isExpanded && (
-                    <div className="grant-description">
-                        <h2>Community Development Initiative Grant</h2>
-                        <div className = 'grant-content'>
-                            <StatusContext.Provider value={{curStatus, setCurStatus}}>
-                                <GrantAttributes isEditing={isEditing} />
-                                <GrantDetails/>
-                            </StatusContext.Provider>
-                        </div>
-                        <div className="bottom-buttons">
-                        <button className="done-button" onClick={toggleEdit}>
-                                {isEditing ? 'SAVE' : 'EDIT'}
-                            </button>
-                    </div>
-                        </div>
-
-                    )}
+  return (
+    // class name with either be grant-item or grant-item-expanded
+    <div className="grant-item-wrapper">
+      <ul
+        className={`grant-summary ${isExpanded ? "expanded" : ""}`}
+        onClick={toggleExpand}
+      >
+        <li className="grant-name">{grant.organization_name}</li>
+        <li className="application-date">{grant.deadline}</li>
+        <li className="status">{grant.status}</li>
+        <li className="amount">{grant.amount && "$" + grant.amount}</li>
+        <li className="restriction-status">{grant.restrictions}</li>
+      </ul>
+      <div className={`grant-body ${isExpanded ? "expanded" : ""}`}>
+        {isExpanded && (
+          <div className="grant-description">
+            <h2>Community Development Initiative Grant</h2>
+            <div className="grant-content">
+              <StatusContext.Provider value={{ curStatus, setCurStatus }}>
+                <GrantAttributes isEditing={isEditing} />
+                <GrantDetails />
+              </StatusContext.Provider>
             </div>
+            <div className="bottom-buttons">
+              <button className="done-button" onClick={toggleEdit}>
+                {isEditing ? "SAVE" : "EDIT"}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
 
-        </div>
-
-    )
-}
-
-export default GrantItem;
+export default GrantItem;

frontend/src/grant-info/components/GrantLabels.tsx

@@ -1,17 +1,60 @@
-import React from 'react';
-import './styles/GrantLabels.css'
+import React from "react";
+import "./styles/GrantLabels.css";
+import { Grant } from "../../external/bcanSatchel/store.ts";
+import { useState } from "react";
 
-const GrantLabels: React.FC = () => {
-    return (
-        <ul className="grant-labels">
-            <li></li>
-            <li className="grant-name">Grant Name</li>
-            <li className="application-date">Application Date</li>
-            <li className="status">Status</li>
-            <li className="amount">Amount</li>
-            <li className="restriction-status">Restricted vs. Unrestricted</li>
-        </ul>
-    )
-}
+const GrantLabels: React.FC<{
+  onSort: (header: keyof Grant, asc: boolean) => void;
+}> = ({ onSort }) => {
+  const [labels, setLabels] = useState({
+    header: "applicationDate",
+    asc: true,
+  });
 
-export default GrantLabels;
+  function buttonHandler(header: keyof Grant) {
+    const isAsc = labels.header == header ? !labels.asc : true;
+    onSort(header, isAsc);
+    setLabels({ header: header, asc: isAsc });
+  }
+
+  return (
+    <ul className="grant-labels">
+      <li>
+        <button
+          className="grant-name"
+          onClick={() => buttonHandler("organization_name")}
+        >
+          Grant Name
+        </button>
+      </li>
+      <li>
+        <button
+          className="application-date"
+          onClick={() => buttonHandler("deadline")}
+        >
+          Application Date
+        </button>
+      </li>
+      <li>
+        <button className="status" onClick={() => buttonHandler("status")}>
+          Status
+        </button>
+      </li>
+      <li>
+        <button className="amount" onClick={() => buttonHandler("amount")}>
+          Amount
+        </button>
+      </li>
+      <li>
+        <button
+          className="restriction-status"
+          onClick={() => buttonHandler("restrictions")}
+        >
+          Restricted vs. Unrestricted
+        </button>
+      </li>
+    </ul>
+  );
+};
+
+export default GrantLabels;