From da2c7ffccea58f8634c9d3187d25eb36deed8933 Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@hey.com>
Date: Mon, 2 Dec 2024 17:01:27 +0000
Subject: [PATCH] chore: some optimizations

---
 web/src/templates/build-template-dialog.tsx | 22 +++++++++----
 web/src/templates/dashboard.tsx             | 36 +++++++++++++--------
 web/src/templates/template-editor-store.tsx |  1 -
 3 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/web/src/templates/build-template-dialog.tsx b/web/src/templates/build-template-dialog.tsx
index 908c96f..1bba3c1 100644
--- a/web/src/templates/build-template-dialog.tsx
+++ b/web/src/templates/build-template-dialog.tsx
@@ -200,6 +200,20 @@ function BuildArgRow({
 		setIsEditing(false);
 	}, [argName, arg, onFinish]);
 
+	const onArgNameChange = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>) => {
+			setArgName(event.currentTarget.value);
+		},
+		[],
+	);
+
+	const onArgChange = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>) => {
+			setArg(event.currentTarget.value);
+		},
+		[],
+	);
+
 	return (
 		<>
 			<Input
@@ -207,18 +221,14 @@ function BuildArgRow({
 				disabled={!isEditing}
 				placeholder="Argument name"
 				value={argName}
-				onChange={(event) => {
-					setArgName(event.currentTarget.value);
-				}}
+				onChange={onArgNameChange}
 			/>
 			<Input
 				type="text"
 				disabled={!isEditing}
 				placeholder="Argument value"
 				value={arg}
-				onChange={(event) => {
-					setArg(event.currentTarget.value);
-				}}
+				onChange={onArgChange}
 			/>
 			<div className="flex flex-row">
 				{isEditing ? (
diff --git a/web/src/templates/dashboard.tsx b/web/src/templates/dashboard.tsx
index 87bdbec..ece94a9 100644
--- a/web/src/templates/dashboard.tsx
+++ b/web/src/templates/dashboard.tsx
@@ -21,6 +21,7 @@ import dayjs from "dayjs";
 import { Pencil, Plus, Trash2 } from "lucide-react";
 import { useDeleteTemplate, useTemplates } from "./api";
 import { NewTemplateDialog } from "./new-template-dialog";
+import React from "react";
 
 function TemplatesDashboard() {
 	return (
@@ -30,26 +31,33 @@ function TemplatesDashboard() {
 			</aside>
 			<Page>
 				<PageHeader>Templates</PageHeader>
-				<Dialog>
-					<main>
-						<DialogTrigger asChild>
-							<div className="flex flex-row py-4">
-								<Button variant="secondary" size="sm">
-									<Plus /> New template
-								</Button>
-							</div>
-						</DialogTrigger>
-						<TemplateTable />
-					</main>
-					<NewTemplateDialog />
-				</Dialog>
+				<Main />
 				<Toaster />
 			</Page>
 		</SidebarProvider>
 	);
 }
 
-function TemplateTable() {
+function Main() {
+	return (
+		<Dialog>
+			<main>
+				<DialogTrigger asChild>
+					<div className="flex flex-row py-4">
+						<Button variant="secondary" size="sm">
+							<Plus /> New template
+						</Button>
+					</div>
+				</DialogTrigger>
+				<TemplateTable />
+			</main>
+			<NewTemplateDialog />
+		</Dialog>
+	);
+}
+
+const TemplateTable = React.memo(_TemplateTable, () => true);
+function _TemplateTable() {
 	const { data: templates, isLoading } = useTemplates();
 	const deleteTemplate = useDeleteTemplate();
 	const { toast } = useToast();
diff --git a/web/src/templates/template-editor-store.tsx b/web/src/templates/template-editor-store.tsx
index bcc96fa..465ea7b 100644
--- a/web/src/templates/template-editor-store.tsx
+++ b/web/src/templates/template-editor-store.tsx
@@ -58,7 +58,6 @@ function createTemplateEditorStore({
 			} catch (error) {
 				console.error(error);
 				if (isApiErrorResponse(error)) {
-					console.log("askdjskdjk");
 					set({ buildError: error });
 				}
 			} finally {