diff --git a/app/components/inventory.tsx b/app/components/inventory.tsx index e801f55..5bffa36 100644 --- a/app/components/inventory.tsx +++ b/app/components/inventory.tsx @@ -4,6 +4,7 @@ import { Agent } from "./agent"; import { SkinTile } from "./skin_tile"; import { useNotification } from "~/hooks/notification"; import { WeaponInfo, AgentInfo } from "~/types/skin"; +import { useApi } from "~/hooks/api"; export function Inventory({ side }: { side: "T" | "CT" }) { const [loading, setLoading] = useState(true); @@ -12,6 +13,7 @@ export function Inventory({ side }: { side: "T" | "CT" }) { const [knife, setKnife] = useState(); const [weapons, setWeapons] = useState>([]); const { notify } = useNotification(); + const { get } = useApi(); const setWeapon = (index:number, newWeapon:WeaponInfo) => { setWeapons(weapons.map((v,i) => (i===index ? newWeapon: v))) @@ -19,81 +21,21 @@ export function Inventory({ side }: { side: "T" | "CT" }) { useEffect(() => { const fetch_weapons = async () => { - let response = await fetch( - `${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}&category=Knives`, - { credentials: "include" }, - ) - .then((r) => r.json()) - .catch((e) => { - notify( - { - type: "danger", - loading: false, - title: "An error occured.", - message: `An error occured: ${e}`, - }, - 10000, - ); - }); + let [success, data] = await get(`skin?team=${side}&category=Knives`) - setKnife(new WeaponInfo(response[0])); + setKnife(new WeaponInfo(data[0])); - response = await fetch( - `${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}&category=Gloves`, - { credentials: "include" }, - ) - .then((r) => r.json()) - .catch((e) => { - notify( - { - type: "danger", - loading: false, - title: "An error occured.", - message: `An error occured: ${e}`, - }, - 10000, - ); - }); + [success, data] = await get(`skin?team=${side}&category=Gloves`) - setGloves(new WeaponInfo(response[0])); + setGloves(new WeaponInfo(data[0])); - response = await fetch( - `${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}`, - { credentials: "include" }, - ) - .then((r) => r.json()) - .catch((e) => { - notify( - { - type: "danger", - loading: false, - title: "An error occured.", - message: `An error occured: ${e}`, - }, - 10000, - ); - }); + [success, data] = await get(`skin?team=${side}`); - setWeapons(response.map((item: any) => (new WeaponInfo(item)))); + setWeapons(data.map((item: any) => (new WeaponInfo(item)))); - response = await fetch( - `${import.meta.env.VITE_BASE_API_URL}/agent?team=${side}`, - { credentials: "include" }, - ) - .then((r) => r.json()) - .catch((e) => { - notify( - { - type: "danger", - loading: false, - title: "An error occured.", - message: `An error occured: ${e}`, - }, - 10000, - ); - }); + [success, data] = await get(`agent?team=${side}`); - setAgent(new AgentInfo(response)); + setAgent(new AgentInfo(data)); setLoading(false); }; diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 3d313d2..b8d26cf 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -13,6 +13,7 @@ import { useOverlayState, } from "@heroui/react"; import { useEffect, useState, type Dispatch, type SetStateAction } from "react"; +import { useApi } from "~/hooks/api"; import { useAuth } from "~/hooks/auth"; import { useNotification } from "~/hooks/notification"; @@ -28,6 +29,7 @@ export function Settings({ const [loading, setLoading] = useState(false); const [canClose, setCanClose] = useState(true); const deleteState = useOverlayState(); + const { get, post } = useApi(); useEffect(() => { if (!deleteState.isOpen) { @@ -61,29 +63,7 @@ export function Settings({ const save = async () => { setLoading(true); - let ok = await fetch( - `${import.meta.env.VITE_BASE_API_URL}/update`, - { - body: JSON.stringify(data), - credentials: "include", - method: "POST", - headers: { - "Content-Type": "application/json", - }, - }, - ) - .then((r) => r.ok) - .catch((e) => { - notify( - { - type: "danger", - loading: false, - title: "An error occured.", - message: `An error occured: ${e}`, - }, - 10000, - ); - }); + let ok = await post("update", data); if (ok) { await update(); @@ -97,22 +77,8 @@ export function Settings({ const loadFromSteam = async () => { setLoading(true); - let ok = await fetch(`${import.meta.env.VITE_BASE_API_URL}/reload`, { - credentials: "include", - }) - .then((r) => r.ok) - .catch((e) => { - notify( - { - type: "danger", - loading: false, - title: "An error occured.", - message: `An error occured: ${e}`, - }, - 10000, - ); - }); - + let [ok, _] = await get("reload"); + if (ok) { await update(); notifySucess(); @@ -123,21 +89,7 @@ export function Settings({ const deleteAccount = async () => { setLoading(true); - let ok = await fetch(`${import.meta.env.VITE_BASE_API_URL}/delete`, { - credentials: "include", - }) - .then((r) => r.ok) - .catch((e) => { - notify( - { - type: "danger", - loading: false, - title: "An error occured.", - message: `An error occured: ${e}`, - }, - 10000, - ); - }); + let [ok, _] = await get("delete"); if (ok) { await logout(); diff --git a/app/components/skin_selector.tsx b/app/components/skin_selector.tsx index 837bf22..cb38fc9 100644 --- a/app/components/skin_selector.tsx +++ b/app/components/skin_selector.tsx @@ -1,5 +1,6 @@ import { Button, Modal, Typography } from "@heroui/react"; import { useEffect, useState, type Dispatch, type SetStateAction } from "react"; +import { useApi } from "~/hooks/api"; import { useNotification } from "~/hooks/notification"; import { AgentInfo, WeaponInfo } from "~/types/skin"; @@ -27,6 +28,7 @@ export function SkinSelector({ }) { const [skins, setSkins] = useState>([]); const { notify } = useNotification(); + const { get } = useApi(); const setPaint = (v: Info) => { if (skin instanceof WeaponInfo) { @@ -48,22 +50,7 @@ export function SkinSelector({ useEffect(() => { const fetchSkins = async () => { - let response = await fetch( - `${import.meta.env.VITE_BASE_API_URL}/index?weapon=${skin.weapon_id}&team=${side}${skin instanceof AgentInfo ? "&agent=true" : ""}&gloves=${skin.name.includes("gloves") || skin.name.includes("wraps")}`, - { credentials: "include" }, - ) - .then((r) => r.json()) - .catch((e) => { - notify( - { - type: "danger", - loading: false, - title: "An error occured.", - message: `An error occured: ${e}`, - }, - 10000, - ); - }); + let [_, response] = await get(`index?weapon=${skin.weapon_id}&team=${side}${skin instanceof AgentInfo ? "&agent=true" : ""}&gloves=${skin.name.includes("gloves") || skin.name.includes("wraps")}`) setSkins(response); }; diff --git a/app/hooks/api.tsx b/app/hooks/api.tsx index 5c052f5..74fc5c5 100644 --- a/app/hooks/api.tsx +++ b/app/hooks/api.tsx @@ -8,21 +8,23 @@ import { useNotification } from "./notification"; import type { NotificationType } from "~/components/notification"; type ApiContextType = { - get: (arg0: string) => Promise; - post: (arg0: string, arg1: any) => Promise; + get: (arg0: string) => Promise<[boolean, any]>; + post: (arg0: string, arg1: any) => Promise; }; const apiContext = createContext({ - get: async (_: string) => {}, - post: async (_a: string, _b: any) => {}, + get: async (_: string) => { + return [true, undefined]; + }, + post: async (_a: string, _b: any) => { + return true; + }, }); export function ApiProvider({ children }: PropsWithChildren) { const { notify } = useNotification(); - const get = async (endpoint: string) => { - let data = undefined; - + const get = async (endpoint: string): Promise<[boolean, any]> => { let response = await fetch( `${import.meta.env.VITE_BASE_API_URL}/${endpoint}`, { credentials: "include" }, @@ -30,14 +32,17 @@ export function ApiProvider({ children }: PropsWithChildren) { if (!response) { notifyError(notify, 1, "No data in response from server."); - } else if (!response.ok) { - notifyError(notify, response.status, await response.text()); - } else { - const text = await response.text(); - data = text ? JSON.parse(text): null; + return [false, undefined]; } - return data; + if (!response.ok) { + notifyError(notify, response.status, await response.text()); + return [false, undefined]; + } + const text = await response.text(); + const data = text ? JSON.parse(text) : undefined; + + return [true, data]; }; const post = async (endpoint: string, data: any) => { @@ -55,9 +60,12 @@ export function ApiProvider({ children }: PropsWithChildren) { if (!response) { notifyError(notify, 1, "No data in response from server."); + return false; } else if (!response.ok) { notifyError(notify, response.status, await response.text()); + return false; } + return true; }; return (