From de20681bcebcf98b021bf033e13ec2fa1bba4a6e Mon Sep 17 00:00:00 2001
From: Rokas Puzonas <rokas.puz@gmail.com>
Date: Mon, 7 Feb 2022 23:42:05 +0200
Subject: [PATCH] fix: correct insert column button

---
 src/App.tsx                  | 73 +++++++++++++++++++-----------------
 src/TableDefinitionForm.tsx  | 12 +++---
 src/TableMethodCodeBlock.tsx |  4 +-
 3 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9daf536..41e55e3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,44 +5,49 @@ import TableMethodCodeBlock from './TableMethodCodeBlock';
 import { TableColumns } from './TableMethodGenerator';
 
 function App() {
-	let [columns, setColumns] = useState<TableColumns>([
-		{
-			name: "Miestas",
-			field: "City",
-			width: 10,
-			alignment: "left"
-		},
-		{
-			name: "Atsakingas",
-			field: "Manager",
-			width: 20,
-			alignment: "left"
-		},
-		{
-			name: "Vardas",
-			field: "Name",
-			width: 18,
-			alignment: "left"
-		},
-		{
-			name: "Address",
-			field: "Adress",
-			width: 15,
-			alignment: "left"
-		},
-		{
-			name: "Metai",
-			field: "Year",
-			width: 5,
-			alignment: "right"
-		}
-	])
+	let initialColumns: TableColumns = []
+
+	if (process.env.NODE_ENV === "development") {
+		initialColumns = [
+			{
+				name: "Miestas",
+				field: "City",
+				width: 10,
+				alignment: "left"
+			},
+			{
+				name: "Atsakingas",
+				field: "Manager",
+				width: 20,
+				alignment: "left"
+			},
+			{
+				name: "Vardas",
+				field: "Name",
+				width: 18,
+				alignment: "left"
+			},
+			{
+				name: "Address",
+				field: "Adress",
+				width: 15,
+				alignment: "left"
+			},
+			{
+				name: "Metai",
+				field: "Year",
+				width: 5,
+				alignment: "right"
+			}
+		]
+	}
+
+	let [columns, setColumns] = useState<TableColumns>(initialColumns)
 
 	// let [generatorOptions, setGeneratorOptions] = useState<TableMethodGeneratorOptions>({});
 
 	const onChange = (e: TableColumns) => {
-		columns = e
-		setColumns(e)
+		setColumns([...e])
 	}
 
   return (
diff --git a/src/TableDefinitionForm.tsx b/src/TableDefinitionForm.tsx
index 2027ab8..ee77267 100644
--- a/src/TableDefinitionForm.tsx
+++ b/src/TableDefinitionForm.tsx
@@ -59,10 +59,12 @@ function TableDefinitionForm(props: TableDefinitionProps) {
 	let [columns, setColumns] = useState<TableColumns>(props.value)
 
 	const addRow = () => {
-		columns.push({ name: currentName })
-		setCurrentName("")
-		if (props.onChange !== undefined) {
-			props.onChange(columns)
+		if (currentName.length > 0) {
+			columns.push({ name: currentName })
+			setCurrentName("")
+			if (props.onChange !== undefined) {
+				props.onChange(columns)
+			}
 		}
 	}
 
@@ -92,7 +94,7 @@ function TableDefinitionForm(props: TableDefinitionProps) {
 				onChange={(e) => setCurrentName(e.target.value)}
 				onKeyPress={(e) => e.key === "Enter" && addRow()}
 			/>
-			<button onClick={onClickCopy}>Insert column</button>
+			<button onClick={addRow}>Insert column</button>
 			<button onClick={onClickCopy}>Copy code 📋!</button>
 			<ol>
 				{columns.map((item, i) =>
diff --git a/src/TableMethodCodeBlock.tsx b/src/TableMethodCodeBlock.tsx
index 8ba5482..3b8ce49 100644
--- a/src/TableMethodCodeBlock.tsx
+++ b/src/TableMethodCodeBlock.tsx
@@ -11,12 +11,10 @@ interface Props {
 }
 
 function TableMethodCodeBlock(props: Props) {
-	let script = generate(props.columns, props.options)
-
 	return (
 		<div>
 			<SyntaxHighlighter language="csharp" style={vs2015}>
-				{script}
+				{generate(props.columns, props.options)}
 			</SyntaxHighlighter>
 		</div>
 	)