Added sorting grants by clicking on header

Code-4-Community · Feb 16, 2025 · 2ffecab · 2ffecab
1 parent fe1c6f8
commit 2ffecab
Show file tree

Hide file tree

Showing 8 changed files with 268 additions and 183 deletions.
diff --git a/frontend/src/Bell.tsx b/frontend/src/Bell.tsx
@@ -3,71 +3,74 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBell } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
 
-
 // get current user id
 // const currUserID = sessionStorage.getItem('userId');
-const currUserID = 'bcanuser33'
+const currUserID = "bcanuser33";
 
 const BellButton = () => {
+  // stores notifications for the current user
+  const [notifications, setNotifications] = useState<any[]>([]);
 
+  // determines whether bell has been clicked
+  const [isClicked, setClicked] = useState(false);
 
-    // stores notifications for the current user
-    const [notifications, setNotifications] = useState<any[]>([])
-
-    // determines whether bell has been clicked
-    const [isClicked, setClicked] = useState(false)
-
-    // logs the notifications for the current user whenever they are fetched
-    useEffect(() => {
-        console.log(notifications)
-    }, [notifications]);
+  // logs the notifications for the current user whenever they are fetched
+  useEffect(() => {
+    console.log(notifications);
+  }, [notifications]);
 
+  // function that handles when button is clicked and fetches notifications
+  const handleClick = async () => {
+    const response = await fetch(
+      `http://localhost:3001/notifications/user/${currUserID}`,
+      {
+        method: "GET",
+      }
+    );
+    console.log(response);
+    const currNotifications = await response.json();
+    setNotifications(currNotifications);
+    setClicked(!isClicked);
+    return notifications;
+  };
 
-    // function that handles when button is clicked and fetches notifications
-    const handleClick = async () => {
-        const response = await fetch(`http://localhost:3001/notifications/user/${currUserID}`, {
-            method: 'GET'
-        });
-        console.log(response)
-        const currNotifications = await response.json()
-        setNotifications(currNotifications)
-        setClicked(!isClicked)
-        return notifications
-    }
-
-    return (
-        <>
-            <button className={`bell-button ${isClicked ? 'hovered' : ''}`} onClick={handleClick}>
-                <FontAwesomeIcon icon={faBell} />
+  return (
+    <>
+      <button
+        className={`bell-button ${isClicked ? "hovered" : ""}`}
+        onClick={handleClick}
+      >
+        <FontAwesomeIcon icon={faBell} />
+      </button>
+      {isClicked && (
+        <div className="notification-modal">
+          <div className="notification-modal-content">
+            <h4>
+              {currUserID ? `Notifications for ${currUserID}` : "Notifications"}
+            </h4>
+            {notifications.length > 0 ? (
+              <ul>
+                {notifications.map((notification, index) => (
+                  <li key={index} className="notification-item">
+                    {notification.message} <br />
+                    <small>Alert Time: {notification.alertTime}</small>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p>No new notifications</p>
+            )}
+            <button
+              onClick={() => setClicked(false)}
+              className="notification-close-button"
+            >
+              Close
             </button>
-            {isClicked &&
-                <div className="notification-modal">
-                    <div className="notification-modal-content">
-                        <h4>
-                            {currUserID ? `Notifications for ${currUserID}` : "Notifications"}
-                        </h4>
-                        {notifications.length > 0 ? (
-                            <ul>
-                                {notifications.map((notification, index) => (
-                                    <li key={index} className="notification-item">
-                                        {notification.message} <br />
-                                        <small>Alert Time: {notification.alertTime}</small>
-                                    </li>
-                                ))}
-                            </ul>
-                        ) : (
-                            <p>No new notifications</p>
-                        )}
-                        <button
-                            onClick={() => setClicked(false)}
-                            className="notification-close-button"
-                        >
-                            Close
-                        </button>
-                    </div>
-                </div>}
-        </>
-    );
+          </div>
+        </div>
+      )}
+    </>
+  );
 };
 
-export default BellButton;
+export default BellButton;
diff --git a/frontend/src/grant-info/components/GrantItem.tsx b/frontend/src/grant-info/components/GrantItem.tsx
@@ -1,58 +1,65 @@
-import React, {useState} from 'react';
-import './styles/GrantItem.css';
-import { GrantAttributes } from './GrantAttributes';
-import GrantDetails from './GrantDetails';
+import React, { useState } from "react";
+import "./styles/GrantItem.css";
+import { GrantAttributes } from "./GrantAttributes";
+import GrantDetails from "./GrantDetails";
 
-interface GrantItemProps {
-    grantName: string;
-    applicationDate: string;
-    generalStatus: string;
-    amount: number;
-    restrictionStatus: string;
+export interface GrantItemProps {
+  grantName: string;
+  applicationDate: Date;
+  generalStatus: string;
+  amount: number;
+  restrictionStatus: string;
 }
 const GrantItem: React.FC<GrantItemProps> = (props) => {
-   const { grantName, applicationDate, generalStatus, amount, restrictionStatus } = props;
+  const {
+    grantName,
+    applicationDate,
+    generalStatus,
+    amount,
+    restrictionStatus,
+  } = props;
 
-   const [isExpanded, setIsExpanded] = useState(false);
-   const [isEditing, setIsEditing] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
 
-    const toggleExpand = () => {
-        setIsExpanded(!isExpanded);
-    };
-    const toggleEdit = () => setIsEditing((prev) => !prev);
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const toggleEdit = () => setIsEditing((prev) => !prev);
 
-    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">{grantName}</li>
-                <li className="application-date">{applicationDate}</li>
-                <li className="status">{generalStatus}</li>
-                <li className="amount">${amount}</li>
-                <li className="restriction-status">{restrictionStatus}</li>
-            </ul>
-            <div className={`grant-body ${isExpanded ? 'expanded' : ''}`}>
-                {isExpanded && (
-                    <div className="grant-description">
-                        <h2>Community Development Initiative Grant</h2>
-                        <div className = 'grant-content'>
-                        <GrantAttributes isEditing={isEditing} />
-                        <GrantDetails/>
-                        </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">{grantName}</li>
+        <li className="application-date">
+          {applicationDate.toISOString().split("T")[0]}
+        </li>
+        <li className="status">{generalStatus}</li>
+        <li className="amount">${amount}</li>
+        <li className="restriction-status">{restrictionStatus}</li>
+      </ul>
+      <div className={`grant-body ${isExpanded ? "expanded" : ""}`}>
+        {isExpanded && (
+          <div className="grant-description">
+            <h2>Community Development Initiative Grant</h2>
+            <div className="grant-content">
+              <GrantAttributes isEditing={isEditing} />
+              <GrantDetails />
             </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;
diff --git a/frontend/src/grant-info/components/GrantLabels.tsx b/frontend/src/grant-info/components/GrantLabels.tsx
@@ -1,17 +1,63 @@
-import React from 'react';
-import './styles/GrantLabels.css'
+import React from "react";
+import "./styles/GrantLabels.css";
+import { GrantItemProps } from "./GrantItem";
+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 GrantItemProps, asc: boolean) => void;
+}> = ({ onSort }) => {
+  const [labels, setLabels] = useState({
+    header: "applicationDate",
+    asc: true,
+  });
 
-export default GrantLabels;
+  function buttonHandler(header: keyof GrantItemProps) {
+    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("grantName")}
+        >
+          Grant Name
+        </button>
+      </li>
+      <li>
+        <button
+          className="application-date"
+          onClick={() => buttonHandler("applicationDate")}
+        >
+          Application Date
+        </button>
+      </li>
+      <li>
+        <button
+          className="status"
+          onClick={() => buttonHandler("generalStatus")}
+        >
+          Status
+        </button>
+      </li>
+      <li>
+        <button className="amount" onClick={() => buttonHandler("amount")}>
+          Amount
+        </button>
+      </li>
+      <li>
+        <button
+          className="restriction-status"
+          onClick={() => buttonHandler("restrictionStatus")}
+        >
+          Restricted vs. Unrestricted
+        </button>
+      </li>
+    </ul>
+  );
+};
+
+export default GrantLabels;