Merge pull request #85 from rootstrap/feat/query-factory

feat(network): add query factory library

Author: juanchoperezj

package.json

@@ -66,6 +66,7 @@
     "@expo/metro-runtime": "^3.2.3",
     "@gorhom/bottom-sheet": "4.6.3",
     "@hookform/resolvers": "^3.9.0",
+    "@lukemorales/query-key-factory": "^1.3.4",
     "@shopify/flash-list": "1.6.4",
     "@tanstack/react-query": "^5.52.1",
     "app-icon-badge": "^0.0.15",

pnpm-lock.yaml

@@ -0,0 +1,37 @@
+import { createMutation } from 'react-query-kit';
+
+import { client } from '../common';
+
+type Variables = {
+  email?: string; // optional because API doesn't require email
+  username: string;
+  password: string;
+  expiresInMins?: number;
+};
+
+type Response = {
+  id: number;
+  username: string;
+  email: string;
+  accessToken: string;
+  refreshToken: string;
+};
+
+const login = async (variables: Variables) => {
+  const { data } = await client({
+    url: 'auth/login',
+    method: 'POST',
+    data: {
+      username: variables.username,
+      password: variables.password,
+    },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return data;
+};
+
+export const useLogin = createMutation<Response, Variables>({
+  mutationFn: (variables) => login(variables),
+});

src/api/auth/use-login.ts

@@ -0,0 +1,6 @@
+import { createQueryKeys } from '@lukemorales/query-key-factory';
+
+export const cartKeys = createQueryKeys('carts', {
+  list: (filters) => [filters],
+  detail: (id) => [id],
+});

src/api/carts/query-keys.ts

@@ -0,0 +1,19 @@
+export type Product = {
+  id: number;
+  title: string;
+  price: number;
+  quantity: number;
+  total: number;
+  discountPercentage: number;
+  discountedTotal: number;
+  thumbnail: string;
+};
+export type Cart = {
+  id: number;
+  products: Product[];
+  total: number;
+  discountedTotal: number;
+  userId: number;
+  totalProducts: number;
+  totalQuantity: number;
+};

src/api/carts/types.ts

@@ -0,0 +1,36 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { client } from '../common';
+import { cartKeys } from './query-keys';
+
+type Variables = {
+  limit?: number | string;
+  offset?: number | string;
+};
+
+const DEFAULT_LIMIT = 10;
+const DEFAULT_OFFSET = 0;
+
+const getCarts = async ({
+  limit = DEFAULT_LIMIT,
+  offset = DEFAULT_OFFSET,
+}: Variables) => {
+  const { data } = await client.get('carts', {
+    params: {
+      limit,
+      offset,
+    },
+  });
+  return { data, offset: Number(offset), limit: Number(limit) };
+};
+
+export const useCarts = (variables: Variables) =>
+  useInfiniteQuery({
+    ...cartKeys.list(variables),
+    queryFn: () => getCarts(variables),
+    initialPageParam: { offset: DEFAULT_OFFSET, limit: DEFAULT_LIMIT },
+    getNextPageParam: (lastPage) => {
+      const { offset, limit } = lastPage;
+      return { offset: offset + limit, limit };
+    },
+  });

src/api/carts/use-carts.ts

@@ -1,13 +1,19 @@
 import type { AxiosError, InternalAxiosRequestConfig } from 'axios';
 
+import { useAuth } from '@/core';
+
 import { client } from './client';
 import { toCamelCase, toSnakeCase } from './utils';
 
 export default function interceptors() {
+  const token = useAuth.getState().token;
   client.interceptors.request.use((config: InternalAxiosRequestConfig) => {
     if (config.data) {
       config.data = toSnakeCase(config.data);
     }
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
     return config;
   });
 
@@ -16,6 +22,6 @@ export default function interceptors() {
       response.data = toCamelCase(response.data);
       return response;
     },
-    (error: AxiosError) => Promise.reject(error)
+    (error: AxiosError) => Promise.reject(error),
   );
 }

src/api/common/interceptors.ts

@@ -1,4 +1,5 @@
 export * from './types';
 export * from './use-add-post';
 export * from './use-post';
+export * from './use-post-comments';
 export * from './use-posts';

src/api/posts/index.ts

@@ -4,3 +4,15 @@ export type Post = {
   title: string;
   body: string;
 };
+
+export type Comment = {
+  id: number;
+  body: string;
+  postId: number;
+  likes: number;
+  user: {
+    id: number;
+    username: string;
+    fullName: string;
+  };
+};

src/api/posts/types.ts

@@ -13,5 +13,8 @@ export const useAddPost = createMutation<Response, Variables, AxiosError>({
       url: 'posts/add',
       method: 'POST',
       data: variables,
+      headers: {
+        'Content-Type': 'application/json',
+      },
     }).then((response) => response.data),
 });