Skip to content

Commit d372794

Browse files
prooflesbenprooflesben
authored
Merge pull request #182 from Code-4-Community/remove-dropdown
Remove dropdown
2 parents 9bb57e1 + a18fa30 commit d372794

File tree

6 files changed

+143
-131
lines changed

6 files changed

+143
-131
lines changed

‎frontend/src/main-page/dashboard/CsvExportButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState } from "react";
22
import { downloadCsv, CsvColumn } from "../../utils/csvUtils";
33
import { Grant } from "../../../../middle-layer/types/Grant";
4-
import { useProcessGrantData } from "../../main-page/grants/filter-bar/processGrantData";
4+
import { ProcessGrantData } from "../../main-page/grants/filter-bar/processGrantData";
55
import { observer } from "mobx-react-lite";
66
import "../grants/styles/GrantButton.css";
77
import { getAppStore } from "../../external/bcanSatchel/store";
@@ -77,7 +77,7 @@ const columns: CsvColumn<Grant>[] = [
7777
const CsvExportButton: React.FC = observer(() => {
7878
const { yearFilter } = getAppStore();
7979
const [isProcessing, setIsProcessing] = useState(false);
80-
const { grants } = useProcessGrantData();
80+
const { grants } = ProcessGrantData();
8181
const onClickDownload = async () => {
8282
setIsProcessing(true);
8383

‎frontend/src/main-page/grants/GrantPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function GrantPage() {
2626
<div className="top-half">
2727
</div>
2828
<div className="flex justify-end align-middle p-4 gap-4">
29-
<GrantSearch onGrantSelect={setSelectedGrant} />
29+
<GrantSearch />
3030
<AddGrantButton onClick={() => setShowNewGrantModal(true)} />
3131
</div>
3232
<div className="grid grid-cols-5 gap-8 px-4">

‎frontend/src/main-page/grants/filter-bar/GrantSearch.tsx‎

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,42 @@
11
import { IoIosSearch } from "react-icons/io";
2-
import { useEffect, useState } from "react";
2+
import {
3+
// useEffect,
4+
useState } from "react";
35
import Fuse from "fuse.js";
46
import { updateSearchQuery } from "../../../external/bcanSatchel/actions";
57
import { Grant } from "../../../../../middle-layer/types/Grant";
6-
import { api } from "../../../api";
8+
// import { api } from "../../../api";
79
import { Input } from "@chakra-ui/react";
810

911

10-
function GrantSearch({ onGrantSelect }: any) {
12+
function GrantSearch() {
1113
const [userInput, setUserInput] = useState("");
12-
const [grants, setGrants] = useState<Grant[]>([]);
13-
const [showDropdown, setShowDropdown] = useState(false);
14-
const [dropdownGrants, setDropdownGrants] = useState<Grant[]>([]);
14+
// @ts-ignore
15+
const [grants, _setGrants] = useState<Grant[]>([]);
16+
// const [showDropdown, setShowDropdown] = useState(false);
17+
// const [dropdownGrants, setDropdownGrants] = useState<Grant[]>([]);
1518

16-
useEffect(() => {
17-
fetchGrants();
18-
document.addEventListener("click", handleClickOutside);
19-
return () => {
20-
document.removeEventListener("click", handleClickOutside);
21-
};
22-
}, []);
19+
// useEffect(() => {
20+
// fetchGrants();
21+
// document.addEventListener("click", handleClickOutside);
22+
// return () => {
23+
// document.removeEventListener("click", handleClickOutside);
24+
// };
25+
// }, []);
2326

24-
const fetchGrants = async () => {
25-
try {
26-
const response = await api(`/grant`, { method: "GET" });
27-
const data: Grant[] = await response.json();
28-
const formattedData: Grant[] = data.map((grant: any) => ({
29-
...grant,
30-
organization_name: grant.organization || "Unknown Organization",
31-
}));
32-
setGrants(formattedData);
33-
} catch (error) {
34-
console.error("Error fetching grants:", error);
35-
}
36-
};
27+
// const fetchGrants = async () => {
28+
// try {
29+
// const response = await api(`/grant`, { method: "GET" });
30+
// const data: Grant[] = await response.json();
31+
// const formattedData: Grant[] = data.map((grant: any) => ({
32+
// ...grant,
33+
// organization_name: grant.organization || "Unknown Organization",
34+
// }));
35+
// setGrants(formattedData);
36+
// } catch (error) {
37+
// console.error("Error fetching grants:", error);
38+
// }
39+
// };
3740

3841
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
3942
setUserInput(e.target.value);
@@ -42,38 +45,39 @@ function GrantSearch({ onGrantSelect }: any) {
4245

4346
const performSearch = (query: string) => {
4447
if (!query) {
45-
setDropdownGrants([]);
46-
setShowDropdown(false);
48+
// setDropdownGrants([]);
49+
// setShowDropdown(false);
4750
updateSearchQuery("");
4851
return;
4952
}
5053
const fuse = new Fuse<Grant>(grants, {
5154
keys: ["organization_name"],
5255
threshold: 0.3,
5356
});
54-
const results = fuse.search(query).map((res) => res.item);
57+
// const results =
58+
fuse.search(query).map((res) => res.item);
5559
updateSearchQuery(query);
5660

57-
setDropdownGrants(results.slice(0, 5));
58-
setShowDropdown(true);
61+
// setDropdownGrants(results.slice(0, 5));
62+
// setShowDropdown(true);
5963
};
6064

61-
const handleSelectGrant = (selectedGrant: Grant) => {
62-
setUserInput(selectedGrant.organization);
63-
updateSearchQuery(selectedGrant.organization);
64-
setShowDropdown(false);
65-
onGrantSelect?.(selectedGrant);
66-
};
65+
// const handleSelectGrant = (selectedGrant: Grant) => {
66+
// setUserInput(selectedGrant.organization);
67+
// updateSearchQuery(selectedGrant.organization);
68+
// // setShowDropdown(false);
69+
// onGrantSelect?.(selectedGrant);
70+
// };
6771

68-
const handleClickOutside = (event: MouseEvent) => {
69-
const target = event.target as HTMLElement;
70-
if (
71-
!target.closest(".search-container") &&
72-
!target.closest(".dropdown-container")
73-
) {
74-
setShowDropdown(false);
75-
}
76-
};
72+
// const handleClickOutside = (event: MouseEvent) => {
73+
// const target = event.target as HTMLElement;
74+
// // if (
75+
// // !target.closest(".search-container") &&
76+
// // !target.closest(".dropdown-container")
77+
// // ) {
78+
// // setShowDropdown(false);
79+
// // }
80+
// };
7781

7882
return (
7983
<div className="search-bar-main-container">
@@ -101,17 +105,17 @@ function GrantSearch({ onGrantSelect }: any) {
101105
className="search-input"
102106
onChange={handleInputChange}
103107
value={userInput}
104-
onFocus={() => setShowDropdown(dropdownGrants.length > 0)}
108+
// onFocus={() => setShowDropdown(dropdownGrants.length > 0)}
105109
style={{ paddingLeft: "2rem" }} // make room for the icon
106110
onKeyDown={(e) => {
107111
if (e.key === "Enter") {
108112
e.preventDefault();
109-
setShowDropdown(false);
113+
// setShowDropdown(false);
110114
}
111115
}}
112116
/>
113117

114-
{showDropdown && (
118+
{/* {showDropdown && (
115119
<div className="dropdown-container">
116120
{dropdownGrants.length > 0 ? (
117121
dropdownGrants.map((grant, index) => (
@@ -127,7 +131,7 @@ function GrantSearch({ onGrantSelect }: any) {
127131
<div className="dropdown-item">No results found</div>
128132
)}
129133
</div>
130-
)}
134+
)} */}
131135
</div>
132136
</form>
133137
</div>

‎frontend/src/main-page/grants/filter-bar/processGrantData.ts‎

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { useEffect, useState } from "react";
1+
import { useEffect } from "react";
22
import { getAppStore } from "../../../external/bcanSatchel/store";
33
import { fetchAllGrants } from "../../../external/bcanSatchel/actions";
44
import { Grant } from "../../../../../middle-layer/types/Grant";
55
import {
66
dateRangeFilter,
77
filterGrants,
8-
searchFilter,
8+
yearFilterer,
99
statusFilter,
1010
} from "./grantFilters";
1111
import { sortGrants } from "./grantSorter.ts";
@@ -28,38 +28,24 @@ const fetchGrants = async () => {
2828
// contains callbacks for sorting and filtering grants
2929
// stores state for list of grants/filter
3030
export const ProcessGrantData = () => {
31-
const {
32-
allGrants,
33-
filterStatus,
34-
startDateFilter,
35-
endDateFilter,
36-
searchQuery,
37-
} = getAppStore();
38-
const [grants, setGrants] = useState<Grant[]>([]);
31+
const { allGrants, filterStatus, startDateFilter, endDateFilter, yearFilter } = getAppStore();
3932

40-
// init grant list
33+
// fetch grants on mount if empty
4134
useEffect(() => {
42-
fetchGrants();
43-
}, []);
35+
if (allGrants.length === 0) fetchGrants();
36+
}, [allGrants.length]);
4437

45-
// when filter changes, update grant list state
46-
useEffect(() => {
47-
const filters = [
48-
statusFilter(filterStatus),
49-
dateRangeFilter(startDateFilter, endDateFilter),
50-
searchFilter(searchQuery),
51-
];
52-
const filtered = filterGrants(allGrants, filters);
53-
setGrants(filtered);
54-
// current brute force update everything when an attribute changes
55-
}, [allGrants, filterStatus, startDateFilter, endDateFilter, searchQuery]);
38+
// compute filtered grants dynamically — no useState needed
39+
const filteredGrants = filterGrants(allGrants, [
40+
statusFilter(filterStatus),
41+
dateRangeFilter(startDateFilter, endDateFilter),
42+
yearFilterer(yearFilter),
43+
]);
5644

57-
// sorts grants based on attribute given, updates grant list state
45+
// sorting callback
5846
const onSort = (header: keyof Grant, asc: boolean) => {
59-
const sorted = sortGrants(grants, header, asc);
60-
setGrants(sorted);
47+
return sortGrants(filteredGrants, header, asc);
6148
};
6249

63-
// calculates total # of pages for pagination
64-
return { grants, onSort };
50+
return { grants: filteredGrants, onSort };
6551
};

0 commit comments

Comments
 (0)