Skip to content

Commit 5364593

Browse files
Kuzma02Kuzma02
committed
built API client utility for consistent API calls and centralized configuration for env vars
1 parent 3aff81c commit 5364593

22 files changed

Lines changed: 126 additions & 57 deletions

File tree

‎app/(dashboard)/admin/categories/[id]/page.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import React, { useEffect, useState } from "react";
55
import toast from "react-hot-toast";
66
import { formatCategoryName } from "../../../../../utils/categoryFormating";
77
import { convertCategoryNameToURLFriendly } from "../../../../../utils/categoryFormating";
8+
import apiClient from "@/lib/api";
89

910
interface DashboardSingleCategoryProps {
1011
params: { id: number };
@@ -23,7 +24,7 @@ const DashboardSingleCategory = ({
2324
method: "DELETE",
2425
};
2526
// sending API request for deleting a category
26-
fetch(`http://localhost:3001/api/categories/${id}`, requestOptions)
27+
apiClient.delete(`/api/categories/${id}`, requestOptions)
2728
.then((response) => {
2829
if (response.status === 204) {
2930
toast.success("Category deleted successfully");
@@ -47,7 +48,7 @@ const DashboardSingleCategory = ({
4748
}),
4849
};
4950
// sending API request for updating a category
50-
fetch(`http://localhost:3001/api/categories/${id}`, requestOptions)
51+
apiClient.put(`/api/categories/${id}`, requestOptions)
5152
.then((response) => {
5253
if (response.status === 200) {
5354
return response.json();
@@ -67,7 +68,7 @@ const DashboardSingleCategory = ({
6768

6869
useEffect(() => {
6970
// sending API request for getting single categroy
70-
fetch(`http://localhost:3001/api/categories/${id}`)
71+
apiClient.get(`/api/categories/${id}`)
7172
.then((res) => {
7273
return res.json();
7374
})

‎app/(dashboard)/admin/categories/new/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { DashboardSidebar } from "@/components";
33
import React, { useState } from "react";
44
import toast from "react-hot-toast";
55
import { convertCategoryNameToURLFriendly } from "../../../../../utils/categoryFormating";
6+
import apiClient from "@/lib/api";
67

78
const DashboardNewCategoryPage = () => {
89
const [categoryInput, setCategoryInput] = useState({
@@ -19,7 +20,7 @@ const DashboardNewCategoryPage = () => {
1920
}),
2021
};
2122
// sending API request for creating new cateogry
22-
fetch(`http://localhost:3001/api/categories`, requestOptions)
23+
apiClient.post(`/api/categories`, requestOptions)
2324
.then((response) => {
2425
if (response.status === 201) {
2526
return response.json();

‎app/(dashboard)/admin/categories/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import { nanoid } from "nanoid";
44
import Link from "next/link";
55
import React, { useEffect, useState } from "react";
66
import { formatCategoryName } from "../../../../utils/categoryFormating";
7+
import apiClient from "@/lib/api";
78

89
const DashboardCategory = () => {
910
const [categories, setCategories] = useState<Category[]>([]);
1011

1112
// getting all categories to be displayed on the all categories page
1213
useEffect(() => {
13-
fetch("http://localhost:3001/api/categories")
14+
apiClient.get("/api/categories")
1415
.then((res) => {
1516
return res.json();
1617
})

‎app/(dashboard)/admin/orders/[id]/page.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22
import { DashboardSidebar } from "@/components";
3+
import apiClient from "@/lib/api";
34
import { isValidEmailAddressFormat, isValidNameOrLastname } from "@/lib/utils";
45
import Image from "next/image";
56
import Link from "next/link";
@@ -51,16 +52,16 @@ const AdminSingleOrder = () => {
5152

5253
useEffect(() => {
5354
const fetchOrderData = async () => {
54-
const response = await fetch(
55-
`http://localhost:3001/api/orders/${params?.id}`
55+
const response = await apiClient.get(
56+
`/api/orders/${params?.id}`
5657
);
5758
const data: Order = await response.json();
5859
setOrder(data);
5960
};
6061

6162
const fetchOrderProducts = async () => {
62-
const response = await fetch(
63-
`http://localhost:3001/api/order-product/${params?.id}`
63+
const response = await apiClient.get(
64+
`/api/order-product/${params?.id}`
6465
);
6566
const data: OrderProduct[] = await response.json();
6667
setOrderProducts(data);
@@ -98,7 +99,7 @@ const AdminSingleOrder = () => {
9899
return;
99100
}
100101

101-
fetch(`http://localhost:3001/api/orders/${order?.id}`, {
102+
apiClient.put(`/api/orders/${order?.id}`, {
102103
method: "PUT", // or 'PUT'
103104
headers: {
104105
"Content-Type": "application/json",
@@ -125,12 +126,12 @@ const AdminSingleOrder = () => {
125126
method: "DELETE",
126127
};
127128

128-
fetch(
129-
`http://localhost:3001/api/order-product/${order?.id}`,
129+
apiClient.delete(
130+
`/api/order-product/${order?.id}`,
130131
requestOptions
131132
).then((response) => {
132-
fetch(
133-
`http://localhost:3001/api/orders/${order?.id}`,
133+
apiClient.delete(
134+
`/api/orders/${order?.id}`,
134135
requestOptions
135136
).then((response) => {
136137
toast.success("Order deleted successfully");

‎app/(dashboard)/admin/products/[id]/page.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
formatCategoryName,
1010
} from "../../../../../utils/categoryFormating";
1111
import { nanoid } from "nanoid";
12+
import apiClient from "@/lib/api";
1213

1314
interface DashboardProductDetailsProps {
1415
params: { id: number };
@@ -27,7 +28,7 @@ const DashboardProductDetails = ({
2728
const requestOptions = {
2829
method: "DELETE",
2930
};
30-
fetch(`http://localhost:3001/api/products/${id}`, requestOptions)
31+
apiClient.delete(`/api/products/${id}`, requestOptions)
3132
.then((response) => {
3233
if (response.status !== 204) {
3334
if (response.status === 400) {
@@ -65,7 +66,7 @@ const DashboardProductDetails = ({
6566
headers: { "Content-Type": "application/json" },
6667
body: JSON.stringify(product),
6768
};
68-
fetch(`http://localhost:3001/api/products/${id}`, requestOptions)
69+
apiClient.put(`/api/products/${id}`, requestOptions)
6970
.then((response) => {
7071
if (response.status === 200) {
7172
return response.json();
@@ -85,7 +86,7 @@ const DashboardProductDetails = ({
8586
formData.append("uploadedFile", file);
8687

8788
try {
88-
const response = await fetch("http://localhost:3001/api/main-image", {
89+
const response = await apiClient.post("/api/main-image", {
8990
method: "POST",
9091
body: formData,
9192
});
@@ -103,15 +104,15 @@ const DashboardProductDetails = ({
103104

104105
// fetching main product data including other product images
105106
const fetchProductData = async () => {
106-
fetch(`http://localhost:3001/api/products/${id}`)
107+
apiClient.get(`/api/products/${id}`)
107108
.then((res) => {
108109
return res.json();
109110
})
110111
.then((data) => {
111112
setProduct(data);
112113
});
113114

114-
const imagesData = await fetch(`http://localhost:3001/api/images/${id}`, {
115+
const imagesData = await apiClient.get(`/api/images/${id}`, {
115116
cache: "no-store",
116117
});
117118
const images = await imagesData.json();
@@ -120,7 +121,7 @@ const DashboardProductDetails = ({
120121

121122
// fetching all product categories. It will be used for displaying categories in select category input
122123
const fetchCategories = async () => {
123-
fetch(`http://localhost:3001/api/categories`)
124+
apiClient.get(`/api/categories`)
124125
.then((res) => {
125126
return res.json();
126127
})

‎app/(dashboard)/admin/products/new/page.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22
import { DashboardSidebar } from "@/components";
3+
import apiClient from "@/lib/api";
34
import { convertCategoryNameToURLFriendly as convertSlugToURLFriendly } from "@/utils/categoryFormating";
45
import Image from "next/image";
56
import React, { useEffect, useState } from "react";
@@ -43,7 +44,7 @@ const AddNewProduct = () => {
4344
headers: { "Content-Type": "application/json" },
4445
body: JSON.stringify(product),
4546
};
46-
fetch(`http://localhost:3001/api/products`, requestOptions)
47+
apiClient.post(`/api/products`, requestOptions)
4748
.then((response) => {
4849
if (response.status === 201) {
4950
return response.json();
@@ -74,7 +75,7 @@ const AddNewProduct = () => {
7475
formData.append("uploadedFile", file);
7576

7677
try {
77-
const response = await fetch("http://localhost:3001/api/main-image", {
78+
const response = await apiClient.post("/api/main-image", {
7879
method: "POST",
7980
body: formData,
8081
});
@@ -90,7 +91,7 @@ const AddNewProduct = () => {
9091
};
9192

9293
const fetchCategories = async () => {
93-
fetch(`http://localhost:3001/api/categories`)
94+
apiClient.get(`/api/categories`)
9495
.then((res) => {
9596
return res.json();
9697
})

‎app/(dashboard)/admin/users/[id]/page.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
44
import toast from "react-hot-toast";
55
import { useRouter } from "next/navigation";
66
import { isValidEmailAddressFormat } from "@/lib/utils";
7+
import apiClient from "@/lib/api";
78

89
interface DashboardUserDetailsProps {
910
params: { id: number };
@@ -27,7 +28,7 @@ const DashboardSingleUserPage = ({
2728
const requestOptions = {
2829
method: "DELETE",
2930
};
30-
fetch(`http://localhost:3001/api/users/${id}`, requestOptions)
31+
apiClient.delete(`/api/users/${id}`, requestOptions)
3132
.then((response) => {
3233
if (response.status === 204) {
3334
toast.success("User deleted successfully");
@@ -62,7 +63,7 @@ const DashboardSingleUserPage = ({
6263
role: userInput.role,
6364
}),
6465
};
65-
fetch(`http://localhost:3001/api/users/${id}`, requestOptions)
66+
apiClient.put(`/api/users/${id}`, requestOptions)
6667
.then((response) => {
6768
if (response.status === 200) {
6869
return response.json();
@@ -86,7 +87,7 @@ const DashboardSingleUserPage = ({
8687

8788
useEffect(() => {
8889
// sending API request for a single user
89-
fetch(`http://localhost:3001/api/users/${id}`)
90+
apiClient.get(`/api/users/${id}`)
9091
.then((res) => {
9192
return res.json();
9293
})

‎app/(dashboard)/admin/users/new/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const DashboardCreateNewUser = () => {
2828
headers: { "Content-Type": "application/json" },
2929
body: JSON.stringify(userInput),
3030
};
31-
fetch(`http://localhost:3001/api/users`, requestOptions)
31+
ap(`/api/users`, requestOptions)
3232
.then((response) => {
3333
if(response.status === 201){
3434
return response.json();

‎app/actions/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
'use server'
22

3+
import apiClient from "@/lib/api";
34
import { revalidateTag } from "next/cache";
45

56
export async function deleteWishItem(id: string){
6-
await fetch(`http://localhost:3001/api/wishlist/${id}`, {
7+
apiClient.delete(`/api/wishlist/${id}`, {
78
method: "DELETE",
89
});
910
}

‎app/checkout/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
66
import toast from "react-hot-toast";
77
import { useRouter } from "next/navigation";
88
import { isValidCardNumber, isValidCreditCardCVVOrCVC, isValidCreditCardExpirationDate, isValidEmailAddressFormat, isValidNameOrLastname } from "@/lib/utils";
9+
import apiClient from "@/lib/api";
910

1011
const CheckoutPage = () => {
1112
const [checkoutForm, setCheckoutForm] = useState({
@@ -82,7 +83,7 @@ const CheckoutPage = () => {
8283
}
8384

8485
// sending API request for creating a order
85-
const response = fetch("http://localhost:3001/api/orders", {
86+
const response = apiClient.post("/api/orders", {
8687
method: "POST",
8788
headers: {
8889
"Content-Type": "application/json",
@@ -147,7 +148,7 @@ const CheckoutPage = () => {
147148
productQuantity: number
148149
) => {
149150
// sending API POST request for the table customer_order_product that does many to many relatioship for order and product
150-
const response = await fetch("http://localhost:3001/api/order-product", {
151+
const response = await apiClient.post("/api/order-product", {
151152
method: "POST", // or 'PUT'
152153
headers: {
153154
"Content-Type": "application/json",

0 commit comments

Comments
 (0)