fix : username search
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user