Add and display products and categories

actions/admin/category.actions.js

@@ -0,0 +1,72 @@
+"use server";
+import Category from "@/lib/schemas/Category";
+import checkRole from "@/utils/checkRole";
+import dbConnect from "@/utils/dbConnect";
+
+dbConnect();
+
+export const createCategory = async (payload) => {
+ //* Validate the admin first to protect tbis action
+ if (!checkRole("admin")) {
+ return JSON.parse(
+ JSON.stringify({
+ message: "Unauthorized",
+ status: 401,
+ })
+ );
+ }
+
+ const categories = await Category.create(payload);
+ const data = JSON.stringify(categories);
+
+ return JSON.parse(
+ JSON.stringify({
+ message: "Product Created Successfully",
+ status: 200,
+ data: data,
+ })
+ );
+};
+export const updateCategory = async (id, payload) => {
+ //* Validate the admin first to protect tbis action
+ if (!checkRole("admin")) {
+ return JSON.parse(
+ JSON.stringify({
+ message: "Unauthorized",
+ status: 401,
+ })
+ );
+ }
+
+ const categories = await Category.findByIdAndUpdate(id, payload);
+
+ return JSON.parse(
+ JSON.stringify({
+ message: "Category Created Successfully",
+ status: 200,
+ })
+ );
+};
+
+export const deleteCategory = async (id) => {
+ //* Validate the admin first to protect tbis action
+ if (!checkRole("admin")) {
+ return JSON.parse(
+ JSON.stringify({
+ message: "Unauthorized",
+ status: 401,
+ })
+ );
+ }
+
+ const products = await Category.findByIdAndDelete(id);
+ const data = JSON.stringify(products);
+
+ return JSON.parse(
+ JSON.stringify({
+ message: "Product Deleted Successfully",
+ status: 200,
+ data: data,
+ })
+ );
+};

actions/admin/featuredproduct.actions.js

@@ -0,0 +1,40 @@
+"use server";
+import FeaturedProduct from "@/lib/schemas/FeaturedProduct";
+import Product from "@/lib/schemas/Product";
+import checkRole from "@/utils/checkRole";
+import dbConnect from "@/utils/dbConnect";
+
+dbConnect();
+
+export const createFeaturedProduct = async (payload) => {
+ //* Validate the admin first to protect tbis action
+ if (!checkRole("admin")) {
+ return JSON.parse(
+ JSON.stringify({
+ message: "Unauthorized",
+ status: 401,
+ })
+ );
+ }
+ const resp = await Product.findById(payload.productId);
+ const image = resp.images[0];
+
+ const res = await FeaturedProduct.create({ ...payload, image });
+
+ if (res) {
+ return JSON.parse(
+ JSON.stringify({
+ message: "Featured Product Created Successfully",
+ status: 200,
+ data: res,
+ })
+ );
+ } else {
+ return JSON.parse(
+ JSON.stringify({
+ message: "Featured Product Not Created",
+ status: 400,
+ })
+ );
+ }
+};

actions/admin/product.actions.js

@@ -0,0 +1,73 @@
+"use server";
+import Product from "@/lib/schemas/Product";
+import checkRole from "@/utils/checkRole";
+import dbConnect from "@/utils/dbConnect";
+
+dbConnect();
+
+export const createProduct = async (payload) => {
+ //* Validate the admin first to protect tbis action
+ if (!checkRole("admin")) {
+ return JSON.parse(
+ JSON.stringify({
+ message: "Unauthorized",
+ status: 401,
+ })
+ );
+ }
+
+ const products = await Product.create(payload);
+ const data = JSON.stringify(products);
+
+ return JSON.parse(
+ JSON.stringify({
+ message: "Product Created Successfully",
+ status: 200,
+ data: data,
+ })
+ );
+};
+export const updateProduct = async (id, payload) => {
+ //* Validate the admin first to protect tbis action
+ if (!checkRole("admin")) {
+ return JSON.parse(
+ JSON.stringify({
+ message: "Unauthorized",
+ status: 401,
+ })
+ );
+ }
+
+ const products = await Product.findByIdAndUpdate(id, payload);
+ const data = JSON.stringify(products);
+
+ return JSON.parse(
+ JSON.stringify({
+ message: "Product Created Successfully",
+ status: 200,
+ data: data,
+ })
+ );
+};
+export const deleteProduct = async (id) => {
+ //* Validate the admin first to protect tbis action
+ if (!checkRole("admin")) {
+ return JSON.parse(
+ JSON.stringify({
+ message: "Unauthorized",
+ status: 401,
+ })
+ );
+ }
+
+ const products = await Product.findByIdAndDelete(id);
+ const data = JSON.stringify(products);
+
+ return JSON.parse(
+ JSON.stringify({
+ message: "Product Created Successfully",
+ status: 200,
+ data: data,
+ })
+ );
+};

actions/revalidate.action.js

@@ -0,0 +1,6 @@
+"use server";
+import { revalidatePath } from "next/cache";
+const revalidate = async (path) => {
+ revalidatePath(path);
+};
+export default revalidate;

actions/user.actions.js

@@ -1,5 +1,5 @@
 "use server";
-import User from "@/lib/schemas/UserSchema";
+import User from "@/lib/schemas/User";
 import dbConnect from "@/utils/dbConnect";
 import { auth } from "@clerk/nextjs/server";
 

app/(root)/_components/home/AllProductsCarousel.jsx

@@ -1,30 +1,43 @@
 import ItemsCarousel from "@/components/reuseable/ItemsCarousel";
 import ProductItem from "@/components/reuseable/ProductItem";
 
