Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-03 00:58:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(typing): minor typing resolutions and convert SearchBar to TS (#766)

Browse source 
* refactor(SearchBar): convert to TS, useLocalize

* fix(typing): minor type issues

* chore(package.json): add 'reinstall:docker' script for rebuilding Docker environment in current branch
This commit is contained in:
Danny Avila 2023-08-06 21:30:16 -04:00 • committed by GitHub
parent 600a0d15b1
commit 68ad46a9be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 49 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

25
client/src/components/Nav/SearchBar.jsx → client/src/components/Nav/SearchBar.tsx
View file

@ -1,25 +1,30 @@
import { forwardRef, useState, useEffect } from 'react';
import { forwardRef, useState, useEffect, Ref } from 'react';
import { Search, X } from 'lucide-react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useRecoilState } from 'recoil';
import { useLocalize } from '~/hooks';
import store from '~/store';
import { localize } from '~/localization/Translation';
const SearchBar = forwardRef((props, ref) => {
type SearchBarProps = {
clearSearch: () => void;
};
const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) => {
const { clearSearch } = props;
const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
const [showClearIcon, setShowClearIcon] = useState(false);
const lang = useRecoilValue(store.lang);
const localize = useLocalize();
const handleKeyUp = (e) => {
const { value } = e.target;
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
const { value } = e.target as HTMLInputElement;
/* TODO: deprecated keyCode */
if (e.keyCode === 8 && value === '') {
setSearchQuery('');
clearSearch();
}
};
const onChange = (e) => {
const { value } = e.target;
const onChange = (e: React.FormEvent<HTMLInputElement>) => {
const { value } = e.target as HTMLInputElement;
setSearchQuery(value);
setShowClearIcon(value.length > 0);
};
@ -46,7 +51,7 @@ const SearchBar = forwardRef((props, ref) => {
onKeyDown={(e) => {
e.code === 'Space' ? e.stopPropagation() : null;
}}
placeholder={localize(lang, 'com_nav_search_placeholder')}
placeholder={localize('com_nav_search_placeholder')}
onKeyUp={handleKeyUp}
/>
<X