Fixed 4 blocking issuses, pages now load flawlessly

Author: N-Kiran123

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/blank1.yml

@@ -0,0 +1,36 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the "main" branch
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v4
+
+      # Runs a single command using the runners shell
+      - name: Run a one-line script
+        run: echo Hello, world!
+
+      # Runs a set of commands using the runners shell
+      - name: Run a multi-line script
+        run: |
+          echo Add other actions to build,
+          echo test, and deploy your project.

.gitignore

@@ -0,0 +1,57 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# 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

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Aleksandar Kuzmanović
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Providers.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { Toaster } from "react-hot-toast";
+
+import React from "react";
+
+const Providers = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Toaster
+        toastOptions={{
+          className: "",
+          style: {
+            fontSize: "17px",
+          },
+        }}
+      />
+      {children}
+    </>
+  );
+};
+
+export default Providers;

README.md

@@ -0,0 +1,131 @@
+"use client";
+import { DashboardSidebar } from "@/components";
+import { useRouter } from "next/navigation";
+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: Promise<{ id: string }>;
+}
+
+const DashboardSingleCategory = ({
+  params,
+}: DashboardSingleCategoryProps) => {
+  const resolvedParams = use(params);
+  const id = resolvedParams.id;
+  
+  const [categoryInput, setCategoryInput] = useState<{ name: string }>({
+    name: "",
+  });
+  const router = useRouter();
+
+  const deleteCategory = async () => {
+    const requestOptions = {
+      method: "DELETE",
+    };
+    // sending API request for deleting a category
+    apiClient.delete(`/api/categories/${id}`, requestOptions)
+      .then((response) => {
+        if (response.status === 204) {
+          toast.success("Category deleted successfully");
+          router.push("/admin/categories");
+        } else {
+          throw Error("There was an error deleting a category");
+        }
+      })
+      .catch((error) => {
+        toast.error("There was an error deleting category");
+      });
+  };
+
+  const updateCategory = async () => {
+    if (categoryInput.name.length > 0) {
+      const requestOptions = {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: convertCategoryNameToURLFriendly(categoryInput.name),
+        }),
+      };
+      // sending API request for updating a category
+      apiClient.put(`/api/categories/${id}`, requestOptions)
+        .then((response) => {
+          if (response.status === 200) {
+            return response.json();
+          } else {
+            throw Error("Error updating a category");
+          }
+        })
+        .then((data) => toast.success("Category successfully updated"))
+        .catch((error) => {
+          toast.error("There was an error while updating a category");
+        });
+    } else {
+      toast.error("For updating a category you must enter all values");
+      return;
+    }
+  };
+
+  useEffect(() => {
+    // sending API request for getting single categroy
+    apiClient.get(`/api/categories/${id}`)
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        setCategoryInput({
+          name: data?.name,
+        });
+      });
+  }, [id]);
+
+  return (
+    <div className="bg-white flex justify-start max-w-screen-2xl mx-auto xl:h-full max-xl:flex-col max-xl:gap-y-5">
+      <DashboardSidebar />
+      <div className="flex flex-col gap-y-7 xl:pl-5 max-xl:px-5 w-full">
+        <h1 className="text-3xl font-semibold">Category details</h1>
+        <div>
+          <label className="form-control w-full max-w-xs">
+            <div className="label">
+              <span className="label-text">Category name:</span>
+            </div>
+            <input
+              type="text"
+              className="input input-bordered w-full max-w-xs"
+              value={formatCategoryName(categoryInput.name)}
+              onChange={(e) =>
+                setCategoryInput({ ...categoryInput, name: e.target.value })
+              }
+            />
+          </label>
+        </div>
+
+        <div className="flex gap-x-2 max-sm:flex-col">
+          <button
+            type="button"
+            className="uppercase bg-blue-500 px-10 py-5 text-lg border border-black border-gray-300 font-bold text-white shadow-sm hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2"
+            onClick={updateCategory}
+          >
+            Update category
+          </button>
+          <button
+            type="button"
+            className="uppercase bg-red-600 px-10 py-5 text-lg border border-black border-gray-300 font-bold text-white shadow-sm hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2"
+            onClick={deleteCategory}
+          >
+            Delete category
+          </button>
+        </div>
+        <p className="text-xl text-error max-sm:text-lg">
+          Note: if you delete this category, you will delete all products
+          associated with the category.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardSingleCategory;

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

@@ -0,0 +1,79 @@
+"use client";
+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({
+    name: "",
+  });
+
+  const addNewCategory = () => {
+    if (categoryInput.name.length > 0) {
+      const requestOptions = {
+        method: "post",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: convertCategoryNameToURLFriendly(categoryInput.name),
+        }),
+      };
+      // sending API request for creating new cateogry
+      apiClient.post(`/api/categories`, requestOptions)
+        .then((response) => {
+          if (response.status === 201) {
+            return response.json();
+          } else {
+            throw Error("There was an error while creating category");
+          }
+        })
+        .then((data) => {
+          toast.success("Category added successfully");
+          setCategoryInput({
+            name: "",
+          });
+        })
+        .catch((error) => {
+          toast.error("There was an error while creating category");
+        });
+    } else {
+      toast.error("You need to enter values to add a category");
+    }
+  };
+  return (
+    <div className="bg-white flex justify-start max-w-screen-2xl mx-auto xl:h-full max-xl:flex-col max-xl:gap-y-5">
+      <DashboardSidebar />
+      <div className="flex flex-col gap-y-7 xl:pl-5 max-xl:px-5 w-full">
+        <h1 className="text-3xl font-semibold">Add new category</h1>
+        <div>
+          <label className="form-control w-full max-w-xs">
+            <div className="label">
+              <span className="label-text">Category name:</span>
+            </div>
+            <input
+              type="text"
+              className="input input-bordered w-full max-w-xs"
+              value={categoryInput.name}
+              onChange={(e) =>
+                setCategoryInput({ ...categoryInput, name: e.target.value })
+              }
+            />
+          </label>
+        </div>
+
+        <div className="flex gap-x-2">
+          <button
+            type="button"
+            className="uppercase bg-blue-500 px-10 py-5 text-lg border border-black border-gray-300 font-bold text-white shadow-sm hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2"
+            onClick={addNewCategory}
+          >
+            Create category
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardNewCategoryPage;