Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: rework api call #115

Merged
merged 1 commit into from
Dec 23, 2024
Merged

refactor: rework api call #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 31 additions & 4 deletions src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import type { AxiosResponse } from 'axios';
import axios from 'axios';

import { LOCALE_I18N } from 'constants/locales';

export const BASE_API_URL = 'https://api.themoviedb.org/3/';
Expand All @@ -18,9 +21,19 @@ export type GetApiUrlProps = {
query: string;
};

export type GetApiUrlReturn = {
type HttpMethod = 'get' | 'post' | 'put' | 'delete';

type GetApiUrlReturn = {
callApi: <T = any>(
page?: number,
method?: HttpMethod
) => Promise<AxiosResponse<T>>;
queryParams?: string[];
queryUrl: (page?: number) => string;
};

export type CallApiProps = {
method?: HttpMethod;
page?: number;
};

export function getApi({ params, query }: GetApiUrlProps): GetApiUrlReturn {
Expand All @@ -37,11 +50,25 @@ export function getApi({ params, query }: GetApiUrlProps): GetApiUrlReturn {
const queryUrl = (page?: number) => {
const pageParam = page ? `&page=${page}` : '';

return `${BASE_API_URL}${query}?api_key=${process.env.EXPO_PUBLIC_THEMOVIEDB_API_KEY}&language=${LOCALE_I18N}${pageParam}${queryParamsUrl}`;
return `${BASE_API_URL}${query}?language=${LOCALE_I18N}${pageParam}${queryParamsUrl}`;
};

const callApi = <T = any>(
page?: number,
method: HttpMethod = 'get'
): Promise<AxiosResponse<T>> => {
return axios({
method,
url: queryUrl(page),
headers: {
Accept: 'application/json',
Authorization: `Bearer ${process.env.EXPO_PUBLIC_THEMOVIEDB_API_KEY}`
}
});
};

return {
queryParams,
queryUrl
callApi
};
}
9 changes: 4 additions & 5 deletions src/api/discover.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useInfiniteQuery } from '@tanstack/react-query';
import type { AxiosResponse } from 'axios';
import axios from 'axios';

import { LOCALE } from 'constants/locales';

Expand Down Expand Up @@ -30,7 +29,7 @@ export type UseGetDiscoverMovieApiProps = {
export function useGetDiscoverTv(props?: UseGetDiscoverTvApiProps) {
const { maxPages = 30, params } = props || {};

const { queryParams, queryUrl } = getApi({
const { callApi, queryParams } = getApi({
query: 'discover/tv',
params
});
Expand All @@ -39,7 +38,7 @@ export function useGetDiscoverTv(props?: UseGetDiscoverTvApiProps) {
queryKey: ['discover', 'tv', ...queryParams, LOCALE],
queryFn: async ({ pageParam }) => {
const { data }: AxiosResponse<UseGetDiscoverTvApiResponse> =
await axios.get(queryUrl(pageParam));
await callApi(pageParam);
return data;
},
initialPageParam: 1,
Expand All @@ -52,7 +51,7 @@ export function useGetDiscoverTv(props?: UseGetDiscoverTvApiProps) {
export function useGetDiscoverMovie(props?: UseGetDiscoverMovieApiProps) {
const { maxPages = 30, params } = props || {};

const { queryParams, queryUrl } = getApi({
const { callApi, queryParams } = getApi({
query: 'discover/movie',
params
});
Expand All @@ -61,7 +60,7 @@ export function useGetDiscoverMovie(props?: UseGetDiscoverMovieApiProps) {
queryKey: ['discover', 'movie', ...queryParams, LOCALE],
queryFn: async ({ pageParam }) => {
const { data }: AxiosResponse<UseGetDiscoverMovieApiResponse> =
await axios.get(queryUrl(pageParam));
await callApi(pageParam);
return data;
},
initialPageParam: 1,
Expand Down
9 changes: 4 additions & 5 deletions src/api/genres.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useQuery } from '@tanstack/react-query';
import type { AxiosResponse } from 'axios';
import axios from 'axios';

import { LOCALE } from 'constants/locales';

Expand All @@ -13,31 +12,31 @@ export type UseGetGenreTvListApiResponse =
paths['/3/genre/tv/list']['get']['responses']['200']['content']['application/json'];

export function useGetGenreMovieList() {
const { queryUrl } = getApi({
const { callApi } = getApi({
query: 'genre/movie/list'
});

return useQuery({
queryKey: ['genre', 'movie', 'list', LOCALE],
queryFn: async () => {
const { data }: AxiosResponse<UseGetGenreMovieListApiResponse> =
await axios.get(queryUrl());
await callApi();

return data?.genres;
}
});
}

export function useGetGenreTvList() {
const { queryUrl } = getApi({
const { callApi } = getApi({
query: 'genre/tv/list'
});

return useQuery({
queryKey: ['genre', 'tv', 'list', LOCALE],
queryFn: async () => {
const { data }: AxiosResponse<UseGetGenreTvListApiResponse> =
await axios.get(queryUrl());
await callApi();
return data.genres;
}
});
Expand Down
5 changes: 2 additions & 3 deletions src/api/logo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { UseQueryResult } from '@tanstack/react-query';
import { useQuery } from '@tanstack/react-query';
import type { AxiosResponse } from 'axios';
import axios from 'axios';

import type { Locale } from 'constants/locales';
import { LOCALE } from 'constants/locales';
Expand Down Expand Up @@ -53,7 +52,7 @@ export function useGetContentLogo(

const locales = `${LOCALE},en`;

const { queryUrl } = getApi({
const { callApi } = getApi({
query: `${type}/${id}/images`,
params: [
{
Expand All @@ -67,7 +66,7 @@ export function useGetContentLogo(
queryKey: [type, id, 'images', 'logo', locales],
queryFn: async () => {
const { data }: AxiosResponse<UseGetContentImagesApiResponse> =
await axios.get(queryUrl());
await callApi();

return formatImageToLogo(data, LOCALE);
},
Expand Down
30 changes: 14 additions & 16 deletions src/api/movie.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { UseQueryResult } from '@tanstack/react-query';
import { useQuery } from '@tanstack/react-query';
import type { AxiosResponse } from 'axios';
import axios from 'axios';

import { LOCALE, REGION_CODE } from 'constants/locales';
import type { NetworkId } from 'types/content';
Expand Down Expand Up @@ -57,15 +56,14 @@ export type UseGetMovie = UseQueryResult<
export function useGetMovie(props?: UseGetMovieApiProps): UseGetMovie {
const { id } = props || {};

const { queryUrl } = getApi({
const { callApi } = getApi({
query: `movie/${id}`
});

return useQuery({
queryKey: ['movie', id, LOCALE],
queryFn: async () => {
const { data }: AxiosResponse<UseGetMovieApiResponse> =
await axios.get(queryUrl());
const { data }: AxiosResponse<UseGetMovieApiResponse> = await callApi();

const networkId = getNetworkFromUrl(data.homepage);

Expand Down Expand Up @@ -102,15 +100,15 @@ export function useGetMovie(props?: UseGetMovieApiProps): UseGetMovie {
export function useGetMovieCredits(props?: UseGetMovieEnabledApiProps) {
const { enabled, id } = props || {};

const { queryUrl } = getApi({
const { callApi } = getApi({
query: `movie/${id}/credits`
});

return useQuery({
queryKey: ['movie', id, 'credits', LOCALE],
queryFn: async () => {
const { data }: AxiosResponse<UseGetMovieCreditsApiResponse> =
await axios.get(queryUrl());
await callApi();

return {
cast: data.cast.slice(0, 30)
Expand All @@ -125,7 +123,7 @@ export function useGetMovieImages(props?: UseGetMovieEnabledApiProps) {

const locales = `${LOCALE},en`;

const { queryUrl } = getApi({
const { callApi } = getApi({
query: `movie/${id}/images`,
params: [
{
Expand All @@ -139,7 +137,7 @@ export function useGetMovieImages(props?: UseGetMovieEnabledApiProps) {
queryKey: ['movie', id, 'images', locales],
queryFn: async () => {
const { data }: AxiosResponse<UseGetMovieImagesApiResponse> =
await axios.get(queryUrl());
await callApi();

return data;
},
Expand All @@ -148,7 +146,7 @@ export function useGetMovieImages(props?: UseGetMovieEnabledApiProps) {
}

export function useGetMovieNowPlaying() {
const { queryUrl } = getApi({
const { callApi } = getApi({
query: 'movie/now_playing',
params: [{ name: 'region', value: REGION_CODE }]
});
Expand All @@ -157,15 +155,15 @@ export function useGetMovieNowPlaying() {
queryKey: ['movies', 'now_playing', REGION_CODE, LOCALE],
queryFn: async () => {
const { data }: AxiosResponse<UseGetMovieNowPlayingApiResponse> =
await axios.get(queryUrl());
await callApi();

return data;
}
});
}

export function useGetMovieUpcoming() {
const { queryUrl } = getApi({
const { callApi } = getApi({
query: 'movie/upcoming',
params: [{ name: 'region', value: REGION_CODE }]
});
Expand All @@ -174,7 +172,7 @@ export function useGetMovieUpcoming() {
queryKey: ['movies', 'upcoming', REGION_CODE, LOCALE],
queryFn: async () => {
const { data }: AxiosResponse<UseGetMovieUpcomingApiResponse> =
await axios.get(queryUrl());
await callApi();

return data;
}
Expand All @@ -184,15 +182,15 @@ export function useGetMovieUpcoming() {
export function useGetMovieSimilar(props?: UseGetMovieEnabledApiProps) {
const { enabled, id } = props || {};

const { queryUrl } = getApi({
const { callApi } = getApi({
query: `movie/${id}/similar`
});

return useQuery({
queryKey: ['movie', id, 'similar', LOCALE],
queryFn: async () => {
const { data }: AxiosResponse<UseGetMovieSimilarApiResponse> =
await axios.get(queryUrl());
await callApi();

return data;
},
Expand All @@ -203,15 +201,15 @@ export function useGetMovieSimilar(props?: UseGetMovieEnabledApiProps) {
export function useGetMovieVideos(props?: UseGetMovieApiProps) {
const { id } = props || {};

const { queryUrl } = getApi({
const { callApi } = getApi({
query: `movie/${id}/videos`
});

return useQuery({
queryKey: ['movie', id, 'videos', LOCALE],
queryFn: async () => {
const { data }: AxiosResponse<UseGetMovieVideosApiResponse> =
await axios.get(queryUrl());
await callApi();

return data;
},
Expand Down
Loading
Loading