Category data is now from API

GouravNG · Sep 26, 2024 · 781284a · 781284a
1 parent 72fd6e4
commit 781284a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/api/recipe.api.ts b/api/recipe.api.ts
@@ -3,3 +3,5 @@ const env = process.env.DOMAIN
 export const postRecipeURL = `${env}/rest/v1/recipe`
 export const postInstructionURL = `${env}/rest/v1/instruction`
 export const postIngredientsURL = `${env}/rest/v1/ingredient`
+export const getAllRecipes = `${env}/rest/v1/recipe`
+export const getAllCategoriesURL = `${env}/rest/v1/rpc/getallrecipecategory`
diff --git a/components/dropdown.component.tsx b/components/dropdown.component.tsx
@@ -1,23 +1,37 @@
-import merchData from '@/dummyData/merch'
-import { MerchData } from '@/types/common.type'
 import MerchList from './ui/merchList.component'
 import { ChevronLeft } from 'lucide-react'
+import { makeGetRequest } from '@/utils/HttpRequests'
+import { getAllCategoriesURL } from '@/api/recipe.api'
 
-const DropDown: React.FC = () => {
-  const dropDonwData: MerchData = merchData
+type RecipeCategory = {
+  parent_id: string
+  parent_name: string
+  parent_description: string
+  subcategories: Subcategory[]
+}
+
+type Subcategory = {
+  id: string
+  name: string
+  description: string
+}
+
+const DropDown: React.FC = async () => {
+  const dropDonwData: RecipeCategory[] = await makeGetRequest(getAllCategoriesURL)
+  //TODO: handling the error, timeout , and data issue.
   return (
     <>
       <div className='flex gap-3 p-2 '>
-        {dropDonwData.recipeHierarchy.map((i, index) => {
+        {dropDonwData.map((MC, index) => {
           return (
-            <div className='relative flex flex-col p-2 group z-10 ' key={index}>
+            <div className='relative flex flex-col p-2 group z-10 ' key={MC.parent_id}>
               <h6 className={`font-serif underLineDecoration flex items-center justify-center`}>
-                {i.parentCategory}
+                {MC.parent_name}
                 <ChevronLeft className='group-hover:-rotate-90 transition-all ease-in-out duration-300' size={'15px'} />
               </h6>
               <ul className='absolute mt-10 hidden group-hover:flex flex-col gap-2 p-2 items-start justify-start bg-yellow-400 border w-full shadow-sm'>
-                {i?.subCategories.map((name, index) => {
-                  return <MerchList key={index} listProps={name} />
+                {MC?.subcategories.map((SC, index) => {
+                  return <MerchList key={index} listProps={SC.name} />
                 })}
               </ul>
             </div>