From ad1c56f593c9515d278e3d3f256e492ceddd6379 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Fri, 23 Aug 2024 03:25:12 +0500 Subject: [PATCH] refactor: change API proxy from Serverless Functions to Serverless Middlewares to save Function Invocations on vercel --- app/api/[...endpoint]/route.ts | 49 ------------- app/api/config.ts | 3 +- app/api/utils.ts | 4 +- .../CollectionInfo/CollectionInfo.Basics.tsx | 1 - .../CollectionLink/CollectionLink.tsx | 1 - app/pages/Profile.tsx | 6 +- app/pages/Release.tsx | 3 +- app/store/auth.ts | 3 +- middleware.ts | 71 +++++++++++++++++++ 9 files changed, 81 insertions(+), 60 deletions(-) delete mode 100644 app/api/[...endpoint]/route.ts create mode 100644 middleware.ts diff --git a/app/api/[...endpoint]/route.ts b/app/api/[...endpoint]/route.ts deleted file mode 100644 index aa44bdd..0000000 --- a/app/api/[...endpoint]/route.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { NextResponse, NextRequest } from "next/server"; -import { fetchDataViaGet, fetchDataViaPost } from "../utils"; -import { API_URL } from "../config"; -import { buffer } from "stream/consumers"; - -export async function GET( - req: NextRequest, - { params }: { params: { endpoint: Array } } -) { - const { endpoint } = params; - let API_V2: boolean | string = - req.nextUrl.searchParams.get("API_V2") || false; - if (API_V2 === "true") { - req.nextUrl.searchParams.delete("API_V2"); - } - const query = req.nextUrl.searchParams.toString(); - const url = `${API_URL}/${endpoint.join("/")}${query ? `?${query}` : ""}`; - - const response = await fetchDataViaGet(url, API_V2); - return NextResponse.json(response); -} - -export async function POST( - req: NextRequest, - { params }: { params: { endpoint: Array } } -) { - const { endpoint } = params; - let API_V2: boolean | string = - req.nextUrl.searchParams.get("API_V2") || false; - if (API_V2 === "true") { - req.nextUrl.searchParams.delete("API_V2"); - } - const query = req.nextUrl.searchParams.toString(); - const url = `${API_URL}/${endpoint.join("/")}${query ? `?${query}` : ""}`; - let body; - const ReqContentTypeHeader = req.headers.get("Content-Type") || ""; - let ResContentTypeHeader = ""; - - if (ReqContentTypeHeader.split(";")[0] == "multipart/form-data") { - ResContentTypeHeader = ReqContentTypeHeader; - body = await req.arrayBuffer(); - } else { - ResContentTypeHeader = "application/json; charset=UTF-8"; - body = JSON.stringify(await req.json()); - } - - const response = await fetchDataViaPost(url, body, API_V2, ResContentTypeHeader); - return NextResponse.json(response); -} diff --git a/app/api/config.ts b/app/api/config.ts index 8c340c0..e81ae4e 100644 --- a/app/api/config.ts +++ b/app/api/config.ts @@ -1,7 +1,7 @@ export const CURRENT_APP_VERSION = "3.1.1"; export const API_URL = "https://api.anixart.tv"; -export const API_PREFIX = "/api"; +export const API_PREFIX = "/api/proxy"; export const USER_AGENT = "AnixartApp/8.2.1-23121216 (Android 9; SDK 28; arm64-v8a; samsung SM-G975N; en)"; @@ -25,7 +25,6 @@ export const ENDPOINTS = { }, collection: { base: `${API_PREFIX}/collection`, - list: `${API_PREFIX}/collection/list`, addRelease: `${API_PREFIX}/collectionMy/release/add`, create: `${API_PREFIX}/collectionMy/create`, delete: `${API_PREFIX}/collectionMy/delete`, diff --git a/app/api/utils.ts b/app/api/utils.ts index 8066017..39d963a 100644 --- a/app/api/utils.ts +++ b/app/api/utils.ts @@ -16,7 +16,7 @@ export const fetchDataViaGet = async ( headers: HEADERS, }); if (response.status !== 200) { - throw new Error("Error fetching data"); + return null; } const data = await response.json(); return data; @@ -45,7 +45,7 @@ export const fetchDataViaPost = async ( body: body, }); if (response.status !== 200) { - throw new Error("Error fetching data"); + return null; } const data = await response.json(); return data; diff --git a/app/components/CollectionInfo/CollectionInfo.Basics.tsx b/app/components/CollectionInfo/CollectionInfo.Basics.tsx index 5e6432f..a7cb2fd 100644 --- a/app/components/CollectionInfo/CollectionInfo.Basics.tsx +++ b/app/components/CollectionInfo/CollectionInfo.Basics.tsx @@ -1,5 +1,4 @@ import { Card, Button, Avatar } from "flowbite-react"; -import { useState } from "react"; import { unixToDate } from "#/api/utils"; import Link from "next/link"; diff --git a/app/components/CollectionLink/CollectionLink.tsx b/app/components/CollectionLink/CollectionLink.tsx index 4ba4210..25b8610 100644 --- a/app/components/CollectionLink/CollectionLink.tsx +++ b/app/components/CollectionLink/CollectionLink.tsx @@ -1,5 +1,4 @@ import Link from "next/link"; -import { sinceUnixDate } from "#/api/utils"; import { Chip } from "#/components/Chip/Chip"; export const CollectionLink = (props: any) => { diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index d73a9c6..a95b1bd 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -1,12 +1,12 @@ "use client"; import { useUserStore } from "#/store/auth"; import { useEffect, useState } from "react"; -import { fetchDataViaGet } from "../api/utils"; import { Spinner } from "../components/Spinner/Spinner"; import { Avatar, Card, Button, Table } from "flowbite-react"; import { Chip } from "../components/Chip/Chip"; -import { unixToDate, minutesToTime } from "../api/utils"; +import { fetchDataViaGet, unixToDate, minutesToTime } from "../api/utils"; import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel"; +import { ENDPOINTS } from "#/api/config"; export const ProfilePage = (props: any) => { const authUser = useUserStore((state) => state); @@ -15,7 +15,7 @@ export const ProfilePage = (props: any) => { useEffect(() => { async function _getData() { - let url = `/api/profile/${props.id}`; + let url = `${ENDPOINTS.user.profile}/${props.id}`; if (authUser.token) { url += `?token=${authUser.token}`; } diff --git a/app/pages/Release.tsx b/app/pages/Release.tsx index d649706..b39d9d6 100644 --- a/app/pages/Release.tsx +++ b/app/pages/Release.tsx @@ -16,6 +16,7 @@ import { ReleaseInfoRelated } from "#/components/ReleaseInfo/ReleaseInfo.Related import { ReleaseInfoScreenshots } from "#/components/ReleaseInfo/ReleaseInfo.Screenshots"; import { CommentsMain } from "#/components/Comments/Comments.Main"; import { InfoLists } from "#/components/InfoLists/InfoLists"; +import { ENDPOINTS } from "#/api/config"; export const ReleasePage = (props: any) => { const userStore = useUserStore(); @@ -25,7 +26,7 @@ export const ReleasePage = (props: any) => { function useFetch(id: number) { let url: string; - url = `/api/release/${id}`; + url = `${ENDPOINTS.release.info}/${id}`; if (userStore.token) { url += `?token=${userStore.token}`; } diff --git a/app/store/auth.ts b/app/store/auth.ts index 9af7b5b..e30cf28 100644 --- a/app/store/auth.ts +++ b/app/store/auth.ts @@ -1,6 +1,7 @@ "use client"; import { create } from "zustand"; import { getJWT, removeJWT, fetchDataViaGet } from "#/api/utils"; +import { ENDPOINTS } from "#/api/config"; interface userState { _hasHydrated: boolean; @@ -44,7 +45,7 @@ export const useUserStore = create((set, get) => ({ if (jwt) { const _checkAuth = async () => { const data = await fetchDataViaGet( - `/api/profile/${jwt.user_id}?token=${jwt.jwt}` + `${ENDPOINTS.user.profile}/${jwt.user_id}?token=${jwt.jwt}` ); if (data && data.is_my_profile) { get().login(data.profile, jwt.jwt); diff --git a/middleware.ts b/middleware.ts new file mode 100644 index 0000000..40c8211 --- /dev/null +++ b/middleware.ts @@ -0,0 +1,71 @@ +import type { NextFetchEvent } from 'next/server'; +import { fetchDataViaGet, fetchDataViaPost } from '#/api/utils'; +import { API_URL } from '#/api/config'; + +export const config = { + matcher: '/api/proxy/:path*', +}; + +export default async function middleware(request: Request, context: NextFetchEvent) { + if (request.method == "GET") { + const url = request.url + const path = url.match(/\/api\/proxy\/(.*)/)?.[1] + + const data = await fetchDataViaGet(`${API_URL}/${path}`); + + if (!data) { + return new Response(JSON.stringify({ message: "Error Fetching Data" }), { + status: 500, + headers: { + 'Content-Type': 'application/json', + }, + }); + } + + return new Response(JSON.stringify(data), { + status: 200, + headers: { + 'Content-Type': 'application/json', + }, + }); + } + + if (request.method == "POST") { + const url = new URL(request.url); + const isApiV2 = url.searchParams.get("API-Version") == "v2" || false; + if (isApiV2) { + url.searchParams.delete("API-Version"); + } + const path = url.pathname.match(/\/api\/proxy\/(.*)/)?.[1] + url.search + + const ReqContentTypeHeader = request.headers.get("Content-Type") || ""; + let ResContentTypeHeader = ""; + let body = null; + + if (ReqContentTypeHeader.split(";")[0] == "multipart/form-data") { + ResContentTypeHeader = ReqContentTypeHeader; + body = await request.arrayBuffer(); + } else { + ResContentTypeHeader = "application/json; charset=UTF-8"; + body = JSON.stringify(await request.json()); + } + + const data = await fetchDataViaPost(`${API_URL}/${path}`, body, isApiV2, ResContentTypeHeader); + + if (!data) { + return new Response(JSON.stringify({ message: "Error Fetching Data" }), { + status: 500, + headers: { + 'Content-Type': 'application/json', + }, + }); + } + + return new Response(JSON.stringify(data), { + status: 200, + headers: { + 'Content-Type': 'application/json', + }, + }); + } +} \ No newline at end of file