Merge branch 'main' into feature/vitest

Author: Tr-andreson

.gitignore

@@ -36,3 +36,23 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Database backups
+/backups/
+*.sql
+*.dump
+*.backup
+
+# Logs
+*.log
+logs/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+Thumbs.db
+.DS_Store

README.md

@@ -124,15 +124,18 @@ We have applied this method by examining the code after each new added functiona
 </ol>
 
 ```
-DATABASE_URL="mysql://username:password@localhost:3306/singitronic_nextjs"
+NEXT_PUBLIC_API_BASE_URL=http://localhost:3001
+NODE_ENV=development
+DATABASE_URL="mysql://username:password@localhost:3306/singitronic_nextjs?sslmode=disabled"
 NEXTAUTH_SECRET=12D16C923BA17672F89B18C1DB22A
 NEXTAUTH_URL=http://localhost:3000
 ```
 
 <p>7. After you do it, you need to create another .env file in the server folder and put the same DATABASE_URL you used in the previous .env file:</p>
 
 ```
-DATABASE_URL="mysql://username:password@localhost:3306/singitronic_nextjs"
+NODE_ENV=development
+DATABASE_URL="mysql://username:password@localhost:3306/singitronic_nextjs?sslmode=disabled"
 ```
 
 <p>8. Now you need to open your terminal of choice in the root folder of the project and write:</p>

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

@@ -1,18 +1,22 @@
 "use client";
 import { DashboardSidebar } from "@/components";
 import { useRouter } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, use } from "react";
 import toast from "react-hot-toast";
 import { formatCategoryName } from "../../../../../utils/categoryFormating";
 import { convertCategoryNameToURLFriendly } from "../../../../../utils/categoryFormating";
+import apiClient from "@/lib/api";
 
 interface DashboardSingleCategoryProps {
-  params: { id: number };
+  params: Promise<{ id: string }>;
 }
 
 const DashboardSingleCategory = ({
-  params: { id },
+  params,
 }: DashboardSingleCategoryProps) => {
+  const resolvedParams = use(params);
+  const id = resolvedParams.id;
+  
   const [categoryInput, setCategoryInput] = useState<{ name: string }>({
     name: "",
   });
@@ -23,7 +27,7 @@ const DashboardSingleCategory = ({
       method: "DELETE",
     };
     // sending API request for deleting a category
-    fetch(`http://localhost:3001/api/categories/${id}`, requestOptions)
+    apiClient.delete(`/api/categories/${id}`, requestOptions)
       .then((response) => {
         if (response.status === 204) {
           toast.success("Category deleted successfully");
@@ -47,7 +51,7 @@ const DashboardSingleCategory = ({
         }),
       };
       // sending API request for updating a category
-      fetch(`http://localhost:3001/api/categories/${id}`, requestOptions)
+      apiClient.put(`/api/categories/${id}`, requestOptions)
         .then((response) => {
           if (response.status === 200) {
             return response.json();
@@ -67,7 +71,7 @@ const DashboardSingleCategory = ({
 
   useEffect(() => {
     // sending API request for getting single categroy
-    fetch(`http://localhost:3001/api/categories/${id}`)
+    apiClient.get(`/api/categories/${id}`)
       .then((res) => {
         return res.json();
       })

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

@@ -3,6 +3,7 @@ import { DashboardSidebar } from "@/components";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
 import { convertCategoryNameToURLFriendly } from "../../../../../utils/categoryFormating";
+import apiClient from "@/lib/api";
 
 const DashboardNewCategoryPage = () => {
   const [categoryInput, setCategoryInput] = useState({
@@ -19,7 +20,7 @@ const DashboardNewCategoryPage = () => {
         }),
       };
       // sending API request for creating new cateogry
-      fetch(`http://localhost:3001/api/categories`, requestOptions)
+      apiClient.post(`/api/categories`, requestOptions)
         .then((response) => {
           if (response.status === 201) {
             return response.json();

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

@@ -4,13 +4,14 @@ import { nanoid } from "nanoid";
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 import { formatCategoryName } from "../../../../utils/categoryFormating";
+import apiClient from "@/lib/api";
 
 const DashboardCategory = () => {
   const [categories, setCategories] = useState<Category[]>([]);
 
   // getting all categories to be displayed on the all categories page
   useEffect(() => {
-    fetch("http://localhost:3001/api/categories")
+    apiClient.get("/api/categories")
       .then((res) => {
         return res.json();
       })