Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed start/end date and route connection #58

Merged
merged 3 commits into from
Nov 3, 2024
Merged

fixed start/end date and route connection #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
92888fb
fixed start/end date and route connection
aesteri Nov 3, 2024
421291d
fixed start/end date and route connection
aesteri Nov 3, 2024
be5a4dc
fixed start/end date and route connection
aesteri Nov 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 8 additions & 24 deletions src/components/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,6 @@ function SearchBarWithFilter({
const { name } = e.target;
const { value } = e.target;

const filt: SearchFilter = {
notes: "",
filename: "",
};

if (name == "") {
filt.notes = value;
filt.filename = value;
}

setSearchFilters((prevFilters) => ({
...prevFilters,
notes: filt.notes,
filename: filt.filename,
[name]: value,
}));

// Update local state based on input
switch (name) {
Expand All @@ -60,6 +44,9 @@ function SearchBarWithFilter({
case "afterDate":
setAfterDate(value);
break;
case "search_text":
setSearchTerm(value);
break;
default:
break;
}
Expand All @@ -69,14 +56,12 @@ function SearchBarWithFilter({
const handleClear = () => {
setSearchTerm("");
setSearchFilters({
notes: "",
filename: "",
searchText: "",
location: "",
eventType: "",
beforeDate: "",
afterDate: "",
});
setSearchTerm("");
setSelectedLocation("");
setSelectedEventType("");
setBeforeDate("");
Expand All @@ -85,7 +70,7 @@ function SearchBarWithFilter({
};

const handleSearch = () => {
setSearch((prev) => !prev);
setSearch(true);
};

return (
Expand All @@ -94,16 +79,15 @@ function SearchBarWithFilter({

<div className="search-filter-container">
<h1>Search and Filter Data</h1>

{/* Search Bar */}
<input
type="text"
name="search_text"
className="search-bar"
placeholder="Search by file name or notes..."
value={searchTerm}
onChange={(e) => {
handleFilterChange(e);
setSearchTerm(e.target.value);
}}
/>

Expand Down Expand Up @@ -144,7 +128,7 @@ function SearchBarWithFilter({
</label>

<label>
Before Date:
Start Date:
<input
type="date"
name="beforeDate"
Expand All @@ -155,7 +139,7 @@ function SearchBarWithFilter({
</label>

<label>
After Date:
End Date:
<input
type="date"
name="afterDate"
Expand Down
116 changes: 33 additions & 83 deletions src/routes/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import SearchBar from "@/components/SearchBar";
import "@/css/Root.css";
import DataTable from "@/components/DataTable";
import PreviewCard from "@/components/PreviewCard";
import { location } from "@/data/dataFilters";

export default function Root() {
const [filteredData, setFilteredData] = useState<MCAPFileInformation[]>();
Expand All @@ -14,9 +13,9 @@ export default function Root() {
eventType: "",
beforeDate: "",
afterDate: "",
searchText: "",
});
const [search, setSearch] = useState<boolean>(false);

const formatDate = (dateStr: string) => {
const [year, month, day] = dateStr.split("-");
if (month.length !== 2 || day.length !== 2 || year.length !== 4) {
Expand All @@ -26,109 +25,60 @@ export default function Root() {
};

const fetchData = async (filters: SearchFilter) => {
const { location, date, notes, eventType, filename } = filters;
const { location, date, eventType, searchText } = filters;
let { afterDate, beforeDate } = filters;

beforeDate = beforeDate ? formatDate(beforeDate) : undefined;
afterDate = afterDate ? formatDate(afterDate) : undefined;

const buildParams = (additionalParams: Record<string, string> = {}) => {
return {
...(location ? { location } : {}),
...(eventType ? { eventType } : {}),
...(date ? { date } : {}),
...(afterDate ? { after_date: afterDate } : {}),
...(beforeDate ? { before_date: beforeDate } : {}),
...additionalParams,
};
const params = {
...(location ? { location } : {}),
...(eventType ? { eventType } : {}),
...(date ? { date } : {}),
...(afterDate ? { after_date: afterDate } : {}),
...(beforeDate ? { before_date: beforeDate } : {}),
...(searchText ? { search_text: searchText } : {}),
};

if (!notes && !filename) {
const params = buildParams();
const queryString = new URLSearchParams(params).toString();

const res = await fetch(
`${import.meta.env.VITE_API_URL}/api/v2/mcaps?${queryString}`,
);
const data = await res.json();
return data.data;
}

const promises: Promise<Response>[] = [];

if (notes) {
const paramsNotes = buildParams({ notes });
const queryStringNotes = new URLSearchParams(paramsNotes).toString();
promises.push(
fetch(
`${import.meta.env.VITE_API_URL}/api/v2/mcaps?${queryStringNotes}`,
),
);
}

if (filename) {
const paramsFilename = buildParams({ filename });
const queryStringFilename = new URLSearchParams(
paramsFilename,
).toString();
promises.push(
fetch(
`${import.meta.env.VITE_API_URL}/api/v2/mcaps?${queryStringFilename}`,
),
);
}

const results = await Promise.all(promises);
const data = await Promise.all(results.map((res) => res.json()));

const combinedData = data.flatMap((entry) => entry.data || []);
const queryString = new URLSearchParams(params).toString();

const uniqueData = Array.from(
new Set(combinedData.map((item) => item.id)),
).map((id) => combinedData.find((item) => item.id === id));

return uniqueData;
const res = await fetch(
`${import.meta.env.VITE_API_URL}/api/v2/mcaps?${queryString}`,
);

const data = await res.json();
return data.data;
};

const assignData = async () => {
const apiData = await Promise.all(
location.map(async (loc: string) => await fetchData({ location: loc })),
);
const validData = apiData.filter((data) => data !== null);

const flattenedData = validData.flat();

const sortedData = flattenedData.sort((a, b) => {
const [monthA, dayA, yearA] = a.date.split("-");
const [monthB, dayB, yearB] = b.date.split("-");
const dateA = new Date(`${yearA}-${monthA}-${dayA}`);
const dateB = new Date(`${yearB}-${monthB}-${dayB}`);

const data = await fetchData(searchFilters);
console.log(data);
const sortedData = data.sort((a: MCAPFileInformation, b: MCAPFileInformation) => {
const dateA = new Date(a.date);
const dateB = new Date(b.date);
return dateB.getTime() - dateA.getTime();
});

setFilteredData(sortedData);
};

useEffect(() => {
assignData();
}, []);

// Two useEffects bc of the way we are handling the Search Button D:
useEffect(() => {
const getData = async () => {
const data = await fetchData(searchFilters);
// console.log(data);
const sortedData = data.sort(
(a: MCAPFileInformation, b: MCAPFileInformation) => {
const [monthA, dayA, yearA] = a.date.split("-");
const [monthB, dayB, yearB] = b.date.split("-");
const dateA = new Date(`${yearA}-${monthA}-${dayA}`);
const dateB = new Date(`${yearB}-${monthB}-${dayB}`);

if (search) { // Only fetch data when search is true
const data = await fetchData(searchFilters);
console.log(data);
const sortedData = data.sort((a: MCAPFileInformation, b: MCAPFileInformation) => {
const dateA = new Date(a.date);
const dateB = new Date(b.date);
return dateB.getTime() - dateA.getTime();
},
);
setFilteredData(sortedData);
});
setFilteredData(sortedData);

setSearch(false);
}
};
getData();
}, [search]);
Expand Down
3 changes: 1 addition & 2 deletions src/types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,8 @@ type MCAPFileInformation = {

type SearchFilter = {
location?: string;
filename?: string;
searchText?: string;
date?: string;
notes?: string;
eventType?: string;
afterDate?: string;
beforeDate?: string;
Expand Down
Loading