show all recipes

framework/commerce/api/operations.ts

@@ -11,7 +11,7 @@ import type {
 } from '../types/product'
 import type {
   GetAllBlogsOperation,
-  GetFeaturedOperation,
+  GetFeaturedBlogsOperation,
   GetAllBlogPathsOperation,
   GetBlogDetailOperation,
   GetRelevantBlogsOperation
@@ -177,13 +177,13 @@ export type Operations<P extends APIProvider> = {
 
 
   getAllBlogs: {
-    <T extends GetFeaturedOperation>(opts: {
+    <T extends GetAllBlogsOperation>(opts: {
       variables?: T['variables']
       config?: P['config']
       preview?: boolean
     }): Promise<T['data']>
 
-    <T extends GetFeaturedOperation>(
+    <T extends GetAllBlogsOperation>(
       opts: {
         variables?: T['variables']
         config?: P['config']
@@ -225,13 +225,13 @@ export type Operations<P extends APIProvider> = {
   }
 
   getFeaturedBlog: {
-    <T extends GetAllBlogsOperation>(opts: {
+    <T extends GetFeaturedBlogsOperation>(opts: {
       variables?: T['variables']
       config?: P['config']
       preview?: boolean
     }): Promise<T['data']>
 
-    <T extends GetAllBlogsOperation>(
+    <T extends GetFeaturedBlogsOperation>(
       opts: {
         variables?: T['variables']
         config?: P['config']

framework/commerce/types/blogs.ts

@@ -1,13 +1,12 @@
-
 import { Asset, BlogTranslation, Maybe, Product } from './../../vendure/schema.d';
 
 export type BlogList = Node &{
     id: string
     featuredAsset?: Maybe<Asset>
-    isHidden:Boolean
-    translations: Array<BlogTranslation>
+    isPublic:Boolean
+    translations: BlogTranslation[]
     authorName: string
-    authorAvatarAsset:Array<Asset>
+    authorAvatarAsset:Asset[]
     relevantProducts: Product
 }
 export type BlogsType = {
@@ -37,7 +36,7 @@ export type GetBlogDetailOperation<T extends BlogsType = BlogsType> = {
     }
 }
   
-export type GetFeaturedOperation<T extends BlogsType = BlogsType> = {
+export type GetFeaturedBlogsOperation<T extends BlogsType = BlogsType> = {
     data: { items: T['items'][] }
     variables: {
         take?: number

framework/commerce/types/recipes.ts

@@ -17,7 +17,7 @@ export type RecipesType = {
     totalItems: number
 }
 
-export enum SortOrder {
+export enum SortRecipes {
     ASC = 'ASC',
     DESC = 'DESC',
 }
@@ -27,6 +27,6 @@ export type GetAllRecipesOperation<T extends RecipesType = RecipesType> = {
     variables: {
         excludeBlogIds:Array<Number>,
         take?: number
-        id?: SortOrder
+        id?: SortRecipes
     }
 }

framework/vendure/api/index.ts

@@ -14,6 +14,7 @@ import getProduct from './operations/get-product'
 import getSiteInfo from './operations/get-site-info'
 import getAllBlogPaths from './operations/get-all-blog-paths'
 import getRelevantBlogs from './operations/get-relevant-blogs'
+import getAllRecipes from './operations/get-all-recipes'
 import login from './operations/login'
 import fetchGraphqlApi from './utils/fetch-graphql-api'
 
@@ -52,7 +53,8 @@ const operations = {
   getFeaturedBlog,
   getBlogDetail,
   getAllBlogPaths,
-  getRelevantBlogs
+  getRelevantBlogs,
+  getAllRecipes
 }
 
 export const provider = { config, operations }

framework/vendure/api/operations/get-all-recipes.ts

@@ -1,24 +1,21 @@
 import { OperationContext } from '@commerce/api/operations'
 import { Provider, VendureConfig } from '..'
-import { GetAllRecipesQuery,BlogList } from '../../schema'
+import { GetAllRecipesQuery,BlogList,SortRecipes } from '../../schema'
 import { getAllBlogsQuery } from '../../utils/queries/get-all-blog-query'
 
-export type BlogVariables = {
+export type RecipesVariables = {
   excludeBlogIds?: string[],
   take?: number,
-  skip?:number,
-  filter?:{
-    isFeatured?:{
-      eq?:Boolean
-    }
-  },
+  sort?: {
+    id?: string
+  }
 }
 
 export default function getAllRecipesOperation({
   commerce,
 }: OperationContext<Provider>) {
   async function getAllRecipes(opts?: {
-    variables?: BlogVariables
+    variables?: RecipesVariables
     config?: Partial<VendureConfig>
     preview?: boolean
   }): Promise<{ recipes: GetAllRecipesQuery[],totalItems:number }>
@@ -29,7 +26,7 @@ export default function getAllRecipesOperation({
     config: cfg,
   }: {
     query?: string
-    variables?: BlogVariables
+    variables?: RecipesVariables
     config?: Partial<VendureConfig>
     preview?: boolean
   } = {}): Promise<{ recipes: GetAllRecipesQuery[] | any[] ,totalItems?:number }> {
@@ -39,8 +36,8 @@ export default function getAllRecipesOperation({
       excludeBlogIds: vars.excludeBlogIds,
       options: {
         take: vars.take,
-        filter: {
-          isFeatured: vars.filter?.isFeatured
+        sort: {
+          id: vars.sort?.id
         }
       },
     }

framework/vendure/api/operations/get-featured-blog.ts

@@ -1,7 +1,7 @@
 import { OperationContext } from '@commerce/api/operations'
 import { Provider, VendureConfig } from '..'
 import { GetFeaturedBlogQuery,BlogList } from '../../schema'
-import { getFeatuedBlogQuery } from '../../utils/queries/get-featued-query'
+import { getFeatuedBlogsQuery } from '../../utils/queries/get-featued-query'
 
 export type BlogVariables = {
   take?: number,
@@ -23,7 +23,7 @@ export default function getFeaturedBlogOperation({
   }): Promise<{ featuredBlogs: GetFeaturedBlogQuery[],totalItems:number }>
 
   async function getFeaturedBlog({
-    query = getFeatuedBlogQuery,
+    query = getFeatuedBlogsQuery,
     variables: { ...vars } = {},
     config: cfg,
   }: {

framework/vendure/schema.d.ts

@@ -2399,9 +2399,13 @@ export type RecipeList = Node &{
   people:Number
 }
 
+export enum SortRecipes {
+  ASC = 'ASC',
+  DESC = 'DESC',
+}
 
 export type RecipeTranslation = {
-  __typename?: 'BlogTranslation'
+  __typename?: 'RecipeTranslation'
   id: Scalars['ID']
   createdAt: Scalars['DateTime']
   updatedAt: Scalars['DateTime']
@@ -2414,6 +2418,14 @@ export type RecipeTranslation = {
   Preparation:Scalars['String']
 }
 
+export type IngredientProducts = {
+  __typename?: 'IngredientProduct'
+  id: Scalars['ID']
+  createdAt: Scalars['DateTime']
+  updatedAt: Scalars['DateTime']
+  product: Product[]
+}
+
 
 export type GetBlogQuery = { __typename?: 'Query' } & {
   blog?: Maybe<

framework/vendure/utils/normalize.ts

@@ -1,6 +1,6 @@
 import { Cart } from '@commerce/types/cart'
 import { ProductCard, Product } from '@commerce/types/product'
-import { CartFragment, SearchResultFragment,Favorite } from '../schema'
+import { CartFragment, SearchResultFragment,Favorite, BlogList } from '../schema'
 
 export function normalizeSearchResult(item: SearchResultFragment): ProductCard {
   return {
@@ -83,4 +83,19 @@ export function normalizeProductCard(product: Product): ProductCard {
     facetValueIds: product.facetValueIds,
     collectionIds: product.collectionIds,
   }
+}
+
+export function normalizeBlogList(blog: BlogList) {
+  return {
+      id: blog.id,
+      title: blog.translations[0]?.title,
+      imageSrc: blog.featuredAsset?.preview ?? null,
+      slug: blog.translations[0]?.slug,
+      description: blog.translations[0]?.description,
+      isPublish: blog.isPublish,
+      isFeatured:blog.isFeatured,
+      authorName: blog.authorName,
+      authorAvatarAsset : blog.authorAvatarAsset?.preview,
+      createdAt: blog.createdAt
+  }
 }

framework/vendure/utils/queries/get-featued-query.ts

@@ -1,5 +1,5 @@
-export const getFeatuedBlogQuery = /* GraphQL */ `
-    query GetFeaturedBlog($options: BlogListOptions) {
+export const getFeatuedBlogsQuery = /* GraphQL */ `
+    query GetFeaturedBlogs($options: BlogListOptions) {
         featuredBlogs( options: $options){
         items {
             id

pages/blogs.tsx

@@ -8,30 +8,31 @@ import { getAllPromies } from 'src/utils/funtion.utils';
 import { PromiseWithKey } from 'src/utils/types.utils';
 
 interface Props {
-    blogsResult: { blogs?: BlogCardProps[],featuredBlog?: BlogCardProps[] },
+    blogs?: BlogCardProps[],
+    featuredBlog?: BlogCardProps[],
     totalItems: number
 }
-export default function BlogsPage( { blogsResult, totalItems }:Props ) {
-
-    let date = new Date(blogsResult.featuredBlog?.[0]?.createdAt ?? '' );
+export default function BlogsPage({ blogs, featuredBlog, totalItems }:Props) {
+    console.log(blogs)
+    let date = new Date(featuredBlog?.[0]?.createdAt ?? '' );
     let fullDate = date.toLocaleString('en-us', { month: 'long' }) + " " + date.getDate()+","+date.getFullYear();
-
+ 
     return(
         <>
             <BlogBreadCrumb />
             <BlogHeading />
-            { (blogsResult.featuredBlog?.length !=0 ) &&
-            <FeaturedCardBlog 
-            title={blogsResult.featuredBlog?.[0]?.title} 
-            slug={blogsResult.featuredBlog?.[0]?.slug} 
-            imgSrc={blogsResult.featuredBlog?.[0]?.imageSrc ?? ''}
-            content={blogsResult.featuredBlog?.[0]?.description}
-            imgAuthor={blogsResult.featuredBlog?.[0]?.authorAvatarAsset ?? ''}
-            authorName={blogsResult.featuredBlog?.[0]?.authorName}
-            date={fullDate}
-            />
+            { (featuredBlog?.length !=0 ) &&
+              <FeaturedCardBlog 
+              title={featuredBlog?.[0]?.title} 
+              slug={featuredBlog?.[0]?.slug} 
+              imgSrc={featuredBlog?.[0]?.imageSrc ?? ''}
+              content={featuredBlog?.[0]?.description}
+              imgAuthor={featuredBlog?.[0]?.authorAvatarAsset}
+              authorName={featuredBlog?.[0]?.authorName}
+              date={fullDate}
+              />
             }
-            <BlogsList blogList={blogsResult.blogs} total={totalItems} idFeatured={blogsResult.featuredBlog?.[0]?.id} />
+            <BlogsList blogList={blogs} total={totalItems} idFeatured={featuredBlog?.[0]?.id ?? ''} />
         </>
     )
 }
@@ -46,10 +47,9 @@ export async function getStaticProps({
   let promisesWithKey = [] as PromiseWithKey[]
   let props = {} as any;
 
-
   const {featuredBlogs} = await commerce.getFeaturedBlog({
     variables: {
-      take: DEFAULT_BLOG_PAGE_SIZE,
+      take: 1,
       filter: {
         isFeatured: {
             eq:true
@@ -87,8 +87,9 @@ export async function getStaticProps({
       return null
     })
 
-    props['blogsResult']['featuredBlog'] = featuredBlogs;
+    props.featuredBlog = featuredBlogs;
     
+    // console.log(props);
     return {
       props,
       revalidate: 60

pages/index.tsx

@@ -31,8 +31,8 @@ export default function Home({ featuredAndDiscountFacetsValue, veggie,
       <HomeBanner />
       <HomeFeature />
       <HomeCategories />
-      <HomeCollection data = {veggie}/>
       <FreshProducts data={freshProducts} collections={collections} />
+      <HomeCollection data = {veggie}/>
       <HomeVideo />
       {spiceProducts.length>0 && <HomeSpice data={spiceProducts}/>}
       <FeaturedProductsCarousel data={featuredProducts} featuredFacetsValue={featuredAndDiscountFacetsValue} />

pages/products.tsx

@@ -18,6 +18,7 @@ interface Props {
 }
 
 export default function Products({ facets, collections, productsResult }: Props) {
+
   return (
     <>
       <ProductListBanner />

pages/recipes.tsx

@@ -6,11 +6,17 @@ import { PromiseWithKey } from 'src/utils/types.utils';
 import { DEFAULT_BLOG_PAGE_SIZE } from "src/utils/constanst.utils";
 import commerce from '@lib/api/commerce';
 import { getAllPromies } from 'src/utils/funtion.utils';
-export default function RecipeListPage() {
+import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
+
+interface Props {
+  recipesResult ?: {recipes: RecipeCardProps[],totalItems?: number} , // it will chang when have recipes Props
+  
+}
+export default function RecipeListPage({recipesResult}:Props) {
   return (
     <>
       <RecipeListBanner />
-      <RecipesList/>
+      <RecipesList recipes={recipesResult?.recipes} total={recipesResult?.totalItems || 0}/>
     </>
   )
 }
@@ -25,21 +31,19 @@ export async function getStaticProps({
   let promisesWithKey = [] as PromiseWithKey[]
   let props = {} as any;
 
-  
-  const blogsPromise = commerce.getAllBlogs({
+
+  const recipesPromise = commerce.getAllRecipes({
     variables: {
       excludeBlogIds: [],
       take: DEFAULT_BLOG_PAGE_SIZE,
-      filter: {
-        isFeatured: {
-            eq:false
-        }
+      sort: {
+        id: "DESC"
       }
     },
     config,
     preview,
   })
-  promisesWithKey.push({ key: 'blogsResult', promise: blogsPromise })
+  promisesWithKey.push({ key: 'recipesResult', promise: recipesPromise})
 
 
   try {
@@ -50,7 +54,7 @@ export async function getStaticProps({
       props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index]
       return null
     })
-    console.log(props);
+ 
     return {
       props,
       revalidate: 60

src/components/common/CardBlog/CardBlog.tsx

@@ -19,7 +19,7 @@ const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
       <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
         <a> 
           <div className={s.image}>
-            <ImgWithLink src={imageSrc ?? ''} alt="image cardblog" />
+            <ImgWithLink src={imageSrc ?? ''} alt={title} />
           </div>
         </a>
       </Link>

src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx

@@ -5,15 +5,13 @@ import s from './ListProductCardSkeleton.module.scss'
 type Props = {
   count?: number
   isWrap?: boolean,
-  isBlog?:boolean
 }
-const ListProductCardSkeleton = ({ count = 3, isWrap,isBlog=false }: Props) => {
+const ListProductCardSkeleton = ({ count = 3, isWrap }: Props) => {
 
   return (
-    <div className={classNames(s.listProductCardSkeleton, { [s.wrap]: isWrap }, { [s.isBlog]: isBlog })}>
+    <div className={classNames(s.listProductCardSkeleton, { [s.wrap]: isWrap })}>
       {
-        Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item} isBlog={isBlog} />)
-
+        Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item} />)
       }
     </div>
   )

src/components/common/index.ts

@@ -55,4 +55,5 @@ export { default as FormForgot} from './ForgotPassword/FormForgot/FormForgot'
 export { default as FormResetPassword} from './ForgotPassword/FormResetPassword/FormResetPassword'
 export { default as ProductCardSkeleton} from './ProductCardSkeleton/ProductCardSkeleton'
 export { default as ListProductCardSkeleton} from './ListProductCardSkeleton/ListProductCardSkeleton'
+export { default as ListBlogCardSkeleton} from './ListBlogCardSkeleton/ListBlogCardSkeleton'
 

src/components/hooks/blog/useGetBlogList.tsx

@@ -1,4 +1,5 @@
 import { GetAllBlogsQuery, QueryBlogs,BlogList } from '@framework/schema'
+import { normalizeBlogList } from '@framework/utils/normalize'
 import { getAllBlogsQuery } from '@framework/utils/queries/get-all-blog-query'
 import gglFetcher from 'src/utils/gglFetcher'
 import useSWR from 'swr'
@@ -7,18 +8,7 @@ const useGetBlogList = (options?: QueryBlogs) => {
   const { data, isValidating, ...rest } = useSWR<GetAllBlogsQuery>([getAllBlogsQuery, options], gglFetcher)
 
   return { 
-          blogs: data?.blogs?.items?.map((val:BlogList)=>({
-              id: val.id,
-              title: val.translations[0]?.title,
-              imageSrc: val.featuredAsset?.preview ?? null,
-              slug: val.translations[0]?.slug,
-              description: val.translations[0]?.description,
-              isPublish: val.isPublish,
-              isFeatured:val.isFeatured,
-              authorName: val.authorName,
-              authorAvatarAsset : val.authorAvatarAsset?.preview,
-              createdAt: val.createdAt
-          })),
+          blogs: data?.blogs?.items?.map((blog:BlogList)=>normalizeBlogList(blog)),
           totalItems: data?.blogs?.totalItems || null,
           loading: isValidating,
            ...rest 

src/components/modules/blogs/BlogsList/BlogsList.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React, { useEffect, useState,useRef } from 'react'
+import React, { useEffect, useState,useRef, useMemo } from 'react'
 import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
 import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
 import { DEFAULT_BLOG_PAGE_SIZE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
@@ -7,7 +7,7 @@ import s from "./BlogsList.module.scss"
 import { QueryBlogs } from '@framework/schema'
 import { useGetBlogList } from 'src/components/hooks/blog'
 import { getPageFromQuery } from 'src/utils/funtion.utils'
-import { ListProductCardSkeleton  } from 'src/components/common'
+import { ListBlogCardSkeleton  } from 'src/components/common'
 
 interface BlogsListProps {
     blogList?: BlogCardProps[],
@@ -18,13 +18,14 @@ interface BlogsListProps {
 
 
 const BlogsList = ({ blogList,total,idFeatured }:BlogsListProps) => {
-
-    const DEFAULT_BLOGS_ARGS = {
+    console.log(blogList)
+    const DEFAULT_BLOGS_ARGS = useMemo(()=> ({
         excludeBlogIds: [idFeatured],
         options:{
             skip: 1, take: DEFAULT_BLOG_PAGE_SIZE
         }
-    }
+    }),[idFeatured]);
+
 
     const router = useRouter();
     const [initialQueryFlag, setInitialQueryFlag] = useState<boolean>(true)
@@ -69,7 +70,7 @@ const BlogsList = ({ blogList,total,idFeatured }:BlogsListProps) => {
     return (
         <section>
             <div className={s.wrapper}>
-                {(!initialQueryFlag && loading && !blogs) && <ListProductCardSkeleton count={DEFAULT_BLOG_PAGE_SIZE} isWrap isBlog={true} />}
+                {(!initialQueryFlag && loading && !blogs) && <ListBlogCardSkeleton count={DEFAULT_BLOG_PAGE_SIZE} isWrap  />}
                 <div className={s.list}>
                     
                     {

src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx

@@ -8,7 +8,7 @@ import { useLocalStorage } from 'src/components/hooks/useLocalStorage';
 interface Props {
     data: ProductCardProps[]
 }
-const ViewedProducts = ({data}:Props) => {
+const ViewedProducts = ({data = []}:Props) => {
     if (data.length===0){
         return <div></div>
     }

src/components/modules/recipes-list/RecipesList/RecipesList.tsx

@@ -159,17 +159,13 @@ const OPTIONSLECT=[
 ];
 
 interface Props{
-    data?: RecipeCardProps[],
-    recipes?:{
-        title:string,
-        imageSrc:string,
-        description:string,
-        slug:string
-    }[],
+    recipes?: RecipeCardProps[],
+    total:number
 }
 
 
-const RecipesList = ({ data =recipe}:Props) => {
+const RecipesList = ({ recipes,total }:Props) => {
+    console.log(recipes)
     return (
         <>
         <div className={s.recipesListWrapper}>
@@ -202,7 +198,7 @@ const RecipesList = ({ data =recipe}:Props) => {
                   
                     <div className={s.inner}>
                         <div className={s.boxItem}>
-                            {data?.map((item,index) => (
+                            {recipes?.map((item,index) => (
                                 <div key={index} className={s.item}>
                                     <RecipeCard slug={item.slug} imageSrc={item.imageSrc} title={item.title}  description={item.description}/> 
                                 </div>
@@ -210,7 +206,7 @@ const RecipesList = ({ data =recipe}:Props) => {
                         </div>
                     </div>
                     <div  className={s.recipesPagination}>
-                        <PaginationCommon pageSize={DEFAULT_PAGESIZE_RECIPELIST} total={data?.length}/>
+                        <PaginationCommon pageSize={DEFAULT_PAGESIZE_RECIPELIST} total={total}/>
                     </div>
                 </div>
                 

src/utils/types.utils.ts

@@ -27,6 +27,7 @@ export interface RecipeProps {
 }
 
 export interface BlogProps {
+    id:string,
     title: string
     slug: string
     description: string