refactor: Convert remaining visualizers from class to functional components

Converts Turing Machine, Prime Numbers, Recursion Tree, and Binary Search
to use useState, useEffect, and useRef. Uses refs for values read inside
async animation loops. Removes unused dead files (details.jsx,
vertexOriginal.jsx). Cleans up console.logs and commented-out code.

Author: TamimEhsan

src/app/binary-search/custom-dual-slider.jsx

@@ -1,16 +1,6 @@
 import { Slider } from "@/components/ui/slider"
 
-// interface DualHandleSliderProps {
-//   min?: number
-//   max?: number
-//   step?: number
-//   defaultValue?: [number, number]
-//   onValueChange?: (values: [number, number]) => void
-//   className?: string
-// }
-
-const DualHandleSlider = ({lower = 0, upper = 100, max = 100 }) => {
-    console.log(lower, upper, max)
+const DualHandleSlider = ({ lower = 0, upper = 100, max = 100 }) => {
     return (
         <Slider
             value={[lower, upper]}
@@ -22,4 +12,4 @@ const DualHandleSlider = ({lower = 0, upper = 100, max = 100 }) => {
     )
 }
 
-export default DualHandleSlider;
+export default DualHandleSlider;

src/app/binary-search/entryPoint.jsx

@@ -1,54 +1,29 @@
 import { CustomInput } from '@/components/custom-input';
 import { Button } from '@/components/ui/button';
-import { Component } from 'react';
 
+export default function EntryPoint({ startGame, upper, setUpper }) {
+    const setData = (val) => {
+        if (val === "") val = 0;
+        setUpper(val);
+    };
 
-class EntryPoint extends Component {
-    state = {
-        error: false
-    }
-    render() {
-        return (
-            <div className='flex flex-col items-center space-y-4'>
-                <CustomInput
-                    title="Upper Number"
-                    defaultValue={100}
-                    type={"number"}
-                    onChange={this.setData}
-                    placeholder="Enter value..."
-                />
-                 <br /><br />
-                <h1 className='text-3xl'>
-                    Guess a number between 0 and {this.props.upper}
-                </h1>
-                <br />
-                <Button
-                    onClick={this.props.startGame}
-                >
-                    Start the game
-                </Button>
-            </div>
-        );
-    }
-
-    setData = (val) => {
-        if (val === "") {
-            val = 0;
-        }
-        this.props.setUpper(val);
-    }
-    getData = (e) => {
-        if (e.target.value !== "") {
-            console.log(e.target.value);
-            this.props.setUpper(e.target.value);
-        }
-        else {
-            this.props.setUpper(100)
-        }
-    }
-    validateNumbers = () => {
-
-    }
+    return (
+        <div className="flex flex-col items-center space-y-4">
+            <CustomInput
+                title="Upper Number"
+                defaultValue={100}
+                type="number"
+                onChange={setData}
+                placeholder="Enter value..."
+            />
+            <br /><br />
+            <h1 className="text-3xl">
+                Guess a number between 0 and {upper}
+            </h1>
+            <br />
+            <Button onClick={startGame}>
+                Start the game
+            </Button>
+        </div>
+    );
 }
-
-export default EntryPoint;

src/app/binary-search/guess.jsx

@@ -1,46 +1,23 @@
 import { Button } from '@/components/ui/button';
-import { Component } from 'react';
 import DualHandleSlider from "./custom-dual-slider";
-class Guess extends Component {
-    render() {
-        return (
-            <div >
-                {/* <p>
-                    <Button className="btn btn-secondary btn-lg" type="button" data-toggle="collapse"
-                        data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
-                        Toggle Range
-                    </Button>
-                </p> */}
-                {/* <div className="collapse" id="collapseExample"> */}
-                    <div className="card card-body">
-                        <center style={{ justifyContent: "center" }}>
-                            <DualHandleSlider
-                                upper={this.props.upper}
-                                lower={this.props.lower}
-                                max={this.props.max}
-                            />
-                        </center>
-                    </div>
-                {/* </div> */}
 
-                <h1 className="text-3xl">
-                    Is you number greater than {this.getMid()}?
-                </h1> <br />
-                <Button
-                    onClick={this.props.yesButton}
-                    className="mx-2"
-                >Yes</Button>
-                <Button
-                    onClick={this.props.noButton}
-                    className="mx-2"
-                >No</Button> <br />
+export default function Guess({ yesButton, noButton, upper, lower, max }) {
+    const mid = Math.floor((upper + lower) / 2);
+
+    return (
+        <div>
+            <div className="card card-body">
+                <center style={{ justifyContent: "center" }}>
+                    <DualHandleSlider upper={upper} lower={lower} max={max} />
+                </center>
             </div>
-        );
-    }
-    getMid = () => {
-        const mid = Math.floor((this.props.upper + this.props.lower) / 2);
-        return mid;
-    }
+            <h1 className="text-3xl">
+                Is you number greater than {mid}?
+            </h1>
+            <br />
+            <Button onClick={yesButton} className="mx-2">Yes</Button>
+            <Button onClick={noButton} className="mx-2">No</Button>
+            <br />
+        </div>
+    );
 }
-
-export default Guess;

src/app/binary-search/page.jsx

@@ -1,65 +1,65 @@
 "use client";
-import React, { Component } from 'react';
+import { useState } from 'react';
 import EntryPoint from "./entryPoint";
 import Search from "./search";
 import Navbar from '@/components/navbar';
 
-class BinarySearch extends Component {
-    state = {
-        upper: 100,
-        lower: 0,
-        max: 100,
-        isRunning: false
-    }
-    render() {
-        return (
-            <div>
-                <Navbar title={"Binary Search"} />
-                <br />
-                <br />
-                <br />
-                <center>
-                    {!this.state.isRunning &&
-                        <EntryPoint
-                            startGame={this.handleStartGame}
-                            upper={this.state.upper}
-                            setUpper={this.handleSetUpper}
-                        />}
-                    {this.state.isRunning &&
-                        <Search
-                            yesButton={this.handleYes}
-                            noButton={this.handleNo}
-                            upper={this.state.upper}
-                            lower={this.state.lower}
-                            max={this.state.max}
-                            onRestart={this.handleRestart}
-                        />
-                    }
-                </center>
-            </div>
-        );
-    }
-    handleStartGame = () => {
-        this.setState({ isRunning: true });
-    }
-    handleRestart = () => {
-        this.setState({ isRunning: false, upper: 100, lower: 0 });
-    }
-    handleYes = () => {
-        const mid = Math.floor((this.state.upper + this.state.lower) / 2);
-        this.setState({ lower: mid + 1 });
-    }
-    handleNo = () => {
-        const mid = Math.floor((this.state.upper + this.state.lower) / 2);
-        this.setState({ upper: mid });
-    }
-    handleSetUpper = (up) => {
+export default function BinarySearch() {
+    const [upper, setUpper] = useState(100);
+    const [lower, setLower] = useState(0);
+    const [max, setMax] = useState(100);
+    const [isRunning, setIsRunning] = useState(false);
+
+    const handleStartGame = () => {
+        setIsRunning(true);
+    };
+
+    const handleRestart = () => {
+        setIsRunning(false);
+        setUpper(100);
+        setLower(0);
+    };
+
+    const handleYes = () => {
+        const mid = Math.floor((upper + lower) / 2);
+        setLower(mid + 1);
+    };
+
+    const handleNo = () => {
+        const mid = Math.floor((upper + lower) / 2);
+        setUpper(mid);
+    };
+
+    const handleSetUpper = (up) => {
         let val = parseInt(up);
-        if (val <= 0) {
-            val = 100;
-        }
-        this.setState({ upper: val, max: val });
-    }
-}
+        if (val <= 0) val = 100;
+        setUpper(val);
+        setMax(val);
+    };
 
-export default BinarySearch;
+    return (
+        <div>
+            <Navbar />
+            <br /><br /><br />
+            <center>
+                {!isRunning && (
+                    <EntryPoint
+                        startGame={handleStartGame}
+                        upper={upper}
+                        setUpper={handleSetUpper}
+                    />
+                )}
+                {isRunning && (
+                    <Search
+                        yesButton={handleYes}
+                        noButton={handleNo}
+                        upper={upper}
+                        lower={lower}
+                        max={max}
+                        onRestart={handleRestart}
+                    />
+                )}
+            </center>
+        </div>
+    );
+}

src/app/binary-search/result.jsx

@@ -1,21 +1,15 @@
 import { Button } from '@/components/ui/button';
-import React, { Component } from 'react';
-class Result extends Component {
-    render() {
-        return (
-            <div>
-                <span className='text-3xl display-3'>
-                    Your number is {this.props.res}
-                </span> <br />
-                <Button
-                    className='btn btn-warning btn-lg'
-                    onClick={this.props.onRestart}
-                >
-                    Restart
-                </Button>
-            </div>
-        );
-    }
-}
 
-export default Result;
+export default function Result({ res, onRestart }) {
+    return (
+        <div>
+            <span className="text-3xl display-3">
+                Your number is {res}
+            </span>
+            <br />
+            <Button className="btn btn-warning btn-lg" onClick={onRestart}>
+                Restart
+            </Button>
+        </div>
+    );
+}

src/app/binary-search/search.jsx

@@ -1,30 +1,21 @@
-import React, {Component} from 'react';
 import Guess from "./guess";
 import Result from "./result";
 
-class Search extends Component {
-    render() {
-        return (
-            <div>
-                {this.props.upper !== this.props.lower &&
+export default function Search({ yesButton, noButton, upper, lower, max, onRestart }) {
+    return (
+        <div>
+            {upper !== lower && (
                 <Guess
-                    yesButton={this.props.yesButton}
-                    noButton={this.props.noButton}
-                    upper={this.props.upper}
-                    lower={this.props.lower}
-                    max={this.props.max}
+                    yesButton={yesButton}
+                    noButton={noButton}
+                    upper={upper}
+                    lower={lower}
+                    max={max}
                 />
-                }
-                {this.props.upper === this.props.lower &&
-                   <Result
-                       res={this.props.upper}
-                       onRestart={this.props.onRestart}
-                   />
-                }
-            </div>
-        );
-    }
-
+            )}
+            {upper === lower && (
+                <Result res={upper} onRestart={onRestart} />
+            )}
+        </div>
+    );
 }
-
-export default Search;