fix: 🐛 addressing types

Loonz206 · Mar 24, 2024 · b089861 · b089861
1 parent 702f4a6
commit b089861
Show file tree

Hide file tree

Showing 19 changed files with 1,882 additions and 1,383 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.17.0
+18.19.1
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,31 +21,31 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@contentful/rich-text-react-renderer": "^15.19.4",
-    "contentful": "^10.6.21",
-    "next": "^14.1.0",
+    "@contentful/rich-text-react-renderer": "^15.19.6",
+    "contentful": "^10.8.5",
+    "next": "^14.1.4",
     "next-images": "^1.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.71.0"
+    "sass": "^1.72.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.2",
-    "@next/eslint-plugin-next": "^14.1.0",
+    "@next/eslint-plugin-next": "^14.1.4",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^14.2.2",
     "@types/jest": "^29.5.12",
-    "@types/react": "18.2.56",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "core-js": "^3.36.0",
-    "cypress": "^13.6.4",
+    "@types/react": "18.2.69",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "core-js": "^3.36.1",
+    "cypress": "^13.7.1",
     "cypress-axe": "^1.5.0",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-cypress": "^2.15.1",
@@ -54,7 +54,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.24.0",
     "eslint-plugin-standard": "^5.0.0",
@@ -68,6 +68,6 @@
     "prettier": "^3.2.5",
     "regenerator-runtime": "^0.14.1",
     "start-server-and-test": "^2.0.3",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.3"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -3,8 +3,19 @@ import { useEffect, createContext } from "react";
 import "../src/styles/globals.scss";
 
 export const PageContext = createContext("");
+interface PageComponent {
+  pageContext: string;
+}
 
