From d6d4c2ce23c6e97533a4b6a7a3677ad3837fff1f Mon Sep 17 00:00:00 2001 From: RohitKini <57343193+RohitKini@users.noreply.github.com> Date: Thu, 1 Aug 2024 17:19:37 +0530 Subject: [PATCH 1/3] new academy code --- .env.local.sample | 4 +- .eslintrc.json | 3 + components/archive-relative.tsx | 2 +- components/blog-list.tsx | 6 +- components/blog-section.tsx | 4 +- components/card-section.tsx | 2 +- components/devtools.tsx | 224 +- components/footer.tsx | 26 +- components/gallery.tsx | 9 +- components/header.tsx | 32 +- components/hero-banner.tsx | 2 +- components/layout.tsx | 74 - components/render-components.tsx | 19 +- components/section.tsx | 2 +- contentstack-sdk/index.js | 35 +- helper/index.js | 240 +- next.config.js | 24 - next.config.mjs | 16 + package-lock.json | 6577 ++++++-------------- package.json | 38 +- pages/404.tsx | 12 - pages/[page].tsx | 53 - pages/_app.tsx | 83 - pages/_document.tsx | 52 - pages/blog/[post].tsx | 113 - pages/blog/index.tsx | 92 - pages/composable-heroes/[post].tsx | 95 - pages/composable-heroes/index.tsx | 75 - pages/gallery.tsx | 75 - pages/index.tsx | 52 - pages/sitemap.xml.tsx | 45 - public/favicon.ico | Bin 4286 -> 0 bytes public/manifest.json | 36 - {styles => public/styles}/Home.module.css | 0 {styles => public/styles}/globals.css | 0 {styles => public/styles}/json-preview.css | 0 {styles => public/styles}/style.css | 0 {styles => public/styles}/third-party.css | 0 {styles => public/styles}/tool-tip.css | 0 public/sw.js | 2 +- tsconfig copy.json | 26 + typescript/action.ts | 2 + 42 files changed, 2372 insertions(+), 5780 deletions(-) create mode 100644 .eslintrc.json delete mode 100644 components/layout.tsx delete mode 100644 next.config.js create mode 100644 next.config.mjs delete mode 100644 pages/404.tsx delete mode 100644 pages/[page].tsx delete mode 100644 pages/_app.tsx delete mode 100644 pages/_document.tsx delete mode 100644 pages/blog/[post].tsx delete mode 100644 pages/blog/index.tsx delete mode 100644 pages/composable-heroes/[post].tsx delete mode 100644 pages/composable-heroes/index.tsx delete mode 100644 pages/gallery.tsx delete mode 100644 pages/index.tsx delete mode 100644 pages/sitemap.xml.tsx delete mode 100644 public/favicon.ico delete mode 100644 public/manifest.json rename {styles => public/styles}/Home.module.css (100%) rename {styles => public/styles}/globals.css (100%) rename {styles => public/styles}/json-preview.css (100%) rename {styles => public/styles}/style.css (100%) rename {styles => public/styles}/third-party.css (100%) rename {styles => public/styles}/tool-tip.css (100%) create mode 100644 tsconfig copy.json diff --git a/.env.local.sample b/.env.local.sample index d58a2ae2..c31924f3 100644 --- a/.env.local.sample +++ b/.env.local.sample @@ -7,9 +7,9 @@ CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN CONTENTSTACK_ENVIRONMENT=YOUR_PUBLISHING_ENVIRONMENT # For live preview -CONTENTSTACK_MANAGEMENT_TOKEN= -CONTENTSTACK_API_HOST=api.contentstack.io +CONTENTSTACK_PREVIEW_TOKEN= CONTENTSTACK_APP_HOST=app.contentstack.com +CONTENTSTACK_PREVIEW_HOST=rest-preview.contentstack.com CONTENTSTACK_LIVE_PREVIEW=true CONTENTSTACK_LIVE_EDIT_TAGS=true diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..bffb357a --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/components/archive-relative.tsx b/components/archive-relative.tsx index ac1604c0..061eb442 100644 --- a/components/archive-relative.tsx +++ b/components/archive-relative.tsx @@ -22,7 +22,7 @@ export default function ArchiveRelative({ blogs }: BlogListProps) { return ( <> {blogs?.map((blog, idx) => ( - +

{blog.title}

