fixed close button bug and added conditional title

client/src/components/BoardComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Board, Card, Columns } from "../types";
 import {
 	DragDropContext,
@@ -11,15 +11,25 @@ import CardDetails from "./CardDetails";
 interface BoardComponentProps {
 	board: Board;
 	handleUpdateCard: (newCard: Card, boardId: string) => void;
+	handleTitleTextChange: (text: string) => void;
 }
 
 const BoardComponent: React.FC<BoardComponentProps> = ({
 	board,
 	handleUpdateCard,
+	handleTitleTextChange,
 }) => {
 	const [selectedCard, setSelectedCard] = useState<Card | null>(null);
 	// thinking about adding a state for each column as a list of cards to simplify things
 
+	useEffect(() => {
+		if (selectedCard) {
+			handleTitleTextChange(selectedCard.cardName);
+		} else {
+			handleTitleTextChange(`👈 ${board.boardName}`);
+		}
+	}, [selectedCard]);
+
 	const columns = [
 		{ title: "Backlog", key: Columns.backlog },
 		{ title: "In Progress", key: Columns.inProgress },

client/src/components/CardDetails.tsx

@@ -52,7 +52,7 @@ const CardDetails: React.FC<CardDetailsProps> = ({
 			<p className="mt-1">Column: {selectedCard.column}</p>
 			<button
 				className="mt-8 py-1.5 px-8 text-sm bg-black text-white rounded"
-				onClick={() => handleResetSelectedCard}
+				onClick={() => handleResetSelectedCard()}
 			>
 				Close
 			</button>

client/src/pages/Home.tsx

@@ -9,6 +9,7 @@ import { Card } from "../types";
 const Home: React.FC = () => {
 	const [selectedBoard, setSelectedBoard] = useState<Board | null>(null);
 	const [userBoards, setUserBoards] = useState<Board[]>([]);
+	const [tileText, setTitleText] = useState("Home");
 
 	useEffect(() => {
 		// this is where we will fetch all user's boards from the database
@@ -19,6 +20,18 @@ const Home: React.FC = () => {
 		}
 	}, []);
 
+	const handleTitleTextChange = (text: string) => {
+		setTitleText(text);
+	};
+
+	useEffect(() => {
+		if (selectedBoard) {
+			handleTitleTextChange(`👈 ${selectedBoard.boardName}`);
+		} else {
+			handleTitleTextChange("Home");
+		}
+	}, [selectedBoard]);
+
 	const handleToggleBoardSelect = (board: Board | null) => {
 		if (board) {
 			setSelectedBoard(board);
@@ -58,12 +71,13 @@ const Home: React.FC = () => {
 				className="cursor-pointer text-center my-16 text-3xl font-bold font-primary"
 				onClick={() => handleToggleBoardSelect(null)}
 			>
-				Home
+				{tileText}
 			</h1>
 
 			{selectedBoard ? (
 				<BoardComponent
 					handleUpdateCard={handleUpdateCard}
+					handleTitleTextChange={handleTitleTextChange}
 					board={selectedBoard}
 				/>
 			) : (