showing category in home page from database

sksabbirhossain · Sep 3, 2023 · 6742cec · 6742cec
1 parent 9db6ef0
commit 6742cec
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 10 deletions.
diff --git a/src/components/ui/CategorySkeleton/CategoryLoading.js b/src/components/ui/CategorySkeleton/CategoryLoading.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { CategorySkeleton } from "./CategorySkeleton";
+
+export const CategoryLoading = () => {
+  return (
+    <div className="container mx-auto mb-7 grid gird-cols-1 justify-center xs:justify-start xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-2 gap-y-3">
+      <CategorySkeleton />
+      <CategorySkeleton />
+      <CategorySkeleton />
+      <CategorySkeleton />
+      <CategorySkeleton />
+    </div>
+  );
+};
diff --git a/src/components/ui/CategorySkeleton/CategorySkeleton.js b/src/components/ui/CategorySkeleton/CategorySkeleton.js
@@ -0,0 +1,26 @@
+import React from "react";
+
+export const CategorySkeleton = () => {
+  return (
+    <div
+      role="status"
+      className="max-w-[250px] w-full text-center shadow-md border rounded-md p-3 animate-pulse"
+    >
+      <div className="flex items-center justify-center w-[200px] h-[120px] mb-4 bg-gray-300 rounded">
+        <svg
+          className="w-10 h-10 text-gray-200 dark:text-gray-600"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 16 20"
+        >
+          <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" />
+          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
+        </svg>
+      </div>
+      <div className="h-2.5 bg-gray-200 rounded-full w-48 mb-4"></div>
+
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+};
diff --git a/src/components/user/CategoryCard.js b/src/components/user/CategoryCard.js
@@ -1,17 +1,18 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-export const CategoryCard = () => {
+export const CategoryCard = ({ category }) => {
+  const { name, picture } = category || {};
   return (
     <Link to="">
-      <div className="max-w-[250px] w-full shadow-md border rounded-md p-3 hover:bg-gray-100 duration-100 ease-linear">
+      <div className="max-w-[250px] w-full text-center shadow-md border rounded-md p-3 hover:bg-gray-100 hover:text-orange-600 duration-100 ease-linear">
         <img
-          src="https://t4.ftcdn.net/jpg/00/81/38/59/360_F_81385977_wNaDMtgrIj5uU5QEQLcC9UNzkJc57xbu.jpg"
+          src={`${process.env.REACT_APP_BASE_URL}/uploads/${picture}`}
           alt="category"
-          className="w-full h-full max-w-[250px] max-h-[250px] object-cover rounded-md"
+          className="w-[200px] h-[120px] mx-auto object-cover rounded-md"
         />
         <div className="mt-2">
-          <h3 className="text-lg capitalize font-medium">Mobile phone</h3>
+          <h3 className="text-lg capitalize font-medium">{name}</h3>
         </div>
       </div>
     </Link>

diff --git a/src/pages/User/Home/BestCategory.js b/src/pages/User/Home/BestCategory.js
@@ -1,17 +1,43 @@
 import React from "react";
+import { CategoryLoading } from "../../../components/ui/CategorySkeleton/CategoryLoading";
 import { CategoryCard } from "../../../components/user/CategoryCard";
 import { ContainerHeader } from "../../../components/user/ContainerHeader";
+import { useGetCategoriesQuery } from "../../../features/category/categoryApi";
 
 export const BestCategory = () => {
+  const {
+    data: categories,
+    isLoading,
+    isError,
+    isSuccess,
+  } = useGetCategoriesQuery();
+
+  // decide what to render
+  let content;
+
+  if (isLoading) return (content = <CategoryLoading />);
+
+  if (!isLoading && isError)
+    content = (
+      <h3 className=" uppercase container font-medium text-red-600">
+        something went wrong!
+      </h3>
+    );
+
+  if (!isError && !isLoading && isSuccess && categories?.length === 0)
+    content = (
+      <p className="text-center uppercase font-medium">No Product found!</p>
+    );
+  if (!isError && !isLoading && categories?.length > 0)
+    content = categories.map((category) => (
+      <CategoryCard key={category._id} category={category} />
+    ));
+
   return (
     <div className="container mx-auto ">
       <ContainerHeader title="Best Categories!" />
       <div className=" mb-7 grid gird-cols-1 justify-center xs:justify-start xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-2 gap-y-3">
-        <CategoryCard />
-        <CategoryCard />
-        <CategoryCard />
-        <CategoryCard />
-        <CategoryCard />
+        {content}
       </div>
     </div>
   );