From 7dfc8b246c08dc88d8470db5e01bc58537c88193 Mon Sep 17 00:00:00 2001 From: theartcher Date: Thu, 18 Dec 2025 09:51:50 +0100 Subject: [PATCH 1/2] Fix button bug, reworked some CSS and moved interfaces and models to their own directory. Improved code readability. Removed unused baseURL variable. --- src/components/navigator/AnsweredQuestion.tsx | 5 +- .../navigator/NavigatorContainer.tsx | 29 +++++----- src/components/navigator/PatternResult.tsx | 2 - src/components/navigator/QuestionCard.tsx | 3 +- src/components/navigator/navigator.module.css | 6 +-- src/data/decision-tree.ts | 53 +------------------ src/models/answer.ts | 6 +++ src/models/decision-node.ts | 17 ++++++ src/models/decision-tree.ts | 5 ++ src/models/node-type.ts | 1 + src/models/yes-or-no.ts | 1 + src/utils/decision-tree-helper.ts | 36 +++++++++++++ 12 files changed, 88 insertions(+), 76 deletions(-) create mode 100644 src/models/answer.ts create mode 100644 src/models/decision-node.ts create mode 100644 src/models/decision-tree.ts create mode 100644 src/models/node-type.ts create mode 100644 src/models/yes-or-no.ts create mode 100644 src/utils/decision-tree-helper.ts diff --git a/src/components/navigator/AnsweredQuestion.tsx b/src/components/navigator/AnsweredQuestion.tsx index d4bbaa9..5754dd3 100644 --- a/src/components/navigator/AnsweredQuestion.tsx +++ b/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 = ({ 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"); } diff --git a/src/components/navigator/NavigatorContainer.tsx b/src/components/navigator/NavigatorContainer.tsx index d1cb6fd..51d23a7 100644 --- a/src/components/navigator/NavigatorContainer.tsx +++ b/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([]); @@ -30,11 +26,11 @@ const NavigatorContainer: React.FC = () => { return
Error: Node not found
; } - 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 ( handleGoBack(index, newAnswer)} showDivider={!isNextNodePattern} diff --git a/src/components/navigator/PatternResult.tsx b/src/components/navigator/PatternResult.tsx index ce9ce24..26c9920 100644 --- a/src/components/navigator/PatternResult.tsx +++ b/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; diff --git a/src/components/navigator/QuestionCard.tsx b/src/components/navigator/QuestionCard.tsx index eacd1c0..e081c2a 100644 --- a/src/components/navigator/QuestionCard.tsx +++ b/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; diff --git a/src/components/navigator/navigator.module.css b/src/components/navigator/navigator.module.css index c817c72..d432482 100644 --- a/src/components/navigator/navigator.module.css +++ b/src/components/navigator/navigator.module.css @@ -179,10 +179,6 @@ } .answerBtn { - min-width: 100%; - } - - .answerButtons { - flex-direction: column; + min-width: 30vw; } } diff --git a/src/data/decision-tree.ts b/src/data/decision-tree.ts index 6b513a9..e889a2d 100644 --- a/src/data/decision-tree.ts +++ b/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"; -}; diff --git a/src/models/answer.ts b/src/models/answer.ts new file mode 100644 index 0000000..c1d48fa --- /dev/null +++ b/src/models/answer.ts @@ -0,0 +1,6 @@ +import { YesOrNo } from "./yes-or-no"; + +export interface Answer { + nodeId: string; + answer: YesOrNo; +} diff --git a/src/models/decision-node.ts b/src/models/decision-node.ts new file mode 100644 index 0000000..de0cbf8 --- /dev/null +++ b/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; + }; +} diff --git a/src/models/decision-tree.ts b/src/models/decision-tree.ts new file mode 100644 index 0000000..30569ff --- /dev/null +++ b/src/models/decision-tree.ts @@ -0,0 +1,5 @@ +import { DecisionNode } from "./decision-node"; + +export interface DecisionTree { + [nodeId: string]: DecisionNode; +} diff --git a/src/models/node-type.ts b/src/models/node-type.ts new file mode 100644 index 0000000..4884011 --- /dev/null +++ b/src/models/node-type.ts @@ -0,0 +1 @@ +export type NodeType = "question" | "pattern"; diff --git a/src/models/yes-or-no.ts b/src/models/yes-or-no.ts new file mode 100644 index 0000000..f55a7a6 --- /dev/null +++ b/src/models/yes-or-no.ts @@ -0,0 +1 @@ +export type YesOrNo = "yes" | "no"; diff --git a/src/utils/decision-tree-helper.ts b/src/utils/decision-tree-helper.ts new file mode 100644 index 0000000..5f13c26 --- /dev/null +++ b/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"; +}; From 976bb27b5dd623b62a309eb56fc100b1cfb8caef Mon Sep 17 00:00:00 2001 From: theartcher Date: Thu, 18 Dec 2025 09:52:15 +0100 Subject: [PATCH 2/2] Update readme code styles, add PR template --- .github/pull_request_template.md | 34 ++++++++++++++++++++++++++++++++ README.md | 6 +++--- 2 files changed, 37 insertions(+), 3 deletions(-) create mode 100644 .github/pull_request_template.md diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..e3c8179 --- /dev/null +++ b/.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). diff --git a/README.md b/README.md index 813b410..bbb50e0 100644 --- a/README.md +++ b/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