PR Template, button bugfix and restructure 'navigator' component

.github/pull_request_template.md

@@ -0,0 +1,34 @@
+# Pull Request
+
+## Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
+
+Fixes # (issue)
+
+## Type of change
+
+Please select all relevant options, then delete those which are irrelevant.
+
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Documentation update
+- [ ] Page content update.
+
+## Validation
+
+Please describe how you validate your proposed changes. Provide instructions so we can reproduce this result.
+
+- [ ] Test A
+
+## Checklist
+
+- [ ] My code follows proposed/requested changes to the related issues.
+- [ ] The [coding guidelines](https://github.com/S7-OpenLearning-Individual/DesignPatternPedia?tab=readme-ov-file#coding-standards) have been applied correctly and thoroughly.
+- [ ] `npm run lint:mdx` passes without errors.
+- [ ] I have performed a self-review of my own code and corrected any misspellings or grammatical errors.
+- [ ] I have tested the changes locally and ensured there are no errors or functional problems.
+
+## Screenshots (if applicable)
+
+Please add screenshots to demonstrate the changes made (if applicable).

README.md

@@ -19,15 +19,15 @@ This website is built using [Docusaurus](https://docusaurus.io/), a modern stati
 2. All images have `alt` texts explaining their purpose and contents.
 3. All basic page elements that can be re-used should be turned into components.
 4. Code is written in American English.
-5. Page content is written in Queens English.
+5. Page content is written in Queen's English.
 6. Page content is cited, sourced, and referenced where deemed necessary.
 7. All docs/pages are `.mdx` files.
 8. Code compiles and tests pass.
 9. Directories follow the correct pattern structure.
-10. Each page is built using the [template](/template.mdx) (validated by `npm run lint:mdx`).
+10. Each _pattern_ page is built using the [template](/template.mdx) (validated by `npm run lint:mdx`).
 11. Custom components should not implement their own title, they should use the correct heading (#) level in the page itself to ensure proper url based linking.
 12. Images need to have padding applied around them, optimally `2rem`.
-13. Code has no 'TODO' blocks, only a 'FUTURE_WORK' block may be present with a reference to an issue or task.
+13. Source code contains no 'TODO' blocks, only a 'FUTURE_WORK' block may be present with a reference to an issue or task.
 
 ## Installation
 

src/components/navigator/AnsweredQuestion.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import QuestionCard, { YesOrNo } from "./QuestionCard";
+import QuestionCard from "./QuestionCard";
 import styles from "./navigator.module.css";
+import { YesOrNo } from "@site/src/models/yes-or-no";
 
 interface AnsweredQuestionProps {
   question: string;
@@ -22,11 +23,13 @@ const AnsweredQuestion: React.FC<AnsweredQuestionProps> = ({
           question={question}
           selectedAnswer={answer}
           onAnswerYes={() => {
+            //Only call if the answer changed
             if (answer !== "yes") {
               onChangeAnswer("yes");
             }
           }}
           onAnswerNo={() => {
+            //Only call if the answer changed
             if (answer !== "no") {
               onChangeAnswer("no");
             }

src/components/navigator/NavigatorContainer.tsx

@@ -1,19 +1,15 @@
 import React, { useState } from "react";
-import {
-  decisionTree,
-  getNode,
-  getNextNode,
-  isPatternNode,
-} from "@site/src/data/decision-tree";
 import QuestionCard from "./QuestionCard";
 import PatternResult from "./PatternResult";
 import AnsweredQuestion from "./AnsweredQuestion";
 import styles from "./navigator.module.css";
-
-export interface Answer {
-  nodeId: string;
-  answer: "yes" | "no";
-}
+import {
+  getNextNode,
+  getNode,
+  isPatternNode,
+} from "@site/src/utils/decision-tree-helper";
+import { YesOrNo } from "@site/src/models/yes-or-no";
+import { Answer } from "@site/src/models/answer";
 
 const NavigatorContainer: React.FC = () => {
   const [answers, setAnswers] = useState<Answer[]>([]);
@@ -30,11 +26,11 @@ const NavigatorContainer: React.FC = () => {
     return <div>Error: Node not found</div>;
   }
 
-  const handleAnswer = (answer: "yes" | "no") => {
+  const handleAnswer = (answer: YesOrNo) => {
     setAnswers([...answers, { nodeId: currentNodeId, answer }]);
   };
 
-  const handleGoBack = (index: number, newAnswer?: "yes" | "no") => {
+  const handleGoBack = (index: number, newAnswer?: YesOrNo) => {
     const targetAnswer = newAnswer || answers[index].answer;
     setAnswers(
       answers
@@ -54,7 +50,10 @@ const NavigatorContainer: React.FC = () => {
       {/* Show all previous questions with their selected answers */}
       {answers.map((answer, index) => {
         const node = getNode(answer.nodeId);
-        if (!node) return null;
+
+        if (!node) {
+          return null;
+        }
 
         // Check if the next node after this answer is a pattern (not a question)
         const nextNodeId = getNextNode(answer.nodeId, answer.answer);
@@ -65,7 +64,7 @@ const NavigatorContainer: React.FC = () => {
         return (
           <AnsweredQuestion
             key={index}
-            question={node.question || ""}
+            question={node.question}
             answer={answer.answer}
             onChangeAnswer={(newAnswer) => handleGoBack(index, newAnswer)}
             showDivider={!isNextNodePattern}

src/components/navigator/PatternResult.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import styles from "./navigator.module.css";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
-const baseURL = "/DesignPatternPedia/docs";
-
 interface PatternResultProps {
   name: string;
   description: string;

src/components/navigator/QuestionCard.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import styles from "./navigator.module.css";
-
-export type YesOrNo = "yes" | "no";
+import { YesOrNo } from "@site/src/models/yes-or-no";
 
 interface QuestionCardProps {
   question: string;

src/components/navigator/navigator.module.css

@@ -179,10 +179,6 @@
   }
 
   .answerBtn {
-    min-width: 100%;
-  }
-
-  .answerButtons {
-    flex-direction: column;
+    min-width: 30vw;
   }
 }

src/data/decision-tree.ts

@@ -1,27 +1,5 @@
-// Decision Tree Node Types
-export type NodeType = "question" | "pattern";
-
-export interface DecisionNode {
-  id: string;
-  type: NodeType;
-  question?: string; // For question nodes
-  title?: string; // For pattern nodes
-  description?: string; // For pattern nodes
-  icon?: string; // Optional icon identifier
-  yesPath?: string; // ID of next node if "Yes"
-  noPath?: string; // ID of next node if "No"
-  pattern?: {
-    name: string;
-    description: string;
-    path: string;
-  };
-}
-
-export interface DecisionTree {
-  [nodeId: string]: DecisionNode;
-}
-
-// Decision Tree Structure
+import { DecisionTree } from "../models/decision-tree";
+
 export const decisionTree: DecisionTree = {
   // First main decision
   q1: {
@@ -428,30 +406,3 @@ export const decisionTree: DecisionTree = {
     },
   },
 };
-
-// Helper function to get node by ID
-export const getNode = (nodeId: string): DecisionNode | undefined => {
-  return decisionTree[nodeId];
-};
-
-// Helper function to get next node based on answer
-export const getNextNode = (
-  nodeId: string,
-  answer: "yes" | "no"
-): string | undefined => {
-  const node = getNode(nodeId);
-  if (!node) return undefined;
-  return answer === "yes" ? node.yesPath : node.noPath;
-};
-
-// Helper function to check if node is a pattern endpoint
-export const isPatternNode = (nodeId: string): boolean => {
-  const node = getNode(nodeId);
-  return node?.type === "pattern";
-};
-
-// Helper function to check if node is a question
-export const isQuestionNode = (nodeId: string): boolean => {
-  const node = getNode(nodeId);
-  return node?.type === "question";
-};

src/models/answer.ts

@@ -0,0 +1,6 @@
+import { YesOrNo } from "./yes-or-no";
+
+export interface Answer {
+  nodeId: string;
+  answer: YesOrNo;
+}

src/models/decision-node.ts

@@ -0,0 +1,17 @@
+import { NodeType } from "./node-type";
+
+export interface DecisionNode {
+  id: string;
+  type: NodeType;
+  question?: string;
+  title?: string;
+  description?: string;
+  icon?: string;
+  yesPath?: string;
+  noPath?: string;
+  pattern?: {
+    name: string;
+    description: string;
+    path: string;
+  };
+}

src/models/decision-tree.ts

@@ -0,0 +1,5 @@
+import { DecisionNode } from "./decision-node";
+
+export interface DecisionTree {
+  [nodeId: string]: DecisionNode;
+}

src/models/node-type.ts

@@ -0,0 +1 @@
+export type NodeType = "question" | "pattern";

src/models/yes-or-no.ts

@@ -0,0 +1 @@
+export type YesOrNo = "yes" | "no";

src/utils/decision-tree-helper.ts

@@ -0,0 +1,36 @@
+import { YesOrNo } from "../components/navigator/QuestionCard";
+import { DecisionNode, decisionTree } from "../data/decision-tree";
+
+// Helper function to get node by ID
+export const getNode = (nodeId: string): DecisionNode | undefined => {
+  return decisionTree[nodeId];
+};
+
+// Helper function to get next node based on answer
+export const getNextNode = (
+  nodeId: string,
+  answer: YesOrNo
+): string | undefined => {
+  const node = getNode(nodeId);
+  if (!node) {
+    return undefined;
+  }
+
+  if (answer === "yes") {
+    return node.yesPath;
+  }
+
+  return node.noPath;
+};
+
+// Helper function to check if node is a pattern endpoint
+export const isPatternNode = (nodeId: string): boolean => {
+  const node = getNode(nodeId);
+  return node?.type === "pattern";
+};
+
+// Helper function to check if node is a question
+export const isQuestionNode = (nodeId: string): boolean => {
+  const node = getNode(nodeId);
+  return node?.type === "question";
+};