-const App = ({ Component, pageProps }) => {
+const App = ({
+  Component,
+  pageProps,
+}: {
+  Component: React.ComponentType<PageComponent>;
+  pageProps: {
+    pageContext: string;
+  };
+}) => {
   useEffect(() => {
     const body = document.querySelector("body");
     if (body && !body.classList.contains("js")) {

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,7 +1,13 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from "next/document";
 
 class MyDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
     return { ...initialProps };
   }

diff --git a/pages/_error.tsx b/pages/_error.tsx
@@ -1,9 +1,13 @@
+import { NextPage, NextPageContext } from "next";
 import Head from "next/head";
-import PropTypes from "prop-types";
 import Layout from "../src/components/Layout/Layout";
 import { links } from "../src/utils/links";
 
-const Error = ({ statusCode }) => {
+interface Props {
+  statusCode?: number;
+}
+
+const Error: NextPage<Props> = ({ statusCode }) => {
   return (
     <>
       <Head>
@@ -27,15 +31,9 @@ const Error = ({ statusCode }) => {
   );
 };
 
-Error.getInitialProps = ({ res, err }) => {
-  if (res) {
-    return res.statusCode;
-  }
-  return err ? err.statusCode : 404;
+Error.getInitialProps = ({ res, err }: NextPageContext) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { statusCode };
 };
 
 export default Error;
-
-Error.propTypes = {
-  statusCode: PropTypes.string,
-};
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -3,7 +3,17 @@ import Layout from "../src/components/Layout/Layout";
 import { getAllCards } from "../src/utils/contentfulPosts";
 import { links } from "../src/utils/links";
 
-const About = ({ cards }) => {
+interface Card {
+  fields: {
+    headline: string;
+    detail: string;
+  };
+}
+interface Props {
+  cards: Card[];
+}
+
+const About = ({ cards }: Props) => {
   const { headline } = cards[0].fields;
   const { detail } = cards[0].fields;
   return (

diff --git a/pages/api/handler.tsx b/pages/api/handler.tsx
@@ -1,4 +1,5 @@
-export default function handler(req, res) {
+import { NextApiRequest, NextApiResponse } from "next";
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
   // Get data from your database
   res.status(200).json({ firstname: "lenny" });
 }
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
@@ -4,11 +4,23 @@ import Layout from "../../src/components/Layout/Layout";
 import { getAllPosts, getPostBySlug } from "../../src/utils/contentfulPosts";
 import { links } from "../../src/utils/links";
 
-const Post = ({ post }) => {
+const Post = (post: {
+  fields: {
+    metaContent?: {
+      fields: {
+        title: string;
+        metaDescription: string;
+      };
+    };
+    imageCover?: string;
+    title?: string;
+    date?: string;
+  };
+}) => {
   const { title, date } = post.fields;
-  const metaTitle = post.fields.metaContent.fields.title;
-  const metaDescription = post.fields.metaContent.fields.metaDescription;
-  const newDate = new Date(date).toUTCString();
+  const metaTitle = post?.fields?.metaContent?.fields.title;
+  const metaDescription = post?.fields?.metaContent?.fields.metaDescription;
+  const newDate = new Date(date!).toUTCString();
   const dateString = newDate.split(" ").slice(0, 4).join(" ");
   return (
     <>
@@ -34,29 +46,48 @@ const Post = ({ post }) => {
 
 export default Post;
 
-export async function getStaticProps(context) {
-  const { slug } = context.params;
-  const post = await getPostBySlug(slug);
-
-  return {
-    props: { post },
+interface ContextProps {
+  params: {
+    slug: string;
   };
 }
 
+export async function getStaticProps(context: ContextProps) {
+  const { slug } = context.params;
+  try {
+    const post = await getPostBySlug(slug);
+    return {
+      props: { post },
+    };
+  } catch (error) {
+    console.log(error);
+    return {
+      notFound: true,
+    };
+  }
+}
+
 export async function getStaticPaths() {
-  const res = await getAllPosts("posts");
-  const posts = res.map((p) => {
-    return p.fields;
-  });
+  try {
+    const res = await getAllPosts("posts");
+    const posts = res?.map((p) => {
+      return p.fields;
+    });
 
-  return {
-    paths: posts.map(({ slug }) => {
-      return {
-        params: {
-          slug,
-        },
-      };
-    }),
-    fallback: false,
-  };
+    return {
+      paths: posts?.map(({ slug }) => {
+        return {
+          params: {
+            slug,
+          },
+        };
+      }),
+      fallback: false,
+    };
+  } catch (error) {
+    console.log(error);
+    return {
+      notFound: true,
+    };
+  }
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,10 +1,46 @@
+import { NextPage } from "next";
 import Head from "next/head";
 import Layout from "../src/components/Layout/Layout";
 import PostList from "../src/components/PostList/PostList";
 import { links } from "../src/utils/links";
 import { getAllPosts } from "../src/utils/contentfulPosts";
 
-const HomePage = ({ posts }) => {
+interface Posts {
+  date: string;
+  title: string;
+  slug: string;
+  imageCover: string;
+  content: string;
+  author: string;
+  authorImage: string;
+  authorBio: string;
+  authorTwitter: string;
+  authorInstagram: string;
+  authorGitHub: string;
+  authorLinkedIn: string;
+  authorWebsite: string;
+  authorLocation: string;
+  authorEmail: string;
+  authorPhone: string;
+  authorBioImage: string;
+  authorBioVideo: string;
+  authorBioVideoThumbnail: string;
+  authorBioVideoThumbnailAlt: string;
+  authorBioVideoThumbnailTitle: string;
+  authorBioVideoThumbnailDescription: string;
+  authorBioVideoThumbnailCaption: string;
+  authorBioVideoThumbnailCredit: string;
+  authorBioVideoThumbnailCreditLink: string;
+  authorBioVideoThumbnailCreditLinkText: string;
+  authorBioVideoThumbnailCreditLinkTitle: string;
+  authorBioVideoThumbnailCreditLinkDescription: string;
+}
+
+interface Props {
+  posts: Posts[];
+}
+
+const HomePage: NextPage<Props> = ({ posts }) => {
   const renderPosts = posts.map(({ date, title, slug, imageCover }, index) => (
     <PostList
       key={index}
@@ -38,7 +74,7 @@ export default HomePage;
 export async function getStaticProps() {
   try {
     const res = await getAllPosts("posts");
-    const posts = res.map((p) => {
+    const posts = res?.map((p) => {
       return p.fields;
     });
 

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,10 +1,10 @@
 import Link from "next/link";
 
-type Props = {
+interface Props {
   active: boolean;
   handleClick: () => void;
   links: { id: number; name: string; path: string }[];
-};
+}
 
 const Header = ({ links, handleClick, active }: Props) => {
   const renderLinks = links.map(({ path, name, id }) => (

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -1,10 +1,19 @@
 import { useState } from "react";
-import PropTypes from "prop-types";
 import Header from "../Header/Header";
 import PageProfileCard from "../PageProfileCard/PageProfileCard";
 import Footer from "../Footer/Footer";
 
-const Layout = ({ children, links }) => {
+const Layout = ({
+  children,
+  links,
+}: {
+  children: React.ReactNode;
+  links: {
+    id: number;
+    name: string;
+    path: string;
+  }[];
+}) => {
   const [active, setActive] = useState(false);
   const handleClick = () => {
     return active === false ? setActive(true) : setActive(false);
@@ -25,12 +34,4 @@ const Layout = ({ children, links }) => {
   );
 };
 
-Layout.defaultProps = {
-  children: [],
-};
-
-Layout.propTypes = {
-  children: PropTypes.node,
-};
-
 export default Layout;
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -1,4 +1,4 @@
-const Main = ({ children }) => {
+const Main = ({ children }: { children: React.ReactNode }) => {
   return (
     <main className="main" id="content">
       {children}

diff --git a/src/components/PageProfileCard/PageProfileCard.tsx b/src/components/PageProfileCard/PageProfileCard.tsx
@@ -2,7 +2,12 @@ import Link from "next/link";
 import Image from "next/image";
 import Logo from "../../assets/logo.svg";
 
-const PageProfileCard = ({ twitterHandle, jobRole }) => {
+interface Props {
+  twitterHandle: string;
+  jobRole: string;
+}
+
+const PageProfileCard = ({ twitterHandle, jobRole }: Props) => {
   const handle = `https://twitter.com/${twitterHandle}`;
   return (
     <div className="card-container">