From 4623921cbb790df2355a608eefdd3df50d820cd1 Mon Sep 17 00:00:00 2001
From: Viktor Elofsson <viktor@viktorelofsson.se>
Date: Sat, 3 Dec 2022 17:16:26 +0100
Subject: [PATCH] feat(web): When adding the first action, display it in edit
 mode (#556)

When adding the first action, display it in edit mode
---
 web/src/screens/filters/action.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/screens/filters/action.tsx b/web/src/screens/filters/action.tsx
index 386d114..9337b34 100644
--- a/web/src/screens/filters/action.tsx
+++ b/web/src/screens/filters/action.tsx
@@ -84,7 +84,7 @@ export function FilterActions({ filter, values }: FilterActionsProps) {
               {values.actions.length > 0 ?
                 <ul className="divide-y divide-gray-200 dark:divide-gray-700">
                   {values.actions.map((action: Action, index: number) => (
-                    <FilterActionsItem action={action} clients={data ?? []} idx={index} remove={remove} key={index}/>
+                    <FilterActionsItem action={action} clients={data ?? []} idx={index} initialEdit={values.actions.length === 1} remove={remove} key={index}/>
                   ))}
                 </ul>
                 : <EmptyListState text="No actions yet!"/>
@@ -405,14 +405,15 @@ interface FilterActionsItemProps {
   action: Action;
   clients: DownloadClient[];
   idx: number;
+  initialEdit: boolean;
   remove: <T>(index: number) => T | undefined;
 }
 
-function FilterActionsItem({ action, clients, idx, remove }: FilterActionsItemProps) {
+function FilterActionsItem({ action, clients, idx, initialEdit, remove }: FilterActionsItemProps) {
   const cancelButtonRef = useRef(null);
 
   const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
-  const [edit, toggleEdit] = useToggle(false);
+  const [edit, toggleEdit] = useToggle(initialEdit);
 
   return (
     <li>