refactor: change axios call to fetch api

brunosllz · Nov 14, 2023 · a7770ff · a7770ff
1 parent c08fea8
commit a7770ff
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 96 deletions.
diff --git a/src/actions/get-general-skills-itens.ts b/src/actions/get-general-skills-itens.ts
@@ -1,5 +1,5 @@
-import { serverExternalApi } from '@/libs/axios'
 import { getCurrentServerSession } from './get-current-user'
+import { externalApi } from '@/libs/fetch-api'
 
 export type GeneralSkills = {
   id: string
@@ -20,14 +20,19 @@ export async function getGeneralSkillsItens({
 }> {
   const session = await getCurrentServerSession()
 
-  const { data } = await serverExternalApi.get<ResponseItens>(
+  const response = await externalApi(
     `/projects/general-skills?search=${search ?? ''}`,
     {
       headers: {
         Authorization: `Bearer ${session?.user.accessToken}`,
       },
+      next: {
+        revalidate: 60 * 60 * 6, // 6 hours
+      },
     },
   )
 
+  const data: ResponseItens = await response.json()
+
   return { generalSkills: data }
 }
diff --git a/src/app/(app)/projects/components/manifest-interest-button.tsx b/src/app/(app)/projects/components/manifest-interest-button.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { clientExternalApi } from '@/libs/axios'
 
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
+import { externalApi } from '@/libs/fetch-api'
 
 type ManifestInterestButtonProps = {
   projectId: string
@@ -19,7 +19,9 @@ export function ManifestInterestButton({
 
   async function handleManifestInterest() {
     try {
-      await clientExternalApi.post(`/projects/interest/in/${projectId}`)
+      await externalApi(`/projects/interest/in/${projectId}`, {
+        method: 'POST',
+      })
 
       setHasInterest(true)
     } catch (error) {
@@ -35,7 +37,6 @@ export function ManifestInterestButton({
 
   return (
     <Button
-      size="lg"
       onClick={handleManifestInterest}
       disabled={hasInterest || isInterestedInParticipate}
     >

diff --git a/src/app/(app)/projects/components/project-details.tsx b/src/app/(app)/projects/components/project-details.tsx
@@ -1,6 +1,5 @@
 import dayjs from 'dayjs'
 import { getCurrentServerSession } from '@/actions/get-current-user'
-import { serverExternalApi } from '@/libs/axios'
 import { toast } from '@/components/ui/use-toast'
 
 import Image from 'next/image'
@@ -13,6 +12,7 @@ import { Badge } from '@/components/ui/badge'
 import { ProjectDetailsSkeleton } from './project-details-skeleton'
 import { ProjectRoleTabs } from './project-role-tabs'
 import { ManifestInterestButton } from './manifest-interest-button'
+import { externalApi } from '@/libs/fetch-api'
 
 type ProjectDetailsResponse = {
   id: string
@@ -44,15 +44,19 @@ async function getProjectDetails(currentProjectId: string) {
   const session = await getCurrentServerSession()
 
   try {
-    const { data: projectDetails } =
-      await serverExternalApi.get<ProjectDetailsResponse>(
-        `/projects/from/${currentProjectId}/details`,
-        {
-          headers: {
-            Authorization: `Bearer ${session?.user.accessToken}`,
-          },
+    const response = await externalApi(
+      `/projects/from/${currentProjectId}/details`,
+      {
+        headers: {
+          Authorization: `Bearer ${session?.user.accessToken}`,
         },
-      )
+        next: {
+          tags: ['projects', `${currentProjectId}`],
+        },
+      },
+    )
+
+    const projectDetails: ProjectDetailsResponse = await response.json()
 
     return { projectDetails }
   } catch (error) {

diff --git a/src/app/(app)/projects/components/sidebar/components/pagination.tsx b/src/app/(app)/projects/components/sidebar/components/pagination.tsx
@@ -1,77 +1,6 @@
-// import { Button } from '@/components/ui/button'
-// import { ChevronLeft, ChevronRight } from 'lucide-react'
-
-// type PaginationProps = {
-//   lastPage: number
-//   currentPage: number
-//   selectPage: (selectedPage: number) => void
-//   fetchNextPage: () => void
-//   fetchPreviousPage: () => void
-// }
-
-// export function Pagination({
-//   currentPage,
-//   lastPage,
-//   selectPage,
-//   fetchNextPage,
-//   fetchPreviousPage,
-// }: PaginationProps) {
-//   function handleSelectPage(selectedPage: number) {
-//     selectPage(selectedPage)
-//   }
-
-//   function nextPage() {
-//     if (lastPage > currentPage) {
-//       return fetchNextPage()
-//     }
-//   }
-
-//   function previousPage() {
-//     if (currentPage > 1) {
-//       return fetchPreviousPage()
-//     }
-//   }
-
-//   return (
-//     <footer className="flex items-center space-x-[10px] rounded-md border p-5">
-//       <Button
-//         variant="ghost"
-//         size="icon"
-//         disabled={Number(currentPage) === 1}
-//         onClick={previousPage}
-//       >
-//         <ChevronLeft size={16} />
-//       </Button>
-
-//       {Array.from({ length: lastPage }).map((_, index) => {
-//         return (
-//           <Button
-//             key={index}
-//             onClick={() => handleSelectPage(index + 1)}
-//             data-current-index={index + 1 === Number(currentPage)}
-//             variant="ghost"
-//             size="icon"
-//             className="font-normal data-[current-index=true]:bg-accent"
-//           >
-//             {index + 1}
-//           </Button>
-//         )
-//       })}
-
-//       <Button
-//         variant="ghost"
-//         size="icon"
-//         onClick={nextPage}
-//         disabled={Number(currentPage) === lastPage}
-//       >
-//         <ChevronRight size={16} />
-//       </Button>
-//     </footer>
-//   )
-// }
-
 import { Button } from '@/components/ui/button'
 import { DOTS, usePagination } from '@/hooks/use-pagination'
+
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
 type PaginationProps = {
@@ -117,7 +46,7 @@ export function Pagination({
     <footer className="flex items-center space-x-[10px] rounded-md border p-5">
       <Button
         variant="ghost"
-        size="icon"
+        size="icon-sm"
         disabled={Number(currentPage) === 1}
         onClick={previousPage}
       >
@@ -131,7 +60,7 @@ export function Pagination({
               <Button
                 key={index}
                 variant="ghost"
-                size="icon"
+                size="icon-sm"
                 className="font-normal data-[current-index=true]:bg-accent"
               >
                 {DOTS}
@@ -145,7 +74,7 @@ export function Pagination({
               onClick={() => handleSelectPage(Number(page))}
               data-current-index={page === Number(currentPage)}
               variant="ghost"
-              size="icon"
+              size="icon-sm"
               className="font-normal data-[current-index=true]:bg-accent"
             >
               {page}
@@ -155,7 +84,7 @@ export function Pagination({
 
       <Button
         variant="ghost"
-        size="icon"
+        size="icon-sm"
         onClick={nextPage}
         disabled={Number(currentPage) === lastPage}
       >

diff --git a/src/app/(app)/projects/components/sidebar/components/projects-list.tsx b/src/app/(app)/projects/components/sidebar/components/projects-list.tsx
@@ -4,9 +4,9 @@
 
 import { useCallback, useEffect, useRef } from 'react'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { clientExternalApi } from '@/libs/axios'
 import { useQuery } from '@tanstack/react-query'
 import { PaginationResponseData } from '@/@types/pagination-response-data'
+import { externalApi } from '@/libs/fetch-api'
 
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { ProjectCardSkeleton } from './project-card-skeleton'
@@ -70,12 +70,15 @@ export function ProjectsList({
 
       const mergedParams = mergeSearchParams(selectedProjectsSearchParams)
 
-      const { data } = await clientExternalApi.get(
+      const response = await externalApi(
         `/projects/short/details?page=${useBoundStore.getState().currentPage}&${
           selectedProjectsSearchParams.length && mergedParams
         }`,
+        { cache: 'no-store' },
       )
 
+      const data = await response.json()
+
       return data
     },
     staleTime: 1000 * 60 * 10, // 10 minutes
@@ -292,11 +295,11 @@ export function ProjectsList({
 
   if (!projectsResponse) {
     return (
-      <>
+      <div className="pr-6">
         {Array.from({ length: 3 }).map((_, index) => (
           <ProjectCardSkeleton key={index} />
         ))}
-      </>
+      </div>
     )
   }
 
@@ -305,11 +308,11 @@ export function ProjectsList({
   return (
     <>
       {isLoading ? (
-        <>
+        <div className="pr-6">
           {Array.from({ length: 3 }).map((_, index) => (
             <ProjectCardSkeleton key={index} />
           ))}
-        </>
+        </div>
       ) : projects.length ? (
         <ScrollArea
           viewport={{