Skip to content

Commit

Permalink
refactor: rework api call (#115)
Browse files Browse the repository at this point in the history
  • Loading branch information
@theo-mesnil
theo-mesnil committed Jan 10, 2025
1 parent 1a7bc50 commit 15fd9b7
Show file tree
Hide file tree
Showing 20 changed files with 455 additions and 176 deletions.
13 changes: 7 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,17 @@
},
"dependencies": {
"@expo-google-fonts/poppins": "^0.2.3",
"@react-native-async-storage/async-storage": "2.1.0",
"@react-native-masked-view/masked-view": "0.3.2",
"@react-navigation/bottom-tabs": "^7.0.0",
"@react-navigation/elements": "^1.3.30",
"@react-navigation/native": "^7.0.0",
"@react-navigation/stack": "^6.3.29",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/elements": "^2.2.5",
"@react-navigation/native": "^7.0.14",
"@react-navigation/stack": "^7.1.1",
"@shopify/flash-list": "1.7.1",
"@tanstack/react-query": "^5.62.8",
"axios": "^1.7.9",
"date-fns": "^4.1.0",
"expo": "~52.0.20",
"expo": "~52.0.23",
"expo-blur": "~14.0.1",
"expo-constants": "~17.0.3",
"expo-dev-client": "~5.0.6",
Expand All @@ -61,7 +62,7 @@
"react-native-gesture-handler": "~2.20.2",
"react-native-linear-gradient": "^2.8.3",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.1.0",
"react-native-screens": "~4.4.0",
"react-native-svg": "15.8.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.5",
Expand Down
37 changes: 33 additions & 4 deletions src/api/api.ts
View file
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,27 @@ 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',
body?: object
): Promise<AxiosResponse<T>> => {
return axios({
method,
url: queryUrl(page),
headers: {
Accept: 'application/json',
Authorization: `Bearer ${process.env.EXPO_PUBLIC_THEMOVIEDB_API_KEY}`
},
params: body
});
};

return {
queryParams,
queryUrl
callApi
};
}
9 changes: 4 additions & 5 deletions src/api/discover.ts
View file
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
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
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
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

0 comments on commit 15fd9b7

Please sign in to comment.