Update the code.

Author: peeweetje

netflix-create-react-vite-app/src/hooks/useFetchMovies.ts

@@ -1,17 +1,20 @@
 import React, { useEffect } from 'react';
 export const useFetchMovies = (
   url: string,
-  setMovies: React.Dispatch<React.SetStateAction<MovieResult[]>>,
-  setLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  setError: React.Dispatch<React.SetStateAction<string | null>>
+  setMovies: Dispatch<SetStateAction<MovieResult[]>>,
+  setLoading: Dispatch<SetStateAction<boolean>>,
+  setError: Dispatch<SetStateAction<string | null>>
 ) => {
   useEffect(() => {
     const fetchMovies = async (): Promise<void> => {
       try {
         const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
         const { results } = await response.json();
         setMovies(results);
-      } catch (err) {
+      } catch (error) {
         setError('Failed to fetch movies. Please try again later.');
       } finally {
         setLoading(false);

netflix-create-react-vite-app/src/pages/home/homePage.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MainContainer } from './homepage-styles';
-import Card from '../../components/card/card';
 import NavbarHeader from '../../components/navbarmenu/navbarheader/navbarHeader';
-import { discoverMovieUrl, imageUrl } from '../../utils/api';
+import { discoverMovieUrl } from '../../utils/api';
 import Spinner from '../../components/spinner/spinner';
 import { useFetchMovies } from '../../hooks/useFetchMovies';
 import { MovieList } from '../../components/movie-list/movieList';
@@ -31,7 +30,6 @@ const Homepage = () => {
       setSearchQuery(newSearchQuery);
 
       if (!newSearchQuery) {
-        setSearchQuery('');
         setSearchMovies([]);
       }
     },
@@ -42,18 +40,16 @@ const Homepage = () => {
     <>
       <NavbarHeader value={searchQuery} onChange={handleSearch} />
       <MainContainer aria-label={t('movie-listings')}>
-        {loading && (
+        {loading ? (
           <div>
             <Spinner />
             <p>{t('loading')}</p>
           </div>
-        )}
-        {error && (
+        ) : error ? (
           <div>
             <p>Error: {error}</p>
           </div>
-        )}
-        {!loading && !error && (
+        ) : (
           <MovieList
             movies={searchMovies.length > 0 ? searchMovies : results}
           />