Untitled

import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { List } from '../interface/interfaces';
import {  createList, deleteList, getLists } from './FetchApi';

export const Board = () => {
    const {boardId} = useParams();
    const[list, setList] = useState<List[]>([]);
    const[newlist, setNewList] = useState<String>("")
    const [boardName, setBoardName] = useState<string>("");


    

    useEffect(() => {
        const fetchList = async () => {
            const list = await getLists(boardId);
            setList(list);
        }
        const storedBoardName = localStorage.getItem('boardName'); 
        if (storedBoardName) {
            setBoardName(storedBoardName);
        }
        fetchList();
    }, [boardId])

    const handleCreateList = async () => {
        if (newlist) {
            await createList(boardId, newlist);
            setNewList("");
            const updatedLists = await getLists(boardId);
            setList(updatedLists);
        }
    };


    const handleDeleteList = async (listId: string) => {
        await deleteList(listId);
        const updated = await getLists(boardId);
        setList(updated);
    };

    const handleNewList = (e: React.ChangeEvent<HTMLInputElement>) => {
        setNewList(e.target.value);
    };

  return (
    <div className="board-container">
        <h3 >Add List For Your <strong>{boardName}</strong> Board</h3>
        <div className="lists-container">
            {list.map((el) => (
                <div key={el.id} className="list-card">
                    <h4 className="list-name">{el.name}</h4>
                    <button onClick={() => handleDeleteList(el.id)} className="delete-button">Delete</button>
                </div>
            ))}
        </div>
    </div>
  )
}