-
-const AllProductsCarousel = () => {
- const dummyArray = Array.from({ length: 10 }, (v, k) => k);
-
+const AllProductsCarousel = ({ products }) => {
  return (
  <>
  <div className="w-full flex flex-col items-center justify-center relative my-11">
- <ItemsCarousel title={"Our Products"} text={"Explore Our Products"}>
- {dummyArray.map((item) => (
+ <ItemsCarousel
+ title={"Checkout"}
+ text={"Our Products"}
+ showButtons={true}
+ >
+ {products.map((item) => (
  <div className="embla__slide" key={item}>
- <div className="flex flex-col items-center justify-center">
- <ProductItem />
- </div>
+ <ProductItem
+ key={item._id}
+ id={item._id}
+ name={item.name}
+ images={item.images}
+ description={item.description}
+ excerpt={item.excerpt}
+ price={item.price}
+ />
  </div>
  ))}
  </ItemsCarousel>
  </div>
  <div className="w-full flex flex-col items-center justify-center relative my-11">
- <ItemsCarousel>
- {dummyArray.map((item) => (
+ <ItemsCarousel showButtons={true}>
+ {products.map((item) => (
  <div className="embla__slide" key={item}>
- <div className="flex flex-col items-center justify-center">
- <ProductItem />
- </div>
+ <ProductItem
+ key={item._id}
+ id={item._id}
+ name={item.name}
+ images={item.images}
+ description={item.description}
+ excerpt={item.excerpt}
+ price={item.price}
+ />
  </div>
  ))}
  </ItemsCarousel>

app/(root)/_components/home/CategorySideBar/CategoryItem.jsx

@@ -1,18 +1,17 @@
 import Link from "next/link";
 import React from "react";
+import { MdComputer } from "react-icons/md";
 
 const CategoryItem = ({ name, icon, link }) => {
  return (
  <Link
- href={link}
+ href={`/category/${name}`}
  className="flex flex-col items-center justify-center hover:bg-gray-200 transition"
  >
- <div className="md:hidden ">{icon}</div>
- <div
- className="px-4 py-1 text-md w-max "
- >
- {name}
+ <div className="md:hidden ">
+ <MdComputer size={30} />
  </div>
+ <div className="px-4 py-1 text-md w-max ">{name}</div>
  </Link>
  );
 };

app/(root)/_components/home/CategorySideBar/index.jsx

@@ -1,16 +1,17 @@
 import React from "react";
 import CategoryItem from "./CategoryItem";
-import categories from "./categories";
+import { fetchAllCategories } from "@/utils/fetchAllItems";
 
-const CategorySideBar = ({ children }) => {
+const CategorySideBar = async({ children }) => {
+ const categories = await fetchAllCategories();
  return (
  <div className="flex items-center w-full flex-col md:flex-row py-4">
  <div className="md:w-1/5 md:border-r border-gray-500 flex md:flex-col items-center justify-center py-4 md:py-8 gap-y-2 w-full overflow-x-scroll md:overflow-x-hidden">
  {categories.map((category) => (
  <CategoryItem
  name={category.name}
- icon={category.icon}
- link={category.link}
+ // icon={category.icon}
+ // link={category.link}
  key={category.name}
  />
  ))}

app/(root)/_components/home/FeaturedProduct.jsx

@@ -1,28 +1,34 @@
 import Image from "next/image";
 import React from "react";
+import { fetchFeaturedProduct } from "@/utils/fetchAllItems";
+import Link from "next/link";
 
-const FeaturedProduct = () => {
+const FeaturedProduct = async () => {
+ const product = await fetchFeaturedProduct();
  return (
  <div className="featuredProduct w-full md:h-screen p-4 bg-gradient-to-r from-black to-gray-900 flex flex-col-reverse md:flex-row items-center justify-between my-11 py-8 gap-4">
  <div className="md:w-1/2 md:p-11 flex flex-col justify-center gap-y-4 md:gap-y-11 text-left">
  <h2 className="text-green-500 font-semibold font-sans text-2xl">
- Music
+ {product?.category}
  </h2>
  <p className="md:text-5xl text-4xl font-medium text-white">
- Enhance Your Music Experiance
+ {product?.headingText}
  </p>
  <div className="text-lg text-gray-300 font-sans">
- A new era of Headphones
+ {product?.relatedText}
  </div>
- <button className="bg-green-500 text-white px-4 py-2 text-lg w-32 rounded-md">
+ <Link
+ href={"/productdetails" + product.productId}
+ className="bg-green-500 text-white px-4 py-2 text-lg w-32 rounded-md"
+ >
  Buy Now
- </button>
+ </Link>
  </div>
  <div className="md:w-1/2 p-4">
  <Image
  height={600}
  width={600}
- src={"/images/featured-product.png"}
+ src={product?.image}
  className="md:pl-14 shadow-2xl shadow-gray-400"
  alt="Featured Product"
  />

app/(root)/_components/home/Sales.jsx

@@ -1,15 +1,21 @@
 import ProductItem from "@/components/reuseable/ProductItem";
 import ItemsCarousel from "@/components/reuseable/ItemsCarousel";
 
-const Sales = () => {
- const dummyArray = Array.from({ length: 10 }, (v, k) => k);
-
+const Sales = ({ products }) => {
  return (
  <div className="w-full flex flex-col items-center justify-center relative my-11">
  <ItemsCarousel title={"Today's"} text={"Flash Sales"}>
- {dummyArray.map((item) => (
+ {products.map((item) => (
  <div className="embla__slide" key={item}>
- <ProductItem />
+ <ProductItem
+ key={item._id}
+ id={item._id}
+ name={item.name}
+ images={item.images}
+ description={item.description}
+ excerpt={item.excerpt}
+ price={item.price}
+ />
  </div>
  ))}
  </ItemsCarousel>