fix: error in api

src/api/api.tsx

@@ -6,7 +6,7 @@ const BASE_URL = 'https://api.themoviedb.org/3/';
 const API_KEY =
   'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1MzM0Njg0NjI2OTg1ODI3OTE1NzMyNWY5OTAxZmU4ZCIsIm5iZiI6MTcyMDU4OTg3MC4wMzYzNDIsInN1YiI6IjY2OGUxY2JlMzA0OTRhNmE2OTMyYzE3MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.jkIXGMw1WWmtEO9XDryk4R5gP35WQIZHQ8uGIH-QgnM';
 
-const getAllMovies = async (currentPage: number): Promise<Movie[]> => {
+export const getAllMovies = async (currentPage: number): Promise<Movie[]> => {
   const res = await axios.get(
     `${BASE_URL}discover/movie?include_adult=true&include_video=false&language=en-US&page=${currentPage}&sort_by=popularity.desc`,
     {
@@ -20,7 +20,7 @@ const getAllMovies = async (currentPage: number): Promise<Movie[]> => {
   return movies;
 };
 
-const getMoviesWithQuery = async (
+export const getMoviesWithQuery = async (
   query: string,
   currentPage: number,
 ): Promise<Movie[]> => {
@@ -38,7 +38,7 @@ const getMoviesWithQuery = async (
   return movies;
 };
 
-const getMovieById = async (id: number): Promise<DetailMovie> => {
+export const getMovieById = async (id: number): Promise<DetailMovie> => {
   const res = await axios.get(
     `${BASE_URL}movie/${id}?append_to_response=credits`,
     {
@@ -56,9 +56,3 @@ const getMovieById = async (id: number): Promise<DetailMovie> => {
 const parseQuery = (query: string): string => {
   return query.replace(' ', '+');
 };
-
-export default {
-  getAllMovies,
-  getMoviesWithQuery,
-  getMovieById,
-};

src/components/header/header.tsx

@@ -25,7 +25,7 @@ const Header: React.FC = () => {
         isScrolled ? 'bg-opacity-100' : 'bg-opacity-10'
       } bg-slate-800`}
     >
-      <div className="container mx-auto flex h-10 md:h-16 items-center justify-between">
+      <div className="container mx-auto flex h-10 items-center justify-between md:h-16">
         <Link
           href="/"
           className="text-lg font-bold text-white md:text-xl lg:text-2xl"

src/modules/detailMovie/detailMovie.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import api from '@/api/api';
+import { getMovieById } from '@/api/api';
 import { DetailMovie } from '@/constant/detailMovie';
 import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
@@ -23,7 +23,7 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
   useEffect(() => {
     const fetchMovie = async () => {
       try {
-        const res = await api.getMovieById(parseInt(id));
+        const res = await getMovieById(parseInt(id));
         setMovie(res);
         document.title = `${res.title} (${res.release_date.split('-')[0]})`;
       } catch (e) {

src/modules/home/home.tsx

@@ -1,9 +1,8 @@
 'use client';
 
 import React, { ChangeEvent, useEffect, useState } from 'react';
-import api from '@/api/api';
+import { getAllMovies, getMoviesWithQuery } from '@/api/api';
 import { Movie } from '@/constant/movie';
-import Header from '@/components/header/header';
 import Backdrop from '@/components/backdrop/backdrop';
 import ListMovies from '@/components/listMovies/listMovies';
 import MyPagination from '@/components/myPagination/myPagination';
@@ -21,7 +20,7 @@ const HomeModule: React.FC = () => {
     }
     const fetchMovies = async () => {
       try {
-        const res: Movie[] = await api.getAllMovies(currentPage);
+        const res: Movie[] = await getAllMovies(currentPage);
         setMovies(res);
         setBackdrop(
           `https://image.tmdb.org/t/p/original${res[2].backdrop_path}`,
@@ -39,7 +38,7 @@ const HomeModule: React.FC = () => {
     }
     const fetchMovies = async () => {
       try {
-        const res: Movie[] = await api.getMoviesWithQuery(query, currentPage);
+        const res: Movie[] = await getMoviesWithQuery(query, currentPage);
         setMovies(res);
       } catch (e) {
         console.log('failed to fetch the movies');