From 35095b49bc67337219385623705af0eb6c2f4793 Mon Sep 17 00:00:00 2001 From: Marcos Frony Date: Tue, 2 Sep 2025 17:04:06 -0700 Subject: [PATCH 1/8] Fix bugs on src/app/page.tsx --- src/app/page.tsx | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 11a598f..5dedb4d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,9 +2,21 @@ import { useEffect, useState } from "react"; +interface Advocate { + id: number; + firstName: string; + lastName: string; + city: string; + degree: string; + specialties: string[]; + yearsOfExperience: number; + phoneNumber: number; + createdAt?: string; +} + export default function Home() { - const [advocates, setAdvocates] = useState([]); - const [filteredAdvocates, setFilteredAdvocates] = useState([]); + const [advocates, setAdvocates] = useState([]); + const [filteredAdvocates, setFilteredAdvocates] = useState([]); useEffect(() => { console.log("fetching advocates..."); @@ -16,10 +28,13 @@ export default function Home() { }); }, []); - const onChange = (e) => { + const onChange = (e: React.ChangeEvent) => { const searchTerm = e.target.value; - document.getElementById("search-term").innerHTML = searchTerm; + const searchTermElement = document.getElementById("search-term"); + if (searchTermElement) { + searchTermElement.innerHTML = searchTerm; + } console.log("filtering advocates..."); const filteredAdvocates = advocates.filter((advocate) => { @@ -28,8 +43,8 @@ export default function Home() { advocate.lastName.includes(searchTerm) || advocate.city.includes(searchTerm) || advocate.degree.includes(searchTerm) || - advocate.specialties.includes(searchTerm) || - advocate.yearsOfExperience.includes(searchTerm) + advocate.specialties.some(specialty => specialty.includes(searchTerm)) || + advocate.yearsOfExperience.toString().includes(searchTerm) ); }); @@ -75,8 +90,8 @@ export default function Home() { {advocate.city} {advocate.degree} - {advocate.specialties.map((s) => ( -
{s}
+ {advocate.specialties.map((s: string, index: number) => ( +
{s}
))} {advocate.yearsOfExperience} From ae97ee5bea3a000ae215652a1468a1ca7e47a5f8 Mon Sep 17 00:00:00 2001 From: Marcos Frony Date: Tue, 2 Sep 2025 17:16:02 -0700 Subject: [PATCH 2/8] Added a tr between thead and th --- src/app/page.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 5dedb4d..c25281f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -58,11 +58,11 @@ export default function Home() { return (
-

Solace Advocates

+

Solace Advocates



-

Search

+

Search

Searching for:

@@ -73,13 +73,15 @@ export default function Home() {
- - - - - - - + + + + + + + + + {filteredAdvocates.map((advocate) => { From 20664f7fda6483e3a713e04a15fae46c3c808b93 Mon Sep 17 00:00:00 2001 From: Marcos Frony Date: Tue, 2 Sep 2025 17:38:17 -0700 Subject: [PATCH 3/8] Style top header and search section. Align tds to the top --- src/app/page.tsx | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index c25281f..cf76e82 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -58,16 +58,16 @@ export default function Home() { return (
-

Solace Advocates

-
-
+
+

Solace Advocates

+
-

Search

-

+

Search

+

Searching for:

- - + +


@@ -87,17 +87,17 @@ export default function Home() { {filteredAdvocates.map((advocate) => { return (
- - - - - + + + + - - + + ); })} From 0821fa21c2cf042a85b7a72de7be60b0ee1b9947 Mon Sep 17 00:00:00 2001 From: Marcos Frony Date: Tue, 2 Sep 2025 18:06:03 -0700 Subject: [PATCH 4/8] Style the result table --- src/app/page.tsx | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index cf76e82..52a5b16 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -74,30 +74,30 @@ export default function Home() {
First NameLast NameCityDegreeSpecialtiesYears of ExperiencePhone Number
First NameLast NameCityDegreeSpecialtiesYears of ExperiencePhone Number
{advocate.firstName}{advocate.lastName}{advocate.city}{advocate.degree} + {advocate.firstName}{advocate.lastName}{advocate.city}{advocate.degree} {advocate.specialties.map((s: string, index: number) => (
{s}
))} 		{advocate.yearsOfExperience}{advocate.phoneNumber}{advocate.yearsOfExperience}{advocate.phoneNumber}
- - - - - - - + + + + + + + - {filteredAdvocates.map((advocate) => { + {filteredAdvocates.map((advocate, index) => { return ( - - - - - + + + + + - - + + ); })} From f456a47554d01f3c4350d9049d558812f46a929d Mon Sep 17 00:00:00 2001 From: Marcos Frony Date: Tue, 2 Sep 2025 18:20:43 -0700 Subject: [PATCH 5/8] Added useRef to create inputRef to reference the input field. Updated the onClick function to: - clear the input field by setting inputRef.current.value = "" - clear the search term display by setting the innerHTML to an empty string --- src/app/page.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 52a5b16..f15dd49 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useRef } from "react"; interface Advocate { id: number; @@ -17,6 +17,7 @@ interface Advocate { export default function Home() { const [advocates, setAdvocates] = useState([]); const [filteredAdvocates, setFilteredAdvocates] = useState([]); + const inputRef = useRef(null); useEffect(() => { console.log("fetching advocates..."); @@ -54,6 +55,17 @@ export default function Home() { const onClick = () => { console.log(advocates); setFilteredAdvocates(advocates); + + // Clear the input field + if (inputRef.current) { + inputRef.current.value = ""; + } + + // Clear the search term display + const searchTermElement = document.getElementById("search-term"); + if (searchTermElement) { + searchTermElement.innerHTML = ""; + } }; return ( @@ -66,7 +78,7 @@ export default function Home() {

Searching for:

- +
From 3863411952e01877c44087834d4deaa1950a0848 Mon Sep 17 00:00:00 2001 From: Marcos Frony Date: Tue, 2 Sep 2025 18:24:07 -0700 Subject: [PATCH 6/8] Make search case insensitive --- src/app/page.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index f15dd49..1aeb6e8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -39,12 +39,13 @@ export default function Home() { console.log("filtering advocates..."); const filteredAdvocates = advocates.filter((advocate) => { + const lowerSearchTerm = searchTerm.toLowerCase(); return ( - advocate.firstName.includes(searchTerm) || - advocate.lastName.includes(searchTerm) || - advocate.city.includes(searchTerm) || - advocate.degree.includes(searchTerm) || - advocate.specialties.some(specialty => specialty.includes(searchTerm)) || + advocate.firstName.toLowerCase().includes(lowerSearchTerm) || + advocate.lastName.toLowerCase().includes(lowerSearchTerm) || + advocate.city.toLowerCase().includes(lowerSearchTerm) || + advocate.degree.toLowerCase().includes(lowerSearchTerm) || + advocate.specialties.some(specialty => specialty.toLowerCase().includes(lowerSearchTerm)) || advocate.yearsOfExperience.toString().includes(searchTerm) ); }); From a02f9124a4b7b5ef3d2c41002a31cec3e0712874 Mon Sep 17 00:00:00 2001 From: Marcos Frony Date: Tue, 2 Sep 2025 19:28:35 -0700 Subject: [PATCH 7/8] Add a list of remaining improvents --- DISCUSSION.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/DISCUSSION.md b/DISCUSSION.md index e69de29..f3db593 100644 --- a/DISCUSSION.md +++ b/DISCUSSION.md @@ -0,0 +1,12 @@ +# Remaining improvements + +## Database +Instead of searching the whole database and then filtering it, we should use the search terms to search the database specifically for those terms. + +## Table width + +The table width needs to be reformatted to fit into window for phone and tablet sizes + +## Specialties field +The Specialties fields style can be improved by bullet-listing the specialties + From 3fb07644ba7c842ac2fc8c5ad2f2bc2426401618 Mon Sep 17 00:00:00 2001 From: Marcos Frony Date: Tue, 2 Sep 2025 19:34:40 -0700 Subject: [PATCH 8/8] Remove br tags --- src/app/page.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 1aeb6e8..88e32c4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -74,7 +74,7 @@ export default function Home() {

Solace Advocates

-
+

Search

Searching for: @@ -82,8 +82,6 @@ export default function Home() {

-
-
First NameLast NameCityDegreeSpecialtiesYears of ExperiencePhone NumberFirst NameLast NameCityDegreeSpecialtiesYears of ExperiencePhone Number
{advocate.firstName}{advocate.lastName}{advocate.city}{advocate.degree}
{advocate.firstName}{advocate.lastName}{advocate.city}{advocate.degree} {advocate.specialties.map((s: string, index: number) => (
{s}
))} 		{advocate.yearsOfExperience}{advocate.phoneNumber}{advocate.yearsOfExperience}{advocate.phoneNumber}