From cfdad6dc65488c7dc1cce5a9169865aed8f13ee0 Mon Sep 17 00:00:00 2001
From: Shuqi <shuqi@odonatabooks.com>
Date: Wed, 6 Dec 2023 16:12:38 +0800
Subject: [PATCH] Limit query characters

---
 src/App.jsx      | 10 +++++++---
 src/IconList.jsx |  2 +-
 src/index.css    |  1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5d207d5..a5be56b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { setQuery } from './app/searchSlice'
 import { setShowName } from './app/displaySlice'
@@ -9,9 +9,13 @@ function App() {
 	const inputSearch = useRef()
 	const checkShowName = useRef()
 	const dispatch = useDispatch()
+	const [currentQuery, setCurrentQuery] = useState("")
 
 	function queryOnChange () {
-		dispatch(setQuery(inputSearch.current.value))
+		let query = inputSearch.current.value
+		query = query.replace(/[^a-zA-Z0-9\- ]/, "")
+		setCurrentQuery(query)
+		dispatch(setQuery(query))
 	}
 
 	function showNameOnChange () {
@@ -25,7 +29,7 @@ function App() {
 	return (
 		<>
 			<div className="pixel-input">
-				<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
+				<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } value={ currentQuery } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
 			</div>
 			<div id='display-options'>
 				<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />
diff --git a/src/IconList.jsx b/src/IconList.jsx
index cdecd31..59ade8b 100644
--- a/src/IconList.jsx
+++ b/src/IconList.jsx
@@ -36,7 +36,7 @@ export const IconList = function () {
 	if (icons.length == 0) {
 		return (
 			<div className="no-result">
-				No icon found for<br />"{query}"
+				No icon found for<br />"{query.trim().length > 24 ? query.trim().substring(0,24) + '...' : query.trim()}"
 			</div>
 		)
 	}
diff --git a/src/index.css b/src/index.css
index 4c4c4ea..68b731a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -342,6 +342,7 @@ ul.icon-list a {
 .no-result {
 	text-align: center;
 	padding: 6rem 0;
+	overflow-x: hidden;
 }
 
 @media (hover:hover) {