Added new search members functionality.

src/app-container.tsx

@@ -31,6 +31,7 @@ import Loading from "./routes/loading/index";
 import {Suspense} from "react";
 import {QueryClient} from "@tanstack/react-query";
 import {BuyProductsForMemberTitle, CommitteeTitle} from "components/layout/header";
+import SearchMembers from "routes/members/search";
 
 function isErrorResponse(error: any): error is ErrorResponse {
   return (
@@ -179,6 +180,7 @@ export const createAppRoutes = (
           }}
         />
         <Route path="members/:page" element={<SelectMemberFromSurnameRange />} />
+        <Route path="search" element={<SearchMembers />} />
         <Route path="members" element={<Navigate to="/" />} />
       </Route>
     </Route>
@@ -224,6 +226,7 @@ export const AppContainer = () => {
           <Route path="statistics" element={<Statistics />} />
           <Route path="present" element={<Present />} />
           <Route path="members/:page" element={<SelectMemberFromSurnameRange />} />
+          <Route path="search" element={<SearchMembers />} />
           <Route path="members" element={<Navigate to="/" />} />
         </Route>
       </Route>

src/components/layout/searchbar.tsx

@@ -0,0 +1,50 @@
+import React, {useState} from "react";
+import {useNavigate} from "react-router";
+import {createSearchParams, useSearchParams} from "react-router-dom";
+
+const SearchBar = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const name = searchParams.get("name")?.trim().toLowerCase() || "";
+
+  const [value, setValue] = useState(name);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+  };
+
+  const handleSearch = () => {
+    const trimmedValue = value.trim();
+    setValue(trimmedValue);
+    if (trimmedValue === "") {
+      window.alert("Please enter a name to search for");
+    } else {
+      navigate({
+        pathname: "/search",
+        search: `?${createSearchParams({name: trimmedValue})}`,
+      });
+    }
+  };
+
+  return (
+    <div className="searchbar">
+      <input
+        type="text"
+        placeholder="Search name"
+        value={value}
+        onChange={handleChange}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            handleSearch();
+          }
+        }}
+      />
+      <button className="searchbar__button button" onClick={handleSearch}>
+        Search
+      </button>
+    </div>
+  );
+};
+
+export default SearchBar;

src/components/members.tsx

@@ -1,17 +1,21 @@
 import {MemberType} from "queries/members";
 import Member from "./member-button";
+import SearchBar from "./layout/searchbar";
 
 type Props = {
   members: MemberType[];
   selectMember: (member: MemberType) => void;
 };
 
 const Members = ({members, selectMember}: Props) => (
-  <nav className="tilesGrid">
-    {members.map((member) => (
-      <Member member={member} key={member.id} onClick={selectMember} />
-    ))}
-  </nav>
+  <>
+    <SearchBar />
+    <nav className="tilesGrid">
+      {members.map((member) => (
+        <Member member={member} key={member.id} onClick={selectMember} />
+      ))}
+    </nav>
+  </>
 );
 
 export default Members;

src/index.css

@@ -95,6 +95,34 @@ button {
   background-color: var(--sidebar-primary);
 }
 
+.searchbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  margin: 16px 0;
+  box-sizing: border-box;
+  height: 10%;
+}
+
+.searchbar input[type="text"] {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 75%;
+  padding: 0 14px;
+  border: 1px solid #ccc;
+  background: #fff;
+  color: #333;
+}
+
+.searchbar .searchbar__button {
+  flex: 0 0 auto;
+  height: 75%;
+  width: 10%;
+  padding: 0 20px;
+  white-space: nowrap;
+}
+
 .button {
   color: var(--secondary);
   background-color: var(--primary);
@@ -127,7 +155,7 @@ button {
 }
 
 .tilesGrid {
-  height: 100%;
+  height: 85%;
   display: grid;
   grid-template-columns: repeat(var(--gridCollumns), 1fr);
   grid-template-rows: auto;

src/routes/index.tsx

@@ -1,6 +1,7 @@
 import {useNavigate} from "react-router";
 import {useGroupedSurnames} from "../queries/members";
 import {MemberType} from "../queries/members";
+import SearchBar from "components/layout/searchbar";
 
 type Range = {
   idx: number;
@@ -14,16 +15,23 @@ type SurnameRangesProps = {
 };
 
 export const SurnameRanges = ({ranges, selectRange}: SurnameRangesProps) => (
-  <div className="tilesGrid">
-    {ranges.map((range) => (
-      <button className="button tile" onClick={() => selectRange(range)} key={range.idx}>
-        {range.surname_start}
-        <br />
-        -<br />
-        {range.surname_end}
-      </button>
-    ))}
-  </div>
+  <>
+    <SearchBar />
+    <div className="tilesGrid">
+      {ranges.map((range) => (
+        <button
+          className="button tile"
+          onClick={() => selectRange(range)}
+          key={range.idx}
+        >
+          {range.surname_start}
+          <br />
+          -<br />
+          {range.surname_end}
+        </button>
+      ))}
+    </div>
+  </>
 );
 
 const SurnameRangesScreen = () => {

src/routes/members/search.tsx

@@ -0,0 +1,23 @@
+import Members from "../../components/members";
+import {useSearchParams} from "react-router-dom";
+import {useSelectMember} from "../../components/orders-context";
+import {useMembers} from "queries/members";
+
+const useFoundMembers = () => {
+  const [searchParams] = useSearchParams();
+  const name = searchParams.get("name")?.trim().toLowerCase() || "";
+  const {members} = useMembers();
+
+  if (!name) return [];
+  return members
+    .filter((m) => m.fullname.toLowerCase().includes(name))
+    .sort((a, b) => a.fullname.localeCompare(b.fullname));
+};
+
+const SearchMembers = () => {
+  const foundMembers = useFoundMembers();
+  const selectMember = useSelectMember();
+  return <Members members={foundMembers} selectMember={selectMember} />;
+};
+
+export default SearchMembers;