new changes added

app/[page]/page-client.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import RenderComponents from '@/components/render-components';
+import { onEntryChange } from '@/contentstack-sdk/live-preview';
+import { Page as PageProp } from '@/typescript/pages';
+import React, { useState, useEffect } from 'react';
+import Skeleton from 'react-loading-skeleton';
+
+export default function PageClient({ initialEntry }: { initialEntry: PageProp }) {
+    const [getEntry, setEntry] = useState<PageProp>(initialEntry);
+
+    useEffect(() => {
+        onEntryChange(() => {
+            window.location.reload();
+        });
+    }, []);
+
+    return getEntry?.page_components ? (
+        <RenderComponents
+            pageComponents={getEntry.page_components}
+            contentTypeUid='page'
+            entryUid={getEntry.uid}
+            locale={getEntry.locale}
+        />
+    ) : (
+        <Skeleton count={3} height={300} />
+    );
+}

app/[page]/page.tsx

@@ -1,44 +1,22 @@
-'use client';
-
-import RenderComponents from '@/components/render-components';
-import { onEntryChange } from '@/contentstack-sdk';
 import { getPageRes, metaData } from '@/helper';
-import { Page as PageProp } from '@/typescript/pages';
-import { usePathname } from 'next/navigation';
-import React, { useState, useEffect } from 'react';
-import Skeleton from 'react-loading-skeleton';
-
-export default function Page() {
-    const entryUrl = usePathname();
+import PageClient from './page-client';
 
-    const [getEntry, setEntry] = useState<PageProp>();
+export default async function Page({ params }: { params: { page: string } }) {
+    const entryUrl = `/${params.page}`;
 
-    async function fetchData() {
-        try {
-            const entryRes = await getPageRes(entryUrl);
-            if (!entryRes) throw new Error('Status code 404');
-            setEntry(entryRes);
-        } catch (error) {
-            console.error(error);
-        }
+    let entryData;
+    try {
+        entryData = await getPageRes(entryUrl);
+        if (!entryData) throw new Error('Status code 404');
+    } catch (error) {
+        console.error(error);
+        return <div>Error loading page</div>;
     }
 
-    useEffect(() => {
-        onEntryChange(() => fetchData());
-    }, []);
-
-
-    return getEntry?.page_components ? (
+    return (
         <>
-            {getEntry.seo && getEntry.seo.enable_search_indexing && metaData(getEntry.seo)}
-            <RenderComponents
-                pageComponents={getEntry.page_components}
-                contentTypeUid='page'
-                entryUid={getEntry.uid}
-                locale={getEntry.locale}
-            />
+            {entryData.seo && entryData.seo.enable_search_indexing && metaData(entryData.seo)}
+            <PageClient initialEntry={entryData} />
         </>
-    ) : (
-        <Skeleton count={3} height={300} />
     );
-}
+}

app/blog/[post]/blog-post-client.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import parse from 'html-react-parser';
+import Skeleton from 'react-loading-skeleton';
+import { BlogPosts, Page } from '@/typescript/pages';
+import { onEntryChange } from '@/contentstack-sdk/live-preview';
+import RenderComponents from '@/components/render-components';
+import ArchiveRelative from '@/components/archive-relative';
+
+export default function BlogPostClient({ 
+    initialPost, 
+    initialBanner 
+}: { 
+    initialPost: BlogPosts;
+    initialBanner: Page;
+}) {
+    const [blogPost, setBlogPost] = useState<BlogPosts>(initialPost);
+    const [page, setPage] = useState<Page>(initialBanner);
+
+    useEffect(() => {
+        onEntryChange(() => {
+            window.location.reload();
+        });
+    }, []);
+
+    return (
+        <>
+            {page ? (
+                <RenderComponents
+                    pageComponents={page.page_components}
+                    blogPost
+                    contentTypeUid='blog_post'
+                    entryUid={page?.uid}
+                    locale={page?.locale}
+                />
+            ) : (
+                <Skeleton height={400} />
+            )}
+            <div className='blog-container'>
+                <article className='blog-detail'>
+                    {blogPost && blogPost.title ? (
+                        <h2 {...blogPost.$?.title as {}}>{blogPost.title}</h2>
+                    ) : (
+                        <h2>
+                            <Skeleton />
+                        </h2>
+                    )}
+                    {blogPost && blogPost.date ? (
+                        <p {...blogPost.$?.date as {}}>
+                            {moment(blogPost.date).format('ddd, MMM D YYYY')},{' '}
+                            <strong {...blogPost.author[0].$?.title as {}}>
+                                {blogPost.author[0].title}
+                            </strong>
+                        </p>
+                    ) : (
+                        <p>
+                            <Skeleton width={300} />
+                        </p>
+                    )}
+                    {blogPost && blogPost.body ? (
+                        <div {...blogPost.$?.body as {}}>{parse(blogPost.body)}</div>
+                    ) : (
+                        <Skeleton height={800} width={600} />
+                    )}
+                </article>
+                <div className='blog-column-right'>
+                    <div className='related-post'>
+                        {page && page?.page_components[2].widget ? (
+                            <h2 {...page?.page_components[2].widget.$?.title_h2 as {}}>
+                                {page?.page_components[2].widget.title_h2}
+                            </h2>
+                        ) : (
+                            <h2>
+                                <Skeleton />
+                            </h2>
+                        )}
+                        {blogPost && blogPost.related_post ? (
+                            <ArchiveRelative
+                                {...blogPost.$?.related_post}
+                                blogs={blogPost.related_post}
+                            />
+                        ) : (
+                            <Skeleton width={300} height={500} />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

app/blog/[post]/page.tsx

@@ -1,104 +1,25 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import moment from 'moment';
-import parse from 'html-react-parser';
-import Skeleton from 'react-loading-skeleton';
-import { usePathname } from 'next/navigation';
 import { getBlogPostRes, getPageRes, metaData } from '@/helper';
-import { BlogPosts, Page } from '@/typescript/pages';
-import { onEntryChange } from '@/contentstack-sdk';
-import RenderComponents from '@/components/render-components';
-import ArchiveRelative from '@/components/archive-relative';
-
+import BlogPostClient from './blog-post-client';
 
-export default function BlogPost() {
-    const entryUrl = usePathname();
+export default async function BlogPost({ params }: { params: { post: string } }) {
+    const entryUrl = `/blog/${params.post}`;
 
-    const [blogPost, setBlogPost] = useState<BlogPosts>();
-    const [page, setPage] = useState<Page>();
-    const [getPost, setPost] = useState({ banner: page, post: blogPost });
-    async function fetchData() {
-        try {
-            const entryRes = await getBlogPostRes(entryUrl);
-            const bannerRes = await getPageRes('/blog');
-            if (!entryRes || !bannerRes) throw new Error('Status: ' + 404);
-            setBlogPost(entryRes);
-            setPage(bannerRes);
-            setPost({ banner: bannerRes, post: entryRes });
-        } catch (error) {
-            console.error(error);
-        }
+    let postData;
+    let bannerData;
+
+    try {
+        postData = await getBlogPostRes(entryUrl);
+        bannerData = await getPageRes('/blog');
+        if (!postData || !bannerData) throw new Error('Status: 404');
+    } catch (error) {
+        console.error(error);
+        return <div>Error loading blog post</div>;
     }
 
-    useEffect(() => {
-        onEntryChange(() => fetchData());
-    }, []);
-
-    const { post, banner } = getPost;
     return (
         <>
-            {blogPost?.seo && blogPost.seo.enable_search_indexing && metaData(blogPost.seo)}
-            {banner ? (
-                <RenderComponents
-                    pageComponents={banner.page_components}
-                    blogPost
-                    contentTypeUid='blog_post'
-                    entryUid={banner?.uid}
-                    locale={banner?.locale}
-                />
-            ) : (
-                <Skeleton height={400} />
-            )}
-            <div className='blog-container'>
-                <article className='blog-detail'>
-                    {post && post.title ? (
-                        <h2 {...post.$?.title as {}}>{post.title}</h2>
-                    ) : (
-                        <h2>
-                            <Skeleton />
-                        </h2>
-                    )}
-                    {post && post.date ? (
-                        <p {...post.$?.date as {}}>
-                            {moment(post.date).format('ddd, MMM D YYYY')},{' '}
-                            <strong {...post.author[0].$?.title as {}}>
-                                {post.author[0].title}
-                            </strong>
-                        </p>
-                    ) : (
-                        <p>
-                            <Skeleton width={300} />
-                        </p>
-                    )}
-                    {post && post.body ? (
-                        <div {...post.$?.body as {}}>{parse(post.body)}</div>
-                    ) : (
-                        <Skeleton height={800} width={600} />
-                    )}
-                </article>
-                <div className='blog-column-right'>
-                    <div className='related-post'>
-                        {banner && banner?.page_components[2].widget ? (
-                            <h2 {...banner?.page_components[2].widget.$?.title_h2 as {}}>
-                                {banner?.page_components[2].widget.title_h2}
-                            </h2>
-                        ) : (
-                            <h2>
-                                <Skeleton />
-                            </h2>
-                        )}
-                        {post && post.related_post ? (
-                            <ArchiveRelative
-                                {...post.$?.related_post}
-                                blogs={post.related_post}
-                            />
-                        ) : (
-                            <Skeleton width={300} height={500} />
-                        )}
-                    </div>
-                </div>
-            </div>
+            {postData?.seo && postData.seo.enable_search_indexing && metaData(postData.seo)}
+            <BlogPostClient initialPost={postData} initialBanner={bannerData} />
         </>
     );
-}
+}

app/blog/blog-client.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { onEntryChange } from '../../contentstack-sdk/live-preview';
+import BlogList from '../../components/blog-list';
+import RenderComponents from '../../components/render-components';
+import ArchiveRelative from '../../components/archive-relative';
+import Skeleton from 'react-loading-skeleton';
+import { Page, PostPage } from "../../typescript/pages";
+
+export default function BlogClient({ 
+    initialBanner, 
+    initialPosts, 
+    initialArchivePosts 
+}: { 
+    initialBanner: Page;
+    initialPosts: PostPage;
+    initialArchivePosts: PostPage;
+}) {
+    const [getBanner, setBanner] = useState<Page>(initialBanner);
+    const [archivePost, setArchivePost] = useState<PostPage>(initialArchivePosts);
+    const [posts, setPosts] = useState<PostPage>(initialPosts);
+
+    useEffect(() => {
+        onEntryChange(() => {
+            window.location.reload();
+        });
+    }, []);
+
+    return (
+        <>
+            {getBanner?.page_components ? (
+                <RenderComponents
+                    pageComponents={getBanner.page_components}
+                    blogPost
+                    contentTypeUid='page'
+                    entryUid={getBanner.uid}
+                    locale={getBanner.locale}
+                />
+            ) : (
+                <Skeleton height={400} />
+            )}
+            <div className='blog-container'>
+                <div className='blog-column-left'>
+                    {posts ? (
+                        posts.map((blogList, index) => (
+                            <BlogList bloglist={blogList} key={index} />
+                        ))
+                    ) : (
+                        <Skeleton height={400} width={400} count={3} />
+                    )}
+                </div>
+                <div className='blog-column-right'>
+                    {getBanner && getBanner.page_components[1].widget && (
+                        <h2>{getBanner.page_components[1].widget.title_h2}</h2>
+                    )}
+                    {archivePost ? (
+                        <ArchiveRelative blogs={archivePost} />
+                    ) : (
+                        <Skeleton height={600} width={300} />
+                    )}
+                </div>
+            </div>
+        </>
+    );
+}