Merge pull request #647 from hngprojects/feat/the-external-dynamic-pages

public/images/blogPage/utils/index.tsx

@@ -0,0 +1,7 @@
+export { default as blogCard1 } from "../../blogPage/blogCard1.png";
+export { default as blogCard3 } from "../../blogPage/blogCard3.png";
+export { default as blogCard2 } from "../../blogPage/blogCard2.png";
+export { default as blogCard4 } from "../../blogPage/blogCard4.png";
+export { default as blogCard5 } from "../../blogPage/blogCard5.png";
+export { default as blogCard6 } from "../../blogPage/blogCard1.png";
+export { default as blogHero } from "../../blogPage/blogHero.png";

src/app/(landing-routes)/blog/[id]/BlogDetailsPage.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import RelatedArticle from "./RelatedArticle";
+
+const BlogDetailsPage = () => {
+  return (
+    <div>
+      <div className="flex flex-col pl-[30px] md:pl-[0]">
+        Blog Details Section
+        <RelatedArticle />
+      </div>
+    </div>
+  );
+};
+
+export default BlogDetailsPage;

src/app/(landing-routes)/blog/[id]/RelatedArticle.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+
+import BlogCard from "~/components/blog/BlogCard";
+
+export type New = {
+  id: number;
+  thumbnailUrl: string;
+};
+
+const newsTypes = [
+  {
+    id: 0,
+    name: "Business",
+    color: "#F97316",
+    title: "The Power of Networking: How to Build Meaningful Connections",
+    date: "July 12, 2024",
+    timeRead: "5 min read",
+  },
+  {
+    id: 1,
+    name: "Lifestyle",
+    color: "#7F0682",
+    title: "The Power of Networking: How to Build Meaningful Connections",
+    date: "July 12, 2024",
+    timeRead: "5 min read",
+  },
+  {
+    id: 2,
+    name: "World News",
+    color: "#EAB308",
+    title: "The Power of Networking: How to Build Meaningful Connections",
+    date: "July 12, 2024",
+    timeRead: "5 min read",
+  },
+];
+
+const RelatedArticle = () => {
+  const [news, setNews] = useState<New[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [errors, setError] = useState<string | null>();
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch(
+          "https://jsonplaceholder.typicode.com/photos",
+        );
+        if (!response.ok) {
+          throw new Error("Something went wrong");
+        }
+        const data = await response.json();
+        setNews(data.slice(0, 3));
+      } catch (error) {
+        if (error instanceof Error) {
+          setError(error.message);
+        } else {
+          setError("An unknown error occurred");
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+    getData();
+  }, []);
+
+  if (errors) {
+    return (
+      <p className="p-[0] text-[24px] font-bold text-blog-relatedHeading sm:px-[100px]">
+        {errors}
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex w-[372px] flex-col justify-center gap-[24px] bg-blog-relatedBg px-[0px] py-[16px] sm:w-full sm:px-[100px]">
+      <h1 className="ml-[17px] text-[28px] font-bold text-blog-relatedHeading md:ml-[0px]">
+        Related Articles
+      </h1>
+
+      {loading ? (
+        <div className="p-[0] sm:px-[100px]">
+          <p className="text-[24px] font-bold text-blog-relatedHeading">
+            Loading...
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-wrap gap-[24px] md:flex-nowrap">
+          {news.map((article, index) => (
+            <div key={article.id}>
+              <BlogCard
+                article={article}
+                newsType={newsTypes[index % newsTypes.length]}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RelatedArticle;

src/app/(landing-routes)/blog/[id]/page.tsx

@@ -0,0 +1,11 @@
+import BlogDetailsPage from "./BlogDetailsPage";
+
+const page = () => {
+  return (
+    <div>
+      <BlogDetailsPage />
+    </div>
+  );
+};
+
+export default page;

src/app/(landing-routes)/blog/latest/data/dummy-article-data.ts

@@ -0,0 +1,72 @@
+interface ArtileDataProperties {
+  title: string;
+  content: string;
+  author: string;
+  tag: string;
+  avatar: string;
+  minsRead: string;
+  datePublished: string;
+  thumbnail: string;
+}
+
+export const articlesData: ArtileDataProperties[] = [
+  {
+    title: "5 Mistakes That Kill Your Start-up Before It Takes Off",
+    content:
+      "We often hear about the ENIAC, hailed as the first computer, but its story is just one thread in a rich tapestry woven by brilliant",
+    author: "Nora Nora",
+    minsRead: "7 mins Read",
+    datePublished: "July 12, 2024",
+    avatar: "/images/latest-articles/avatar.png",
+    tag: "BUSINESS",
+    thumbnail: "/images/latest-articles/post-1.png",
+  },
+
+  {
+    title: "5 Mistakes That Kill Your Start-up Before It Takes Off",
+    content:
+      "We often hear about the ENIAC, hailed as the first computer, but its story is just one thread in a rich tapestry woven by brilliant",
+    author: "Nora Nora",
+    minsRead: "7 mins Read",
+    datePublished: "July 12, 2024",
+    avatar: "/images/latest-articles/avatar.png",
+    tag: "BUSINESS",
+    thumbnail: "/images/latest-articles/post-2.png",
+  },
+
+  {
+    title: "5 Mistakes That Kill Your Start-up Before It Takes Off",
+    content:
+      "We often hear about the ENIAC, hailed as the first computer, but its story is just one thread in a rich tapestry woven by brilliant",
+    author: "Nora Nora",
+    minsRead: "7 mins Read",
+    datePublished: "July 12, 2024",
+    avatar: "/images/latest-articles/avatar.png",
+    tag: "BUSINESS",
+    thumbnail: "/images/latest-articles/post-3.png",
+  },
+
+  {
+    title: "5 Mistakes That Kill Your Start-up Before It Takes Off",
+    content:
+      "We often hear about the ENIAC, hailed as the first computer, but its story is just one thread in a rich tapestry woven by brilliant",
+    author: "Nora Nora",
+    minsRead: "7 mins Read",
+    datePublished: "July 12, 2024",
+    avatar: "/images/latest-articles/avatar.png",
+    tag: "BUSINESS",
+    thumbnail: "/images/latest-articles/post-4.png",
+  },
+
+  {
+    title: "5 Mistakes That Kill Your Start-up Before It Takes Off",
+    content:
+      "We often hear about the ENIAC, hailed as the first computer, but its story is just one thread in a rich tapestry woven by brilliant",
+    author: "Nora Nora",
+    minsRead: "7 mins Read",
+    datePublished: "July 12, 2024",
+    avatar: "/images/latest-articles/avatar.png",
+    tag: "BUSINESS",
+    thumbnail: "/images/latest-articles/post-5.png",
+  },
+];

src/app/(landing-routes)/blog/latest/errorboundry.tsx

@@ -0,0 +1,39 @@
+import { Component, ReactNode } from "react";
+
+interface ErrorBoundaryProperties {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<
+  ErrorBoundaryProperties,
+  ErrorBoundaryState
+> {
+  constructor(properties: ErrorBoundaryProperties) {
+    super(properties);
+    this.state = { hasError: false };
+  }
+
+  // static getDerivedStateFromError(_: Error): ErrorBoundaryState {
+  //   return { hasError: true };
+  // }
+
+  // componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+  //   // Log the error to an error reporting service or console
+  //   // console.error("Uncaught error:", error, errorInfo);
+  // }
+
+  render() {
+    if (this.state.hasError) {
+      // Render any custom fallback UI
+      return <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/app/(landing-routes)/blog/latest/page.tsx

@@ -0,0 +1,66 @@
+import BlogCard from "~/components/common/blogCard/BlogCard";
+import CustomButton from "~/components/common/common-button/common-button";
+import { articlesData } from "./data/dummy-article-data";
+
+const LatestArticlesPage = () => {
+  const isTesting: boolean = process.env.NEXT_PUBLIC_TESTING === "true";
+
+  return (
+    <>
+      <main className="mx-auto max-w-6xl px-5 py-5 md:px-10 md:py-5">
+        <h1 className="text-[28px] font-[700] leading-[33.89px] text-neutral-dark-1 md:text-center md:text-[30px] md:leading-[43.57px] lg:text-[36px]">
+          Latest Articles
+        </h1>
+        <div className="mt-6 flex flex-col space-y-4">
+          {!isTesting &&
+            articlesData.map((data, index) => {
+              const {
+                author,
+                avatar,
+                content,
+                datePublished,
+                minsRead,
+                tag,
+                thumbnail,
+                title,
+              } = data;
+
+              return (
+                <div
+                  className="mx-auto w-fit border-b-neutral-dark-1 md:border-b"
+                  key={index}
+                >
+                  <BlogCard
+                    authorName={author}
+                    authorPfP={avatar}
+                    blogImage={thumbnail}
+                    date={datePublished}
+                    description={content}
+                    link="/"
+                    title={title}
+                    tag={tag}
+                    timeOfReading={Number.parseInt(minsRead, 10)}
+                  />
+                </div>
+              );
+            })}
+        </div>
+
+        <div className="mt-10">
+          <div className="mx-auto w-fit">
+            <CustomButton
+              variant="primary"
+              size="lg"
+              isLoading={false}
+              isDisabled={false}
+            >
+              Load more
+            </CustomButton>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default LatestArticlesPage;

src/app/(landing-routes)/blog/page.test.tsx

@@ -1,5 +1,5 @@
 import { render } from "~/test/utils";
-import Page from "./page";
+import Page from "./comments/page";
 
 describe("page tests", () => {
   it("should render correctly", () => {