From bdb6d43c1b1cc19acfe124b9caed9bcb8414dd76 Mon Sep 17 00:00:00 2001
From: AllenL8921 <allenliu0476@gmail.com>
Date: Fri, 13 Sep 2024 21:07:34 -0400
Subject: [PATCH] Solution

---
 src/components/BoardSwitcher.jsx | 36 +++++++++++++++++++++++++-------
 src/main.jsx                     |  2 +-
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/BoardSwitcher.jsx b/src/components/BoardSwitcher.jsx
index e99793a..abc429a 100644
--- a/src/components/BoardSwitcher.jsx
+++ b/src/components/BoardSwitcher.jsx
@@ -1,25 +1,45 @@
 import React from "react";
+import { useState } from "react";
 
-function Board(props) {
+function Board({selected, index}) {
   let className = "board";
-  if (props.selected) {
+
+  if (selected) {
     className += " selected";
   }
 
-  return <div className={className}>{props.index + 1}</div>;
+  return <div className={className}> {index}</div>;
 }
 
-function BoardSwitcher(props) {
+function BoardSwitcher({numBoards}) {
   let boards = [];
-  for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
-    boards.push(<Board index={ii} selected={isSelected} key={ii} />);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  //initializes the board and sets the initial position to be 0
+  for (let boardIndex = 0; boardIndex < numBoards; boardIndex++) {
+    let isSelected = boardIndex === selectedIndex;
+    boards.push(<Board index={boardIndex} selected={isSelected} key={boardIndex} />);
   }
 
+  //handling board index changies
+  const handleClick = (event) =>{
+
+    // if(selectedIndex === numBoards -1){//if we have reached the end of the boards
+    //   //reset to initial board
+    //   setSelectedIndex(selectedIndex % numBoards);
+    // }else{
+    //   setSelectedIndex(selectedIndex + 1);
+    // }
+
+    setSelectedIndex((selectedIndex + 1) % numBoards);
+
+    console.log(selectedIndex)
+  };
+
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      <button onClick={handleClick}>Toggle</button>
     </div>
   );
 }
diff --git a/src/main.jsx b/src/main.jsx
index 782f402..316ad56 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -6,6 +6,6 @@ import "./index.css";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <BoardSwitcher numBoards={3} />
+    <BoardSwitcher numBoards={5} />
   </React.StrictMode>
 );