Merge pull request #8 from contentstack/staging

fixing issues
contentstack · Jul 3, 2023 · ecaa230 · ecaa230
2 parents 89452b7 + 1948b3e
commit ecaa230
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 23 deletions.
diff --git a/components/gallery.tsx b/components/gallery.tsx
@@ -58,7 +58,7 @@ const GalleryReact = ({ data, heading, description, showFilter, showDescription
                                         value='flexRadioDefault'
                                         defaultChecked
                                     />
-                                    <label className="form-check-label" htmlFor="flexRadioDefault2">
+                                    <label className="form-check-label">
                                         All
                                     </label>
                                 </div>
@@ -69,7 +69,7 @@ const GalleryReact = ({ data, heading, description, showFilter, showDescription
                                                 id="flexRadioDefault2"
                                                 onClick={() => filterItem(dataList)}
                                                 value={dataList} />
-                                            <label className="form-check-label" htmlFor="flexRadioDefault2">
+                                            <label className="form-check-label">
                                                 {dataList}
                                             </label>
                                         </div>
@@ -92,12 +92,17 @@ const GalleryReact = ({ data, heading, description, showFilter, showDescription
                                             <div className="gallery-featured-blogs col-md-6 col-lg-4">
                                                 <div className="featured-gallery">
                                                     <a href={url} className="test">
-                                                        <img
-                                                            className={`img-fluid ${showFilter === false ? 'large-img' : ''}`}
-                                                            src={image?.url}
-                                                            alt={image?.filename}
-                                                            {...image.$?.url as {}}
-                                                        /><div className="featured-content">
+                                                        {
+                                                            image?.url ?
+
+                                                                <img
+                                                                    className={`img-fluid ${showFilter === false ? 'large-img' : ''}`}
+                                                                    src={image?.url}
+                                                                    alt={image?.filename}
+                                                                    {...image.$?.url as {}}
+                                                                />
+                                                                : ''
+                                                        }<div className="featured-content">
                                                             {/* <h3 data-cslp="blog_post.blt7ca504fb3c955cc0.en-us.title" className="">The  modern Cloud Ecosystem</h3> */}
                                                             <div>
                                                                 <h5 className="card-title mb-2" {...elem.$?.title as {}}>{elem?.title}</h5>
@@ -125,4 +130,4 @@ const GalleryReact = ({ data, heading, description, showFilter, showDescription
     );
 };
 
-export default GalleryReact;
+export default GalleryReact;
diff --git a/pages/composable-heroes/[post].tsx b/pages/composable-heroes/[post].tsx
@@ -1,30 +1,48 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { onEntryChange } from '../../contentstack-sdk';
 import parse from 'html-react-parser';
 import { getComposableHeroSingleRes } from '../../helper';
 import { Page, SuperHeroPosts, PageUrl } from "../../typescript/pages";
 
 export default function SuperHerosPost({ superHeroPost, page, pageUrl }: { superHeroPost: SuperHeroPosts, page: Page, pageUrl: PageUrl }) {
 
-  const postData = superHeroPost
+  const [getPost, setPost] = useState(superHeroPost);
+  async function fetchData() {
+    try {
+      const entryRes = await getComposableHeroSingleRes(pageUrl);
+      if (!entryRes) throw new Error('Status: ' + 404);
+      setPost(entryRes);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  useEffect(() => {
+    onEntryChange(() => fetchData());
+  }, []);
 
+  const postData = getPost
   return (
     <>
       <div className='container superHero-detail-container'>
         <div className='row'>
           <div className='col-md-12 col-lg-8'>
-
-            <img
-              className='img-fluid'
-              src={postData?.image?.url + '?height=800'}
-              alt={postData?.image?.filename}
-              {...postData?.image.$?.url as {}}
-            />
+            {
+              postData?.image?.url ?
+                <img
+                  className='img-fluid'
+                  src={postData?.image?.url + '?height=800'}
+                  alt={postData?.image?.filename}
+                  {...postData?.image.$?.url as {}}
+                />
+                : ''
+            }
           </div>
           <div className='col-md-12 col-lg-4 mt-5 ps-md-5'>
             <div className='row'>
               <div className='col-12'>
-                <h2 className='mb-3' {...postData.$?.title as {}}>{postData?.title}</h2>
-                <p {...postData.$?.description as {}}>{parse(postData?.description)}</p>
+                {postData?.title ? <h2 className='mb-3' {...postData.$?.title as {}}>{postData?.title}</h2> : ''}
+                {postData?.description ? <p {...postData.$?.description as {}}>{parse(postData?.description)}</p> : ''}
               </div>
               <div className='col-12'>
                 {
@@ -49,7 +67,7 @@ export default function SuperHerosPost({ superHeroPost, page, pageUrl }: { super
                 }
                 {postData?.contact_info?.email ? <p {...postData?.contact_info.$?.email}><strong>Email :</strong> {postData?.contact_info?.email}</p> : ''}
                 {postData?.contact_info?.phone ? <p {...postData?.contact_info.$?.phone}><strong>Phone :</strong> {postData?.contact_info?.phone}</p> : ''}
-                {postData?.powers[0] ? <p {...postData.$?.powers as{}}><strong>Power :</strong> {postData?.powers}</p> : ''}
+                {postData?.powers ? <p {...postData.$?.powers as {}}><strong>Power :</strong> {postData?.powers}</p> : ''}
               </div>
             </div>
           </div>

diff --git a/pages/composable-heroes/index.tsx b/pages/composable-heroes/index.tsx
@@ -5,9 +5,43 @@ import { Page, PostPage, PageUrl, Context } from "../../typescript/pages";
 import GalleryReact from '../../components/gallery'
 
 export default function ComposableHeroes({ page, posts, archivePost, pageUrl }: { page: Page, posts: PostPage, archivePost: PostPage, pageUrl: PageUrl }) {
+  const [getBanner, setBanner] = useState(page);
+  async function fetchData() {
+
+    try {
+      const bannerRes = await getAllComposableHeros(pageUrl);
+      if (!bannerRes) throw new Error('Status code 404');
+      setBanner(bannerRes);
+      const archivePost = [] as any;
+      const posts = [] as any;
+
+      getBanner?.characters?.forEach((superHero: { is_archived: any; }) => {
+        if (superHero.is_archived) {
+          archivePost.push(superHero);
+        } else {
+          posts.push(superHero);
+        }
+      });
+
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  useEffect(() => {
+    onEntryChange(() => fetchData());
+  }, []);
+
+
   return (
     <>
-      <GalleryReact data={posts} heading={page?.heading} description={page?.description} showFilter={false} showDescription />
+      <GalleryReact
+        data={posts}
+        heading={getBanner?.heading}
+        description={getBanner?.description}
+        showFilter={false}
+        showDescription
+      />
     </>
   );
 }
@@ -38,4 +72,4 @@ export async function getServerSideProps(context: Context) {
     console.error(error);
     return { notFound: true };
   }
-}
+}