fix : username search

This commit is contained in:
GuillaumeSD
2025-06-10 00:50:44 +02:00
parent e237aa4611
commit 0bc031eabb
3 changed files with 38 additions and 72 deletions

View File

@@ -29,7 +29,7 @@ export default function Opening() {
return ( return (
<Grid> <Grid>
<Typography align="center" fontSize="0.9rem"> <Typography align="center" fontSize="0.9rem" maxWidth="20rem">
{opening} {opening}
</Typography> </Typography>
</Grid> </Grid>

View File

@@ -13,7 +13,7 @@ import {
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { useDebounce } from "@/hooks/useDebounce"; import { useDebounce } from "@/hooks/useDebounce";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react"; import { useMemo, useState } from "react";
interface Props { interface Props {
onSelect: (pgn: string, boardOrientation?: boolean) => void; onSelect: (pgn: string, boardOrientation?: boolean) => void;
@@ -24,30 +24,28 @@ export default function ChessComInput({ onSelect }: Props) {
"chesscom-username", "chesscom-username",
"" ""
); );
const [chessComUsername, setChessComUsername] = useState("");
const [hasEdited, setHasEdited] = useState(false);
const storedValues = useMemo(() => { const storedValues = useMemo(() => {
if (typeof rawStoredValue === "string") if (typeof rawStoredValue === "string") {
return rawStoredValue return rawStoredValue
.split(",") .split(",")
.map((s) => s.trim()) .map((s) => s.trim())
.filter(Boolean); .filter(Boolean);
else return []; }
return [];
}, [rawStoredValue]); }, [rawStoredValue]);
const [chessComUsername, setChessComUsername] = useState("");
const [hasEdited, setHasEdited] = useState(false);
useEffect(() => {
if ( if (
!hasEdited && !hasEdited &&
storedValues && storedValues.length &&
storedValues.length > 0 &&
chessComUsername.trim().toLowerCase() != chessComUsername.trim().toLowerCase() !=
storedValues[0].trim().toLowerCase() storedValues[0].trim().toLowerCase()
) { ) {
setChessComUsername(storedValues[0].trim().toLowerCase()); setChessComUsername(storedValues[0].trim());
} }
}, [storedValues, hasEdited, chessComUsername]);
const updateHistory = (username: string) => { const updateHistory = (username: string) => {
const trimmed = username.trim(); const trimmed = username.trim();
@@ -56,7 +54,7 @@ export default function ChessComInput({ onSelect }: Props) {
const exists = storedValues.some((u) => u.toLowerCase() === lower); const exists = storedValues.some((u) => u.toLowerCase() === lower);
if (!exists) { if (!exists) {
const updated = [trimmed, ...storedValues.filter((u) => u !== trimmed)]; const updated = [trimmed, ...storedValues.slice(0, 7)];
setStoredValues(updated.join(",")); setStoredValues(updated.join(","));
} }
}; };
@@ -68,25 +66,10 @@ export default function ChessComInput({ onSelect }: Props) {
const handleChange = (_: React.SyntheticEvent, newValue: string | null) => { const handleChange = (_: React.SyntheticEvent, newValue: string | null) => {
const newInputValue = newValue ?? ""; const newInputValue = newValue ?? "";
if ( setChessComUsername(newInputValue.trim());
newInputValue.trim().toLowerCase() != setHasEdited(true);
chessComUsername.trim().toLowerCase()
)
setChessComUsername(newInputValue.trim().toLowerCase());
}; };
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 debouncedUsername = useDebounce(chessComUsername, 300);
const { const {
@@ -108,7 +91,7 @@ export default function ChessComInput({ onSelect }: Props) {
freeSolo freeSolo
options={storedValues} options={storedValues}
inputValue={chessComUsername} inputValue={chessComUsername}
onInputChange={handleInputChange} onInputChange={handleChange}
onChange={handleChange} onChange={handleChange}
renderOption={(props, option) => { renderOption={(props, option) => {
const { key, ...rest } = props; const { key, ...rest } = props;

View File

@@ -13,7 +13,7 @@ import {
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { useDebounce } from "@/hooks/useDebounce"; import { useDebounce } from "@/hooks/useDebounce";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react"; import { useMemo, useState } from "react";
interface Props { interface Props {
onSelect: (pgn: string, boardOrientation?: boolean) => void; onSelect: (pgn: string, boardOrientation?: boolean) => void;
@@ -24,30 +24,27 @@ export default function LichessInput({ onSelect }: Props) {
"lichess-username", "lichess-username",
"" ""
); );
const [lichessUsername, setLichessUsername] = useState("");
const [hasEdited, setHasEdited] = useState(false);
const storedValues = useMemo(() => { const storedValues = useMemo(() => {
if (typeof rawStoredValue === "string") if (typeof rawStoredValue === "string") {
return rawStoredValue return rawStoredValue
.split(",") .split(",")
.map((s) => s.trim()) .map((s) => s.trim())
.filter(Boolean); .filter(Boolean);
else return []; }
return [];
}, [rawStoredValue]); }, [rawStoredValue]);
const [lichessUsername, setLichessUsername] = useState("");
const [hasEdited, setHasEdited] = useState(false);
useEffect(() => {
if ( if (
!hasEdited && !hasEdited &&
storedValues && storedValues.length &&
storedValues.length > 0 && lichessUsername.trim().toLowerCase() != storedValues[0].trim().toLowerCase()
lichessUsername.trim().toLowerCase() !=
storedValues[0].trim().toLowerCase()
) { ) {
setLichessUsername(storedValues[0].trim().toLowerCase()); setLichessUsername(storedValues[0].trim());
} }
}, [storedValues, hasEdited, lichessUsername]);
const updateHistory = (username: string) => { const updateHistory = (username: string) => {
const trimmed = username.trim(); const trimmed = username.trim();
@@ -56,7 +53,7 @@ export default function LichessInput({ onSelect }: Props) {
const exists = storedValues.some((u) => u.toLowerCase() === lower); const exists = storedValues.some((u) => u.toLowerCase() === lower);
if (!exists) { if (!exists) {
const updated = [trimmed, ...storedValues.filter((u) => u !== trimmed)]; const updated = [trimmed, ...storedValues.slice(0, 7)];
setStoredValues(updated.join(",")); setStoredValues(updated.join(","));
} }
}; };
@@ -68,22 +65,8 @@ export default function LichessInput({ onSelect }: Props) {
const handleChange = (_: React.SyntheticEvent, newValue: string | null) => { const handleChange = (_: React.SyntheticEvent, newValue: string | null) => {
const newInputValue = newValue ?? ""; const newInputValue = newValue ?? "";
if ( setLichessUsername(newInputValue.trim());
newInputValue.trim().toLowerCase() != lichessUsername.trim().toLowerCase() setHasEdited(true);
)
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);
}
}; };
const debouncedUsername = useDebounce(lichessUsername, 500); const debouncedUsername = useDebounce(lichessUsername, 500);
@@ -107,7 +90,7 @@ export default function LichessInput({ onSelect }: Props) {
freeSolo freeSolo
options={storedValues} options={storedValues}
inputValue={lichessUsername} inputValue={lichessUsername}
onInputChange={handleInputChange} onInputChange={handleChange}
onChange={handleChange} onChange={handleChange}
renderOption={(props, option) => { renderOption={(props, option) => {
const { key, ...rest } = props; const { key, ...rest } = props;