adding comments

Author: GaelGil

src/components/AlgorithmForm.tsx

@@ -1,15 +1,16 @@
 import { Form, Button } from "react-bootstrap";
+import type { FormProps } from "../types/formProps";
 
-type Props = {
-  value: string;
-  options: string[];
-  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-  onReset: () => void;
-  disabled?: boolean;
-};
+// type Props = {
+//   value: string;
+//   options: string[];
+//   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+//   onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+//   onReset: () => void;
+//   disabled?: boolean;
+// };
 
-const AlgorithmForm: React.FC<Props> = ({
+const AlgorithmForm: React.FC<FormProps> = ({
   value,
   options,
   onChange,

src/components/AlgorithmInfo.tsx

@@ -1,17 +1,21 @@
 import { Card, Col, Row } from "react-bootstrap";
 import type { Info } from "../types/info";
 
-const AlgorithmInfo: React.FC<{ items: Info[] }> = ({ items }) => (
+// Algorithm info component to display info on the algorithms.
+// takes in props "info" which is a type defined in types.
+// since we have sorting and traversal algorithms we can use this
+// to load in on each page without having to rewrite this
+const AlgorithmInfo: React.FC<{ info: Info[] }> = ({ info }) => (
   <Row>
-    {items.map((item, index) => (
+    {info.map((info, index) => (
       <Col md={6} key={index} className="mb-4">
         <Card className="h-100 shadow-sm">
           <Card.Body>
-            <Card.Title>{item.name}</Card.Title>
-            <Card.Text>{item.description}</Card.Text>
-            {item.link && (
+            <Card.Title>{info.name}</Card.Title>
+            <Card.Text>{info.description}</Card.Text>
+            {info.link && (
               <Card.Link
-                href={item.link}
+                href={info.link}
                 target="_blank"
                 rel="noopener noreferrer"
               >

src/components/GraphLegend.tsx

@@ -1,3 +1,4 @@
+// Graph legend component. Only imported in traversal visualiser
 const GraphLengend = () => {
   return (
     <>

src/components/Navigation.tsx

@@ -1,6 +1,7 @@
 import { Navbar, Nav, Container } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
+// simple navbar component to be usedon all pages
 const Navigation = () => {
   return (
     <Navbar bg="dark" variant="dark" expand="md" collapseOnSelect>

src/components/SortingVisualizer.tsx

@@ -53,6 +53,7 @@ const SortingVisualizer: React.FC<ArrayProps> = ({ arraysInfo }) => {
     setIsSorting(false);
   };
 
+  // the sorting visualizer component
   return (
     <Container className="d-flex flex-column justify-content-center align-items-center min-vh-100">
       <div className="array-container mb-4">
@@ -78,7 +79,7 @@ const SortingVisualizer: React.FC<ArrayProps> = ({ arraysInfo }) => {
 
       <Container className="mt-5">
         <h2 className="text-center mb-4">About Sorting Algorithms</h2>
-        <AlgorithmInfo items={arraysInfo} />
+        <AlgorithmInfo info={arraysInfo} />
       </Container>
     </Container>
   );

src/components/TraversalVisualizer.tsx

@@ -115,6 +115,7 @@ const TraversalVisualizer: React.FC<GraphProps> = ({ graphsInfo }) => {
     setIsSorting(false);
   };
 
+  // the traversal visualizer component
   return (
     <div className="GraphTraversalVisualiser container d-flex flex-column align-items-center py-4">
       <div className="matrix-container d-flex flex-column mb-4">
@@ -173,7 +174,7 @@ const TraversalVisualizer: React.FC<GraphProps> = ({ graphsInfo }) => {
       />
       <Container className="mt-5">
         <h2 className="text-center mb-4">About Traversal Algorithms</h2>
-        <AlgorithmInfo items={graphsInfo} />
+        <AlgorithmInfo info={graphsInfo} />
       </Container>
     </div>
   );

src/types/formProps.ts

@@ -0,0 +1,8 @@
+export type FormProps = {
+  value: string;
+  options: string[];
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  onReset: () => void;
+  disabled?: boolean;
+};