mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-10-03 10:13:47 +10:00
fix(web): keep resume search local (#3510)
This commit is contained in:
@@ -12,7 +12,7 @@ import {
|
||||
} from "@phosphor-icons/react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute, Link, stripSearchParams, useNavigate } from "@tanstack/react-router";
|
||||
import { useMemo } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import z from "zod";
|
||||
import { Button } from "@reactive-resume/ui/components/button";
|
||||
import { InputGroup, InputGroupAddon, InputGroupInput } from "@reactive-resume/ui/components/input-group";
|
||||
@@ -31,7 +31,6 @@ import { resumeViewSchema, useResumeView } from "./-components/view-mode";
|
||||
type SortOption = "lastUpdatedAt" | "createdAt" | "name";
|
||||
|
||||
const searchSchema = z.object({
|
||||
search: z.string().default(""),
|
||||
tags: z.array(z.string()).default([]),
|
||||
sort: z.enum(["lastUpdatedAt", "createdAt", "name"]).default("lastUpdatedAt"),
|
||||
view: resumeViewSchema.optional().catch(undefined),
|
||||
@@ -39,7 +38,7 @@ const searchSchema = z.object({
|
||||
|
||||
type Search = z.output<typeof searchSchema>;
|
||||
|
||||
const defaultSearch: Search = { search: "", tags: [], sort: "lastUpdatedAt" };
|
||||
const defaultSearch: Search = { tags: [], sort: "lastUpdatedAt" };
|
||||
|
||||
export const Route = createFileRoute("/dashboard/resumes/")({
|
||||
component: RouteComponent,
|
||||
@@ -51,7 +50,8 @@ export const Route = createFileRoute("/dashboard/resumes/")({
|
||||
|
||||
function RouteComponent() {
|
||||
const { i18n } = useLingui();
|
||||
const { search, tags, sort, view: searchView } = Route.useSearch();
|
||||
const { tags, sort, view: searchView } = Route.useSearch();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const { session } = Route.useRouteContext();
|
||||
const view = useResumeView(searchView, session.user.id);
|
||||
const navigate = useNavigate({ from: Route.fullPath });
|
||||
@@ -62,12 +62,12 @@ function RouteComponent() {
|
||||
|
||||
const filteredResumes = useMemo(() => {
|
||||
const list = resumes ?? [];
|
||||
const query = search.trim().toLowerCase();
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
if (!query) return list;
|
||||
return list.filter(
|
||||
(resume) => resume.name.toLowerCase().includes(query) || resume.slug.toLowerCase().includes(query),
|
||||
);
|
||||
}, [resumes, search]);
|
||||
}, [resumes, searchQuery]);
|
||||
|
||||
const tagOptions = useMemo(() => {
|
||||
if (!allTags) return [];
|
||||
@@ -146,12 +146,9 @@ function RouteComponent() {
|
||||
<MagnifyingGlassIcon />
|
||||
</InputGroupAddon>
|
||||
<InputGroupInput
|
||||
value={search}
|
||||
value={searchQuery}
|
||||
placeholder={t`Search resumes...`}
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
void navigate({ search: (prev: Search) => ({ ...prev, search: value }) });
|
||||
}}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user