preCommit: respective APIs added

api/recipe.api.ts

@@ -3,5 +3,9 @@ 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`
+export const getFeaturedRecipesURL = `${env}/rest/v1/rpc/getFeaturedRecipes`
+export const getAllRecipesURL = `${env}/rest/v1/rpc/getallrecipes`
+export const getAllRecipesByCategoryNameURL = `${env}/rest/v1/rpc/getallrecipebycategory`
+export const fuzzySearchOnRecipe = `${env}/rest/v1/rpc/fuzzysearch2`
+export const getRecipeInfoByRecipeNameURL = `${env}/rest/v1/rpc/getfullrecipebyname`

app/category/[categoryId]/page.tsx

@@ -1,8 +1,15 @@
+import { getAllRecipesByCategoryNameURL } from '@/api/recipe.api'
 import FilterComponent from '@/components/filter.component'
 import RecipeListComponent from '@/components/listingPage.component'
 import { IBM_Flex } from '@/utils/fonts'
+import { makeGetRequest } from '@/utils/HttpRequests'
 
-const RLP = () => {
+const RLP = async ({ params }: { params: { categoryId: string } }) => {
+  const categoryName = params.categoryId.replaceAll('%20', ' ')
+  const data = await makeGetRequest(getAllRecipesByCategoryNameURL, {
+    key: 'categoryname',
+    value: categoryName,
+  })
   return (
     <>
       <div className='flex p-1 m-1'>
@@ -12,9 +19,9 @@ const RLP = () => {
         <div className='p-4 flex flex-col items-start justify-center gap-4'>
           <div>{/* Breadcrumbs */}</div>
           <h1 className={`${IBM_Flex.className} font-bold text-3xl underline decoration-yellow-300 decoration-4`}>
-            Desserts
+            {categoryName}
           </h1>
-          <RecipeListComponent />
+          <RecipeListComponent data={data} />
         </div>
       </div>
     </>

app/recipe/[recipeId]/page.tsx

@@ -1,23 +1,28 @@
+import { getRecipeInfoByRecipeNameURL } from '@/api/recipe.api'
 import RDPHeader from '@/components/RDPBlocks/headerBlock'
 import Ingredients from '@/components/RDPBlocks/ingredients'
 import PreviewBlock from '@/components/RDPBlocks/preBlock'
 import ReviewBlock from '@/components/RDPBlocks/reviewBlock'
 import UtilityComponent from '@/components/RDPBlocks/utilityComponent'
 import RecipeSteps from '@/components/recipeSteps.component'
-import { getRecipeDetails } from '@/dummyData/getRecipeDetails'
 import { RecipeDetails } from '@/types/common.type'
+import { makeGetRequest } from '@/utils/HttpRequests'
 
-const RDP = () => {
-  const RDPInfo: RecipeDetails = getRecipeDetails[2]
+const RDP = async ({ params }: { params: { recipeId: string } }) => {
+  const data = await makeGetRequest(getRecipeInfoByRecipeNameURL, {
+    key: 'recipe_name',
+    value: params.recipeId.replaceAll('%20', ' '),
+  })
+  const RDPInfo: RecipeDetails = data[0]
   return (
     <>
       <div>
         <RDPHeader RDPInfo={RDPInfo} />
         <div className='flex'>
           <div className='flex flex-col mx-10 w-3/4'>
-            <PreviewBlock previewText={RDPInfo?.recipeDescription} />
-            <Ingredients ingredinets={RDPInfo?.recipeIngredients} />
-            <RecipeSteps recipeSteps={RDPInfo?.recipeMethod} />
+            <PreviewBlock previewText={RDPInfo?.recipedescription} />
+            <Ingredients ingredinets={RDPInfo?.recipeingredients} />
+            <RecipeSteps recipeSteps={RDPInfo?.recipemethod} />
           </div>
           <div className='p-2 w-1/4 flex flex-col border-l-4 border-slate-400 items-center justify-start'>
             <UtilityComponent />

app/search/page.tsx

@@ -1,13 +1,18 @@
+import { fuzzySearchOnRecipe } from '@/api/recipe.api'
 import RecipeListComponent from '@/components/listingPage.component'
 import { IBM_Flex } from '@/utils/fonts'
+import { makeGetRequest } from '@/utils/HttpRequests'
+import { useSearchParams } from 'next/navigation'
 
-const SearchResultPage = () => {
+const SearchResultPage = async ({ searchParams }: { searchParams: { query: string } }) => {
+  const data = await makeGetRequest(fuzzySearchOnRecipe, { key: 'search_text', value: searchParams.query })
   return (
     <>
       <div className='p-4 flex flex-col items-start justify-center gap-4'>
         <div>{/* Breadcrumbs */}</div>
         <h1 className={`${IBM_Flex.className} subHeadingStyle underLineDecoration`}>Your search Result</h1>
-        <RecipeListComponent />
+        <RecipeListComponent data={data} />
+        {!data.length && <h1>No result found</h1>}
         <div>
           <h1 className={`${IBM_Flex.className} subHeadingStyle underLineDecoration`}>Try these categories</h1>
           {/* Categoy based blocks */}

components/RDPBlocks/headerBlock.tsx

@@ -13,8 +13,8 @@ const RDPHeader: React.FC<RDPHeaderProps> = ({ RDPInfo }) => {
     <>
       <div className='flex p-4 py-8 items-center justify-around'>
         <div className='flex flex-col gap-3 p-4 items-center'>
-          <h1 className={`${IBM_Flex.className} text-6xl p-4`}>{RDPInfo.recipeName}</h1>
-          <p>{RDPInfo.recipeDescription}</p>
+          <h1 className={`${IBM_Flex.className} text-6xl p-4`}>{RDPInfo.recipename}</h1>
+          <p>{RDPInfo.recipedescription}</p>
           <h3 className='text-slate-600 '>By {`Gourav Gunaga`}</h3>
           <h5 className='text-slate-400'>{`August 17,2024`}</h5>
           <div className='flex gap-2'>

components/homepageBlocks/ItemandFeatured.tsx

@@ -3,29 +3,26 @@ import { MoveRightIcon } from 'lucide-react'
 import Image from 'next/image'
 import RecipeContainer from '../ui/recipeContainer.component'
 import { RecipeInfo } from '@/types/common.type'
-import { getAllRecipes } from '@/dummyData/getAllRecipe'
 import QuoteComponent from '../quote.component'
+import { makeGetRequest } from '@/utils/HttpRequests'
+import { getFeaturedRecipesURL } from '@/api/recipe.api'
 
-export const ItemAndFeatured = () => {
-  const FeaturingData: RecipeInfo[] = []
-  FeaturingData.push(getAllRecipes[0])
-  FeaturingData.push(getAllRecipes[1])
-  FeaturingData.push(getAllRecipes[2])
-
+export const ItemAndFeatured = async () => {
+  const FeaturingData: RecipeInfo[] = await makeGetRequest(getFeaturedRecipesURL)
   return (
     <>
       <div className='flex p-4 m-2 justify-evenly gap-4'>
         <div className='relative border p-2 bg-slate-700 flex items-end justify-center'>
           <Image
-            src={FeaturingData[0]?.recipeMainImage}
-            alt={FeaturingData[0]?.recipeMainImageAlt}
+            src={FeaturingData[0]?.recipemainimage}
+            alt={FeaturingData[0]?.recipemainimagealt}
             height={500}
             width={600}
           />
           <div className='absolute flex flex-col items-center bg-slate-100 m-10 mx-20 p-5 px-10 gap-2 opacity-75 border-4 border-yellow-400'>
-            <p className='font-bold text-md text-red-500'>Easy {FeaturingData[0]?.recipeCategory}</p>
-            <h1 className={`${IBM_Flex.className} antialiased text-5xl text-center`}>{FeaturingData[0]?.recipeName}</h1>
-            <p className='italic'>{FeaturingData[0]?.recipeDescription}</p>
+            <p className='font-bold text-md text-red-500'>Easy {FeaturingData[0]?.recipecategory}</p>
+            <h1 className={`${IBM_Flex.className} antialiased text-5xl text-center`}>{FeaturingData[0]?.recipename}</h1>
+            <p className='italic'>{FeaturingData[0]?.recipecategory}</p>
           </div>
         </div>
         <div className='flex flex-col justify-center items-center gap-10 '>

components/homepageBlocks/curatedForyou.tsx

@@ -1,10 +1,11 @@
 import { IBM_Flex } from '@/utils/fonts'
 import RecipeContainer2 from '../ui/recipeContainer2.component'
-import { getAllRecipes } from '@/dummyData/getAllRecipe'
 import { RecipeInfo } from '@/types/common.type'
+import { makeGetRequest } from '@/utils/HttpRequests'
+import { getAllRecipesURL } from '@/api/recipe.api'
 
-const CuratedForYou = () => {
-  const recipesData: RecipeInfo[] = getAllRecipes
+const CuratedForYou = async () => {
+  const recipesData: RecipeInfo[] = await makeGetRequest(getAllRecipesURL)
   return (
     <div className='flex flex-col items-center p-4'>
       <h1 className={`${IBM_Flex.className} subHeadingStyle underLineDecoration`}>Curated For you</h1>

components/homepageBlocks/scrolls.tsx

@@ -1,11 +1,12 @@
 import { IBM_Flex } from '@/utils/fonts'
 import RecipeContainer from '../ui/recipeContainer.component'
 import { MoveRightIcon } from 'lucide-react'
-import { getAllRecipes } from '@/dummyData/getAllRecipe'
 import { RecipeInfo } from '@/types/common.type'
+import { makeGetRequest } from '@/utils/HttpRequests'
+import { getAllRecipesURL } from '@/api/recipe.api'
 
-const Scroll = () => {
-  const recipesData: RecipeInfo[] = getAllRecipes
+const Scroll = async () => {
+  const recipesData: RecipeInfo[] = await makeGetRequest(getAllRecipesURL)
   return (
     <>
       <div className='flex items-center p-4'>

components/listingPage.component.tsx

@@ -1,9 +1,14 @@
 import { RecipeInfo } from '@/types/common.type'
 import RecipeContainer2 from './ui/recipeContainer2.component'
-import { getAllRecipes } from '@/dummyData/getAllRecipe'
+import { makeGetRequest } from '@/utils/HttpRequests'
+import { getAllRecipesByCategoryNameURL } from '@/api/recipe.api'
 
-const RecipeListComponent: React.FC = () => {
-  const recipeInfoArray = getAllRecipes
+type RecipeListComponentTypes = {
+  data: RecipeInfo[]
+}
+
+const RecipeListComponent: React.FC<RecipeListComponentTypes> = async ({ data }) => {
+  const recipeInfoArray: RecipeInfo[] = data
   return (
     <>
       <div className='flex flex-wrap gap-6 justify-around'>

components/ui/recipeContainer.component.tsx

@@ -10,24 +10,24 @@ type RecipeContainerProps = {
 }
 
 const RecipeContainer: React.FC<RecipeContainerProps> = ({ width = 240, recipeInfo }) => {
-  const onClickLink = `recipe/${recipeInfo?.recipeName}`
+  const onClickLink = `recipe/${recipeInfo?.recipename}`
   return (
     <>
       <div className='flex-shrink-0  w-60 p-1 bg-white hoverAnimation shadow-md'>
         <div className='relative flex flex-col justify-end'>
           <p className='absolute p-1 bg-slate-100 m-1 font-bold text-sm rounded-sm italic'>
-            {recipeInfo?.recipeCategory}
+            {recipeInfo?.recipecategory}
           </p>
           <Link href={onClickLink}>
-            <Image src={recipeInfo?.recipeMainImage} alt={recipeInfo?.recipeMainImageAlt} width={width} height={50} />
+            <Image src={recipeInfo?.recipemainimage} alt={recipeInfo?.recipemainimagealt} width={width} height={50} />
           </Link>
         </div>
         <div className='flex flex-col p-1.5 bg-white '>
           <Link href={onClickLink}>
-            <p className='font-serif text-lg truncate'>{recipeInfo?.recipeName}</p>
+            <p className='font-serif text-lg truncate'>{recipeInfo?.recipename}</p>
           </Link>
           <p className='flex place-items-center gap-1'>
-            {recipeInfo?.recipeRating}
+            {recipeInfo?.reciperating}
             <Star fill='gold' strokeWidth={'.5px'} size={'15px'} />
           </p>
         </div>

components/ui/recipeContainer2.component.tsx

@@ -9,15 +9,15 @@ type RecipeContainerProps = {
 }
 
 const RecipeContainer2: React.FC<RecipeContainerProps> = ({ recipeInfo }) => {
-  const onClickLink = `recipe/${recipeInfo?.recipeName}`
+  const onClickLink = `recipe/${recipeInfo?.recipename}`
   return (
     <>
       <div className='flex flex-col p-1 my-4 w-72 bg-gray-50 shadow-md hoverAnimation hover:shadow-xl'>
         <div className='relative flex justify-end w-72 h-60'>
           <Link href={onClickLink}>
             <Image
-              src={recipeInfo?.recipeMainImage}
-              alt={recipeInfo?.recipeMainImageAlt}
+              src={recipeInfo?.recipemainimage}
+              alt={recipeInfo?.recipemainimagealt}
               fill={true}
               quality={100}
               className='object-cover object-center'
@@ -26,12 +26,12 @@ const RecipeContainer2: React.FC<RecipeContainerProps> = ({ recipeInfo }) => {
           <FavouriteComponent />
         </div>
         <div className='flex flex-col items-start gap-2 p-2'>
-          <p className='font-thin italic'>{recipeInfo?.recipeCategory}</p>
+          <p className='font-thin italic'>{recipeInfo?.recipecategory}</p>
           <Link href={onClickLink} className='w-full'>
-            <p className='font-serif text-xl truncate'>{recipeInfo?.recipeName}</p>
+            <p className='font-serif text-xl truncate'>{recipeInfo?.recipename}</p>
           </Link>
           <p className='flex place-items-center gap-1'>
-            {recipeInfo?.recipeRating}
+            {recipeInfo?.reciperating}
             <Star fill='gold' strokeWidth={'.5px'} size={'15px'} />
           </p>
         </div>

components/ui/searchBar.component.tsx

@@ -5,9 +5,9 @@ import { useRouter, useSearchParams } from 'next/navigation'
 const SearchBar: React.FC = () => {
   const searchParam = useSearchParams()
   const { replace } = useRouter()
+  const searchURL = new URLSearchParams(searchParam)
 
   const handleSearch = (term: string) => {
-    const searchURL = new URLSearchParams(searchParam)
     term ? searchURL.set('query', term) : searchURL.delete('query')
     replace(`/search?${searchURL.toString()}`)
   }

types/common.type.ts

@@ -13,20 +13,20 @@ export type ButtonType = {
 }
 
 export type RecipeInfo = {
-  recipeName: string
-  recipeMainImage: string
-  recipeMainImageAlt: string
-  recipeCategory: string
-  recipeDescription: string
-  recipeRating: number
+  recipename: string
+  recipemainimage: string
+  recipemainimagealt: string
+  recipecategory: string
+  recipedescription: string
+  reciperating: number
 }
 
 export type RecipeDetails = {
-  recipeName: string
-  recipeMainImage: string
-  recipeCategory: string
-  recipeDescription: string
-  recipeIngredients: string[]
-  recipeMethod: string[]
-  recipeSubImages: string[]
+  recipename: string
+  recipemainimage: string
+  recipecategory: string
+  recipedescription: string
+  recipeingredients: string[]
+  recipemethod: string[]
+  recipesubimages: string[]
 }

utils/HttpRequests.ts

@@ -1,5 +1,13 @@
 import { handleHTTPError } from './httpErrorHandler.utils'
 
+const constructURLparams = (...params: { key: string; value: string }[]) => {
+  let paramsPart = ''
+  params.map((i) => {
+    paramsPart += `${i.key}=${i.value}&`
+  })
+  return paramsPart
+}
+
 export const makePostRequest = async (URL: string, body: any) => {
   try {
     const pRes = await fetch(`${URL}`, {
@@ -21,9 +29,12 @@ export const makePostRequest = async (URL: string, body: any) => {
   }
 }
 
-export const makeGetRequest = async (URL: string) => {
+export const makeGetRequest = async (URL: string, ...params: { key: string; value: string }[]) => {
   try {
-    const gRes = await fetch(`${URL}?apikey=${process.env.SUPABASE_ANON_KEY}`)
+    let getURL = `${URL}?apikey=${process.env.SUPABASE_ANON_KEY}&`
+    let paramsPart = params.length ? constructURLparams(...params) : ''
+    getURL += paramsPart
+    const gRes = await fetch(getURL)
     if (!gRes.ok) throw new Error(JSON.stringify(handleHTTPError(gRes)))
     const data = gRes.json()
     return await data

utils/httpErrorHandler.utils.ts

@@ -6,6 +6,6 @@ const createResponse = (code: number, message: string) => {
 }
 
 export const handleHTTPError = (res: Response) => {
-  console.log(res)
+  // console.log(res)
   return createResponse(0, '')
 }