App.tsx with search input and button

App.tsx

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;