Martha further changes

data/reactquestions.json

@@ -1,7 +1,7 @@
 [
   {
     "id": 1,
-    "question": "What is CSS, and what does it stand for?What is React, and what are its key features?",
+    "question": "What is React, and what are its key features?",
     "answer": "React is a JavaScript library for building user interfaces. Its key features include a virtual DOM for efficient rendering, component-based architecture, and one-way data flow."
   },
   {

src/components/Navbar.tsx

@@ -1,4 +1,3 @@
-
 // import Link from "next/link";
 // import { useState } from "react";
 // //  import homeicon from "../../public/homeicon.png"
@@ -36,7 +35,7 @@
 //             >
 //               {/* <Image src={homeicon} alt="Homepage Icon" className="icon" width={24} height={24} style={{ marginRight: "0.5rem" }} /> */}
 //                     Homepage
-          
+
 //             </span>
 //           </Link>
 //         </div>
@@ -168,12 +167,10 @@
 
 // export default NavBar;
 
+//!NEW NAVBAR:
 
-//!NEW NAVBAR: 
-
-
-import { useState } from 'react';
-import Link from 'next/link';
+import { useState } from "react";
+import Link from "next/link";
 
 const DropdownMenu = () => {
   const [isDropdownOpen, setDropdownOpen] = useState(false);
@@ -190,7 +187,7 @@ const DropdownMenu = () => {
         aria-haspopup="true"
         aria-expanded={isDropdownOpen}
       >
-        Techskills{' '}
+        Techskills{" "}
         <svg
           className="w-2.5 h-2.5 ml-2.5"
           aria-hidden="true"
@@ -215,7 +212,10 @@ const DropdownMenu = () => {
           aria-orientation="vertical"
           aria-labelledby="dropdownMenuButton"
         >
-          <div className="py-2 text-sm text-gray-700 dark:text-gray-400" role="none">
+          <div
+            className="py-2 text-sm text-gray-700 dark:text-gray-400"
+            role="none"
+          >
             <Link href="/techskills/html">
               <button
                 role="menuitem"
@@ -248,6 +248,13 @@ const DropdownMenu = () => {
                 React
               </button>
             </Link>
+            <Link
+              href="/techskills/advanced-react"
+              role="menuitem"
+              className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+            >
+              Advanced React
+            </Link>
             {/* Add other links here */}
           </div>
         </div>
@@ -262,12 +269,7 @@ const Navbar = () => (
       <div className="flex items-center">
         {/* Link to the homepage */}
         <Link href="/"></Link>
-        <img
-          src="http://www.w3.org/2000/svg" 
-
-          className="h-8 mr-3"
-          alt="Logo"
-        />
+        <img src="http://www.w3.org/2000/svg" className="h-8 mr-3" alt="Logo" />
         <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
           SLAAAAY
         </span>
@@ -296,11 +298,12 @@ const Navbar = () => (
         </svg>
       </button>
       <div className="hidden w-full md:block md:w-auto" id="navbar-dropdown">
-        <ul
-          className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
-        >
+        <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
           <li>
-            <div className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">
+            <div
+              className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent"
+              aria-current="page"
+            >
               Home
             </div>
           </li>
@@ -313,7 +316,7 @@ const Navbar = () => (
             {/* Use the DropdownMenu component for the dropdown */}
             <DropdownMenu />
           </li>
-        
+
           {/* <li>
             <div className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
               Contact

src/components/Questionblock.tsx

@@ -10,7 +10,7 @@ export default function Questionblock({ questionx }: Props) {
   const revealAnswer = () => {
     setAnswerVisible(true);
   };
-  // console.log("id :>> ", question);
+
   const { id, question, answer } = questionx;
   return (
     <div className="border px-3 py-4 ">

src/pages/api/staticdata.js

@@ -2,20 +2,17 @@ import path from "path";
 import { promises as fs } from "fs";
 
 export default async function handler(req, res) {
-  console.log("req :>> ", req.body.language);
+  const language = req.query.language;
+
   try {
     const jsonDirectory = path.join(process.cwd(), "data");
+
     const fileContents = await fs.readFile(
-      // instead of hardcoded path to json file, url parameter decides the path
-      //  jsonDirectory +  `${pathname}questions.json`,
-      // jsonDirectory + "/cssquestions.json",
-      jsonDirectory + `/${req.body.language}questions.json`,
+      jsonDirectory + `/${language}questions.json`,
       "utf8"
     );
-    // console.log("fileContents :>> ", fileContents);
     // parse the data on the server side
     const parsedata = JSON.parse(fileContents);
-    console.log("parsedata :>> ", parsedata);
     res.status(200).json(parsedata);
   } catch (error) {
     console.log("error :>> ", error);

src/pages/softskills.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import FetchData from "@/components/FetchData";
 
-export default function Section() {
+export default function Softskills() {
   const language: string = "softskills";
-  console.log("language :>> ", language);
 
   return (
     <div>

src/pages/techskills/[section].tsx

@@ -1,20 +1,68 @@
 import React from "react";
-import FetchData from "@/components/FetchData";
-import { useRouter } from "next/router";
+import { GetStaticProps, GetStaticPaths } from "next";
+import Questionblock from "@/components/Questionblock";
+import Head from "../../../node_modules/next/head";
 
-export default function Section() {
-  const params = useRouter();
-  console.log("params :>> ", params);
-  const language: any = params.query.section;
-  console.log("language :>> ", language);
+interface PropsType {
+  result: [questioninterface];
+  language: string;
+}
+
+interface questioninterface {
+  id: number;
+  question: string;
+  answer: string;
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const prefetchedPages = [
+    "html",
+    "css",
+    "javascript",
+    "react",
+    "advanced-react",
+  ];
+  const paths = prefetchedPages.map((prefetchedPage) => {
+    return { params: { section: prefetchedPage } };
+  });
+  return {
+    paths,
+    fallback: false,
+  };
+};
 
+export const getStaticProps: GetStaticProps = async (context) => {
+  const language = context.params?.section;
+
+  const response = await fetch(
+    `http://127.0.0.1:3000/api/staticdata?language=${language}`
+  );
+  const result = await response.json();
+  return {
+    props: { result, language },
+  };
+};
+
+export default function Section(props: PropsType) {
+  const language = props.language;
+  const result = props.result;
   return (
     <div>
-      {language && (
-        <div key={language}>
-          <FetchData pathname={language} />
-        </div>
-      )}
+      <Head>
+        <title key="title">`Questions on ${language}`</title>
+      </Head>
+
+      <h1>{`Questions on ${language}`}</h1>
+      <div>
+        {result &&
+          result.map((question: questioninterface) => {
+            return (
+              <div key={question.id}>
+                <Questionblock questionx={question} />
+              </div>
+            );
+          })}
+      </div>
     </div>
   );
 }