Extract api functions

Author: jkettmann

api/issues.ts

@@ -0,0 +1,26 @@
+import { axios } from "./axios";
+
+type IssueFilters = {
+  status?: "open" | "resolved";
+};
+
+const ENDPOINT = "/issue";
+
+export async function getIssues(
+  page: number,
+  filters: IssueFilters = {},
+  options?: { signal?: AbortSignal }
+) {
+  const { data } = await axios.get(ENDPOINT, {
+    params: { page, ...filters },
+    signal: options?.signal,
+  });
+  return data;
+}
+
+export async function resolveIssue(issueId: string) {
+  const { data } = await axios.patch(`${ENDPOINT}/${issueId}`, {
+    status: "resolved",
+  });
+  return data;
+}

api/projects.ts

@@ -0,0 +1,8 @@
+import { axios } from "./axios";
+
+const ENDPOINT = "/project";
+
+export async function getProjects() {
+  const { data } = await axios.get(ENDPOINT);
+  return data;
+}

features/issues/api/use-get-issues.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { axios } from "@api/axios";
+import { getIssues } from "@api/issues";
 import type { Page } from "@typings/page.types";
 import type { Issue } from "@features/issues";
 
@@ -13,18 +13,10 @@ export function getQueryKey(page?: number) {
   return [QUERY_KEY, page];
 }
 
-async function getIssues(page: number, options?: { signal?: AbortSignal }) {
-  const { data } = await axios.get("/issue", {
-    params: { page, status: "open" },
-    signal: options?.signal,
-  });
-  return data;
-}
-
 export function useGetIssues(page: number) {
   const query = useQuery<Page<Issue>, Error>(
     getQueryKey(page),
-    ({ signal }) => getIssues(page, { signal }),
+    ({ signal }) => getIssues(page, { status: "open" }, { signal }),
     { keepPreviousData: true }
   );
 
@@ -33,7 +25,7 @@ export function useGetIssues(page: number) {
   useEffect(() => {
     if (query.data?.meta.hasNextPage) {
       queryClient.prefetchQuery(getQueryKey(page + 1), ({ signal }) =>
-        getIssues(page + 1, { signal })
+        getIssues(page + 1, { status: "open" }, { signal })
       );
     }
   }, [query.data, page, queryClient]);

features/issues/api/use-resolve-issue.tsx

@@ -1,16 +1,9 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRef } from "react";
-import { axios } from "@api/axios";
+import { resolveIssue } from "@api/issues";
 import * as GetIssues from "./use-get-issues";
 import type { Issue } from "@features/issues";
 
-async function resolveIssue(issueId: string) {
-  const { data } = await axios.patch(`/issue/${issueId}`, {
-    status: "resolved",
-  });
-  return data;
-}
-
 export function useResolveIssue(page: number) {
   const queryClient = useQueryClient();
   const ongoingMutationCount = useRef(0);

features/projects/api/use-projects.tsx

@@ -1,12 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
-import { axios } from "@api/axios";
+import { getProjects } from "@api/projects";
 import type { Project } from "@features/projects";
 
-async function getProjects() {
-  const { data } = await axios.get("/project");
-  return data;
-}
-
 export function useProjects() {
   return useQuery<Project[], Error>(["projects"], getProjects);
 }