From 41efbe26e99d4cc9ad2822d8751f894328de0912 Mon Sep 17 00:00:00 2001
From: DevX32 <dishantacnc389@gmail.com>
Date: Sat, 12 Oct 2024 18:02:25 +0545
Subject: [PATCH] fix: menu duplication

---
 web/src/components/menu/Outfits.svelte | 96 ++++++++++++++------------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/web/src/components/menu/Outfits.svelte b/web/src/components/menu/Outfits.svelte
index 5e287ed..8165ebe 100644
--- a/web/src/components/menu/Outfits.svelte
+++ b/web/src/components/menu/Outfits.svelte
@@ -9,22 +9,59 @@
     import IconPlus from '@components/icons/IconPlus.svelte';
     import IconImport from '@components/icons/IconImport.svelte';
 
-
     let renameIndex: number = -1;
     let renameLabel: string = '';
-
     let deleteIndex: number = -1;
-
     let isAdding: boolean = false;
     let isJobAdding: boolean = false;
     let isImporting: boolean = false;
     let newOutfitLabel: string = '';
     let newOutfitJobRank: number = 0;
     let importOutfitId: number;
+
+    const handleRename = (index: number) => {
+        if (renameLabel.length > 0) {
+            $OUTFITS[index].label = renameLabel;
+            renameIndex = -1;
+            OUTFITS.edit($OUTFITS[index]);
+        }
+    };
+
+    const handleOutfitAction = (
+        action: string,
+        index: number,
+        outfit = null,
+    ) => {
+        switch (action) {
+            case 'use':
+                OUTFITS.use(outfit);
+                break;
+            case 'share':
+                OUTFITS.share(index);
+                break;
+            case 'item':
+                OUTFITS.item(outfit, renameLabel);
+                break;
+            case 'delete':
+                OUTFITS.delete(index);
+                break;
+        }
+    };
+
+    const resetNewOutfitFields = () => {
+        isAdding = false;
+        isJobAdding = false;
+        newOutfitLabel = '';
+        newOutfitJobRank = 0;
+    };
+
+    const resetImportFields = () => {
+        isImporting = false;
+        importOutfitId = null;
+    };
 </script>
 
 {#each $OUTFITS as { label, outfit, id, jobname }, i}
-
     <Wrapper label={jobname ? `${label} | JOB` : label}>
         <svelte:fragment slot="extra_primary">
             <Dropdown display="Options">
@@ -32,9 +69,7 @@
                     class="w-full flex items-center justify-center gap-[0.5vh] h-[3vh]"
                 >
                     <button
-                        on:click={() => {
-                            OUTFITS.use(outfit);
-                        }}
+                        on:click={() => handleOutfitAction('use', outfit)}
                         class="btn w-full">{$LOCALE.USE_TITLE}</button
                     >
                     <button
@@ -48,17 +83,13 @@
                     {#if !jobname}
                         <button
                             disabled={jobname != null && !$JOBDATA.isBoss}
-                            on:click={() => {
-                                OUTFITS.share(id);
-                            }}
+                            on:click={() => handleOutfitAction('share', id)}
                             class="btn w-full"
                             >{$LOCALE.SHAREOUTFIT_TITLE}</button
                         >
                     {/if}
                     <button
-                        on:click={() => {
-                            OUTFITS.item(outfit, label);
-                        }}
+                        on:click={() => handleOutfitAction('item', outfit)}
                         class="btn w-full">{$LOCALE.ITEMOUTFIT_TITLE}</button
                     >
                     <button
@@ -91,13 +122,7 @@
                             <IconCancel />
                         </button>
                         <button
-                            on:click={() => {
-                                if (renameLabel.length > 0) {
-                                    $OUTFITS[i].label = renameLabel;
-                                    renameIndex = -1;
-                                    OUTFITS.edit($OUTFITS[i]);
-                                }
-                            }}
+                            on:click={() => handleRename(i)}
                             class="btn h-full aspect-square p-[0.5vh]"
                         >
                             <IconCheck />
@@ -115,18 +140,15 @@
                             on:click={() => (deleteIndex = -1)}
                             >{$LOCALE.CANCEL_TITLE}</button
                         >
-
                         <button
                             class="btn w-full h-full"
-                            on:click={() => {
-                                OUTFITS.delete(id);
-                            }}>{$LOCALE.CONFIRMREM_SUBTITLE}</button
+                            on:click={() => handleOutfitAction('delete', id)}
+                            >{$LOCALE.CONFIRMREM_SUBTITLE}</button
                         >
                     </div>
                 {/if}
             </Dropdown>
         </svelte:fragment>
-
         <Divider />
     </Wrapper>
 {:else}
@@ -157,17 +179,11 @@
                             />
                         {/if}
                         <button
-                            on:click={() => {
-                                isAdding = false;
-                                isJobAdding = false;
-                                newOutfitLabel = '';
-                                newOutfitJobRank = 0;
-                            }}
+                            on:click={resetNewOutfitFields}
                             class="btn h-full aspect-square p-[0.5vh]"
                         >
                             <IconCancel />
                         </button>
-
                         <button
                             on:click={() => {
                                 if (newOutfitLabel.length > 0) {
@@ -180,10 +196,7 @@
                                               }
                                             : null,
                                     );
-                                    isAdding = false;
-                                    isJobAdding = false;
-                                    newOutfitLabel = '';
-                                    newOutfitJobRank = 0;
+                                    resetNewOutfitFields();
                                 }
                             }}
                             class="btn h-full aspect-square p-[0.5vh]"
@@ -208,10 +221,7 @@
                             bind:value={importOutfitId}
                         />
                         <button
-                            on:click={() => {
-                                isImporting = false;
-                                importOutfitId = null;
-                            }}
+                            on:click={resetImportFields}
                             class="btn h-full aspect-square p-[0.5vh]"
                         >
                             <IconCancel />
@@ -220,8 +230,7 @@
                             on:click={() => {
                                 if (importOutfitId > 0) {
                                     OUTFITS.import(importOutfitId);
-                                    isImporting = false;
-                                    importOutfitId = null;
+                                    resetImportFields();
                                 }
                             }}
                             class="btn h-full aspect-square p-[0.5vh]"
@@ -243,7 +252,6 @@
             <div class="h-[60%] aspect-square grid place-items-center">
                 <IconPlus />
             </div>
-
             <p>{$LOCALE.ADDOUTFIT_TITLE}</p>
         </button>
 
@@ -258,7 +266,6 @@
                 <div class="h-[60%] aspect-square grid place-items-center">
                     <IconPlus />
                 </div>
-
                 <p>{$LOCALE.ADDJOBOUTFIT}</p>
             </button>
         {/if}
@@ -273,7 +280,6 @@
             <div class="h-[60%] aspect-square grid place-items-center">
                 <IconImport />
             </div>
-
             <p>{$LOCALE.IMPORTOUTFIT_TITLE}</p>
         </button>
     {/if}