fix: 🐛 addressing changes

pages/404.tsx

@@ -1,6 +1,6 @@
 import Head from "next/head";
 import Image from "next/image";
-import Layout from "../src/components/Layout";
+import Layout from "../src/components/Layout/Layout";
 import { links } from "../src/utils/links";
 
 const Custom404 = () => {

pages/500.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import Layout from "../src/components/Layout";
+import Layout from "../src/components/Layout/Layout";
 import { links } from "../src/utils/links";
 
 const Custom500 = () => {

pages/_error.tsx

@@ -1,6 +1,6 @@
 import Head from "next/head";
 import PropTypes from "prop-types";
-import Layout from "../src/components/Layout";
+import Layout from "../src/components/Layout/Layout";
 import { links } from "../src/utils/links";
 
 const Error = ({ statusCode }) => {

pages/about.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import Layout from "../src/components/Layout";
+import Layout from "../src/components/Layout/Layout";
 import { getAllCards } from "../src/utils/contentfulPosts";
 import { links } from "../src/utils/links";
 
@@ -34,20 +34,26 @@ const About = ({ cards }) => {
 };
 
 export async function getStaticProps() {
-  const res = await getAllCards("card");
-  const cards = res;
+  try {
+    const res = await getAllCards("card");
+    const cards = res;
 
-  if (!cards) {
+    if (!cards) {
+      return {
+        notFound: true,
+      };
+    }
+
+    return {
+      props: {
+        cards,
+      },
+    };
+  } catch (error) {
     return {
       notFound: true,
     };
   }
-
-  return {
-    props: {
-      cards,
-    },
-  };
 }
 
 export default About;

pages/blog/[slug].tsx

@@ -1,6 +1,6 @@
 import Head from "next/head";
 import Image from "next/image";
-import Layout from "../../src/components/Layout";
+import Layout from "../../src/components/Layout/Layout";
 import { getAllPosts, getPostBySlug } from "../../src/utils/contentfulPosts";
 import { links } from "../../src/utils/links";
 

pages/index.tsx

@@ -1,6 +1,6 @@
 import Head from "next/head";
-import Layout from "../src/components/Layout";
-import PostList from "../src/components/PostList";
+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";
 
@@ -36,20 +36,26 @@ const HomePage = ({ posts }) => {
 export default HomePage;
 
 export async function getStaticProps() {
-  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;
+    });
 
-  if (!posts) {
+    if (!posts) {
+      return {
+        notFound: true,
+      };
+    }
+
+    return {
+      props: {
+        posts,
+      },
+    };
+  } catch (error) {
     return {
       notFound: true,
     };
   }
-
-  return {
-    props: {
-      posts,
-    },
-  };
 }

src/__tests__/Footer.test.tsx → src/components/Footer/Footer.test.tsx

@@ -1,7 +1,7 @@
 import { render, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import Footer from "../components/Footer";
+import Footer from "./Footer";
 
 describe("Footer Component", () => {
   test("should have the copyright in the footer", async () => {

src/__tests__/Header.test.tsx → src/components/Header/Header.test.tsx

@@ -1,6 +1,6 @@
 import { render, cleanup, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import Header from "../components/Header";
+import Header from "./Header";
 
 describe("Header", () => {
   afterEach(cleanup);

src/components/Header.tsx → src/components/Header/Header.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unknown-property */
 import Link from "next/link";
 
 type Props = {

src/__tests__/Layout.test.tsx → src/components/Layout/Layout.test.tsx

@@ -7,7 +7,7 @@ import {
 } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import Layout from "../components/Layout";
+import Layout from "./Layout";
 
 describe("Layout", () => {
   const links = [
@@ -22,6 +22,11 @@ describe("Layout", () => {
       id: 1,
     },
   ];
+
+  it("renders without crashing", () => {
+    render(<Layout links={links} />);
+  });
+
   beforeEach(() => {
     jest.resetAllMocks();
     cleanup();
@@ -41,7 +46,9 @@ describe("Layout", () => {
       fireEvent.click(link);
     });
     // // assert
+    expect(container.querySelector("#wrap")).toBeInTheDocument();
     expect(container.querySelector(".wrap")).toBeInTheDocument();
+    expect(container.querySelector(".wrap .active")).toBeInTheDocument();
     // // cleanup
   });
 });

src/components/Layout.tsx → src/components/Layout/Layout.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import PropTypes from "prop-types";
-import Header from "./Header";
-import PageProfileCard from "./PageProfileCard";
-import Footer from "./Footer";
+import Header from "../Header/Header";
+import PageProfileCard from "../PageProfileCard/PageProfileCard";
+import Footer from "../Footer/Footer";
 
 const Layout = ({ children, links }) => {
   const [active, setActive] = useState(false);
@@ -14,13 +14,11 @@ const Layout = ({ children, links }) => {
     <div className={active === false ? "wrap" : "wrap active"} id="wrap">
       <Header handleClick={() => handleClick} active={active} links={links} />
       <main id="content" role="main">
-        <>
-          <PageProfileCard
-            jobRole="Software Engineer & Internet Lover"
-            twitterHandle="@loonz206"
-          />
-          {children}
-        </>
+        <PageProfileCard
+          jobRole="Software Engineer & Internet Lover"
+          twitterHandle="@loonz206"
+        />
+        {children}
       </main>
       <Footer />
     </div>

src/__tests__/Main.test.tsx → src/components/Main/Main.test.tsx

@@ -1,7 +1,7 @@
 import { render, cleanup, act } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import Main from "../components/Main";
+import Main from "./Main";
 
 describe("Main", () => {
   // cleanup

src/components/PageProfileCard/PageProfileCard.test.tsx

@@ -0,0 +1,30 @@
+import { cleanup, render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import PageProfileCard from "./PageProfileCard";
+
+describe("<PageProfileCard/>", () => {
+  const twitterHandle = "test";
+  const jobRole = "test";
+  beforeEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+  it("should render an image and a link for the navigation", async () => {
+    const { container } = render(
+      <PageProfileCard twitterHandle={twitterHandle} jobRole={jobRole} />
+    );
+
+    const displayedImage = container.querySelector("img");
+
+    expect(displayedImage.src).toBe(
+      "http://localhost/_next/image?url=%2Fimg.jpg&w=640&q=75"
+    );
+    expect(displayedImage.alt).toBe("logo");
+    expect(container.querySelector(".nav-link")).toBeInTheDocument();
+  });
+});

src/components/PageProfileCard.tsx → src/components/PageProfileCard/PageProfileCard.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable react/no-unknown-property */
 import Link from "next/link";
 import Image from "next/image";
-import Logo from "../assets/logo.svg";
+import Logo from "../../assets/logo.svg";
 
 const PageProfileCard = ({ twitterHandle, jobRole }) => {
   const handle = `https://twitter.com/${twitterHandle}`;

src/__tests__/PostList.test.tsx → src/components/PostList/PostList.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, render } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import PostList from "../components/PostList";
+import PostList from "./PostList";
 
 describe("<PostList/>", () => {
   const date = `Wed Jul 05 2023 20:35:15 GMT-0700 (Pacific Daylight Time)`;
@@ -19,9 +19,7 @@ describe("<PostList/>", () => {
         imageCover={imageCover}
       />
     );
-
     const displayedImage = container.querySelector("img");
-
     expect(displayedImage.src).toBe(
       "http://localhost/_next/image?url=https%3A%2F%2Fplacehold.it%2F720%2F405&w=1920&q=75"
     );

src/components/PostList.tsx → src/components/PostList/PostList.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unknown-property */
 import Link from "next/link";
 import Image from "next/image";
 

src/__tests__/ErrorBoundry.test.tsx → src/utils/ErrorBoundry.test.tsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import ErrorBoundary from "../components/ErrorBoundry";
+import ErrorBoundary from "./ErrorBoundry";
 
 describe("<ErrorBoundry/>", () => {
   beforeEach(() => {