From 0bc031eabb2248d00bd27397a7e740afc3bb30c0 Mon Sep 17 00:00:00 2001 From: GuillaumeSD Date: Tue, 10 Jun 2025 00:50:44 +0200 Subject: [PATCH] fix : username search --- .../panelBody/analysisTab/opening.tsx | 2 +- src/sections/loadGame/chessComInput.tsx | 55 +++++++------------ src/sections/loadGame/lichessInput.tsx | 53 ++++++------------ 3 files changed, 38 insertions(+), 72 deletions(-) diff --git a/src/sections/analysis/panelBody/analysisTab/opening.tsx b/src/sections/analysis/panelBody/analysisTab/opening.tsx index 1372778..1cad63d 100644 --- a/src/sections/analysis/panelBody/analysisTab/opening.tsx +++ b/src/sections/analysis/panelBody/analysisTab/opening.tsx @@ -29,7 +29,7 @@ export default function Opening() { return ( - + {opening} diff --git a/src/sections/loadGame/chessComInput.tsx b/src/sections/loadGame/chessComInput.tsx index c67e348..084a98f 100644 --- a/src/sections/loadGame/chessComInput.tsx +++ b/src/sections/loadGame/chessComInput.tsx @@ -13,7 +13,7 @@ import { import { Icon } from "@iconify/react"; import { useDebounce } from "@/hooks/useDebounce"; import { useQuery } from "@tanstack/react-query"; -import { useEffect, useMemo, useState } from "react"; +import { useMemo, useState } from "react"; interface Props { onSelect: (pgn: string, boardOrientation?: boolean) => void; @@ -24,30 +24,28 @@ export default function ChessComInput({ onSelect }: Props) { "chesscom-username", "" ); + const [chessComUsername, setChessComUsername] = useState(""); + const [hasEdited, setHasEdited] = useState(false); const storedValues = useMemo(() => { - if (typeof rawStoredValue === "string") + if (typeof rawStoredValue === "string") { return rawStoredValue .split(",") .map((s) => s.trim()) .filter(Boolean); - else return []; + } + + return []; }, [rawStoredValue]); - const [chessComUsername, setChessComUsername] = useState(""); - const [hasEdited, setHasEdited] = useState(false); - - useEffect(() => { - if ( - !hasEdited && - storedValues && - storedValues.length > 0 && - chessComUsername.trim().toLowerCase() != - storedValues[0].trim().toLowerCase() - ) { - setChessComUsername(storedValues[0].trim().toLowerCase()); - } - }, [storedValues, hasEdited, chessComUsername]); + if ( + !hasEdited && + storedValues.length && + chessComUsername.trim().toLowerCase() != + storedValues[0].trim().toLowerCase() + ) { + setChessComUsername(storedValues[0].trim()); + } const updateHistory = (username: string) => { const trimmed = username.trim(); @@ -56,7 +54,7 @@ export default function ChessComInput({ onSelect }: Props) { const exists = storedValues.some((u) => u.toLowerCase() === lower); if (!exists) { - const updated = [trimmed, ...storedValues.filter((u) => u !== trimmed)]; + const updated = [trimmed, ...storedValues.slice(0, 7)]; setStoredValues(updated.join(",")); } }; @@ -68,25 +66,10 @@ export default function ChessComInput({ onSelect }: Props) { const handleChange = (_: React.SyntheticEvent, newValue: string | null) => { const newInputValue = newValue ?? ""; - if ( - newInputValue.trim().toLowerCase() != - chessComUsername.trim().toLowerCase() - ) - setChessComUsername(newInputValue.trim().toLowerCase()); + setChessComUsername(newInputValue.trim()); + setHasEdited(true); }; - const handleInputChange = ( - _: React.SyntheticEvent, - newInputValue: string - ) => { - if ( - newInputValue.trim().toLowerCase() != - chessComUsername.trim().toLowerCase() - ) { - setChessComUsername(newInputValue.trim().toLowerCase()); - if (!hasEdited) setHasEdited(true); - } - }; const debouncedUsername = useDebounce(chessComUsername, 300); const { @@ -108,7 +91,7 @@ export default function ChessComInput({ onSelect }: Props) { freeSolo options={storedValues} inputValue={chessComUsername} - onInputChange={handleInputChange} + onInputChange={handleChange} onChange={handleChange} renderOption={(props, option) => { const { key, ...rest } = props; diff --git a/src/sections/loadGame/lichessInput.tsx b/src/sections/loadGame/lichessInput.tsx index 13c0850..cfba30e 100644 --- a/src/sections/loadGame/lichessInput.tsx +++ b/src/sections/loadGame/lichessInput.tsx @@ -13,7 +13,7 @@ import { import { Icon } from "@iconify/react"; import { useDebounce } from "@/hooks/useDebounce"; import { useQuery } from "@tanstack/react-query"; -import { useEffect, useMemo, useState } from "react"; +import { useMemo, useState } from "react"; interface Props { onSelect: (pgn: string, boardOrientation?: boolean) => void; @@ -24,30 +24,27 @@ export default function LichessInput({ onSelect }: Props) { "lichess-username", "" ); + const [lichessUsername, setLichessUsername] = useState(""); + const [hasEdited, setHasEdited] = useState(false); const storedValues = useMemo(() => { - if (typeof rawStoredValue === "string") + if (typeof rawStoredValue === "string") { return rawStoredValue .split(",") .map((s) => s.trim()) .filter(Boolean); - else return []; + } + + return []; }, [rawStoredValue]); - const [lichessUsername, setLichessUsername] = useState(""); - const [hasEdited, setHasEdited] = useState(false); - - useEffect(() => { - if ( - !hasEdited && - storedValues && - storedValues.length > 0 && - lichessUsername.trim().toLowerCase() != - storedValues[0].trim().toLowerCase() - ) { - setLichessUsername(storedValues[0].trim().toLowerCase()); - } - }, [storedValues, hasEdited, lichessUsername]); + if ( + !hasEdited && + storedValues.length && + lichessUsername.trim().toLowerCase() != storedValues[0].trim().toLowerCase() + ) { + setLichessUsername(storedValues[0].trim()); + } const updateHistory = (username: string) => { const trimmed = username.trim(); @@ -56,7 +53,7 @@ export default function LichessInput({ onSelect }: Props) { const exists = storedValues.some((u) => u.toLowerCase() === lower); if (!exists) { - const updated = [trimmed, ...storedValues.filter((u) => u !== trimmed)]; + const updated = [trimmed, ...storedValues.slice(0, 7)]; setStoredValues(updated.join(",")); } }; @@ -68,22 +65,8 @@ export default function LichessInput({ onSelect }: Props) { const handleChange = (_: React.SyntheticEvent, newValue: string | null) => { const newInputValue = newValue ?? ""; - if ( - newInputValue.trim().toLowerCase() != lichessUsername.trim().toLowerCase() - ) - setLichessUsername(newInputValue.trim().toLowerCase()); - }; - - const handleInputChange = ( - _: React.SyntheticEvent, - newInputValue: string - ) => { - if ( - newInputValue.trim().toLowerCase() != lichessUsername.trim().toLowerCase() - ) { - setLichessUsername(newInputValue.trim().toLowerCase()); - if (!hasEdited) setHasEdited(true); - } + setLichessUsername(newInputValue.trim()); + setHasEdited(true); }; const debouncedUsername = useDebounce(lichessUsername, 500); @@ -107,7 +90,7 @@ export default function LichessInput({ onSelect }: Props) { freeSolo options={storedValues} inputValue={lichessUsername} - onInputChange={handleInputChange} + onInputChange={handleChange} onChange={handleChange} renderOption={(props, option) => { const { key, ...rest } = props;