User Story: As a user, I am greeted with a list of available universities and a search bar when I click "Edit University" in settings.

Search bar functionality

To use the search bar, simply begin typing the name of the University you are looking for, and if it is available it will pop up. This will come in handy once our database is finished and there are many schools to choose from.

Here, the state variable seachTerm is initialized with the value of an empty string. It provides the function setSearchTerm to update the value of searchTerm.

const [searchTerm, setSearchTerm] = useState('')

Once, the state variable is initialized, we are able to filter through the array based on the search term provided by the user. A new array is created containing only the university names that match. toLowerCase is used to make it not matter whether the username enters the name with capital or lowercase letters.

    // Simulate filtering based on search term
    const filteredUniversities = mockUniversities.filter((uni) =>
      uni.name.toLowerCase().includes(searchTerm.toLowerCase())
    )

The handleSearchChange function is triggered when the user types in the search bar. It updates searchTerm with the newly entered search term and fetches university names based on it.

  // Handle search input change
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value)
    fetchUniversities(e.target.value)
  }

When a university name button is clicked, the handleClickUniversity function is called. It logs the name of the university to the console for now. Later it will use this data to communicate with the database.

  // Handle click on university button
  const handleClickUniversity = (name: string) => {
    console.log(name)
  }

If there are no available universities based on the user's search term, the message "No universities found." is displayed.

{universities.length === 0 && <p>No universities found.</p>}