Skip to content

Instantly share code, notes, and snippets.

@navanathjadhav

navanathjadhav/App.tsx Secret

Created Nov 12, 2020
Embed
What would you like to do?
App.tsx with search input and button
import React, { useEffect, useState } from "react";
import "./App.scss";
import {
Card,
Col,
Form,
FormControl,
InputGroup,
Row,
Table,
} from "react-bootstrap";
import axiosInstance from "./http/httpInstance";
import { useForm } from "react-hook-form";
function App() {
// Hooks
const [students, setStudents] = useState([] as any);
const [isLoadingStudents, setLoadingStudents] = useState(false);
const [isSearchingStudents, setSearchingStudents] = useState(false);
const { register, handleSubmit, errors } = useForm();
/*
* Clear search results
*/
const clearSearchResults = (event: any) => {
if (!event.target.value) {
fetchStudents();
}
};
// Fetch students
const fetchStudents = (search?: any) => {
setLoadingStudents(true);
setSearchingStudents(search ? true : false);
axiosInstance
.get(`/api/students` + (search ? `?searchTerm=${search.term}` : ``))
.then((response) => {
setLoadingStudents(false);
setSearchingStudents(false);
setStudents(response.data);
})
.catch((error) => {
setSearchingStudents(false);
setLoadingStudents(false);
console.log(error);
});
};
/*
* Fetch students when component initiated
*/
useEffect(() => {
fetchStudents();
}, []);
return (
<div className="container-fluid mt-5">
<div className="d-flex justify-content-between align-items-center my-4">
<div className="flex-grow-1 filter-container-c">
<div className="search">
<Form onSubmit={handleSubmit(fetchStudents)}>
<Row>
<Col md={12} lg={12}>
<InputGroup>
<FormControl
className="c-f h-45"
placeholder="Search students"
aria-label="Search students"
aria-describedby="basic-addon2"
name="term"
onChange={clearSearchResults}
ref={register({
required: true,
})}
isInvalid={errors.term}
/>
<span>
<i className="bx bx-fw bx-search"></i>
</span>
<InputGroup.Append>
<button
className="btn btn-primary"
disabled={isSearchingStudents}
>
{isSearchingStudents ? "Searching..." : "Search"}
</button>
</InputGroup.Append>
</InputGroup>
</Col>
</Row>
</Form>
</div>
</div>
</div>
<Row>
<Col md={12} lg={12}>
<h3>Students</h3>
<Card>
<Card.Body className="pt-0">
<Table striped hover>
<thead>
<tr>
<th className="bt-none">Name</th>
<th className="bt-none">Email</th>
<th className="bt-none">Department</th>
</tr>
</thead>
<tbody>
{!students.length && !isLoadingStudents && (
<tr className="text-center">
<td colSpan={3}>No students</td>
</tr>
)}
{isLoadingStudents && (
<tr className="text-center">
<td colSpan={3}>
<span>Loading...</span>
</td>
</tr>
)}
{!isLoadingStudents &&
students.map((student: any, index: number) => {
return (
<tr key={index}>
<td>{student.name}</td>
<td>{student.email}</td>
<td>{student.department}</td>
</tr>
);
})}
</tbody>
</Table>
</Card.Body>
</Card>
</Col>
</Row>
</div>
);
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.