Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add useCallback optimizations

This commit is contained in:
Andrew Davis 2025-04-03 23:29:02 +10:00
parent 0651cb8256
commit 8a056960bf
No known key found for this signature in database
GPG Key ID: 30AB5B89A109D044
1 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
ui/src/routes/devices.$id.settings.macros.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, Fragment, useMemo, useState } from "react"; import { useEffect, Fragment, useMemo, useState, useCallback } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { LuPenLine, LuLoader, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown } from "react-icons/lu"; import { LuPenLine, LuLoader, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown } from "react-icons/lu";
@ -35,7 +35,7 @@ export default function SettingsMacrosRoute() {
} }
}, [initialized, loadMacros]); }, [initialized, loadMacros]);
const handleDuplicateMacro = async (macro: KeySequence) => { const handleDuplicateMacro = useCallback(async (macro: KeySequence) => {
if (!macro?.id || !macro?.name) { if (!macro?.id || !macro?.name) {
notifications.error("Invalid macro data"); notifications.error("Invalid macro data");
return; return;
@ -67,9 +67,9 @@ export default function SettingsMacrosRoute() {
} finally { } finally {
setActionLoadingId(null); setActionLoadingId(null);
} }
}; }, [isMaxMacrosReached, macros, saveMacros, setActionLoadingId]);
const handleMoveMacro = async (index: number, direction: 'up' | 'down', macroId: string) => { const handleMoveMacro = useCallback(async (index: number, direction: 'up' | 'down', macroId: string) => {
if (!Array.isArray(macros) || macros.length === 0) { if (!Array.isArray(macros) || macros.length === 0) {
notifications.error("No macros available"); notifications.error("No macros available");
return; return;
@ -96,7 +96,7 @@ export default function SettingsMacrosRoute() {
} finally { } finally {
setActionLoadingId(null); setActionLoadingId(null);
} }
}; }, [macros, saveMacros, setActionLoadingId]);
const MacroList = useMemo(() => ( const MacroList = useMemo(() => (
<div className="space-y-2"> <div className="space-y-2">
@ -203,29 +203,33 @@ export default function SettingsMacrosRoute() {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<SettingsPageHeader {macros.length > 0 && (
title="Keyboard Macros" <>
description="Create and manage keyboard macros for quick actions" <SettingsPageHeader
/> title="Keyboard Macros"
<div className="flex items-center justify-between mb-4"> description="Create and manage keyboard macros for quick actions"
<SettingsItem />
title="Macros" <div className="flex items-center justify-between mb-4">
description={`${loading ? '?' : macros.length}/${MAX_TOTAL_MACROS}`} <SettingsItem
> title="Macros"
{ macros.length > 0 && ( description={`${loading ? '?' : macros.length}/${MAX_TOTAL_MACROS}`}
<div className="flex items-center gap-2"> >
<Button { macros.length > 0 && (
size="SM" <div className="flex items-center gap-2">
theme="primary" <Button
text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"} size="SM"
onClick={() => navigate("add")} theme="primary"
disabled={isMaxMacrosReached} text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"}
aria-label="Add new macro" onClick={() => navigate("add")}
/> disabled={isMaxMacrosReached}
</div> aria-label="Add new macro"
)} />
</SettingsItem> </div>
</div> )}
</SettingsItem>
</div>
</>
)}
<div className="space-y-4"> <div className="space-y-4">
{loading && macros.length === 0 ? ( {loading && macros.length === 0 ? (
@ -238,7 +242,8 @@ export default function SettingsMacrosRoute() {
/> />
) : macros.length === 0 ? ( ) : macros.length === 0 ? (
<EmptyCard <EmptyCard
headline="No macros created yet" headline="No macros yet"
description="Create keyboard macros for quick actions"
BtnElm={ BtnElm={
<Button <Button
size="SM" size="SM"