updating comoponents

Author: GaelGil

src/App.tsx

@@ -8,12 +8,9 @@ function App() {
     <>
       <NavBar />
       <main className="main-content">
-        <Router>
-          <Routes>
-            <Route path="/" element={<VisualizersPage />} />
-            {/* Add more routes here */}
-          </Routes>
-        </Router>
+        <Routes>
+          <Route path="/" element={<VisualizersPage />} />
+        </Routes>
       </main>
     </>
   );

src/components/SortingVisualizer.tsx

@@ -2,8 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Container } from "react-bootstrap";
 import AlgorithmForm from "./AlgorithmForm";
 import AlgorithmInfo from "./AlgorithmInfo";
-import { arraysInfo } from "../data/arraysInfo";
-
+import type { ArrayProps } from "../types/info";
 import "../css/Arrays.css";
 
 const generateRandomArray = (length = 50, min = 20, max = 200): number[] =>
@@ -12,7 +11,7 @@ const generateRandomArray = (length = 50, min = 20, max = 200): number[] =>
     () => Math.floor(Math.random() * (max - min + 1)) + min
   );
 
-const SortingVisualizer: React.FC = () => {
+const SortingVisualizer: React.FC<ArrayProps> = ({ arraysInfo }) => {
   const [array, setArray] = useState<number[]>([]);
   const [algorithm, setAlgorithm] = useState<string>("");
   const [isSorting, setIsSorting] = useState(false);

src/components/TraversalVisualizer.tsx

@@ -2,16 +2,15 @@ import React, { useState, useEffect } from "react";
 import { Container } from "react-bootstrap";
 import AlgorithmForm from "./AlgorithmForm";
 import AlgorithmInfo from "./AlgorithmInfo";
-import { graphsInfo } from "../data/graphsInfo";
-import "../css/Arrays.css";
+import type { GraphProps } from "../types/info";
 
 const generateRandomArray = (length = 50, min = 20, max = 200): number[] =>
   Array.from(
     { length },
     () => Math.floor(Math.random() * (max - min + 1)) + min
   );
 
-const TraversalVisualizer: React.FC = () => {
+const TraversalVisualizer: React.FC<GraphProps> = ({ graphsInfo }) => {
   const [array, setArray] = useState<number[]>([]);
   const [algorithm, setAlgorithm] = useState<string>("");
   const [isSorting, setIsSorting] = useState(false);

src/main.tsx

@@ -1,14 +1,14 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
+import React from "react";
 import { BrowserRouter } from "react-router-dom";
+import { createRoot } from "react-dom/client";
 import "./css/index.css";
 import App from "./App.tsx";
 import "bootstrap/dist/css/bootstrap.min.css";
 
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
+  <React.StrictMode>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </StrictMode>
+  </React.StrictMode>
 );

src/pages/Visualiser.tsx

@@ -4,9 +4,9 @@ import SortingVisualizer from "../components/SortingVisualizer";
 import TraversalVisualizer from "../components/TraversalVisualizer";
 import { arraysInfo } from "../data/arraysInfo";
 import { graphsInfo } from "../data/graphsInfo";
-import type { Info } from "../types/info";
+// import type { Info, InfoProps } from "../types/info";
 
-const VisualizersPage: React.FC<SortingVisualizerProps> = ({ arraysInfo }) => {
+const VisualizersPage: React.FC = () => {
   const [selected, setSelected] = useState<"sorting" | "graph">("sorting");
 
   return (
@@ -41,7 +41,7 @@ const VisualizersPage: React.FC<SortingVisualizerProps> = ({ arraysInfo }) => {
       {selected === "sorting" ? (
         <SortingVisualizer arraysInfo={arraysInfo} />
       ) : (
-        <TraversalVisualizer graphInfo={graphsInfo} />
+        <TraversalVisualizer graphsInfo={graphsInfo} />
       )}
     </Container>
   );

src/types/info.ts

@@ -3,3 +3,11 @@ export type Info = {
   description: string;
   link?: string;
 };
+
+export type ArrayProps = {
+  arraysInfo: Info[];
+};
+
+export type GraphProps = {
+  graphsInfo: Info[];
+};