🐛 bug: fix bug

:%s

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/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss

@@ -0,0 +1,18 @@
+.listBlogCardSkeleton {
+    display: flex;
+    overflow: hidden;
+    width: 90%;
+    justify-content: space-between;
+    div{
+        min-width: 32rem;
+    }
+
+    &.wrap {
+        flex-wrap: wrap;
+        overflow: unset;
+        > div {
+            margin-bottom: 1.6rem;
+        }
+    }
+    
+}

src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx

@@ -0,0 +1,20 @@
+import classNames from 'classnames'
+import { ProductCardSkeleton } from '..'
+import s from './ListBlogCardSkeleton.module.scss'
+
+type Props = {
+  count?: number
+  isWrap?: boolean,
+}
+const ListBlogCardSkeleton = ({ count = 3, isWrap }: Props) => {
+
+  return (
+    <div className={classNames(s.listBlogCardSkeleton, { [s.wrap]: isWrap })}>
+      {
+        Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item}  />)
+      }
+    </div>
+  )
+}
+
+export default ListBlogCardSkeleton

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[],
@@ -19,12 +19,13 @@ interface BlogsListProps {
 
 const BlogsList = ({ blogList,total,idFeatured }:BlogsListProps) => {
 
-    const DEFAULT_BLOGS_ARGS = {
+    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)
@@ -33,7 +34,6 @@ const BlogsList = ({ blogList,total,idFeatured }:BlogsListProps) => {
     const { blogs, totalItems, loading } = useGetBlogList(optionQueryBlog);
 
 
-
     const onPageChange = (page:number) => {
         router.push({
             pathname: ROUTE.BLOGS,
@@ -69,7 +69,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}>
                     
                     {