diff --git a/components/blog-list.tsx b/components/blog-list.tsx index 0b8797fd..6fa3419c 100644 --- a/components/blog-list.tsx +++ b/components/blog-list.tsx @@ -37,7 +37,7 @@ function BlogList({ bloglist }: { bloglist: BloglistProps }) { return (
{bloglist.featured_image && ( - + {bloglist.title && ( - +

{bloglist.title}

 @@ -67,7 +67,7 @@ function BlogList({ bloglist }: { bloglist: BloglistProps }) {

{parse(body)}
{bloglist.url ? ( - + {'Read more -->'} diff --git a/components/blog-section.tsx b/components/blog-section.tsx index 5131039d..fa886a32 100644 --- a/components/blog-section.tsx +++ b/components/blog-section.tsx @@ -48,7 +48,7 @@ export default function BlogSection(props: FeaturedBlogProps) {

{fromBlog.title_h2}

)} {fromBlog.view_articles && ( - + {parse(blog.body.slice(0, 300))}
)} {blog.url && ( - + {'Read More -->'} )} diff --git a/components/card-section.tsx b/components/card-section.tsx index 6fff8ee0..027c5842 100644 --- a/components/card-section.tsx +++ b/components/card-section.tsx @@ -27,7 +27,7 @@ export default function CardSection({ cards }: CardProps) { {card.description &&

{card.description}

}
{card.call_to_action.title && card.call_to_action.href && ( - + {card.call_to_action.title} )} diff --git a/components/devtools.tsx b/components/devtools.tsx index 9c2a07ae..578852e8 100644 --- a/components/devtools.tsx +++ b/components/devtools.tsx @@ -1,118 +1,118 @@ -import React, { useState, useEffect } from 'react'; -import dynamic from 'next/dynamic'; -import Tooltip from './tool-tip'; +// import React, { useState, useEffect } from 'react'; +// import dynamic from 'next/dynamic'; +// import Tooltip from './tool-tip'; -const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false }); +// const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false }); -function filterObject(inputObject: any) { - const unWantedProps = [ - '_version', - 'ACL', - '_owner', - '_in_progress', - 'created_at', - 'created_by', - 'updated_at', - 'updated_by', - 'publish_details', - ]; - for (const key in inputObject) { - unWantedProps.includes(key) && delete inputObject[key]; - if (typeof inputObject[key] !== 'object') { - continue; - } - inputObject[key] = filterObject(inputObject[key]); - } - return inputObject; -} +// function filterObject(inputObject: any) { +// const unWantedProps = [ +// '_version', +// 'ACL', +// '_owner', +// '_in_progress', +// 'created_at', +// 'created_by', +// 'updated_at', +// 'updated_by', +// 'publish_details', +// ]; +// for (const key in inputObject) { +// unWantedProps.includes(key) && delete inputObject[key]; +// if (typeof inputObject[key] !== 'object') { +// continue; +// } +// inputObject[key] = filterObject(inputObject[key]); +// } +// return inputObject; +// } -const DevTools = ({ response }: any) => { - const filteredJson = filterObject(response); - const [forceUpdate, setForceUpdate] = useState(0); +// const DevTools = ({ response }: any) => { +// const filteredJson = filterObject(response); +// const [forceUpdate, setForceUpdate] = useState(0); - function copyObject(object: any) { - navigator.clipboard.writeText(object); - setForceUpdate(1); - } +// function copyObject(object: any) { +// navigator.clipboard.writeText(object); +// setForceUpdate(1); +// } - useEffect(() => { - if (forceUpdate !== 0) { - setTimeout(() => setForceUpdate(0), 300); - } - }, [forceUpdate]); +// useEffect(() => { +// if (forceUpdate !== 0) { +// setTimeout(() => setForceUpdate(0), 300); +// } +// }, [forceUpdate]); - return ( - - ); -}; -export default DevTools; +// return ( +// +// ); +// }; +// export default DevTools; diff --git a/components/footer.tsx b/components/footer.tsx index 3f383bc9..e92a3823 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -1,12 +1,17 @@ +'use client'; + import React, { useState, useEffect } from 'react'; import Link from 'next/link'; import parse from 'html-react-parser'; import { onEntryChange } from '../contentstack-sdk'; -import { getFooterRes } from '../helper'; +import { getAllEntries, getFooterRes } from '../helper'; import Skeleton from 'react-loading-skeleton'; import { FooterProps, Entry, Links } from "../typescript/layout"; -export default function Footer({ footer, entries }: {footer: FooterProps, entries: Entry}) { +export default function Footer() { + + const [footer, setFooterProp] = useState(undefined); + const [entries, setEntries] = useState(undefined); const [getFooter, setFooter] = useState(footer); @@ -29,6 +34,13 @@ export default function Footer({ footer, entries }: {footer: FooterProps, entrie return newFooter; } + const fetchFooterAndEntries = async () => { + const footerRes = await getFooterRes(); + const entriesRes = await getAllEntries(); + setFooterProp(footerRes); + setEntries(entriesRes); + } + async function fetchData() { try { if (footer && entries) { @@ -41,6 +53,10 @@ export default function Footer({ footer, entries }: {footer: FooterProps, entrie } } + useEffect(() => { + fetchFooterAndEntries(); + }, []); + useEffect(() => { onEntryChange(() => fetchData()); }, [footer]); @@ -52,13 +68,13 @@ export default function Footer({ footer, entries }: {footer: FooterProps, entrie
{footerData && footerData.logo ? ( - + {footerData.title} @@ -111,7 +127,7 @@ export default function Footer({ footer, entries }: {footer: FooterProps, entrie
{footerData && typeof footerData.copyright === 'string' ? ( -
+
{parse(footerData.copyright)}
) : ( diff --git a/components/gallery.tsx b/components/gallery.tsx index f826d6c4..d0159b03 100644 --- a/components/gallery.tsx +++ b/components/gallery.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import parse from 'html-react-parser'; const GalleryReact = ({ data, heading, description, showFilter, showDescription }: { data: any, heading: any, showFilter: boolean, showDescription: boolean, description: any }) => { @@ -14,6 +14,13 @@ const GalleryReact = ({ data, heading, description, showFilter, showDescription setActive(true); }; + useEffect(() => { + setItems(data); + } + , [data]); + + + return ( <> { diff --git a/components/header.tsx b/components/header.tsx index a1443ad6..fbd119a6 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,18 +1,28 @@ +'use client' + import React, { useState, useEffect } from 'react'; import Link from 'next/link'; -import { useRouter } from 'next/router'; +import { usePathname } from 'next/navigation'; import parse from 'html-react-parser'; -import Tooltip from './tool-tip'; +// import Tooltip from './tool-tip'; import { onEntryChange } from '../contentstack-sdk'; -import { getHeaderRes } from '../helper'; +import { getAllEntries, getHeaderRes } from '../helper'; import Skeleton from 'react-loading-skeleton'; import { HeaderProps, Entry, NavLinks } from "../typescript/layout"; -export default function Header({ header, entries }: {header: HeaderProps, entries: Entry}) { - - const router = useRouter(); +export default function Header() { + const [header, setHeaderProp] = useState(undefined); + const [entries, setEntries] = useState(undefined); + const pathname = usePathname(); const [getHeader, setHeader] = useState(header); + const fetchHeaderAndEntries = async () => { + const headerRes = await getHeaderRes(); + const entriesRes = await getAllEntries(); + setHeaderProp(headerRes); + setEntries(entriesRes); + } + function buildNavigation(ent: Entry, hd: HeaderProps) { let newHeader={...hd}; if (ent.length!== newHeader.navigation_menu.length) { @@ -46,6 +56,10 @@ export default function Header({ header, entries }: {header: HeaderProps, entrie } } + useEffect(() => { + fetchHeaderAndEntries(); + }, []); + useEffect(() => { if (header && entries) { onEntryChange(() => fetchData()); @@ -69,7 +83,7 @@ export default function Header({ header, entries }: {header: HeaderProps, entrie
{headerData ? ( - + { const className = - router.asPath === list.page_reference[0].url ? 'active' : ''; + pathname === list.page_reference[0].url ? 'active' : ''; return (
  • - + {list.label}
    • diff --git a/components/hero-banner.tsx b/components/hero-banner.tsx index 9c58a989..7bb12dc7 100644 --- a/components/hero-banner.tsx +++ b/components/hero-banner.tsx @@ -57,7 +57,7 @@ export default function HeroBanner(props: BannerProps) { '' )} {banner.call_to_action.title && banner.call_to_action.href ? ( - + {banner?.call_to_action.title} diff --git a/components/layout.tsx b/components/layout.tsx deleted file mode 100644 index f6eadb5e..00000000 --- a/components/layout.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import Header from './header'; -import Footer from './footer'; -import DevTools from './devtools'; -import { HeaderProps, FooterProps, PageProps, Posts, ChilderenProps, Entry, NavLinks, Links } from "../typescript/layout"; - -export default function Layout({ - header, - footer, - page, - blogPost, - blogList, - entries, - children, -}: { header: HeaderProps, footer: FooterProps, page: PageProps, blogPost: Posts, blogList: Posts, entries: Entry, children: ChilderenProps }) { - - const [getLayout, setLayout] = useState({ header, footer }); - const jsonObj: any = { header, footer }; - page && (jsonObj.page = page); - blogPost && (jsonObj.blog_post = blogPost); - blogList && (jsonObj.blog_post = blogList); - - function buildNavigation(ent: Entry, hd: HeaderProps, ft: FooterProps) { - let newHeader = { ...hd }; - let newFooter = { ...ft }; - if (ent.length !== newHeader.navigation_menu.length) { - ent.forEach((entry) => { - const hFound = newHeader?.navigation_menu.find( - (navLink: NavLinks) => navLink.label === entry.title - ); - if (!hFound) { - newHeader.navigation_menu?.push({ - label: entry.title, - page_reference: [ - { title: entry.title, url: entry.url, $: entry.$ }, - ], - $: {}, - }); - } - const fFound = newFooter?.navigation.link.find( - (nlink: Links) => nlink.title === entry.title - ); - if (!fFound) { - newFooter.navigation.link?.push({ - title: entry.title, - href: entry.url, - $: entry.$, - }); - } - }); - } - return [newHeader, newFooter]; - } - - useEffect(() => { - if (footer && header && entries) { - const [newHeader, newFooter] = buildNavigation(entries, header, footer); - setLayout({ header: newHeader, footer: newFooter }); - } - }, [header, footer]); - - return ( - <> - {header ?
    : ''} -
    - <> - {children} - {Object.keys(jsonObj).length && } - -
    - {footer ?