From 725f5b26eaccf327801066712603b3bde8ecc1d1 Mon Sep 17 00:00:00 2001 From: karantalapalli Date: Tue, 17 May 2022 11:19:43 +0530 Subject: [PATCH 1/6] refactor: add typescript [ECO-960] --- .eslintrc.json | 28 +- .gitignore | 10 +- README.md | 11 +- ...ion-bucket.js => about-section-bucket.tsx} | 5 +- ...chive-relative.js => archive-relative.tsx} | 3 +- .../{blog-banner.js => blog-banner.tsx} | 3 +- components/{blog-list.js => blog-list.tsx} | 7 +- .../{blog-section.js => blog-section.tsx} | 6 +- .../{card-section.js => card-section.tsx} | 3 +- components/{devtools.js => devtools.tsx} | 8 +- components/{footer.js => footer.tsx} | 12 +- components/{header.js => header.tsx} | 12 +- .../{hero-banner.js => hero-banner.tsx} | 6 +- components/{layout.js => layout.tsx} | 14 +- ...er-components.js => render-components.tsx} | 5 +- .../{section-bucket.js => section-bucket.tsx} | 3 +- ...tml-code.js => section-with-html-code.tsx} | 3 +- components/{section.js => section.tsx} | 7 +- .../{team-section.js => team-section.tsx} | 3 +- components/{tool-tip.js => tool-tip.tsx} | 17 +- helper/index.js | 2 +- next-env.d.ts | 5 + next.config.js | 2 +- package-lock.json | 3566 +++++++---------- package.json | 17 +- pages/{404.jsx => 404.tsx} | 0 pages/{[page].jsx => [page].tsx} | 6 +- pages/{_app.js => _app.tsx} | 11 +- pages/{_document.js => _document.tsx} | 2 +- pages/blog/{[post].jsx => [post].tsx} | 7 +- pages/blog/{index.jsx => index.tsx} | 13 +- pages/{index.jsx => index.tsx} | 6 +- pages/{sitemap.xml.jsx => sitemap.xml.tsx} | 10 +- public/vercel.svg | 4 + styles/Home.module.css | 116 + styles/globals.css | 16 + tsconfig.json | 20 + typescript/about-section-bucket.ts | 30 + typescript/action.ts | 16 + typescript/archive-relative.ts | 15 + typescript/banner.ts | 20 + typescript/blog.ts | 57 + typescript/card.ts | 17 + typescript/component.ts | 136 + typescript/layout.ts | 115 + typescript/pages.ts | 109 + typescript/section.ts | 57 + 47 files changed, 2423 insertions(+), 2118 deletions(-) rename components/{about-section-bucket.js => about-section-bucket.tsx} (89%) rename components/{archive-relative.js => archive-relative.tsx} (79%) rename components/{blog-banner.js => blog-banner.tsx} (82%) rename components/{blog-list.js => blog-list.tsx} (83%) rename components/{blog-section.js => blog-section.tsx} (90%) rename components/{card-section.js => card-section.tsx} (86%) rename components/{devtools.js => devtools.tsx} (95%) rename components/{footer.js => footer.tsx} (91%) rename components/{header.js => header.tsx} (89%) rename components/{hero-banner.js => hero-banner.tsx} (90%) rename components/{layout.js => layout.tsx} (78%) rename components/{render-components.js => render-components.tsx} (93%) rename components/{section-bucket.js => section-bucket.tsx} (91%) rename components/{section-with-html-code.js => section-with-html-code.tsx} (90%) rename components/{section.js => section.tsx} (85%) rename components/{team-section.js => team-section.tsx} (89%) rename components/{tool-tip.js => tool-tip.tsx} (69%) create mode 100644 next-env.d.ts rename pages/{404.jsx => 404.tsx} (100%) rename pages/{[page].jsx => [page].tsx} (89%) rename pages/{_app.js => _app.tsx} (91%) rename pages/{_document.js => _document.tsx} (97%) rename pages/blog/{[post].jsx => [post].tsx} (92%) rename pages/blog/{index.jsx => index.tsx} (87%) rename pages/{index.jsx => index.tsx} (87%) rename pages/{sitemap.xml.jsx => sitemap.xml.tsx} (76%) create mode 100644 public/vercel.svg create mode 100644 styles/Home.module.css create mode 100644 styles/globals.css create mode 100644 tsconfig.json create mode 100644 typescript/about-section-bucket.ts create mode 100644 typescript/action.ts create mode 100644 typescript/archive-relative.ts create mode 100644 typescript/banner.ts create mode 100644 typescript/blog.ts create mode 100644 typescript/card.ts create mode 100644 typescript/component.ts create mode 100644 typescript/layout.ts create mode 100644 typescript/pages.ts create mode 100644 typescript/section.ts diff --git a/.eslintrc.json b/.eslintrc.json index 77f1a37..afdeb5b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,10 +1,26 @@ { - "extends": ["next/babel","next/core-web-vitals"], + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "extends: next/core-web-vitals" + ], + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": [ + "react" + ], "rules": { - "@next/next/no-page-custom-font":"off", - "@next/next/no-sync-scripts":"off", - "@next/next/no-img-element":"off", - "react-hooks/exhaustive-deps":"off", - "import/no-anonymous-default-export":"off" + "react/prop-types":0, + "no-undef":"off", + "no-unused-vars": "off" } } diff --git a/.gitignore b/.gitignore index 74b7586..737d872 100644 --- a/.gitignore +++ b/.gitignore @@ -23,13 +23,13 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.pnpm-debug.log* # local env files -.env -.env.local -.env.development.local -.env.test.local -.env.production.local +.env*.local # vercel .vercel + +# typescript +*.tsbuildinfo diff --git a/README.md b/README.md index 28e45f2..3196d60 100644 --- a/README.md +++ b/README.md @@ -27,13 +27,4 @@ We have created an in-depth tutorial on how you can create a Next.js starter web Read Contentstack [docs](https://www.contentstack.com/docs/) -Learn about [Next.js](https://learnnextjs.com/) - - - - - - - - - +Learn about [Next.js](https://learnnextjs.com/) \ No newline at end of file diff --git a/components/about-section-bucket.js b/components/about-section-bucket.tsx similarity index 89% rename from components/about-section-bucket.js rename to components/about-section-bucket.tsx index 81a8e0a..8a8f955 100644 --- a/components/about-section-bucket.js +++ b/components/about-section-bucket.tsx @@ -1,8 +1,9 @@ import React from 'react'; import parse from 'html-react-parser'; +import { BucketProps, Bucket } from "../typescript/about-section-bucket"; -export default function AboutSectionBucket({ sectionWithBuckets }) { - function bucketContent(bucket, index) { +export default function AboutSectionBucket({ sectionWithBuckets }: {sectionWithBuckets:BucketProps}) { + function bucketContent(bucket: Bucket, index: number) { return (
{bucket.icon && ( diff --git a/components/archive-relative.js b/components/archive-relative.tsx similarity index 79% rename from components/archive-relative.js rename to components/archive-relative.tsx index 338d0ac..38aeaa3 100644 --- a/components/archive-relative.js +++ b/components/archive-relative.tsx @@ -1,8 +1,9 @@ import React from 'react'; import Link from 'next/link'; import parse from 'html-react-parser'; +import {BlogListProps} from '../typescript/archive-relative'; -export default function ArchiveRelative({ blogs }) { +export default function ArchiveRelative({ blogs }: BlogListProps) { return ( <> {blogs?.map((blog, idx) => ( diff --git a/components/blog-banner.js b/components/blog-banner.tsx similarity index 82% rename from components/blog-banner.js rename to components/blog-banner.tsx index 2f066b0..a20310e 100644 --- a/components/blog-banner.js +++ b/components/blog-banner.tsx @@ -1,6 +1,7 @@ import React from 'react'; +import {BannerProps} from '../typescript/blog'; -export default function BlogBanner({ blogBanner }) { +export default function BlogBanner({ blogBanner }: {blogBanner : BannerProps}) { return (
{bloglist.featured_image && ( diff --git a/components/blog-section.js b/components/blog-section.tsx similarity index 90% rename from components/blog-section.js rename to components/blog-section.tsx index 808f251..8d977bc 100644 --- a/components/blog-section.js +++ b/components/blog-section.tsx @@ -1,8 +1,12 @@ import React from 'react'; import Link from 'next/link'; import parse from 'html-react-parser'; +import { FeaturedBlogProps } from "../typescript/blog"; + +export default function BlogSection(props: FeaturedBlogProps) { + + const fromBlog = props.fromBlog; -export default function BlogSection({ fromBlog }) { return (
diff --git a/components/card-section.js b/components/card-section.tsx similarity index 86% rename from components/card-section.js rename to components/card-section.tsx index c481889..316b803 100644 --- a/components/card-section.js +++ b/components/card-section.tsx @@ -1,7 +1,8 @@ import React from 'react'; import Link from 'next/link'; +import { CardProps } from "../typescript/card"; -export default function CardSection({ cards }) { +export default function CardSection({ cards }: CardProps) { return (
{cards?.map((card, index) => ( diff --git a/components/devtools.js b/components/devtools.tsx similarity index 95% rename from components/devtools.js rename to components/devtools.tsx index 618eddd..9c2a07a 100644 --- a/components/devtools.js +++ b/components/devtools.tsx @@ -4,7 +4,7 @@ import Tooltip from './tool-tip'; const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false }); -function filterObject(inputObject) { +function filterObject(inputObject: any) { const unWantedProps = [ '_version', 'ACL', @@ -26,11 +26,11 @@ function filterObject(inputObject) { return inputObject; } -const DevTools = ({ response }) => { +const DevTools = ({ response }: any) => { const filteredJson = filterObject(response); const [forceUpdate, setForceUpdate] = useState(0); - function copyObject(object) { + function copyObject(object: any) { navigator.clipboard.writeText(object); setForceUpdate(1); } @@ -47,7 +47,7 @@ const DevTools = ({ response }) => { id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" - tabIndex="-1" + tabIndex={-1} aria-labelledby="staticBackdropLabel" aria-hidden="true" role="dialog" diff --git a/components/footer.js b/components/footer.tsx similarity index 91% rename from components/footer.js rename to components/footer.tsx index b79120c..5bcf04f 100644 --- a/components/footer.js +++ b/components/footer.tsx @@ -4,16 +4,18 @@ import parse from 'html-react-parser'; import { onEntryChange } from '../contentstack-sdk'; import { getFooterRes } from '../helper'; import Skeleton from 'react-loading-skeleton'; +import { FooterProps, Entry, Links } from "../typescript/layout"; -export default function Footer({ footer, entries }) { - const [getFooter, setFooter] = useState(footer); +export default function Footer({ footer, entries }: {footer: FooterProps, entries: Entry}) { - function buildNavigation(ent, ft) { + const [getFooter, setFooter] = useState(footer); + + function buildNavigation(ent: Entry, ft: any) { let newFooter = { ...ft }; if (ent.length !== newFooter.navigation.link.length) { ent.forEach((entry) => { const fFound = newFooter?.navigation.link.find( - (nlink) => nlink.title === entry.title + (nlink: Links) => nlink.title === entry.title ); if (!fFound) { newFooter.navigation.link?.push({ @@ -29,7 +31,7 @@ export default function Footer({ footer, entries }) { async function fetchData() { try { - if (footer && entries != {}) { + if (footer && entries) { const footerRes = await getFooterRes(); const newfooter = buildNavigation(entries, footerRes); setFooter(newfooter); diff --git a/components/header.js b/components/header.tsx similarity index 89% rename from components/header.js rename to components/header.tsx index 6c3d6dc..cf4409d 100644 --- a/components/header.js +++ b/components/header.tsx @@ -6,17 +6,19 @@ import Tooltip from './tool-tip'; import { onEntryChange } from '../contentstack-sdk'; import { getHeaderRes } from '../helper'; import Skeleton from 'react-loading-skeleton'; +import { HeaderProps, Entry, Links } from "../typescript/layout"; + +export default function Header({ header, entries }: {header: HeaderProps, entries: Entry}) { -export default function Header({ header, entries }) { const router = useRouter(); const [getHeader, setHeader] = useState(header); - function buildNavigation(ent, hd) { + function buildNavigation(ent: Entry, hd: any) { let newHeader={...hd}; if (ent.length!== newHeader.navigation_menu.length) { ent.forEach((entry) => { const hFound = newHeader?.navigation_menu.find( - (navLink) => navLink.label === entry.title + (navLink: Links) => navLink.label === entry.title ); if (!hFound) { newHeader.navigation_menu?.push({ @@ -34,7 +36,7 @@ export default function Header({ header, entries }) { async function fetchData() { try { - if (header && entries!=={}) { + if (header && entries) { const headerRes = await getHeaderRes(); const newHeader = buildNavigation(entries,headerRes) setHeader(newHeader); @@ -111,7 +113,7 @@ export default function Header({ header, entries }) {
- + JSON Preview icon diff --git a/components/hero-banner.js b/components/hero-banner.tsx similarity index 90% rename from components/hero-banner.js rename to components/hero-banner.tsx index 9e5daa1..f5b98cc 100644 --- a/components/hero-banner.js +++ b/components/hero-banner.tsx @@ -1,7 +1,11 @@ import React from 'react'; import Link from 'next/link'; +import { BannerProps } from "../typescript/banner"; + +export default function HeroBanner(props: BannerProps) { + + const banner = props.banner; -export default function HeroBanner({ banner }) { return (
{ const hFound = newHeader?.navigation_menu.find( - (navLink) => navLink.label === entry.title + (navLink: Links) => navLink.label === entry.title ); if (!hFound) { newHeader.navigation_menu?.push({ @@ -36,7 +38,7 @@ export default function Layout({ }); } const fFound = newFooter?.navigation.link.find( - (nlink) => nlink.title === entry.title + (nlink: Links) => nlink.title === entry.title ); if (!fFound) { newFooter.navigation.link?.push({ @@ -61,8 +63,10 @@ export default function Layout({ <> {header ?
: ''}
+ <> {children} {Object.keys(jsonObj).length && } +
{footer ?