221 dev bug miscellaneous frontend fixes

frontend/src/custom/RingButton.tsx

@@ -3,44 +3,51 @@ import "../styles/button.css";
 
 /* Maintained with button.css */
 export enum ButtonColorOption {
-    GREEN = "#5AB911",
+  GREEN = "#5AB911",
   GRAY = "#D3D3D3",
   ORANGE = "#F7A781",
 }
 
-
-
 /* API for components to setup a button with expected system colors */
 interface RingButtonProps {
-    /* The text to display for the button */
-    text: string;
+  /* The text to display for the button */
+  text: string;
 
-    /* The color of the button */
-    color: ButtonColorOption;
+  /* The color of the button */
+  color: ButtonColorOption;
 }
 
 /* Generic Button Component With:
-    * Text
-    * Color
-*/
-export default function RingButton ({text, color}: RingButtonProps){
-    return (
-        <>
-        { ButtonColorOption.GREEN === color &&
-        <Button className="green-button button-default">
-            {text}
+ * Text
+ * Color
+ */
+export default function RingButton({ text, color }: RingButtonProps) {
+  return (
+    <>
+      {ButtonColorOption.GREEN === color && (
+        <Button
+          className="green-button button-default"
+          style={{ width: "100%", border: "none", cursor: "default" }}
+        >
+          {text}
         </Button>
-        }
-        { ButtonColorOption.ORANGE === color &&
-        <Button className="orange-button button-default">
-            {text}
+      )}
+      {ButtonColorOption.ORANGE === color && (
+        <Button
+          className="orange-button button-default"
+          style={{ width: "100%", border: "none", cursor: "default" }}
+        >
+          {text}
         </Button>
-        }
-        { ButtonColorOption.GRAY === color &&
-        <Button className="gray-button button-default">
-            {text}
+      )}
+      {ButtonColorOption.GRAY === color && (
+        <Button
+          className="gray-button button-default"
+          style={{ width: "100%", border: "none", cursor: "default" }}
+        >
+          {text}
         </Button>
-        }
-        </>
-    )
-}
+      )}
+    </>
+  );
+}

frontend/src/main-page/grants/filter-bar/grantSorter.ts

@@ -1,33 +1,53 @@
 import { Grant } from "../../../../../middle-layer/types/Grant";
 
 // contains business logic for sorting grants based on subset of grant attributes
-export const sortGrants = (grants: Grant[], header: keyof Grant, asc: boolean): Grant[] => {
-    const handleNullOrUndefined = (a: Grant, b: Grant, header: keyof Grant) => {
-        if (a[header] === null || a[header] === undefined) return 1;
-        if (b[header] === null || b[header] === undefined) return -1;
-        return 0;
-    };
+export const sortGrants = (
+  grants: Grant[],
+  header: keyof Grant,
+  asc: boolean
+): Grant[] => {
+  const handleNullOrUndefined = (a: Grant, b: Grant, header: keyof Grant) => {
+    if (a[header] === null || a[header] === undefined) return 1;
+    if (b[header] === null || b[header] === undefined) return -1;
+    return 0;
+  };
 
-    return [...grants].sort((a, b) => {
-        const nullCheck = handleNullOrUndefined(a, b, header);
-        if (nullCheck !== 0) return nullCheck;
+  return [...grants].sort((a, b) => {
+    const nullCheck = handleNullOrUndefined(a, b, header);
+    if (nullCheck !== 0) return nullCheck;
 
-        if (header === "application_deadline") {
-            const dateA = new Date(a[header]);
-            const dateB = new Date(b[header]);
-            if (isNaN(dateA.getTime())) return 1;
-            if (isNaN(dateB.getTime())) return -1;
-            return asc ? dateA.getTime() - dateB.getTime() : dateB.getTime() - dateA.getTime();
-        }
+    if (header === "application_deadline") {
+      const dateA = new Date(a[header]);
+      const dateB = new Date(b[header]);
+      if (isNaN(dateA.getTime())) return 1;
+      if (isNaN(dateB.getTime())) return -1;
+      return asc
+        ? dateA.getTime() - dateB.getTime()
+        : dateB.getTime() - dateA.getTime();
+    }
 
-        if (typeof a[header] === "string" && typeof b[header] === "string") {
-            return asc ? a[header].localeCompare(b[header]) : b[header].localeCompare(a[header]);
-        }
+    if (header === "does_bcan_qualify") {
+      return a[header] === b[header]
+        ? 0
+        : asc
+        ? a[header]
+          ? -1
+          : 1
+        : a[header]
+        ? 1
+        : -1;
+    }
 
-        if (typeof a[header] === "number" && typeof b[header] === "number") {
-            return asc ? a[header] - b[header] : b[header] - a[header];
-        }
+    if (typeof a[header] === "string" && typeof b[header] === "string") {
+      return asc
+        ? a[header].localeCompare(b[header])
+        : b[header].localeCompare(a[header]);
+    }
 
-        return 0;
-    });
+    if (typeof a[header] === "number" && typeof b[header] === "number") {
+      return asc ? a[header] - b[header] : b[header] - a[header];
+    }
+
+    return 0;
+  });
 };