Mathis
bfe49f65ec
Removed redundant API endpoint and added reusable hooks. Implemented various UI component updates including loading spinner, file upload form, and machine selector. Improved state management in page and layout components and introduced new request handling functionalities.
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
|
|
import { Input } from '../ui/input';
|
|
import { Label } from '../ui/label';
|
|
import { LoadingSpinner } from 'apps/frontend/src/components/loading-spinner';
|
|
import { Loader } from 'lucide-react';
|
|
|
|
|
|
export interface SearchBarProps {
|
|
stateSetter: Dispatch<SetStateAction<ISearchBarResult>>;
|
|
}
|
|
export interface ISearchBarResult {
|
|
value: string;
|
|
}
|
|
|
|
export function SearchBar(props: SearchBarProps) {
|
|
const [inputValue, setInputValue] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
|
|
setIsLoading(true);
|
|
const timer = setTimeout(() => {
|
|
props.stateSetter({value: inputValue});
|
|
setIsLoading(false);
|
|
}, 750);
|
|
|
|
// Nettoyage du timer
|
|
return () => clearTimeout(timer);
|
|
}, [inputValue]);
|
|
return (<div className="flex gap-2">
|
|
<div className="grid w-full max-w-md items-center gap-1.5">
|
|
<Label htmlFor="searchFiled">Chercher un nom de fichier</Label>
|
|
<Input
|
|
type="search"
|
|
id="searchFiled"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
placeholder="Votre recherche..." />
|
|
</div>
|
|
{isLoading && <Loader className={"w-6 h-6 animate-spin"} />}
|
|
</div>)
|
|
} |