diff --git a/src/app/containers/Contracts.ts b/src/app/containers/Contracts.ts index 52e96ef..3ef8e7e 100644 --- a/src/app/containers/Contracts.ts +++ b/src/app/containers/Contracts.ts @@ -25,14 +25,13 @@ export function useContracts() { }; const addContract = (contract: Contract) => { - var newContracts; setContracts((prevContracts) => { - newContracts = [...prevContracts, contract].sort((a, b) => + const newContracts = [...prevContracts, contract].sort((a, b) => a.name.localeCompare(b.name) ); + localStorage.setItem("contracts", JSON.stringify(newContracts)); return newContracts; }); - localStorage.setItem("contracts", JSON.stringify(newContracts)); }; const overwriteContract = (contracts: Contract[]) => { @@ -102,6 +101,17 @@ export function useContracts() { ); }; + const deleteContract = (idx: number) => { + setSelectedIdx(null); + setContracts((prevContracts) => { + const newContracts = prevContracts.filter((_, i) => i !== idx); + localStorage.setItem("contracts", JSON.stringify(newContracts)); + return newContracts; + }); + }; + + + return { contracts, addContract, @@ -111,6 +121,7 @@ export function useContracts() { overwriteContract, upsertByPath, removeByPath, + deleteContract, selectedIdx, selectedContract, setSelectedIdx, diff --git a/src/app/features/sidebar/ContractManagementButtons.tsx b/src/app/features/sidebar/ContractManagementButtons.tsx new file mode 100644 index 0000000..f6fb655 --- /dev/null +++ b/src/app/features/sidebar/ContractManagementButtons.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import styled from "styled-components"; +import { Button } from "react95"; +import Contracts from "../../containers/Contracts"; + +const ButtonContainer = styled.div` + display: flex; + gap: 4px; + margin-left: 8px; +`; + +const SmallButton = styled(Button)` + padding: 2px 6px; + font-size: 11px; + min-width: auto; + height: 20px; +`; + + + +const ContractManagementButtons = () => { + const { contracts, selectedIdx, selectedContract, deleteContract } = Contracts.useContainer(); + + const handleDelete = () => { + if (selectedIdx !== null && selectedContract) { + const confirmDelete = window.confirm(`Are you sure you want to delete "${selectedContract.name}"?`); + if (confirmDelete) { + deleteContract(selectedIdx); + } + } + }; + + + + // Only show buttons if there are contracts and one is selected + if (contracts.length === 0 || selectedIdx === null) { + return null; + } + + return ( + + + Delete + + + ); +}; + +export default ContractManagementButtons; diff --git a/src/app/features/sidebar/Sidebar.tsx b/src/app/features/sidebar/Sidebar.tsx index 3d02847..fb590e8 100644 --- a/src/app/features/sidebar/Sidebar.tsx +++ b/src/app/features/sidebar/Sidebar.tsx @@ -6,6 +6,7 @@ import AddContractBtn from "../add-contract/AddContractBtn"; import Contracts from "../../containers/Contracts"; import ContractItem from "./ContractItem"; import ConnectOptions from "../connection/ConnectOptions"; +import ContractManagementButtons from "./ContractManagementButtons"; const Container = styled.div` width: 300px; @@ -41,13 +42,22 @@ const FilesContainer = styled.div` height: 100%; `; +const ContractsHeader = styled.div` + display: flex; + align-items: center; + position: relative; +`; + const Sidebar = () => { const { contracts } = Contracts.useContainer(); return ( -
Contracts:
+ +
Contracts:
+ +
{contracts.map((c, i) => (