BUG FIX: Dynamic routes causing server errors

mbeps · Jun 17, 2024 · 05a0f08 · 05a0f08
1 parent 727abf8
commit 05a0f08
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 49 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -1,4 +1,5 @@
 import getMarkdownFromFileSystem from "@/actions/file-system/getMarkdownFromFileSystem";
+import MaterialList from "@/components/MaterialLists/MaterialList";
 import Reader from "@/components/Reader/Reader";
 import Socials from "@/components/Socials/Socials";
 import HeadingOne from "@/components/Text/HeadingOne";
@@ -8,6 +9,8 @@ import subtitles from "@/constants/subtitles";
 import companyDatabaseMap from "@/database/Companies/CompanyDatabaseMap";
 import courseDatabaseMap from "@/database/Courses/CourseDatabaseMap";
 import CourseInterface from "@/database/Courses/CourseInterface";
+import ProjectDatabaseKeys from "@/database/Projects/ProjectDatabaseKeys";
+import RoleDatabaseKeys from "@/database/Roles/RoleDatabaseKeys";
 import rolesDatabase from "@/database/Roles/RoleDatabaseMap";
 import RoleInterface from "@/database/Roles/RoleInterface";
 import type { Metadata } from "next";
@@ -41,6 +44,13 @@ export default function About() {
   const latestEducation: CourseInterface = Object.values(courseDatabaseMap)[0];
   const latestUniversityName: string = latestEducation.university;
   const latestCourseName: string = latestEducation.name;
+  const featuredMaterial: string[] = [
+    RoleDatabaseKeys.CommerzbankDevOpsEngineer,
+    RoleDatabaseKeys.GoogleRHULDevelopersClubSoftwareEngineer,
+    ProjectDatabaseKeys.CircusDiscussions,
+    ProjectDatabaseKeys.HousePricePrediction,
+    ProjectDatabaseKeys.Noodle,
+  ];
 
   return (
     <main>
@@ -64,56 +74,59 @@ export default function About() {
         </div>
       </div>
 
-      <div
-        className="
-          flex flex-col lg:flex-row
-          space-y-10 md:space-y-5 lg:space-y-0
-          items-stretch justify-center align-top
-          lg:space-x-10 lg:p-4
-          lg:text-left
+      <div className="space-y-6">
+        <div
+          className="
+            flex flex-col lg:flex-row
+            space-y-10 md:space-y-5 lg:space-y-0
+            items-stretch justify-center align-top
+            lg:space-x-10 lg:p-4
+            lg:text-left
         "
-      >
-        {/* Left section */}
-        <div className="lg:w-full">
-          <Reader content={aboutContent} size="lg:prose-lg" />
-        </div>
+        >
+          {/* Left section */}
+          <div className="lg:w-full">
+            <Reader content={aboutContent} size="lg:prose-lg" />
+          </div>
 
-        {/* Right section */}
-        <div className="lg:w-auto space-y-5 lg:space-y-10">
-          {/* Profile Image */}
-          <Image
-            src="/profile.png"
-            alt="Profile image of the developer"
-            width={250}
-            height={250}
-            className="rounded-full shadow-xl hidden lg:block mt-8"
-            quality={60}
-            loading="eager"
-            priority
-          />
+          {/* Right section */}
+          <div className="lg:w-auto space-y-5 lg:space-y-10">
+            {/* Profile Image */}
+            <Image
+              src="/profile.png"
+              alt="Profile image of the developer"
+              width={250}
+              height={250}
+              className="rounded-full shadow-xl hidden lg:block mt-8"
+              quality={60}
+              loading="eager"
+              priority
+            />
 
-          {/* Social Icons */}
-          <div className="flex justify-center">
-            <Socials iconSize={36} />
-          </div>
+            {/* Social Icons */}
+            <div className="flex justify-center">
+              <Socials iconSize={36} />
+            </div>
 
-          {/* Details */}
-          <DetailsTable
-            details={[
-              { heading: "Name", value: developerName },
-              { heading: "Location", value: "London, UK" },
-              {
-                heading: "University",
-                value: latestUniversityName,
-              },
-              { heading: "Degree", value: latestCourseName },
-              { heading: "Currently Working", value: latestCompany },
-              { heading: "Current Role", value: latestRole },
-            ]}
-            className="grid-cols-2 md:grid-cols-2 lg:grid-cols-1"
-          />
+            {/* Details */}
+            <DetailsTable
+              details={[
+                { heading: "Name", value: developerName },
+                { heading: "Location", value: "London, UK" },
+                {
+                  heading: "University",
+                  value: latestUniversityName,
+                },
+                { heading: "Degree", value: latestCourseName },
+                { heading: "Currently Working", value: latestCompany },
+                { heading: "Current Role", value: latestRole },
+              ]}
+              className="grid-cols-2 md:grid-cols-2 lg:grid-cols-1"
+            />
+          </div>
         </div>
       </div>
+      <MaterialList materialKeys={featuredMaterial} />
     </main>
   );
 }
diff --git a/app/blogs/[blogKey]/page.tsx b/app/blogs/[blogKey]/page.tsx
@@ -38,6 +38,10 @@ export async function generateMetadata(
   const blogKey: string = params.blogKey;
   const blog: BlogInterface = blogsDatabaseMap[blogKey];
 
+  if (!blog) {
+    notFound();
+  }
+
   return {
     title: `${developerName} - Blogs: ${blog?.name}`,
     description: blog?.subtitle,
@@ -156,9 +160,7 @@ const BlogPage: React.FC<BlogPageProps> = ({ params }) => {
 
         {blogData.relatedMaterials && blogData.relatedMaterials.length > 0 && (
           <>
-            <MaterialList
-              materialKeys={blogData.relatedMaterials}
-            />
+            <MaterialList materialKeys={blogData.relatedMaterials} />
           </>
         )}
       </div>

diff --git a/app/certificates/[certificateKey]/page.tsx b/app/certificates/[certificateKey]/page.tsx
@@ -43,6 +43,10 @@ export async function generateMetadata(
   const certificate: CertificateInterface =
     certificateDatabaseMap[certificateKey];
 
+  if (!certificate) {
+    notFound();
+  }
+
   // Create metadata based on the certificate details
   return {
     title: `${developerName} - Certificates: ${certificate?.name}`,

diff --git a/app/education/[courseKey]/[moduleKey]/page.tsx b/app/education/[courseKey]/[moduleKey]/page.tsx
@@ -42,6 +42,10 @@ export async function generateMetadata(
   const moduleKey: string = params.moduleKey;
   const moduleData: ModuleInterface = moduleDatabaseMap[moduleKey];
 
+  if (!moduleData) {
+    notFound();
+  }
+
   // Create metadata based on the course details
   return {
     title: `${developerName} - Courses: ${moduleData?.name}`,

diff --git a/app/education/[courseKey]/page.tsx b/app/education/[courseKey]/page.tsx
@@ -53,6 +53,10 @@ export async function generateMetadata(
   const courseKey: string = params.courseKey;
   const course: CourseInterface = courseDatabaseMap[courseKey];
 
+  if (!course) {
+    notFound();
+  }
+
   // Create metadata based on the course details
   return {
     title: `${developerName} - Courses: ${course?.name}`,

diff --git a/app/experience/[roleKey]/page.tsx b/app/experience/[roleKey]/page.tsx
@@ -47,14 +47,20 @@ export async function generateMetadata(
   const roleKey: string = params.roleKey;
   const role: RoleInterface = rolesDatabase[roleKey];
 
+  if (!role) {
+    notFound();
+  }
+
+  const company: CompanyInterface = companyDatabaseMap[role.company];
+
   return {
     title: `${developerName} - ${EXPERIENCE_PAGE.label}: ${role?.name}`,
     description: `${role.type} ${role.name} at ${role?.company}`,
     category: `${EXPERIENCE_PAGE.label}`,
     creator: developerName,
     keywords: [
       role.name,
-      role.company,
+      company.name,
       ...role?.skills.map((skill) => skillDatabaseMap[skill].name),
     ],
   };
@@ -90,12 +96,13 @@ export const generateStaticParams = async () => {
 const RolePage: React.FC<RolePageProps> = ({ params }) => {
   const roleKey: string = params.roleKey;
   const roleData: RoleInterface = rolesDatabase[roleKey];
-  const companyData: CompanyInterface = companyDatabaseMap[roleData.company];
 
   if (!roleData) {
     notFound();
   }
 
+  const companyData: CompanyInterface = companyDatabaseMap[roleData.company];
+
   const technologies: SkillDatabaseKeys[] = filterSkillsByType(
     roleData.skills,
     skillDatabaseMap,

diff --git a/app/projects/[projectKey]/page.tsx b/app/projects/[projectKey]/page.tsx
@@ -51,6 +51,10 @@ export async function generateMetadata(
   // Assume getProjectBySlug function fetches project by slug
   const project: ProjectInterface = projectDatabaseMap[projectKey];
 
+  if (!project) {
+    notFound();
+  }
+
   // Create metadata based on the project details
   return {
     title: `${developerName} - Projects: ${project?.name}`,